diff --git a/.gitignore b/.gitignore index 1ca025f..b488296 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist yarn-error.log +.DS_Store diff --git a/src/App.tsx b/src/App.tsx index c82e589..3ae7863 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,8 @@ import { Redirect, Route, Switch } from 'react-router' import { BrowserRouter } from 'react-router-dom' import styled from 'styled-components' -import { TopBar } from './components/TopBar' +import { GlobalStyle } from './providers/GlobalStyle' +import { TopBar } from './components/top/TopBar' import { Votes } from './pages/Votes' import { Directory } from './pages/Directory' import { Info } from './pages/Info' @@ -12,6 +13,7 @@ export function App() { return ( + diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..988d2d6 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,44 @@ +import styled from 'styled-components' +import { Colors } from '../constants/styles' + +export const Button = styled.button` + color: ${Colors.White}; + border-radius: 8px; +` + +export const ButtonPrimary = styled(Button)` + background: ${Colors.Violet}; + font-weight: bold; + font-size: 15px; + line-height: 24px; + + &:not(:disabled):hover { + background: ${Colors.VioletDark}; + } + + &:not(:disabled):active, + &:not(:disabled):focus { + background: ${Colors.VioletLight}; + } + + &:disabled { + background: ${Colors.GrayDisabledDark}; + } +` +export const ButtonSecondary = styled(Button)` + background: ${Colors.VioletSecondary}; + line-height: 24px; + + &:not(:disabled):hover { + background: ${Colors.VioletSecondaryDark}; + } + + &:not(:disabled):active, + &:not(:disabled):focus { + background: ${Colors.VioletSecondaryLight}; + } + + &:disabled { + background: ${Colors.GrayDisabledLight}; + } +` diff --git a/src/components/PageInfo.tsx b/src/components/PageInfo.tsx new file mode 100644 index 0000000..1047a43 --- /dev/null +++ b/src/components/PageInfo.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import styled from 'styled-components' +import { useEthers } from '@usedapp/core' +import { ButtonPrimary } from '../components/Button' + +interface PageInfoProps { + heading: string + text: string +} + +export const PageInfo = ({ heading, text }: PageInfoProps) => ( + + {heading} + {text} + +) + +export function InfoBtn() { + const { account, activateBrowserWallet } = useEthers() + + return account ? ( + activateBrowserWallet()}>Connect to Vote + ) : ( + activateBrowserWallet()}>Propose community + ) +} + +export const InfoWrap = styled.div` + display: flex; + flex-direction: column; + align-items: center; + max-width: 693px; + padding: 48px 0; + margin: 0 auto; +` + +const InfoBlock = styled.div` + display: flex; + flex-direction: column; + align-items: center; +` + +const InfoHeading = styled.h1` + font-weight: bold; + font-size: 28px; + line-height: 38px; + letter-spacing: -0.4px; + margin-bottom: 8px; +` + +const InfoText = styled.p` + font-size: 22px; + text-align: center; + line-height: 32px; + margin-bottom: 24px; +` +const InfoButton = styled(ButtonPrimary)` + padding: 10px 0; + width: 343px; +` diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx deleted file mode 100644 index 77e7c8e..0000000 --- a/src/components/TopBar.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { NavLink } from 'react-router-dom' -import { useEthers, shortenAddress } from '@usedapp/core' - -export function TopBar() { - const { account, activateBrowserWallet } = useEthers() - - return ( -
- - Votes - - - Directory - - - Info - - {account ? ( -
{shortenAddress(account)}
- ) : ( - - )} -
- ) -} - -const Header = styled.header` - backgorund-color: grey; -` - -const StyledNavLink = styled(NavLink)`` diff --git a/src/components/top/Logo.tsx b/src/components/top/Logo.tsx new file mode 100644 index 0000000..f37fdc7 --- /dev/null +++ b/src/components/top/Logo.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import styled from 'styled-components' + +export function Logo() { + return ( + + 🗳️ + Community Directory Curation DApp + + ) +} + +const LogoBox = styled.div` + display: flex; + align-items: center; + width: 236px; +` +const LogoIcon = styled.span` + font-size: 48px; + line-height: 38px; +` + +const LogoText = styled.p` + font-weight: 600; + font-size: 17px; + line-height: 18px; + margin-left: 8px; +` diff --git a/src/components/top/TopBar.tsx b/src/components/top/TopBar.tsx new file mode 100644 index 0000000..b10379c --- /dev/null +++ b/src/components/top/TopBar.tsx @@ -0,0 +1,124 @@ +import React from 'react' +import styled from 'styled-components' +import { NavLink } from 'react-router-dom' +import { useEthers, shortenAddress } from '@usedapp/core' +import { Logo } from './Logo' +import { ButtonPrimary } from '../../components/Button' +import { Colors } from '../../constants/styles' +import { Animation } from '../../constants/animation' + +export function TopBar() { + const { account, activateBrowserWallet } = useEthers() + + return ( +
+ + + + + {account ? ( + {shortenAddress(account)} + ) : ( + activateBrowserWallet()}>Connect + )} + +
+ ) +} + +const Header = styled.header` + display: flex; + align-items: center; + justify-content: space-between; + height: 96px; + padding: 0 40px; + background-color: ${Colors.GrayLight}; + border-bottom: 1px solid rgba(189, 93, 226, 0.15); +` + +const MenuContent = styled.div` + display: flex; + align-items: center; + align-self: stretch; + justify-content: space-between; + flex: 1; + max-width: 780px; + background-color: ${Colors.GrayLight}; +` + +const NavLinks = styled.ul` + display: flex; + align-self: stre + height:100%; + color: ${Colors.Black}; +` + +const NavItem = styled.li` + width: 124px; + text-align: center; + + & + & { + margin-left: 64px; + } +` + +const StyledNavLink = styled(NavLink)` + position: relative; + color: ${Colors.Black}; + font-size: 17px; + line-height: 18px; + padding: 39px 0 37px; + + &:hover { + color: ${Colors.Violet}; + } + + &:active { + color: ${Colors.Black}; + } + + &.active-page::after { + content: ''; + width: 124px; + height: 2px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + background-color: ${Colors.Violet}; + bacground-position: center; + border-radius: 1px; + animation: ${Animation} 0.25s linear; + } +` +const ButtonConnect = styled(ButtonPrimary)` + padding: 10px 27px; +` +const Account = styled.button` + font-weight: 500; + font-size: 13px; + line-height: 22px; + color: ${Colors.Black}; + padding: 11px 12px 11px 17px; + background: ${Colors.White}; + border: 1px solid ${Colors.GrayBorder}; + border-radius: 21px; +` diff --git a/src/constants/animation.ts b/src/constants/animation.ts new file mode 100644 index 0000000..874fda3 --- /dev/null +++ b/src/constants/animation.ts @@ -0,0 +1,8 @@ +import { keyframes } from 'styled-components' + +export function Animation() { + return keyframes` + 0% { transform: translateX(-50%) scaleX(0); } + 100% { transform: translateX(-50%) scaleX(100%); } +` +} diff --git a/src/constants/styles.ts b/src/constants/styles.ts new file mode 100644 index 0000000..68face7 --- /dev/null +++ b/src/constants/styles.ts @@ -0,0 +1,22 @@ +export const Colors = { + White: '#FFFFFF', + Black: '#000000', + Violet: '#BD5DE2', + VioletDark: '#8C21BA', + VioletLight: '#D37EF4', + VioletSecondary: '#FAEDFF', + VioletSecondaryDark: '#F6DBFF', + VioletSecondaryLight: '#FDF7FF', + BlueLink: '#4360DF', + BlueBar: '#D6E0FF', + Orange: '#FFE6CF', + GrayOverlay: '#E5E5E5', + GrayDisabledDark: '#888888', + GrayDisabledLight: '#F3F3F3', + GreyText: '#939BA1', + GrayLight: '#FBFCFE', + GrayBorder: '#EEF2F5', + ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)', +} + +export const Font = 'Inter, sans-serif' diff --git a/src/index.html b/src/index.html index 7b93196..c38e0eb 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,14 @@ - - - - Status - - - - -
- - + + + + Status + + + + +
+ + diff --git a/src/pages/Directory.tsx b/src/pages/Directory.tsx index 54f64bd..08ebf63 100644 --- a/src/pages/Directory.tsx +++ b/src/pages/Directory.tsx @@ -1,5 +1,15 @@ import React from 'react' +import { InfoBtn, InfoWrap, PageInfo } from '../components/PageInfo' export function Directory() { - return
Directory
+ return ( + + + + + ) } diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx index 1f6508f..cfa24b5 100644 --- a/src/pages/Info.tsx +++ b/src/pages/Info.tsx @@ -1,5 +1,13 @@ import React from 'react' +import { InfoWrap, PageInfo } from '../components/PageInfo' export function Info() { - return
Info
+ return ( + + + + ) } diff --git a/src/pages/Votes.tsx b/src/pages/Votes.tsx index 62fb0cb..2729a19 100644 --- a/src/pages/Votes.tsx +++ b/src/pages/Votes.tsx @@ -1,5 +1,14 @@ import React from 'react' +import { InfoWrap, InfoBtn, PageInfo } from '../components/PageInfo' export function Votes() { - return
Votes
+ return ( + + + + + ) } diff --git a/src/providers/GlobalStyle.tsx b/src/providers/GlobalStyle.tsx new file mode 100644 index 0000000..de307af --- /dev/null +++ b/src/providers/GlobalStyle.tsx @@ -0,0 +1,71 @@ +import { createGlobalStyle } from 'styled-components' +import { Colors, Font } from '../constants/styles' + +export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + } + body, html { + margin: 0; + width: 100%; + height: 100%; + background-color: ${Colors.White}; + color: ${Colors.Black}; + font-family: ${Font}; + font-weight: normal; + font-size: 15px; + } + + html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +button { + border: none; + background: none; + cursor:pointer; +} +a { + text-decoration: none; +} +`