chore: styling changes

src/components/forwardReport/ForwardChannelReport.tsx

@@ -6,7 +6,8 @@ import {
   ChartRow,
   ChartLink,
   CardContent,
-  ChannelRow
+  ChannelRow,
+  CardWithTitle
 } from "../generic/Styled";
 import { useQuery } from "@apollo/react-hooks";
 import { GET_FORWARD_CHANNELS_REPORT } from "../../graphql/query";
@@ -35,8 +36,8 @@ export const ForwardChannelsReport = () => {
   const parsedIncoming = JSON.parse(data.getForwardChannelsReport.incoming);
   const parsedOutgoing = JSON.parse(data.getForwardChannelsReport.outgoing);
 
-  // console.log(parsedIncoming);
-  // console.log(parsedOutgoing);
+  console.log(parsedIncoming);
+  console.log(parsedOutgoing);
 
   const getFormatString = (amount: number) => {
     if (isType !== "amount") {
@@ -45,10 +46,13 @@ export const ForwardChannelsReport = () => {
     return amount;
   };
 
-  return (
-    <Card bottom={"10"}>
-      <CardContent>
-        <SubTitle>Channel Forwards</SubTitle>
+  const renderContent = () => {
+    if (parsedIncoming.length <= 0 || parsedOutgoing.length <= 0) {
+      return <p>Your node has not forwarded any payments.</p>;
+    }
+
+    return (
+      <>
         <Sub4Title>Incoming</Sub4Title>
         {parsedIncoming.map((channel: any, index: number) => (
           <ChannelRow key={index}>
@@ -71,7 +75,16 @@ export const ForwardChannelsReport = () => {
             setIsType={setIsType}
           />
         </div>
-      </CardContent>
-    </Card>
+      </>
+    );
+  };
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Channel Forwards</SubTitle>
+      <Card bottom={"10px"} full>
+        <CardContent>{renderContent()}</CardContent>
+      </Card>
+    </CardWithTitle>
   );
 };

src/components/forwardReport/ForwardReport.tsx

@@ -7,7 +7,8 @@ import {
   SubTitle,
   CardContent,
   Sub4Title,
-  ChannelRow
+  ChannelRow,
+  CardWithTitle
 } from "../generic/Styled";
 import { useQuery } from "@apollo/react-hooks";
 import { GET_FORWARD_REPORT } from "../../graphql/query";
@@ -20,7 +21,7 @@ import {
 import numeral from "numeral";
 import { ButtonRow } from "./Buttons";
 import { SettingsContext } from "../../context/SettingsContext";
-import { chartAxisColor } from "../../styles/Themes";
+import { chartAxisColor, chartBarColor } from "../../styles/Themes";
 import { getValue } from "../../helpers/Helpers";
 
 const getValueString = (amount: number): string => {
@@ -65,7 +66,7 @@ export const ForwardReport = () => {
 
   const parsedData: {}[] = JSON.parse(data.getForwardReport);
 
-  console.log(parsedData);
+  // console.log(parsedData);
   // console.log(chartAxisColor[theme]);
 
   const getLabelString = (value: number) => {
@@ -81,16 +82,16 @@ export const ForwardReport = () => {
       .reduce((a: number, c: number) => a + c, 0)
   );
 
-  return (
-    <Card bottom={"10"}>
-      <CardContent>
-        <TitleRow>
-          <SubTitle>Fowards</SubTitle>
-        </TitleRow>
+  const renderContent = () => {
+    if (parsedData.length <= 0) {
+      return <p>Your node has not forwarded any payments.</p>;
+    }
+    return (
+      <>
         <div>
           <VictoryChart
             domainPadding={50}
-            padding={{ top: 20, left: 50, right: 50, bottom: 20 }}
+            padding={{ top: 10, left: 50, right: 50, bottom: 20 }}
             containerComponent={
               <VictoryVoronoiContainer
                 voronoiDimension="x"
@@ -122,7 +123,10 @@ export const ForwardReport = () => {
               x="period"
               y={isType}
               style={{
-                data: { fill: "#43DDE2", width: barWidth }
+                data: {
+                  fill: chartBarColor[theme],
+                  width: barWidth
+                }
               }}
             />
           </VictoryChart>
@@ -139,7 +143,16 @@ export const ForwardReport = () => {
             setIsType={setIsType}
           />
         </div>
-      </CardContent>
-    </Card>
+      </>
+    );
+  };
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Fowards</SubTitle>
+      <Card bottom={"10px"} full>
+        <CardContent>{renderContent()}</CardContent>
+      </Card>
+    </CardWithTitle>
   );
 };

src/components/generic/Icons.ts

@@ -13,6 +13,11 @@ import { ReactComponent as BitcoinIcon } from "../../icons/bitcoin.svg";
 import { ReactComponent as EyeOffIcon } from "../../icons/eye-off.svg";
 import { ReactComponent as ChevronUpIcon } from "../../icons/chevrons-up.svg";
 import { ReactComponent as ChevronDownIcon } from "../../icons/chevrons-down.svg";
+import { ReactComponent as HomeIcon } from "../../icons/home.svg";
+import { ReactComponent as CpuIcon } from "../../icons/cpu.svg";
+import { ReactComponent as SendIcon } from "../../icons/send.svg";
+import { ReactComponent as ServerIcon } from "../../icons/server.svg";
+import { ReactComponent as SettingsIcon } from "../../icons/settings.svg";
 
 export const IconCircle = styled.div`
   display: flex;
@@ -96,3 +101,30 @@ export const ChevronUp = styled(ChevronUpIcon)`
 	color: ${iconButtonColor}
 	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
 `;
+
+export const Home = styled(HomeIcon)`
+	height: 18px;
+	/* color: ${iconButtonColor} */
+	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
+`;
+
+export const Cpu = styled(CpuIcon)`
+	height: 18px;
+	/* color: ${iconButtonColor} */
+	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
+`;
+export const Send = styled(SendIcon)`
+	height: 18px;
+	/* color: ${iconButtonColor} */
+	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
+`;
+export const Server = styled(ServerIcon)`
+	height: 18px;
+	/* color: ${iconButtonColor} */
+	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
+`;
+export const Settings = styled(SettingsIcon)`
+	height: 18px;
+	/* color: ${iconButtonColor} */
+	/* color: ${({ color }: { color?: string }) => (color ? color : "black")}; */
+`;

src/components/generic/Styled.ts

@@ -5,26 +5,38 @@ import {
   subCardColor,
   smallLinkColor,
   chartLinkColor,
-  chartSelectedLinkColor
+  chartSelectedLinkColor,
+  unSelectedNavButton
 } from "../../styles/Themes";
 
+export const CardWithTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+interface CardProps {
+  bottom?: string;
+  full?: boolean;
+}
+
 export const Card = styled.div`
   padding: 10px;
-  margin-bottom: 10px;
   background: ${cardColor};
   /* background: linear-gradient(#fff, #fcfcfc); */
   box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
+  border-radius: 10px;
   border: 1px solid ${cardBorderColor};
-  margin-bottom: ${(props: { bottom?: string }) => props.bottom};
+  margin-bottom: ${(props: CardProps) => props.bottom};
   width: 100%;
+  height: ${(props: CardProps) => props.full && "100%"};
   border-left: ${(props: { color?: string }) =>
     props.color ? `2px solid ${props.color}` : ""};
 `;
 
 export const Separation = styled.div`
   height: ${({ height }: { height?: number }) => (height ? height : "2")}px;
-  background-color: #e6e6e6;
+  background-color: ${unSelectedNavButton};
   width: 100%;
   margin: 20px 0;
 `;
@@ -63,7 +75,7 @@ export const ChartLink = styled.button`
   font-weight: bold;
 
   &:hover {
-    color: #08979c;
+    color: ${chartSelectedLinkColor};
   }
 `;
 
@@ -79,8 +91,8 @@ export const TitleRow = styled.div`
   align-items: center;
 `;
 
-export const SubTitle = styled.h3`
-  margin: 0;
+export const SubTitle = styled.h4`
+  margin: 5px 0;
 `;
 
 export const Sub4Title = styled.h4`

src/icons/cpu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>

src/icons/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

src/icons/send.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>

src/icons/server.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-server"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>

src/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

src/sections/navigation/Navigation.tsx

@@ -1,9 +1,17 @@
 import React from "react";
 import styled from "styled-components";
 import { Card } from "../../components/generic/Styled";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { NodeInfo } from "../../components/nodeInfo/NodeInfo";
 import { SideSettings } from "../../components/sideSettings/SideSettings";
+import { textColor, unSelectedNavButton } from "../../styles/Themes";
+import {
+  Home,
+  Cpu,
+  Server,
+  Send,
+  Settings
+} from "../../components/generic/Icons";
 
 const NavigationStyle = styled.div`
   /* display: flex; */
@@ -27,30 +35,75 @@ const LinkView = styled.div`
   padding: 10px 0;
 `;
 
+const ButtonSection = styled.div`
+  width: 100%;
+`;
+
+const NavSeparation = styled.div`
+  width: 10px;
+`;
+
+const NavButton = styled(Link)`
+  padding: 10px;
+  /* background-color: white; */
+  background: ${({ selected }: { selected: boolean }) =>
+    selected
+      ? `linear-gradient(
+		90deg,
+		rgba(255, 255, 255, 0.1) 0%,
+		rgba(255, 255, 255, 0) 90%
+	)`
+      : ""};
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-decoration: none;
+  margin: 15px 0;
+  color: ${({ selected }: { selected: boolean }) =>
+    selected ? textColor : unSelectedNavButton};
+`;
+
+const HOME_LINK = "/";
+const CHANNEL_LINK = "/channels";
+const INVOICE_LINK = "/invoices";
+const PAYMENT_LINK = "/payments";
+const SETTINGS_LINK = "/settings";
+
 export const Navigation = () => {
+  const { pathname } = useLocation();
+
   return (
     <NavigationStyle>
       <StickyCard>
         <LinkView>
           <NodeInfo />
-          <p>
-            <Link to="/">Home</Link>
-          </p>
-          <p>
-            <Link to="/channels">Channels</Link>
-          </p>
-          <p>
-            <Link to="/invoices">Invoices</Link>
-          </p>
-          <p>
-            <Link to="/payments">Payments</Link>
-          </p>
-          <p>
-            <Link to="/settings">Settings</Link>
-          </p>
-          <p>
-            <Link to="/unknown">Unknown</Link>
-          </p>
+          <ButtonSection>
+            <NavButton selected={pathname === HOME_LINK} to={HOME_LINK}>
+              <Home />
+              <NavSeparation />
+              Home
+            </NavButton>
+            <NavButton selected={pathname === CHANNEL_LINK} to={CHANNEL_LINK}>
+              <Cpu />
+              <NavSeparation />
+              Channels
+            </NavButton>
+            <NavButton selected={pathname === INVOICE_LINK} to={INVOICE_LINK}>
+              <Server />
+              <NavSeparation />
+              Invoices
+            </NavButton>
+            <NavButton selected={pathname === PAYMENT_LINK} to={PAYMENT_LINK}>
+              <Send />
+              <NavSeparation />
+              Payments
+            </NavButton>
+            <NavButton selected={pathname === SETTINGS_LINK} to={SETTINGS_LINK}>
+              <Settings />
+              <NavSeparation />
+              Settings
+            </NavButton>
+          </ButtonSection>
           <SideSettings />
         </LinkView>
       </StickyCard>

src/styles/Themes.ts

@@ -2,7 +2,7 @@ import theme from "styled-theming";
 
 export const backgroundColor = theme("mode", {
   light: "#fafafa",
-  dark: "#1b1c22"
+  dark: "#151727"
 });
 
 export const textColor = theme("mode", {
@@ -12,17 +12,17 @@ export const textColor = theme("mode", {
 
 export const cardColor = theme("mode", {
   light: "white",
-  dark: "#25262c"
+  dark: "#1b1e32"
 });
 
 export const subCardColor = theme("mode", {
   light: "white",
-  dark: "#1b1c22"
+  dark: "#151727"
 });
 
 export const cardBorderColor = theme("mode", {
   light: "#f5f5f5",
-  dark: "transparent"
+  dark: "#242839"
 });
 
 export const progressBackground = theme("mode", {
@@ -67,10 +67,20 @@ export const chartLinkColor = theme("mode", {
 
 export const chartSelectedLinkColor = theme("mode", {
   light: "#43DDE2",
-  dark: "#43DDE2"
+  dark: "#6938f1"
 });
 
 export const chartAxisColor: { [key: string]: string } = {
   light: "#1b1c22",
   dark: "white"
 };
+
+export const chartBarColor: { [key: string]: string } = {
+  light: "#43DDE2",
+  dark: "#6938f1"
+};
+
+export const unSelectedNavButton = theme("mode", {
+  light: "grey",
+  dark: "grey"
+});