fix: update time option menu for token details and colors to match theme file (#4322)

* fix time options and colors

* fix line height

* color change

src/components/Charts/PriceChart.tsx

@@ -86,21 +86,31 @@ const ArrowCell = styled.div`
   padding-left: 2px;
   display: flex;
 `
+export const TimeOptionsWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`
 export const TimeOptionsContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   margin-top: 4px;
   gap: 4px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-radius: 16px;
+  height: 40px;
+  padding: 4px;
+  width: fit-content;
 `
 const TimeButton = styled.button<{ active: boolean }>`
-  background-color: ${({ theme, active }) => (active ? theme.accentActive : 'transparent')};
-  font-size: 14px;
-  width: 36px;
-  height: 36px;
+  background-color: ${({ theme, active }) => (active ? theme.backgroundInteractive : 'transparent')};
+  font-weight: 600;
+  font-size: 16px;
+  padding: 6px 12px;
   border-radius: 12px;
+  line-height: 20px;
   border: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
 `
 
 function getTicks(startTimestamp: number, endTimestamp: number, numTicks = 5) {
@@ -274,13 +284,15 @@ export function PriceChart({ width, height }: PriceChartProps) {
           onMouseLeave={() => setSelected(initialState)}
         />
       </LineChart>
-      <TimeOptionsContainer>
-        {TIME_DISPLAYS.map(([value, display]) => (
-          <TimeButton key={display} active={timePeriod === value} onClick={() => setTimePeriod(value)}>
-            {display}
-          </TimeButton>
-        ))}
-      </TimeOptionsContainer>
+      <TimeOptionsWrapper>
+        <TimeOptionsContainer>
+          {TIME_DISPLAYS.map(([value, display]) => (
+            <TimeButton key={display} active={activeTimePeriod === value} onClick={() => setTimePeriod(value)}>
+              {display}
+            </TimeButton>
+          ))}
+        </TimeOptionsContainer>
+      </TimeOptionsWrapper>
     </ChartWrapper>
   )
 }

src/components/CurrencyInputPanel/index.tsx

@@ -111,13 +111,13 @@ const CurrencySelect = styled(ButtonGray)<{
 `
 const InputCurrencySelect = styled(CurrencySelect)<{ phase0Flag: boolean }>`
   background-color: ${({ theme, selected, phase0Flag }) =>
-    phase0Flag && (selected ? theme.backgroundContainer : theme.accentAction)};
+    phase0Flag && (selected ? theme.backgroundModule : theme.accentAction)};
   :focus,
   :hover {
     background-color: ${({ selected, theme, phase0Flag }) =>
       selected
         ? phase0Flag
-          ? theme.backgroundAction
+          ? theme.backgroundInteractive
           : theme.deprecated_bg3
         : darken(0.05, theme.deprecated_primary1)};
   }

src/components/Explore/TokenDetails/ShareButton.tsx

@@ -46,7 +46,7 @@ const ShareAction = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundContainer};
+    background-color: ${({ theme }) => theme.backgroundModule};
   }
 `
 

src/components/Explore/TokenTable/FavoriteButton.tsx

@@ -15,7 +15,7 @@ const FavoriteButtonContent = styled.div`
 const StyledFavoriteButton = styled.button<{ active: boolean }>`
   padding: 0px 16px;
   border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundAction)};
+  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
   border: none;
   color: ${({ theme }) => theme.textPrimary};
   font-size: 16px;
@@ -23,7 +23,7 @@ const StyledFavoriteButton = styled.button<{ active: boolean }>`
   cursor: pointer;
 
   :hover {
-    background-color: ${({ theme, active }) => !active && theme.backgroundContainer};
+    background-color: ${({ theme, active }) => !active && theme.backgroundModule};
   }
 `
 const FavoriteText = styled.span`

src/components/Explore/TokenTable/NetworkFilter.tsx

