rework: Integrate uikit theme (pancakeswap#43)

guifeliper · Nov 11, 2020 · ec5c78c · ec5c78c
1 parent 1b2107d
commit ec5c78c
Show file tree

Hide file tree

Showing 50 changed files with 180 additions and 316 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@crowdin/crowdin-api-client": "^1.8.16",
     "@ethersproject/abi": "^5.0.7",
-    "@pancakeswap-libs/uikit": "^0.1.1",
+    "@pancakeswap-libs/uikit": "^0.1.2",
     "@types/debounce": "^1.2.0",
     "@types/jest": "^26.0.9",
     "@types/node": "^14.0.27",
@@ -55,6 +55,6 @@
     "@types/numeral": "0.0.28",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
-    "@types/styled-components": "^5.1.2"
+    "@types/styled-components": "^5.1.4"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { StringTranslations } from '@crowdin/crowdin-api-client'
 import { ResetCSS } from '@pancakeswap-libs/uikit'
-import GlobalStyle from './theme/Global'
+import GlobalStyle from './style/Global'
 import DisclaimerModal from './components/DisclaimerModal'
 import MobileMenu from './components/MobileMenu'
 import TopBar from './components/TopBar'

diff --git a/src/Providers.tsx b/src/Providers.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import { lightTheme, darkTheme } from './theme'
+import { light, dark } from '@pancakeswap-libs/uikit'
 import { UseWalletProvider } from 'use-wallet'
 import FarmsProvider from './contexts/Farms'
 import ModalsProvider from './contexts/Modals'
@@ -33,7 +33,7 @@ const Providers: React.FC<{
   children,
 }) => {
   return (
-    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+    <ThemeProvider theme={isDark ? dark : light}>
       <LanguageContext.Provider
         value={{
           selectedLanguage,

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -25,7 +25,7 @@ const Button: React.FC<ButtonProps> = ({
   variant,
 }) => {
   const { colors, spacing } = useContext(ThemeContext)
-  const buttonColor = colors.bg
+  const buttonColor = colors.background
 
   // let buttonColor: string
   // switch (variant) {
@@ -120,7 +120,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   pointer-events: ${(props) => (!props.disabled ? undefined : 'none')};
   width: 100%;
   &:hover {
-    background-color: ${(props) => props.theme.colors.grey[100]};
+    background-color: #167e86;
   }
 `
 

diff --git a/src/components/Button/ButtonMenu.tsx b/src/components/Button/ButtonMenu.tsx
@@ -115,7 +115,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   pointer-events: ${(props) => (!props.disabled ? undefined : 'none')};
   width: 100%;
   &:hover {
-    background-color: ${(props) => props.theme.colors.grey[100]};
+    background-color: ${(props) => props.theme.colors.primaryDark};
   }
 `
 

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 const Card: React.FC = ({ children }) => <StyledCard>{children}</StyledCard>
 
 const StyledCard = styled.div`
-  background: ${(props) => props.theme.colors.cardBg};
+  background: ${(props) => props.theme.card.background};
   border-radius: 20px;
   display: flex;
   color: ${(props) => props.theme.colors.secondary};

diff --git a/src/components/CardIcon/CardIcon.tsx b/src/components/CardIcon/CardIcon.tsx
@@ -10,7 +10,7 @@ const CardIcon: React.FC<CardIconProps> = ({ children }) => (
 )
 
 const StyledCardIcon = styled.div`
-  background: ${(props) => props.theme.colors.cardBg};
+  background: ${(props) => props.theme.card.background};
   font-size: 56px;
   height: 80px;
   width: 150px;

diff --git a/src/components/Dial/Dial.tsx b/src/components/Dial/Dial.tsx
@@ -4,18 +4,24 @@ import styled, { ThemeContext } from 'styled-components'
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 
 interface DialProps {
-  children?: React.ReactNode,
-  color?: 'primary' | 'secondary',
-  disabled?: boolean,
-  size?: number,
+  children?: React.ReactNode
+  color?: 'primary' | 'secondary'
+  disabled?: boolean
+  size?: number
   value: number
 }
 
-const Dial: React.FC<DialProps> = ({ children, color, disabled, size = 256, value }) => {
+const Dial: React.FC<DialProps> = ({
+  children,
+  color,
+  disabled,
+  size = 256,
+  value,
+}) => {
   const { colors: themeColor } = useContext(ThemeContext)
   let pathColor = themeColor.secondary.main
   if (color === 'primary') {
-    pathColor = themeColor.grey[600]
+    pathColor = '#452A7A'
   }
 
   return (
@@ -25,14 +31,12 @@ const Dial: React.FC<DialProps> = ({ children, color, disabled, size = 256, valu
           value={value}
           styles={buildStyles({
             strokeLinecap: 'round',
-            pathColor: !disabled ? pathColor : themeColor.grey[400],
+            pathColor: !disabled ? pathColor : themeColor.primary,
             pathTransitionDuration: 1,
           })}
         />
       </StyledOuter>
-      <StyledInner size={size}>
-        {children}
-      </StyledInner>
+      <StyledInner size={size}>{children}</StyledInner>
     </StyledDial>
   )
 }
@@ -42,28 +46,31 @@ interface StyledInnerProps {
 }
 
 const StyledDial = styled.div<StyledInnerProps>`
-  padding: calc(${props => props.size}px * 24 / 256);
+  padding: calc(${(props) => props.size}px * 24 / 256);
   position: relative;
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
 `
 
 const StyledInner = styled.div<StyledInnerProps>`
   align-items: center;
-  background-color: ${props => props.theme.colors.grey[200]};
-  border-radius: ${props => props.size}px;
+  background-color: ${(props) => props.theme.colors.primaryBright};
+  border-radius: ${(props) => props.size}px;
   display: flex;
   justify-content: center;
   position: relative;
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
 `
 
 const StyledOuter = styled.div`
-  background-color: ${props => props.theme.colors.grey[300]};
+  background-color: #fffdfa;
   border-radius: 10000px;
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 `
 
-export default Dial
+export default Dial
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -23,9 +23,9 @@ const StyledFooterInner = styled.div`
   align-items: center;
   display: flex;
   justify-content: center;
-  height: ${props => props.theme.topBarSize}px;
-  max-width: ${props => props.theme.siteWidth}px;
+  height: 72px;
+  max-width: ${(props) => props.theme.siteWidth}px;
   width: 100%;
 `
 
-export default Footer
+export default Footer
diff --git a/src/components/Footer/components/Nav.tsx b/src/components/Footer/components/Nav.tsx
@@ -30,12 +30,12 @@ const StyledNav = styled.nav`
 `
 
 const StyledLink = styled.a`
-  color: ${(props) => props.theme.colors.grey[400]};
+  color: #12aab5;
   padding-left: ${(props) => props.theme.spacing[3]}px;
   padding-right: ${(props) => props.theme.spacing[3]}px;
   text-decoration: none;
   &:hover {
-    color: ${(props) => props.theme.colors.grey[500]};
+    color: #805e49;
   }
 `
 

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -28,13 +28,11 @@ interface StyledButtonProps {
 
 const StyledButton = styled.button<StyledButtonProps>`
   align-items: center;
-  background-color: ${(props) => (!props.disabled ? props.theme.colors.grey[200] : '#ddd')};
+  background-color: ${(props) =>
+    !props.disabled ? props.theme.colors.primaryBright : '#ddd'};
   border: 0;
   border-radius: 28px;
-  color: ${(props) =>
-    !props.disabled
-      ? '#fff'
-      : props.theme.colors.grey[400]};
+  color: ${(props) => (!props.disabled ? '#fff' : props.theme.colors.primary)};
   cursor: pointer;
   display: flex;
   font-weight: 700;
@@ -48,7 +46,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   text-transform: uppercase;
   width: 56px;
   &:hover {
-    background-color: ${(props) => props.theme.colors.blue[100]};
+    background-color: ##25beca;
   }
 `
 

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 import styled from 'styled-components'
 
 export interface InputProps {
-  endAdornment?: React.ReactNode,
-  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
-  placeholder?: string,
-  startAdornment?: React.ReactNode,
-  value: string,
+  endAdornment?: React.ReactNode
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void
+  placeholder?: string
+  startAdornment?: React.ReactNode
+  value: string
 }
 
 const Input: React.FC<InputProps> = ({
@@ -19,19 +19,23 @@ const Input: React.FC<InputProps> = ({
   return (
     <StyledInputWrapper>
       {!!startAdornment && startAdornment}
-      <StyledInput placeholder={placeholder} value={value} onChange={onChange} />
+      <StyledInput
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
       {!!endAdornment && endAdornment}
     </StyledInputWrapper>
   )
 }
 
 const StyledInputWrapper = styled.div`
   align-items: center;
-  background-color: ${props => props.theme.colors.inputBg};
-  border-radius: ${props => props.theme.borderRadius}px;
+  background-color: ${(props) => props.theme.colors.input};
+  border-radius: ${(props) => props.theme.radii.default};
   display: flex;
   height: 72px;
-  padding: 0 ${props => props.theme.spacing[3]}px;
+  padding: 0 ${(props) => props.theme.spacing[3]}px;
 `
 
 const StyledInput = styled.input`
@@ -46,4 +50,4 @@ const StyledInput = styled.input`
   outline: none;
 `
 
-export default Input
+export default Input
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -41,7 +41,7 @@ const StyledSushi = styled.div`
 `
 
 const StyledText = styled.div`
-  color: ${(props) => props.theme.colors.grey[400]};
+  color: ${(props) => props.theme.colors.primary};
 `
 
 export default Loader
diff --git a/src/components/MobileMenu/MobileMenu.tsx b/src/components/MobileMenu/MobileMenu.tsx
@@ -95,7 +95,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ onDismiss, visible }) => {
 }
 
 const StyledBackdrop = styled.div`
-  background-color: ${(props) => props.theme.colors.grey[600]}aa;
+  background-color: #452a7aaa;
   position: absolute;
   top: 0;
   right: 0;
@@ -129,7 +129,7 @@ const Wrapper = styled.div`
 
 const StyledMobileMenu = styled.div`
   animation: ${slideIn} 0.3s forwards ease-out;
-  background-color: ${(props) => props.theme.colors.grey[200]};
+  background-color: ${(props) => props.theme.colors.primaryBright};
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -152,10 +152,10 @@ const StyledLink = styled(NavLink)`
   text-decoration: none;
   width: 100%;
   &:hover {
-    color: ${(props) => props.theme.colors.grey[500]};
+    color: #805e49;
   }
   &.active {
-    color: ${(props) => props.theme.colors.grey[600]};
+    color: #452a7a;
   }
 `
 

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -30,7 +30,7 @@ const StyledResponsiveWrapper = styled.div`
   position: relative;
   width: 100%;
   max-width: 500px;
-  @media (max-width: ${(props) => props.theme.breakpoints.mobile}px) {
+  @media (max-width: ${(props) => props.theme.breakpoints[1]}) {
     flex: 1;
     position: absolute;
     top: 100%;
@@ -43,7 +43,7 @@ const StyledResponsiveWrapper = styled.div`
 
 const StyledModal = styled.div`
   padding: 0 20px;
-  background: ${(props) => props.theme.colors.cardBg};
+  background: ${(props) => props.theme.card.background};
   border-radius: 12px;
   display: flex;
   flex-direction: column;

diff --git a/src/components/ModalActions/ModalActions.tsx b/src/components/ModalActions/ModalActions.tsx
@@ -9,9 +9,7 @@ const ModalActions: React.FC = ({ children }) => {
     <StyledModalActions>
       {React.Children.map(children, (child, i) => (
         <>
-          <StyledModalAction>
-            {child}
-          </StyledModalAction>
+          <StyledModalAction>{child}</StyledModalAction>
           {i < l - 1 && <Spacer />}
         </>
       ))}
@@ -21,14 +19,14 @@ const ModalActions: React.FC = ({ children }) => {
 
 const StyledModalActions = styled.div`
   align-items: center;
-  background-color: ${props => props.theme.colors.grey[100]}00;
+  background-color: ${(props) => props.theme.colors.primaryDark}00;
   display: flex;
   margin: 0;
-  padding: ${props => props.theme.spacing[4]}px;
+  padding: ${(props) => props.theme.spacing[4]}px;
 `
 
 const StyledModalAction = styled.div`
   flex: 1;
 `
 
-export default ModalActions
+export default ModalActions
diff --git a/src/components/ModalContent/ModalContent.tsx b/src/components/ModalContent/ModalContent.tsx
@@ -7,7 +7,7 @@ const ModalContent: React.FC = ({ children }) => {
 
 const StyledModalContent = styled.div`
   padding: ${(props) => props.theme.spacing[4]}px;
-  @media (max-width: ${(props) => props.theme.breakpoints.mobile}px) {
+  @media (max-width: ${(props) => props.theme.breakpoints[1]}) {
     flex: 1;
     overflow: auto;
   }