mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 14:22:33 +01:00
Code Issues Projects Releases Wiki Activity

chore: styling changes

Browse source
This commit is contained in:
AP 2019-11-26 20:55:11 +01:00
parent 6a87d57e75
commit 559a770426
11 changed files with 192 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/forwardReport/ForwardChannelReport.tsx
View file

@ -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>
);
};

39
src/components/forwardReport/ForwardReport.tsx
View file

@ -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>
);
};

32
src/components/generic/Icons.ts
View file

@ -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")}; */
`;

28
src/components/generic/Styled.ts
View file

@ -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`

1
src/icons/cpu.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 667 B

1
src/icons/home.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 332 B

1
src/icons/send.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 314 B

1
src/icons/server.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 431 B

1
src/icons/settings.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,011 B

91
src/sections/navigation/Navigation.tsx
View file

@ -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>

20
src/styles/Themes.ts
View file

@ -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"
});