diff --git a/app/src/assets/icons/bitcoin.svg b/app/src/assets/icons/bitcoin.svg new file mode 100644 index 00000000..3d6477fe --- /dev/null +++ b/app/src/assets/icons/bitcoin.svg @@ -0,0 +1,13 @@ + + + + F7E8F894-50E7-42D2-8583-B6C2B18F674E + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/app/src/assets/icons/bolt.svg b/app/src/assets/icons/bolt.svg new file mode 100644 index 00000000..506b5f61 --- /dev/null +++ b/app/src/assets/icons/bolt.svg @@ -0,0 +1,22 @@ + + + + BF2E6425-3766-4AB7-B1A7-221A153A9A9C + Created with sketchtool. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/components/NodeStatus.tsx b/app/src/components/NodeStatus.tsx new file mode 100644 index 00000000..c6893064 --- /dev/null +++ b/app/src/components/NodeStatus.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'store'; +import { SmallText, Title, XLargeText } from 'components/common/text'; +import { Bitcoin, Bolt } from './common/icons'; +import { styled } from './theme'; + +const Styled = { + Wrapper: styled.div` + line-height: 32px; + `, + Divider: styled.div` + height: 2px; + background-color: ${props => props.theme.colors.gray}; + margin: 20px 0; + opacity: 0.5; + `, + StatusTitle: styled(Title)` + margin-bottom: 10px; + `, + BoltIcon: styled(Bolt)` + width: 10px; + height: 10px; + margin-right: 5px; + `, + BitcoinIcon: styled(Bitcoin)` + width: 10px; + height: 10px; + margin-right: 5px; + `, +}; + +const NodeStatus: React.FC = () => { + const { Wrapper, StatusTitle, BoltIcon, BitcoinIcon, Divider } = Styled; + + const store = useStore(); + const { channelBalance, walletBalance } = store.balances || { + channelBalance: 0, + walletBalance: 0, + }; + + return ( + + Node Status + + + {channelBalance.toLocaleString()} SAT + + + + {walletBalance.toLocaleString()} + + + + ); +}; + +export default observer(NodeStatus); diff --git a/app/src/components/common/icons.tsx b/app/src/components/common/icons.tsx new file mode 100644 index 00000000..3a0dd7b8 --- /dev/null +++ b/app/src/components/common/icons.tsx @@ -0,0 +1,2 @@ +export { ReactComponent as Bolt } from 'assets/icons/bolt.svg'; +export { ReactComponent as Bitcoin } from 'assets/icons/bitcoin.svg'; diff --git a/app/src/components/common/text.tsx b/app/src/components/common/text.tsx new file mode 100644 index 00000000..351eb610 --- /dev/null +++ b/app/src/components/common/text.tsx @@ -0,0 +1,32 @@ +import { styled } from 'components/theme'; + +interface BlockProps { + block?: boolean; +} + +export const Title = styled.div` + font-size: ${props => props.theme.sizes.s}; + font-family: ${props => props.theme.fonts.semiBold}; + text-transform: uppercase; + letter-spacing: 0; + line-height: 19px; + color: ${props => props.theme.colors.gray}; +`; + +export const SmallText = styled.span` + ${props => props.block && 'display: block;'} + font-size: ${props => props.theme.sizes.s}; + letter-spacing: 0.22px; +`; + +export const LargeText = styled.span` + ${props => props.block && 'display: block;'} + font-size: ${props => props.theme.sizes.l}; + letter-spacing: 0.43px; +`; + +export const XLargeText = styled.span` + ${props => props.block && 'display: block;'} + font-size: ${props => props.theme.sizes.xl}; + letter-spacing: 0.43px; +`; diff --git a/app/src/components/layout/NavMenu.tsx b/app/src/components/layout/NavMenu.tsx new file mode 100644 index 00000000..562f730e --- /dev/null +++ b/app/src/components/layout/NavMenu.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Title } from 'components/common/text'; +import { styled } from 'components/theme'; + +const Styled = { + NavTitle: styled(Title)` + padding: 8px 14px; + `, + Nav: styled.ul` + padding-left: 0; + margin-bottom: 0; + list-style: none; + `, + NavItem: styled.li` + font-size: ${props => props.theme.sizes.s}; + + a { + display: block; + height: 50px; + line-height: 50px; + padding: 0 12px; + border-left: 3px solid transparent; + color: ${props => props.theme.colors.whitish}; + + &:hover { + text-decoration: none; + border-left: 3px solid ${props => props.theme.colors.pink}; + } + } + + &.active a { + border-left: 3px solid ${props => props.theme.colors.whitish}; + background-color: ${props => props.theme.colors.blue}; + margin-right: -17px; + + &:hover { + border-left: 3px solid ${props => props.theme.colors.pink}; + } + } + `, +}; + +const NavMenu: React.FC = () => { + const { NavTitle, Nav, NavItem } = Styled; + + return ( + <> + Menu + + + ); +}; + +export default NavMenu; diff --git a/app/src/components/layout/Sidebar.tsx b/app/src/components/layout/Sidebar.tsx index f1897707..29b33ae1 100644 --- a/app/src/components/layout/Sidebar.tsx +++ b/app/src/components/layout/Sidebar.tsx @@ -1,62 +1,22 @@ import React from 'react'; +import NodeStatus from 'components/NodeStatus'; import { styled } from 'components/theme'; +import NavMenu from './NavMenu'; -const Title = styled.div` - font-size: ${props => props.theme.sizes.s}; - font-family: ${props => props.theme.fonts.semiBold}; - letter-spacing: 0; - line-height: 19px; - padding: 8px 14px; - color: ${props => props.theme.colors.gray}; -`; - -const Nav = styled.ul` - padding-left: 0; - margin-bottom: 0; - list-style: none; -`; - -const NavItem = styled.li` - font-size: ${props => props.theme.sizes.s}; - - a { - display: block; - height: 50px; - line-height: 50px; - padding: 0 12px; - border-left: 3px solid transparent; - color: ${props => props.theme.colors.whitish}; - - &:hover { - text-decoration: none; - border-left: 3px solid ${props => props.theme.colors.pink}; - } - } - - &.active a { - border-left: 3px solid ${props => props.theme.colors.whitish}; - background-color: ${props => props.theme.colors.blue}; - margin-right: -17px; - - &:hover { - border-left: 3px solid ${props => props.theme.colors.pink}; - } - } -`; +const Styled = { + Wrapper: styled.div` + padding-top: 75px; + `, +}; const Sidebar: React.FC = () => { + const { Wrapper } = Styled; + return ( - <> - MENU - - + + + + ); }; export default Sidebar;