diff --git a/src/App.jsx b/src/App.jsx index 0714262..4ac03cc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,11 +11,19 @@ import EvmToken from "@mybucks/pages/network/evm/Token"; import TronHome from "@mybucks/pages/network/tron/Home"; import TronToken from "@mybucks/pages/network/tron/Token"; import SignIn from "@mybucks/pages/Signin"; +import media from "@mybucks/styles/media"; import "react-toastify/dist/ReactToastify.css"; const AppWrapper = styled.div` position: relative; + display: flex; + flex-direction: column; + min-height: 100vh; +`; + +const Main = styled.main` + flex: 1; `; const Warning = styled.div` @@ -25,17 +33,42 @@ const Warning = styled.div` color: ${({ theme }) => theme.colors.gray25}; font-size: ${({ theme }) => theme.sizes.base}; font-weight: ${({ theme }) => theme.weights.regular}; -`; -const WarningLink = styled.a` - text-decoration: underline; - font-weight: ${({ theme }) => theme.weights.highlight}; + a { + text-decoration: underline; + font-weight: ${({ theme }) => theme.weights.highlight}; + } `; -function Content() { - const { account, selectedTokenAddress, inMenu, network } = - useContext(StoreContext); +const Footer = styled.footer` + display: flex; + justify-content: space-between; + align-items: center; + font-size: ${({ theme }) => theme.sizes.sm}; + padding: ${({ theme }) => theme.sizes.x3s} ${({ theme }) => theme.sizes.xl}; + border-top: 1px solid ${({ theme }) => theme.colors.gray100}; + color: ${({ theme }) => theme.colors.gray200}; + + nav ul { + list-style-type: none; + + li { + display: inline; + margin: 0 ${({ theme }) => theme.sizes.x2s}; + } + } + + a:hover { + color: ${({ theme }) => theme.colors.gray400}; + } + ${media.sm` + flex-direction: column; + gap: ${({ theme }) => theme.sizes.xs}; + `} +`; + +function Content({ account, selectedTokenAddress, inMenu, network }) { if (!account) { return ; } @@ -56,8 +89,16 @@ function Content() { } function App() { - const { account, connectivity, hash, loading, reset } = - useContext(StoreContext); + const { + account, + selectedTokenAddress, + inMenu, + network, + connectivity, + hash, + loading, + reset, + } = useContext(StoreContext); useIdleTimer({ onIdle: () => { @@ -77,17 +118,108 @@ function App() { ) : !loading && !!account && !account.activated ? ( Please activate your account!{" "} - Learn More - + ) : ( "" )} - + +
+ +
+ + +