From 3b8f4aad6100f436d99f8ba774d5a0e2fa626af0 Mon Sep 17 00:00:00 2001
From: AP <potdevin.anthony@gmail.com>
Date: Thu, 16 Apr 2020 22:36:09 +0200
Subject: [PATCH] chore: styling small bugs and refactors

---
 pages/_app.tsx                                | 11 ++--
 src/api/schemas/types/QueryType.ts            |  4 +-
 .../images => src/assets}/ThunderHub.svg      |  0
 src/components/bitcoinInfo/BitcoinFees.ts     |  1 +
 src/components/bitcoinInfo/BitcoinPrice.ts    |  1 +
 src/components/generic/Styled.tsx             |  4 +-
 src/components/link/Link.tsx                  |  4 +-
 src/components/price/Price.tsx                | 14 ++---
 src/context/AccountContext.tsx                |  3 -
 src/generated/graphql.tsx                     |  4 +-
 src/layouts/navigation/nodeInfo/NodeInfo.tsx  |  1 +
 ...HomePage.styled.tsx => HomePage.styled.ts} | 13 ++--
 src/views/homepage/Sections/CallToAction.tsx  |  2 +-
 src/views/login/SessionLogin.tsx              | 62 +++++++++----------
 src/views/settings/Danger.tsx                 |  2 +
 15 files changed, 59 insertions(+), 67 deletions(-)
 rename {public/static/images => src/assets}/ThunderHub.svg (100%)
 rename src/views/homepage/{HomePage.styled.tsx => HomePage.styled.ts} (86%)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index e0639180..22de57b5 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -36,9 +36,12 @@ const Wrapper: React.FC = ({ children }) => {
   const isInArray = withoutGrid.includes(pathname);
 
   const renderContent = () => {
-    if (loading) return <LoadingView />;
-    if (error) return <ErrorView />;
-    return <>{children}</>;
+    if (loading || error) {
+      return (
+        <GridWrapper>{loading ? <LoadingView /> : <ErrorView />}</GridWrapper>
+      );
+    }
+    return <GridWrapper without={isInArray}>{children}</GridWrapper>;
   };
 
   const renderGetters = () => (
@@ -54,7 +57,7 @@ const Wrapper: React.FC = ({ children }) => {
         <GlobalStyles />
         {loggedIn && renderGetters()}
         <Header />
-        <GridWrapper without={isInArray}>{renderContent()}</GridWrapper>
+        {renderContent()}
         <Footer />
       </ModalProvider>
     </ThemeProvider>
diff --git a/src/api/schemas/types/QueryType.ts b/src/api/schemas/types/QueryType.ts
index ffda278f..d7a53947 100644
--- a/src/api/schemas/types/QueryType.ts
+++ b/src/api/schemas/types/QueryType.ts
@@ -177,14 +177,14 @@ export const NetworkInfoType = new GraphQLObjectType({
   name: 'networkInfoType',
   fields: () => {
     return {
-      averageChannelSize: { type: GraphQLInt },
+      averageChannelSize: { type: GraphQLString },
       channelCount: { type: GraphQLInt },
       maxChannelSize: { type: GraphQLInt },
       medianChannelSize: { type: GraphQLInt },
       minChannelSize: { type: GraphQLInt },
       nodeCount: { type: GraphQLInt },
       notRecentlyUpdatedPolicyCount: { type: GraphQLInt },
-      totalCapacity: { type: GraphQLInt },
+      totalCapacity: { type: GraphQLString },
     };
   },
 });
diff --git a/public/static/images/ThunderHub.svg b/src/assets/ThunderHub.svg
similarity index 100%
rename from public/static/images/ThunderHub.svg
rename to src/assets/ThunderHub.svg
diff --git a/src/components/bitcoinInfo/BitcoinFees.ts b/src/components/bitcoinInfo/BitcoinFees.ts
index a62c3e87..8ed0fc9c 100644
--- a/src/components/bitcoinInfo/BitcoinFees.ts
+++ b/src/components/bitcoinInfo/BitcoinFees.ts
@@ -5,6 +5,7 @@ import { useGetBitcoinFeesQuery } from '../../generated/graphql';
 export const BitcoinFees = () => {
   const setInfo = useBitcoinDispatch();
   const { loading, data, stopPolling } = useGetBitcoinFeesQuery({
+    fetchPolicy: 'network-only',
     onError: () => {
       setInfo({ type: 'error' });
       stopPolling();
diff --git a/src/components/bitcoinInfo/BitcoinPrice.ts b/src/components/bitcoinInfo/BitcoinPrice.ts
index 26f1bdc7..dd32f648 100644
--- a/src/components/bitcoinInfo/BitcoinPrice.ts
+++ b/src/components/bitcoinInfo/BitcoinPrice.ts
@@ -5,6 +5,7 @@ import { useGetBitcoinPriceQuery } from '../../generated/graphql';
 export const BitcoinPrice = () => {
   const setPrices = usePriceDispatch();
   const { loading, data, stopPolling } = useGetBitcoinPriceQuery({
+    fetchPolicy: 'network-only',
     onError: () => setPrices({ type: 'error' }),
     pollInterval: 60000,
   });
diff --git a/src/components/generic/Styled.tsx b/src/components/generic/Styled.tsx
index f48a1a3c..39849d75 100644
--- a/src/components/generic/Styled.tsx
+++ b/src/components/generic/Styled.tsx
@@ -44,11 +44,11 @@ export const Card = styled.div`
     ${({ cardPadding, mobileCardPadding }) =>
       mobileCardPadding
         ? css`
-            margin: ${mobileCardPadding};
+            padding: ${mobileCardPadding};
           `
         : cardPadding
         ? css`
-            margin: ${cardPadding};
+            padding: ${cardPadding};
           `
         : ''};
   }
diff --git a/src/components/link/Link.tsx b/src/components/link/Link.tsx
index 3a60d042..b8425705 100644
--- a/src/components/link/Link.tsx
+++ b/src/components/link/Link.tsx
@@ -78,8 +78,8 @@ export const Link = ({
   }
 
   const linkProps = {
-    href: `${basePath}${to}`,
-    ...(basePath !== '' ? { prefetch: false } : {}),
+    href: to,
+    ...(basePath !== '' ? { as: `${basePath}${to}` } : {}),
   };
 
   return (
diff --git a/src/components/price/Price.tsx b/src/components/price/Price.tsx
index f883d5d7..5a9b5fc2 100644
--- a/src/components/price/Price.tsx
+++ b/src/components/price/Price.tsx
@@ -13,7 +13,7 @@ export const Price = ({
   amount,
   breakNumber = false,
 }: {
-  amount: number;
+  amount: number | string;
   breakNumber?: boolean;
 }) => {
   const { currency } = useSettings();
@@ -38,10 +38,7 @@ export const Price = ({
     };
   }
 
-  const getFormat = (amount: number) =>
-    getValue({ amount, ...priceProps, breakNumber });
-
-  return <>{getFormat(amount)}</>;
+  return <>{getValue({ amount, ...priceProps, breakNumber })}</>;
 };
 
 export const getPrice = (
@@ -55,7 +52,7 @@ export const getPrice = (
   amount,
   breakNumber = false,
 }: {
-  amount: number;
+  amount: number | string;
   breakNumber?: boolean;
 }) => {
   const { prices, loading, error } = priceContext;
@@ -79,8 +76,5 @@ export const getPrice = (
     };
   }
 
-  const getFormat = (amount: number) =>
-    getValue({ amount, ...priceProps, breakNumber });
-
-  return getFormat(amount);
+  return getValue({ amount, ...priceProps, breakNumber });
 };
diff --git a/src/context/AccountContext.tsx b/src/context/AccountContext.tsx
index 8d5638f4..97580091 100644
--- a/src/context/AccountContext.tsx
+++ b/src/context/AccountContext.tsx
@@ -56,9 +56,6 @@ export const AccountContext = createContext<AccountProps>({
 });
 
 const AccountProvider = ({ children }: any) => {
-  // const sessionAdmin = sessionStorage.getItem('session') || '';
-  // const { name, host, admin, viewOnly, cert, id, accounts, loggedIn } = getAuth();
-
   useEffect(() => {
     refreshAccount();
   }, []);
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
index 259fcbe1..5e5ed908 100644
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@@ -309,14 +309,14 @@ export type ChannelReportType = {
 
 export type NetworkInfoType = {
   __typename?: 'networkInfoType';
-  averageChannelSize?: Maybe<Scalars['Int']>;
+  averageChannelSize?: Maybe<Scalars['String']>;
   channelCount?: Maybe<Scalars['Int']>;
   maxChannelSize?: Maybe<Scalars['Int']>;
   medianChannelSize?: Maybe<Scalars['Int']>;
   minChannelSize?: Maybe<Scalars['Int']>;
   nodeCount?: Maybe<Scalars['Int']>;
   notRecentlyUpdatedPolicyCount?: Maybe<Scalars['Int']>;
-  totalCapacity?: Maybe<Scalars['Int']>;
+  totalCapacity?: Maybe<Scalars['String']>;
 };
 
 export type NodeInfoType = {
diff --git a/src/layouts/navigation/nodeInfo/NodeInfo.tsx b/src/layouts/navigation/nodeInfo/NodeInfo.tsx
index c191b605..48404058 100644
--- a/src/layouts/navigation/nodeInfo/NodeInfo.tsx
+++ b/src/layouts/navigation/nodeInfo/NodeInfo.tsx
@@ -89,6 +89,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
   };
 
   const { loading, data } = useGetNodeInfoQuery({
+    skip: host === '' || (viewOnly === '' && sessionAdmin === ''),
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });
diff --git a/src/views/homepage/HomePage.styled.tsx b/src/views/homepage/HomePage.styled.ts
similarity index 86%
rename from src/views/homepage/HomePage.styled.tsx
rename to src/views/homepage/HomePage.styled.ts
index aae8fd57..e93b9c57 100644
--- a/src/views/homepage/HomePage.styled.tsx
+++ b/src/views/homepage/HomePage.styled.ts
@@ -1,12 +1,11 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { fontColors, mediaWidths } from '../../styles/Themes';
-import { appendBasePath } from '../../utils/basePath';
+import ThunderHub from '../../assets/ThunderHub.svg';
 
 export const Headline = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   padding: 48px 0 140px;
 
   @media (${mediaWidths.mobile}) {
@@ -36,12 +35,8 @@ const flicker = keyframes`
     100%  { opacity: 0;   }
 `;
 
-const HeadlineImage = () => (
-  <img src={appendBasePath('/static/images/ThunderHub.svg')} />
-);
-
-export const StyledImage = styled(HeadlineImage)`
-  width: 500px;
+export const StyledImage = styled(ThunderHub)`
+  width: 360px;
 
   & .glowEffect {
     animation: ${flicker} 3s infinite step-end;
diff --git a/src/views/homepage/Sections/CallToAction.tsx b/src/views/homepage/Sections/CallToAction.tsx
index a0e13713..d689f4e3 100644
--- a/src/views/homepage/Sections/CallToAction.tsx
+++ b/src/views/homepage/Sections/CallToAction.tsx
@@ -28,7 +28,7 @@ export const CallToAction = () => {
           <StyledH2>Ready to take control of your Lightning Node?</StyledH2>
         </Center>
         <Center>
-          <Link to={'/login'}>
+          <Link to={'/login'} noStyling={true}>
             <CallToActionButton>
               <Padding>
                 <Zap fillcolor={'white'} color={'white'} />
diff --git a/src/views/login/SessionLogin.tsx b/src/views/login/SessionLogin.tsx
index 47e64e9a..a4d90720 100644
--- a/src/views/login/SessionLogin.tsx
+++ b/src/views/login/SessionLogin.tsx
@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import { useAccount } from '../../context/AccountContext';
-import {
-  SingleLine,
-  Sub4Title,
-  CardWithTitle,
-  Card,
-  SubTitle,
-} from '../../components/generic/Styled';
+import { SingleLine, Sub4Title, Card } from '../../components/generic/Styled';
 import CryptoJS from 'crypto-js';
 import { toast } from 'react-toastify';
 import { saveSessionAuth } from '../../utils/auth';
 import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
 import { Input } from '../../components/input/Input';
 import { Section } from '../../components/section/Section';
+import { Title } from '../../components/typography/Styled';
+import styled from 'styled-components';
+import { textColor } from '../../styles/Themes';
+
+const StyledTitle = styled(Title)`
+  font-size: 28px;
+  color: ${textColor};
+`;
 
 export const SessionLogin = () => {
   const { name, admin, refreshAccount } = useAccount();
@@ -31,31 +33,27 @@ export const SessionLogin = () => {
   };
 
   return (
-    <Section>
-      <CardWithTitle>
-        <SubTitle>{`Please Login (${name}):`}</SubTitle>
-        <Card>
-          <SingleLine>
-            <Sub4Title>Password:</Sub4Title>
-            <Input
-              type={'password'}
-              withMargin={'0 0 0 16px'}
-              onChange={e => setPass(e.target.value)}
-            />
-          </SingleLine>
-          {pass !== '' && (
-            <ColorButton
-              disabled={pass === ''}
-              onClick={handleClick}
-              withMargin={'16px 0 0'}
-              fullWidth={true}
-              arrow={true}
-            >
-              Connect
-            </ColorButton>
-          )}
-        </Card>
-      </CardWithTitle>
+    <Section padding={'36px 0'}>
+      <StyledTitle>{`Please Login (${name}):`}</StyledTitle>
+      <Card cardPadding={'32px'} mobileCardPadding={'16px'}>
+        <SingleLine>
+          <Sub4Title>Password:</Sub4Title>
+          <Input
+            type={'password'}
+            withMargin={'0 0 0 16px'}
+            onChange={e => setPass(e.target.value)}
+          />
+        </SingleLine>
+        <ColorButton
+          disabled={pass === ''}
+          onClick={handleClick}
+          withMargin={'16px 0 0'}
+          fullWidth={true}
+          arrow={true}
+        >
+          Connect
+        </ColorButton>
+      </Card>
     </Section>
   );
 };
diff --git a/src/views/settings/Danger.tsx b/src/views/settings/Danger.tsx
index 3e1411cc..3e6e5905 100644
--- a/src/views/settings/Danger.tsx
+++ b/src/views/settings/Danger.tsx
@@ -107,6 +107,8 @@ export const DangerView = () => {
           color={'red'}
           onClick={() => {
             deleteAccount(accounts[0].id);
+            refreshAccount();
+            push(appendBasePath('/'));
           }}
         >
           {accounts[0].name}