@@ -65,7 +65,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   height: 100%;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
   border: none;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
   margin: 0;
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
@@ -76,10 +76,10 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundModule)};
   }
   :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
   }
   svg {
     margin-top: 2px;

src/components/Explore/TokenTable/SearchBar.tsx

@@ -29,7 +29,7 @@ const SearchInput = styled.input<{ expanded: boolean }>`
 
   :hover {
     cursor: ${({ expanded }) => !expanded && 'pointer'};
-    background-color: ${({ theme }) => theme.backgroundContainer};
+    background-color: ${({ theme }) => theme.backgroundModule};
   }
 
   :focus {

src/components/Explore/TokenTable/TimeSelector.tsx

@@ -75,7 +75,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   border: none;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
   margin: 0;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
   font-size: 16px;
@@ -85,10 +85,10 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundModule)};
   }
   :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundInteractive)};
   }
   svg {
     margin-top: 2px;

src/components/Explore/TokenTable/TokenRow.tsx

@@ -79,7 +79,7 @@ const StyledTokenRow = styled.div`
   @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
     grid-template-columns: 4fr 2fr;
     min-width: unset;
-    border-bottom: 0.5px solid ${({ theme }) => theme.backgroundContainer};
+    border-bottom: 0.5px solid ${({ theme }) => theme.backgroundModule};
     padding: 0px 12px;
 
     :last-of-type {

src/components/Explore/TokenTable/TokenTable.tsx

@@ -21,7 +21,7 @@ const GridContainer = styled.div`
   display: flex;
   flex-direction: column;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
-  background-color: ${({ theme }) => theme.backgroundContainer};
+  background-color: ${({ theme }) => theme.backgroundModule};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   margin-left: auto;

src/components/Explore/loading.tsx

@@ -10,9 +10,9 @@ export const LoadingBubble = styled.div`
   animation-fill-mode: both;
   background: linear-gradient(
     to left,
-    ${({ theme }) => theme.backgroundAction} 25%,
+    ${({ theme }) => theme.backgroundInteractive} 25%,
     ${({ theme }) => theme.backgroundOutline} 50%,
-    ${({ theme }) => theme.backgroundAction} 75%
+    ${({ theme }) => theme.backgroundInteractive} 75%
   );
   will-change: background-position;
   background-size: 400%;

src/components/TokenSafety/index.tsx

@@ -85,7 +85,7 @@ const Buttons = ({
       break
     case WARNING_LEVEL.BLOCKED:
       textColor = theme.textPrimary
-      buttonColor = theme.backgroundAction
+      buttonColor = theme.backgroundInteractive
       break
   }
   return warning.canProceed ? (

src/components/swap/SwapModalHeader.tsx

@@ -39,7 +39,7 @@ const ArrowWrapper = styled.div<{ phase0Flag: boolean }>`
   align-items: center;
   background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
   border: 4px solid;
-  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundModule : theme.deprecated_bg0)};
   z-index: 2;
 `
 

src/components/swap/styleds.tsx

@@ -27,7 +27,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean; phase0Flag: boolean
   /* transform: rotate(90deg); */
   background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
   border: 4px solid;
-  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundModule : theme.deprecated_bg0)};
 
   z-index: 2;
   ${({ clickable }) =>

src/pages/Swap/index.tsx

@@ -94,7 +94,7 @@ const BottomWrapper = styled.div<{ phase0Flag: boolean }>`
   ${({ phase0Flag }) =>
     phase0Flag &&
     css`
-      background-color: ${({ theme }) => theme.backgroundContainer};
+      background-color: ${({ theme }) => theme.backgroundModule};
       border-radius: 12px;
       padding: 8px 12px 10px;
       color: ${({ theme }) => theme.textSecondary};

src/pages/TokenDetails/index.tsx

@@ -56,7 +56,7 @@ const RightPanel = styled.div`
 const Widget = styled.div`
   height: 348px;
   width: 284px;
-  background-color: ${({ theme }) => theme.backgroundContainer};
+  background-color: ${({ theme }) => theme.backgroundModule};
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
 `

src/theme/colors.ts

@@ -173,8 +173,9 @@ export interface Palette {
 
   backgroundBackdrop: Color
   backgroundSurface: Color
-  backgroundContainer: Color
-  backgroundAction: Color
+  backgroundInteractive: Color
+  backgroundFloating: Color
+  backgroundModule: Color
   backgroundOutline: Color
   backgroundScrim: Color
 
@@ -231,8 +232,9 @@ export const colorsLight: Palette = {
 
   backgroundBackdrop: colors.white,
   backgroundSurface: colors.white,
-  backgroundContainer: opacify(8, colors.gray500),
-  backgroundAction: opacify(8, colors.gray700),
+  backgroundModule: colors.gray50,
+  backgroundInteractive: opacify(6, colors.gray700),
+  backgroundFloating: opacify(8, colors.white),
   backgroundOutline: opacify(24, colors.gray500),
   backgroundScrim: opacify(60, colors.gray900),
 
@@ -287,10 +289,11 @@ export const colorsDark: Palette = {
 
   backgroundBackdrop: colors.black,
   backgroundSurface: colors.gray900,
-  backgroundContainer: opacify(8, colors.gray300),
-  backgroundAction: colors.gray700,
+  backgroundModule: opacify(8, colors.gray300),
+  backgroundInteractive: colors.gray700,
+  backgroundFloating: opacify(8, colors.gray700),
   backgroundOutline: opacify(24, colors.gray300),
-  backgroundScrim: opacify(72, colors.black),
+  backgroundScrim: opacify(72, colors.gray900),
 
   textPrimary: colors.white,
   textSecondary: colors.gray300,

src/theme/index.tsx

@@ -63,8 +63,8 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
 
     backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
     backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
-    backgroundContainer: darkMode ? colorsDark.backgroundContainer : colorsLight.backgroundContainer,
-    backgroundAction: darkMode ? colorsDark.backgroundAction : colorsLight.backgroundAction,
+    backgroundModule: darkMode ? colorsDark.backgroundModule : colorsLight.backgroundModule,
+    backgroundInteractive: darkMode ? colorsDark.backgroundInteractive : colorsLight.backgroundInteractive,
     backgroundOutline: darkMode ? colorsDark.backgroundOutline : colorsLight.backgroundOutline,
     backgroundScrim: darkMode ? colorsDark.backgroundScrim : colorsLight.backgroundScrim,
 

src/theme/styled.d.ts

@@ -6,8 +6,8 @@ export interface ThemeColors {
 
   backgroundBackdrop: Color
   backgroundSurface: Color
-  backgroundContainer: Color
-  backgroundAction: Color
+  backgroundModule: Color
+  backgroundInteractive: Color
   backgroundOutline: Color
   backgroundScrim: Color