Dark mode tweaks

topswap · Aug 28, 2020 · c83435f · c83435f
1 parent 27e5991
commit c83435f
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 31 deletions.
diff --git a/src/Theme/index.js b/src/Theme/index.js
@@ -24,7 +24,7 @@ const theme = (darkMode, color) => ({
   shadowColor: darkMode ? '#000' : '#2F80ED',
   mercuryGray: darkMode ? '#333333' : '#E1E1E1',
 
-  text1: darkMode ? '#FFFFFF' : '#000000',
+  text1: darkMode ? '#FAFAFA' : '#1F1F1F',
   text2: darkMode ? '#C3C5CB' : '#565A69',
   text3: darkMode ? '#6C7284' : '#888D9B',
   text4: darkMode ? '#565A69' : '#C3C5CB',
@@ -34,17 +34,17 @@ const theme = (darkMode, color) => ({
   white: '#FFFFFF',
 
   // backgrounds / greys
-  bg1: darkMode ? '#212429' : '#FFFFFF',
+  bg1: darkMode ? '#212429' : '#FAFAFA',
   bg2: darkMode ? '#2C2F36' : '#F7F8FA',
   bg3: darkMode ? '#40444F' : '#EDEEF2',
   bg4: darkMode ? '#565A69' : '#CED0D9',
   bg5: darkMode ? '#565A69' : '#888D9B',
-  bg6: darkMode ? '#000000' : '#FFFFFF',
+  bg6: darkMode ? '#000' : '#FFFFFF',
 
   //specialty colors
   modalBG: darkMode ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.6)',
   advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.4)',
-  onlyLight: darkMode ? 'black' : 'transparent',
+  onlyLight: darkMode ? '#22242a' : 'transparent',
   divider: darkMode ? 'rgba(43, 43, 43, 0.435)' : 'rgba(43, 43, 43, 0.035)',
 
   //primary colors

diff --git a/src/components/PinnedData/index.js b/src/components/PinnedData/index.js
@@ -17,12 +17,11 @@ const RightColumn = styled.div`
   right: 0;
   top: 0px;
   height: 100vh;
-  width: ${({ open }) => (open ? '160px' : '18px')};
+  width: ${({ open }) => (open ? '160px' : '23px')};
   padding: 1.25rem;
   border-left: ${({ theme, open }) => '1px solid' + theme.bg3};
   background-color: ${({ theme }) => theme.bg1};
   z-index: 9999;
-  transition: width 0.25s ease;
   overflow: scroll;
   :hover {
     cursor: pointer;

diff --git a/src/components/PositionList/index.js b/src/components/PositionList/index.js
@@ -142,7 +142,7 @@ function PositionList({ positions }) {
     const valueUSD = poolOwnership * position.pair.reserveUSD
 
     return (
-      <DashGrid focus={true}>
+      <DashGrid style={{ opacity: poolOwnership > 0 ? 1 : 0.6 }} focus={true}>
         {!below740 && <DataText area="number">{index}</DataText>}
         <DataText area="name" justifyContent="flex-start" alignItems="flex-start">
           <AutoColumn gap="8px" justify="flex-start" align="flex-start">
@@ -157,17 +157,20 @@ function PositionList({ positions }) {
                 />
               </TYPE.main>
             </CustomLink>
+
             <RowFixed gap="8px" justify="flex-start">
               <Link
                 external
                 href={getPoolLink(position.pair.token0.id, position.pair.token1.id)}
                 style={{ marginRight: '.5rem' }}
               >
-                <ButtonLight style={{ padding: '2px 4px', borderRadius: '4px' }}>Add</ButtonLight>
-              </Link>
-              <Link external href={getPoolLink(position.pair.token0.id, position.pair.token1.id, true)}>
-                <ButtonLight style={{ padding: '2px 4px', borderRadius: '4px' }}>Remove</ButtonLight>
+                <ButtonLight style={{ padding: '4px 6px', borderRadius: '4px' }}>Add</ButtonLight>
               </Link>
+              {poolOwnership > 0 && (
+                <Link external href={getPoolLink(position.pair.token0.id, position.pair.token1.id, true)}>
+                  <ButtonLight style={{ padding: '4px 6px', borderRadius: '4px' }}>Remove</ButtonLight>
+                </Link>
+              )}
             </RowFixed>
           </AutoColumn>
         </DataText>

diff --git a/src/components/Search/index.js b/src/components/Search/index.js
@@ -38,7 +38,7 @@ const Wrapper = styled.div`
   padding: 12px 16px;
   border-radius: 12px;
   background: ${({ theme, small, open }) =>
-    small ? (open ? transparentize(0.4, theme.bg1) : 'none') : transparentize(0.4, theme.bg1)};
+    small ? (open ? transparentize(0.4, theme.bg1) : 'none') : transparentize(0.4, theme.bg6)};
   border-bottom-right-radius: ${({ open }) => (open ? '0px' : '12px')};
   border-bottom-left-radius: ${({ open }) => (open ? '0px' : '12px')};
   z-index: 9999;
@@ -113,7 +113,7 @@ const Menu = styled.div`
   overflow: scroll;
   left: 0;
   padding-bottom: 20px;
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.bg6};
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),

diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
@@ -1,22 +1,33 @@
 import React from 'react'
 import styled from 'styled-components'
+import { Sun, Moon } from 'react-feather'
 
-const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
-  padding: 0.25rem 0.5rem;
-  border-radius: 14px;
-  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text4) : 'none')};
-  color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text3)};
-  font-size: 0.825rem;
-  font-weight: 400;
+const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>``
+
+const StyledSun = styled(Sun)<{ isActive?: boolean; activeElement?: boolean }>`
+  opacity: ${({ theme, isActive }) => (isActive ? 0.8 : 0.4)};
+
+  :hover {
+    opacity: 1;
+  }
+`
+
+const StyledMoon = styled(Moon)<{ isActive?: boolean; activeElement?: boolean }>`
+  opacity: ${({ theme, isActive }) => (isActive ? 0.8 : 0.4)};
+
+  :hover {
+    opacity: 1;
+  }
 `
 
 const StyledToggle = styled.a<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 16px;
-  border: 1px solid ${({ theme, isActive }) => (isActive ? theme.primary5 : theme.text4)};
   display: flex;
   width: fit-content;
   cursor: pointer;
   text-decoration: none;
+  margin-top: 1rem;
+  color: white;
+
   :hover {
     text-decoration: none;
   }
@@ -30,11 +41,12 @@ export interface ToggleProps {
 export default function Toggle({ isActive, toggle }: ToggleProps) {
   return (
     <StyledToggle isActive={isActive} target="_self" onClick={toggle}>
-      <ToggleElement isActive={isActive} isOnSwitch={true}>
-        Dark
-      </ToggleElement>
       <ToggleElement isActive={!isActive} isOnSwitch={false}>
-        Light
+        <StyledSun isActive={!isActive} size={20} />
+      </ToggleElement>
+      <span style={{ padding: '0 .5rem' }}>{' / '}</span>
+      <ToggleElement isOnSwitch={false}>
+        <StyledMoon isActive={isActive} size={20} />
       </ToggleElement>
     </StyledToggle>
   )

diff --git a/src/components/index.js b/src/components/index.js
@@ -170,13 +170,8 @@ export const FixedMenu = styled.div`
   z-index: 99;
   width: 100%;
   box-sizing: border-box;
-  /* position: sticky; */
-  /* top: 5.25rem; */
   padding: 1rem;
   box-sizing: border-box;
-  /* background-color: ${({ theme }) => transparentize(0.6, theme.bg1)}; */
-  /* backdrop-filter: blur(20px); */
-  /* border-bottom: 1px solid ${({ theme }) => theme.bg2}; */
   margin-bottom: 2rem;
   max-width: 100vw;