Merge pull request #2129 from cardano-foundation/feature/MET-182-supp…

…ort-dark-mode Feature/met 182 support dark mode
cardano-foundation · Oct 6, 2023 · fee2270 · fee2270
2 parents 8101261 + cbc3afc
commit fee2270
Show file tree

Hide file tree

Showing 63 changed files with 411 additions and 313 deletions.
diff --git a/src/commons/resources/icons/arrow-down-red.svg b/src/commons/resources/icons/arrow-down-red.svg
diff --git a/src/components/AddressDetail/AddressAnalytics/styles.ts b/src/components/AddressDetail/AddressAnalytics/styles.ts
@@ -1,4 +1,6 @@
-import { Grid, Skeleton, Button, styled, Box, alpha } from "@mui/material";
+import { Box, Button, Grid, alpha, styled } from "@mui/material";
+
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 
 export const BoxInfo = styled(Box)<{ space: number }>(({ theme }) => ({
   background: theme.palette.secondary[0],
@@ -147,7 +149,7 @@ export const ChartBox = styled(Box)<{ highest: number; lowest: number }>(({ them
   };
 });
 
-export const SkeletonUI = styled(Skeleton)(({ theme }) => ({
+export const SkeletonUI = styled(CommonSkeleton)(({ theme }) => ({
   paddingTop: theme.spacing(3),
   marginRight: theme.spacing(2),
   borderRadius: 10

diff --git a/src/components/ContractDetail/AddressOverview/index.tsx b/src/components/ContractDetail/AddressOverview/index.tsx
@@ -1,31 +1,35 @@
 import { Box, Button } from "@mui/material";
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
-import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
 
-import VerifyScript from "src/components/VerifyScript";
 import useFetch from "src/commons/hooks/useFetch";
+import { useScreen } from "src/commons/hooks/useScreen";
 import { details } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
 import { exchangeADAToUSD, formatADAFull, getShortWallet } from "src/commons/utils/helper";
-import { RootState } from "src/stores/types";
-import CardAddress from "src/components/share/CardAddress";
 import TokenAutocomplete from "src/components/TokenAutocomplete";
 import ADAicon from "src/components/commons/ADAIcon";
-import { useScreen } from "src/commons/hooks/useScreen";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import FormNowMessage from "src/components/commons/FormNowMessage";
+import CardAddress from "src/components/share/CardAddress";
+import { RootState } from "src/stores/types";
+import VerifyScript from "src/components/VerifyScript";
+import { Uppercase } from "src/components/commons/CustomText/styles";
 
 import {
+  BannerSuccess,
+  CardContainer,
   GridContainer,
   GridItem,
   Pool,
   RedirectButton,
   StyledAAmount,
-  BannerSuccess,
+  StyledVerifyButton,
   TimeDuration,
-  CardContainer
+  VerifyScriptContainer,
+  WrapButtonExtra
 } from "./styles";
 
 interface Props {
@@ -113,15 +117,27 @@ const AddressOverview: React.FC<Props> = ({ data, loading, lastUpdated }) => {
 
   return (
     <CardContainer
-      title={<VerifyScript verified={!!data?.verifiedContract} setShowBanner={setShowBanner} />}
+      title={
+        <VerifyScriptContainer id="VerifyScriptContainer">
+          <Box>{t("head.page.constactDetails")}</Box>
+          {data?.verifiedContract ? (
+            <StyledVerifyButton>
+              <Uppercase> {t("common.verifiedScript") + " "}</Uppercase>
+            </StyledVerifyButton>
+          ) : null}
+        </VerifyScriptContainer>
+      }
       extra={
-        <RedirectButton
-          width={isMobile ? "100%" : "auto"}
-          component={Button}
-          onClick={() => history.push(details.address(data?.address))}
-        >
-          {t("common.viewAddressDetail")}
-        </RedirectButton>
+        <WrapButtonExtra>
+          {!data?.verifiedContract ? <VerifyScript setShowBanner={setShowBanner} /> : null}
+          <RedirectButton
+            width={isMobile ? "100%" : "auto"}
+            component={Button}
+            onClick={() => history.push(details.address(data?.address))}
+          >
+            {t("common.viewAddressDetail")}
+          </RedirectButton>
+        </WrapButtonExtra>
       }
     >
       {showBanner && <BannerSuccess>{t("message.contracctVarified")}</BannerSuccess>}

diff --git a/src/components/ContractDetail/AddressOverview/styles.ts b/src/components/ContractDetail/AddressOverview/styles.ts
@@ -65,16 +65,16 @@ export const RedirectButton = styled(Box)(({ theme }) => ({
   padding: `${theme.spacing(1)} ${theme.spacing(2)} `,
   ":hover": {
     backgroundColor: theme.isDark ? theme.palette.primary.dark : alpha(theme.palette.secondary.main, 0.8)
-  }
+  },
+  borderRadius: 8
 }));
 
 export const BannerSuccess = styled(Box)`
   font-weight: 500;
   font-size: 18px;
   line-height: 21px;
   text-align: center;
-  color: ${(props) => props.theme.palette.success[800]};
-  background: ${(props) => (props.theme.isDark ? "transparent" : props.theme.palette.success[100])};
+  color: ${(props) => (props.theme.isDark ? props.theme.palette.success[700] : props.theme.palette.success[800])};
   border: ${(props) => props.theme.palette.primary[200]};
   border-radius: 10px;
   width: 100%;
@@ -100,3 +100,33 @@ export const CardContainer = styled(Card)`
     }
   }
 `;
+
+export const WrapButtonExtra = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: 10,
+  [theme.breakpoints.down("sm")]: {
+    flexDirection: "column",
+    width: "100%"
+  }
+}));
+
+export const StyledVerifyButton = styled(Box)(({ theme }) => ({
+  color: theme.palette.success[800],
+  background: theme.palette.success[100],
+  border: `2px solid ${theme.isDark ? theme.palette.warning[800] : theme.palette.success.main}`,
+  cursor: "pointer",
+  borderRadius: 4,
+  padding: "8px 14px",
+  fontWeight: 700,
+  lineHeight: 1.2,
+  fontSize: "14px",
+  height: "34px",
+  boxSizing: "border-box"
+}));
+
+export const VerifyScriptContainer = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 10px;
+`;
diff --git a/src/components/ContractDiagrams/styles.ts b/src/components/ContractDiagrams/styles.ts
@@ -12,7 +12,7 @@ export const ContractDiagramsContainer = styled(Box)<{ isTxPageView?: boolean }>
 
 export const TxHash = styled(Box)`
   text-align: left;
-  background-color: ${({ theme }) => (theme.isDark ? "transparent" : theme.palette.primary[200])};
+  background-color: ${({ theme }) => (theme.isDark ? theme.palette.secondary[100] : theme.palette.primary[200])};
   border-radius: 8px;
   padding: 16px 20px;
 `;

diff --git a/src/components/Contracts/modals/styles.ts b/src/components/Contracts/modals/styles.ts
@@ -7,12 +7,15 @@ export const ModalContent = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-height: 80vh;
+  max-height: 70vh;
   padding: 4px;
   overflow-y: auto;
   &::-webkit-scrollbar {
     width: 5px;
   }
+  ${({ theme }) => theme.breakpoints.down("sm")} {
+    max-height: 70vh;
+  }
   &::-webkit-scrollbar-track {
     background: transparent;
   }

diff --git a/src/components/DelegationDetail/DelegationDetailChart/index.tsx b/src/components/DelegationDetail/DelegationDetailChart/index.tsx
@@ -1,15 +1,16 @@
-import { Box, Grid, Skeleton, styled, useTheme } from "@mui/material";
+import { Box, Grid, styled, useTheme } from "@mui/material";
 import BigNumber from "bignumber.js";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
 import { useSelector } from "react-redux";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
 
-import { formatADAFull, formatPrice, numberWithCommas } from "src/commons/utils/helper";
-import { HighestIconComponent, LowestIconComponent } from "src/commons/resources";
 import useFetch from "src/commons/hooks/useFetch";
+import { HighestIconComponent, LowestIconComponent } from "src/commons/resources";
 import { API } from "src/commons/utils/api";
+import { formatADAFull, formatPrice, numberWithCommas } from "src/commons/utils/helper";
 import CustomIcon from "src/components/commons/CustomIcon";
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 import { TooltipBody } from "src/components/commons/Layout/styles";
 
 import {
@@ -196,6 +197,6 @@ const DelegationDetailChart: React.FC<DelegationDetailChartProps> = ({ poolId })
 
 export default DelegationDetailChart;
 
-const SkeletonUI = styled(Skeleton)(() => ({
+const SkeletonUI = styled(CommonSkeleton)(() => ({
   borderRadius: 10
 }));
diff --git a/src/components/DelegationDetail/DelegationDetailInfo/index.tsx b/src/components/DelegationDetail/DelegationDetailInfo/index.tsx
@@ -1,9 +1,10 @@
-import { Box, Skeleton, useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { HiArrowLongLeft } from "react-icons/hi2";
 import { Link, useHistory } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 
+import { useScreen } from "src/commons/hooks/useScreen";
 import {
   CalendarIconComponent,
   DelegatorIconComponent,
@@ -15,13 +16,13 @@ import {
 } from "src/commons/resources";
 import { details } from "src/commons/routers";
 import { formatADAFull, formatDateTimeLocal, formatPercent, getShortWallet } from "src/commons/utils/helper";
+import ADAicon from "src/components/commons/ADAIcon";
 import BookmarkButton from "src/components/commons/BookmarkIcon";
 import CopyButton from "src/components/commons/CopyButton";
 import CustomIcon from "src/components/commons/CustomIcon";
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import DropdownDetail from "src/components/commons/DropdownDetail";
-import ADAicon from "src/components/commons/ADAIcon";
-import { useScreen } from "src/commons/hooks/useScreen";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 
 import {
@@ -78,7 +79,7 @@ const DelegationDetailInfo: React.FC<IDelegationDetailInfo> = ({ data, loading,
           <PoolIdSkeleton variant="rectangular" />
         </PoolId>
         <Box borderRadius={10} overflow="hidden">
-          <Skeleton variant="rectangular" height={250} width="100%" />
+          <CommonSkeleton variant="rectangular" height={250} width="100%" />
         </Box>
       </HeaderDetailContainer>
     );

diff --git a/src/components/DelegationDetail/DelegationDetailInfo/styles.ts b/src/components/DelegationDetail/DelegationDetailInfo/styles.ts
@@ -1,4 +1,6 @@
-import { Box, Button, Grid, LinearProgress, Skeleton, styled } from "@mui/material";
+import { Box, Button, Grid, LinearProgress, styled } from "@mui/material";
+
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 
 export const HeaderDetailContainer = styled(Box)(() => ({
   textAlign: "left",
@@ -34,7 +36,7 @@ export const HeaderTitle = styled("h2")`
   white-space: nowrap;
 `;
 
-export const HeaderTitleSkeleton = styled(Skeleton)`
+export const HeaderTitleSkeleton = styled(CommonSkeleton)`
   height: 1em;
   width: 200px;
   max-width: 100%;
@@ -48,7 +50,7 @@ export const PoolId = styled("p")`
   margin-bottom: 20px;
 `;
 
-export const PoolIdSkeleton = styled(Skeleton)`
+export const PoolIdSkeleton = styled(CommonSkeleton)`
   height: 1em;
   width: 50%;
   border-radius: 4px;

diff --git a/src/components/DelegationDetail/DelegationDetailOverview/index.tsx b/src/components/DelegationDetail/DelegationDetailOverview/index.tsx
@@ -1,10 +1,11 @@
-import { Box, Grid, Skeleton } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
 import { formatADAFull, formatPercent, numberWithCommas } from "src/commons/utils/helper";
-import CustomTooltip from "src/components/commons/CustomTooltip";
 import ADAicon from "src/components/commons/ADAIcon";
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
+import CustomTooltip from "src/components/commons/CustomTooltip";
 
 import { Item, StyledContainer, Title, Value } from "./styles";
 
@@ -60,7 +61,7 @@ const DelegationDetailOverview: React.FC<IDelegationDetailOverview> = ({ data, l
             return (
               <Grid item xs={24} sm={12} md={8} key={ii} xl={6}>
                 <Box borderRadius={10} overflow="hidden">
-                  <Skeleton variant="rectangular" height={115} />
+                  <CommonSkeleton variant="rectangular" height={115} />
                 </Box>
               </Grid>
             );

diff --git a/src/components/DelegationPool/DelegationOverview/styles.ts b/src/components/DelegationPool/DelegationOverview/styles.ts
@@ -1,9 +1,10 @@
-import { Box, LinearProgress, Skeleton, alpha, styled } from "@mui/material";
+import { Box, LinearProgress, alpha, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
 import CustomIcon from "src/components/commons/CustomIcon";
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 
-export const StyledSkeleton = styled(Skeleton)`
+export const StyledSkeleton = styled(CommonSkeleton)`
   border-radius: var(--border-radius);
   min-height: 150px;
 `;

diff --git a/src/components/Home/LatestStories/index.tsx b/src/components/Home/LatestStories/index.tsx
@@ -1,16 +1,17 @@
-import { Box, BoxProps, Skeleton } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Settings } from "react-slick";
 
-import ViewAllButtonExternal from "src/components/commons/ViewAllButtonExternal";
+import useFetch from "src/commons/hooks/useFetch";
 import { CalenderPaleIcon, SliderRight } from "src/commons/resources";
 import { API } from "src/commons/utils/api";
-import useFetch from "src/commons/hooks/useFetch";
-import { formatDateTime, getHostname } from "src/commons/utils/helper";
 import { CARDANO_NEWS_URL } from "src/commons/utils/constants";
-import breakpoints from "src/themes/breakpoints";
+import { formatDateTime, getHostname } from "src/commons/utils/helper";
 import CustomTooltip from "src/components/commons/CustomTooltip";
+import ViewAllButtonExternal from "src/components/commons/ViewAllButtonExternal";
+import breakpoints from "src/themes/breakpoints";
+import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 
 import {
   Author,
@@ -23,13 +24,13 @@ import {
   ItemTitle,
   LatestStoriesContainer,
   NextSwiper,
+  PrevSwiper,
   ResourceHref,
+  StyledSlider,
   Time,
   TimeIcon,
   Title,
-  WrapHeader,
-  StyledSlider,
-  PrevSwiper
+  WrapHeader
 } from "./style";
 
 declare interface SlickArrowProps extends BoxProps {
@@ -142,12 +143,12 @@ const LatestStories = () => {
         {(loading || !data.length) &&
           new Array(4).fill(0).map((_, index) => (
             <Item key={index}>
-              <Box component={Skeleton} variant="rectangular" borderRadius={2} height={132} />
-              <Box component={Skeleton} variant="rectangular" borderRadius={2} height={15} mt={1} width="70%" />
-              <Box component={Skeleton} variant="rectangular" borderRadius={2} height={15} mt={1} width="80%" />
-              <Box component={Skeleton} variant="rectangular" borderRadius={2} height={80} mt={1} />
+              <Box component={CommonSkeleton} variant="rectangular" borderRadius={2} height={132} />
+              <Box component={CommonSkeleton} variant="rectangular" borderRadius={2} height={15} mt={1} width="70%" />
+              <Box component={CommonSkeleton} variant="rectangular" borderRadius={2} height={15} mt={1} width="80%" />
+              <Box component={CommonSkeleton} variant="rectangular" borderRadius={2} height={80} mt={1} />
               <FooterCard>
-                <Box component={Skeleton} variant="rectangular" borderRadius={2} height={20} width="60%" />
+                <Box component={CommonSkeleton} variant="rectangular" borderRadius={2} height={20} width="60%" />
               </FooterCard>
             </Item>
           ))}