feat: MET-182 support darkmode

cardano-foundation · Sep 25, 2023 · c5ebdeb · c5ebdeb
1 parent 4aa94e5
commit c5ebdeb
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 34 deletions.
diff --git a/src/commons/resources/icons/EmptyIconDark.svg b/src/commons/resources/icons/EmptyIconDark.svg
diff --git a/src/commons/resources/index.ts b/src/commons/resources/index.ts
@@ -59,6 +59,7 @@ import EternlIcon from "./icons/eternl.svg";
 import YoroiIcon from "./icons/yoroi.svg";
 import TyphonIcon from "./icons/typhon.svg";
 import EmptyIcon from "./images/noData.png";
+import EmptyDarkIcon from "./icons/EmptyIconDark.svg";
 import StakingLifecycleIcon from "./icons/menus/stakingLifecycle.svg";
 import ProtocolIcon from "./icons/menus/Protocol.svg";
 import PolygonWhiteIconUrl from "./icons/polygon-white.svg";
@@ -238,7 +239,8 @@ export {
   moonIcon,
   LinkOffComponent,
   LightningIconComponent,
-  MenuIconComponent
+  MenuIconComponent,
+  EmptyDarkIcon
 };
 
 export { ReactComponent as AIcon } from "./icons/AIcon.svg";

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/Tablular/TabularOverview/styles.ts b/src/components/StakingLifeCycle/SPOLifecycle/Tablular/TabularOverview/styles.ts
@@ -7,6 +7,7 @@ export const CardOverview = styled(Box)`
   height: 120px;
   display: flex;
   align-items: center;
+  background: ${({ theme }) => theme.palette.secondary[0]};
   justify-content: space-between;
   padding: 0 25px;
   position: relative;
@@ -78,7 +79,10 @@ export const ClickAbleLink = styled(Link)`
 
 export const ViewMoreButton = styled(IconButton)`
   padding: 14px;
-  background-color: ${({ theme }) => theme.palette.border.primary};
+  background-color: ${({ theme }) => (theme.isDark ? theme.palette.secondary[600] : theme.palette.border.primary)};
+  &:hover {
+    background-color: ${({ theme }) => (theme.isDark ? theme.palette.secondary[600] : theme.palette.border.primary)};
+  }
 `;
 
 export const DotsIcon = styled(Box)`

diff --git a/src/components/TabularView/TabularOverview/styles.ts b/src/components/TabularView/TabularOverview/styles.ts
@@ -17,6 +17,7 @@ export const CardItem = styled(Card)<{ sidebar?: number }>(({ theme, sidebar })
   boxSizing: "border-box",
   gap: 20,
   flex: 1,
+  background: theme.palette.secondary[0],
   boxShadow: theme.shadow.card,
   borderRadius: 12,
   minWidth: "calc(50% - 10px)",
@@ -133,6 +134,7 @@ export const NoDelegatedStakePool = styled(Box)(({ theme }) => ({
 export const StyledAdaLogoIcon = styled(AdaLogoIcon)(({ theme }) => ({
   fontSize: 18,
   marginLeft: 8,
+  fill: theme.palette.secondary.main,
   paddingTop: 2,
   [theme.breakpoints.down("sm")]: {
     marginLeft: 5,

diff --git a/src/components/commons/ConnectedProfileOptionNormalLogin/style.ts b/src/components/commons/ConnectedProfileOptionNormalLogin/style.ts
@@ -13,25 +13,32 @@ export const WrapContent = styled(Popover)`
 `;
 
 export const Content = styled(Box)`
-  padding: 16px 24px;
+  width: 100%;
   & > div {
     cursor: pointer;
   }
 `;
 
 export const Profile = styled(Box)`
   display: flex;
+  padding: 8px 12px;
   color: ${(props) => props.theme.palette.secondary.main};
   align-items: center;
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary[200]} !important;
+  }
 `;
 
 export const Disconnect = styled(Box)`
   display: flex;
   align-items: center;
-  margin-top: 26px;
+  padding: 8px 12px;
   h4 {
     color: ${(props) => props.theme.palette.error[700]};
   }
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary[200]} !important;
+  }
 `;
 
 export const Icon = styled("img")`

diff --git a/src/components/commons/Layout/Header/SelectNetwork/index.tsx b/src/components/commons/Layout/Header/SelectNetwork/index.tsx
@@ -29,13 +29,13 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
 }));
 
 const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
-  color: theme.palette.secondary.main
-  // "&.Mui-selected": {
-  //   backgroundColor: theme.palette.primary[200]
-  // },
-  // "&:hover": {
-  //   backgroundColor: theme.palette.primary[200] + " !important"
-  // }
+  color: theme.palette.secondary.main,
+  "&.Mui-selected": {
+    backgroundColor: theme.palette.primary[200]
+  },
+  "&:hover": {
+    backgroundColor: theme.palette.primary[200] + " !important"
+  }
 }));
 
 const SelectNetwork: React.FC = () => {

diff --git a/src/components/commons/Layout/Header/index.tsx b/src/components/commons/Layout/Header/index.tsx
@@ -1,4 +1,4 @@
-import { Box, IconButton, useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
@@ -19,6 +19,7 @@ import HeaderSearch from "./HeaderSearch";
 import LoginButton from "./LoginButton";
 import SelectNetwork from "./SelectNetwork";
 import {
+  ButtonSideBar,
   HeaderBox,
   HeaderContainer,
   HeaderLogo,
@@ -104,9 +105,9 @@ const Header: React.FC<RouteComponentProps> = (props) => {
                 <SearchIcon fontSize={24} stroke={theme.palette.secondary.light} fill={theme.palette.secondary[0]} />
               </SearchButton>
             )}
-            <IconButton onClick={handleToggle}>
+            <ButtonSideBar onClick={handleToggle}>
               <CustomIcon icon={MenuIconComponent} height={18} fill={theme.palette.secondary.light} />
-            </IconButton>
+            </ButtonSideBar>
           </SideBarRight>
         </HeaderTop>
       </HeaderBox>

diff --git a/src/components/commons/Layout/Header/styles.ts b/src/components/commons/Layout/Header/styles.ts
@@ -1,7 +1,7 @@
-import { Box, Button, Container, Switch, styled } from "@mui/material";
+import { Box, Button, Container, IconButton, Switch, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
-import { MenuIcon, sunIcon, moonIcon } from "src/commons/resources";
+import { sunIcon, moonIcon } from "src/commons/resources";
 
 export const HeaderContainer = styled("header")`
   color: ${(props) => props.theme.palette.secondary.main};
@@ -117,12 +117,7 @@ export const NetworkContainer = styled(Box)(({ theme }) => ({
   }
 }));
 
-export const Toggle = styled("i")`
-  width: 20px;
-  height: 24px;
-  background-image: url(${MenuIcon});
-  background-repeat: no-repeat;
-  background-position: center;
+export const ButtonSideBar = styled(IconButton)`
   display: none;
   ${({ theme }) => theme.breakpoints.down("md")} {
     display: block;