updates - dark theme swap + governance

packages/yoroi-extension/app/UI/components/Collapsible/Collapsible.tsx

@@ -1,13 +1,13 @@
-import { IconButton } from '@mui/material';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 
-const Accordion: any = styled(MuiAccordion)(() => ({
+const Accordion: any = styled(MuiAccordion)(({ theme }: any) => ({
   '&:not(:last-child)': {
     borderBottom: 0,
   },
@@ -17,7 +17,7 @@ const Accordion: any = styled(MuiAccordion)(() => ({
   '& .MuiAccordionSummary-root': {
     margin: '0px',
     padding: '0px',
-    backgroundColor: 'transparent',
+    backgroundColor: theme.palette.ds.bg_color_max,
     minHeight: '24px',
     height: '24px',
   },
@@ -29,9 +29,10 @@ const AccordionSummary = styled(MuiAccordionSummary)(() => ({
   },
 }));
 
-const AccordionDetails = styled(MuiAccordionDetails)(() => ({
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }: any) => ({
   padding: 0,
   paddingTop: '16px',
+  backgroundColor: theme.palette.ds.bg_color_max,
 }));
 
 type Props = {
@@ -52,9 +53,9 @@ export const Collapsible = ({ title, content }: Props) => {
         aria-controls="panel1d-content"
         id="panel1d-header"
         expandIcon={
-          <IconButton>
+          <IconButtonWrapper>
             <Icon.ChevronDown />
-          </IconButton>
+          </IconButtonWrapper>
         }
       >
         <Typography variant="body1" fontWeight="500">

packages/yoroi-extension/app/UI/components/Input/PasswordInput.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
-import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 
 type StyledInputProps = {
   id: string;
@@ -43,14 +43,14 @@ export const PasswordInput = ({ id, label, onChange, value, error, disabled, hel
         disabled={disabled}
         endAdornment={
           <InputAdornment position="end">
-            <IconButton
+            <IconButtonWrapper
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
               edge="end"
             >
               {!showPassword ? <Icon.VisibilityOff /> : <Icon.VisibilityOn />}
-            </IconButton>
+            </IconButtonWrapper>
           </InputAdornment>
         }
         label={label}

packages/yoroi-extension/app/UI/components/icons/CloseIcon.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-export const CloseIcon = () => {
+export const CloseIcon = ({ fill }: { fill?: string }) => {
   return (
     <svg width="16" height="17" viewBox="0 0 16 17" fill="none">
       <path
         d="M15.7071 2.20711C16.0976 1.81658 16.0976 1.18342 15.7071 0.792893C15.3166 0.402369 14.6834 0.402369 14.2929 0.792893L8 7.08579L1.70711 0.792893C1.31658 0.402369 0.683417 0.402369 0.292893 0.792893C-0.0976311 1.18342 -0.0976311 1.81658 0.292893 2.20711L6.58579 8.5L0.292893 14.7929C-0.0976311 15.1834 -0.0976311 15.8166 0.292893 16.2071C0.683417 16.5976 1.31658 16.5976 1.70711 16.2071L8 9.91421L14.2929 16.2071C14.6834 16.5976 15.3166 16.5976 15.7071 16.2071C16.0976 15.8166 16.0976 15.1834 15.7071 14.7929L9.41421 8.5L15.7071 2.20711Z"
-        fill="#242838"
+        fill={fill ? fill : '#242838'}
       />
     </svg>
   );

packages/yoroi-extension/app/UI/components/index.ts

@@ -1,12 +1,14 @@
+export * from './buttons/CopyButton';
 export * from './Card';
-export * from './Tooltip';
-export * from './Skeleton';
 export * from './Chip';
-export * from './buttons/CopyButton';
+export * from './Collapsible/Collapsible';
+export * from './icons';
+export * from './Input/PasswordInput';
 export * from './Input/SearchInput';
 export * from './Input/TextInput';
-export * from './Input/PasswordInput';
+export * from './Skeleton';
+export * from './Tooltip';
 export * from './TransactionFailed/TransactionFailed';
 export * from './TransactionSubmitted/TransactionSubmitted';
-export * from './Collapsible/Collapsible';
-export * from './icons';
+export * from './wrappers/IconButtonWrapper';
+export * from './wrappers/GradientBgBox';

packages/yoroi-extension/app/UI/components/modals/ModalManager.tsx

@@ -1,16 +1,17 @@
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 import { useModal } from './ModalContext';
 
-const BootstrapDialog: any = styled(Dialog)(({ width, height }: { width: string; height: string }) => ({
+const BootstrapDialog: any = styled(Dialog)(({ theme, width, height }: { width: string; height: string; theme: any }) => ({
   '& .MuiDialogContent-root': {
     padding: '24px',
+    backgroundColor: theme.palette.ds.bg_color_max,
   },
   '& .MuiDialog-root': {
     maxWidth: width,
@@ -29,6 +30,7 @@ const BootstrapDialog: any = styled(Dialog)(({ width, height }: { width: string;
 
 export const ModalManager = () => {
   const { height, width, closeModal, content, title, isOpen } = useModal();
+  const theme = useTheme();
 
   return (
     <BootstrapDialog
@@ -39,23 +41,22 @@ export const ModalManager = () => {
       width={width}
       height={height}
     >
-      <DialogTitle sx={{ textAlign: 'center', p: '24px' }} id={`${title}-dialog-title`}>
-        <Typography variant="body1" fontWeight="500" lineHeight="22px">
+      <DialogTitle sx={{ textAlign: 'center', p: '24px', backgroundColor: 'ds.bg_color_max' }} id={`${title}-dialog-title`}>
+        <Typography variant="body1" fontWeight="500" lineHeight="22px" color="ds.gray_900">
           {title}
         </Typography>
       </DialogTitle>
-      <IconButton
+      <IconButtonWrapper
         aria-label="close"
         onClick={closeModal}
         sx={{
           position: 'absolute',
           right: 18,
           top: 22,
-          color: (theme: any) => theme.palette.ds.gray_500,
         }}
       >
         <Icon.CloseIcon />
-      </IconButton>
+      </IconButtonWrapper>
       <DialogContent>{content}</DialogContent>
     </BootstrapDialog>
   );

packages/yoroi-extension/app/UI/components/wrappers/GradientBgBox.tsx

@@ -0,0 +1,6 @@
+import { styled, Box } from '@mui/material';
+
+// For some reason the garatients are working only in styled components- and not in sx props
+const GradientBgBox = styled(Box)(({ theme, variant }: { theme: any; variant: '1' | '2' | '3' }) => ({
+  backgroundImage: `theme.palette.ds.bg_gradient_${variant}`,
+}));

packages/yoroi-extension/app/UI/components/wrappers/IconButtonWrapper.tsx

@@ -0,0 +1,9 @@
+import { IconButton, styled } from '@mui/material';
+
+export const IconButtonWrapper = styled(IconButton)(({ theme }: any) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));

packages/yoroi-extension/app/UI/features/governace/common/GovernanceVoteingCard.tsx

@@ -27,16 +27,16 @@ const StyledCard: any = styled(Stack)(({ theme, selected, pending, isDrepSelecte
   width: '294px',
   height: '362px',
   borderRadius: '8px',
+  border: `2px solid ${theme.palette.ds?.primary_100}`,
 
-  ...(!selected && {
-    background: !pending && (theme.name === 'light-theme' ? theme.palette.ds?.bg_gradient_1 : theme.palette.ds?.bg_gradient_2),
-    backgroundOrigin: 'border-box',
-    boxShadow: 'inset 0 100vw white',
-    border: '2px solid transparent',
-  }),
+  ...(!selected &&
+    {
+      // backgroundColor: !pending && theme.palette.ds?.primary_100,
+    }),
   ...(selected && {
-    background: !pending && theme.palette.ds.bg_gradient_2,
-    border: 'none',
+    backgroundImage: !pending && theme.palette.ds.bg_gradient_2,
+    border: '2px solid transparent',
+    backgroundOrigin: 'border-box',
     pointerEvents: !isDrepSelected && 'none',
   }),
   cursor: 'pointer',
@@ -45,10 +45,11 @@ const StyledCard: any = styled(Stack)(({ theme, selected, pending, isDrepSelecte
     cursor: 'not-allowed',
   }),
   '&:hover': {
-    background: !pending && theme.palette.ds.bg_gradient_1,
-    backgroundOrigin: 'content-box',
-    boxShadow: 'none',
-    transition: 'all 250ms ease-in-out',
+    backgroundImage: theme.palette.ds.bg_gradient_2,
+    border: '2px solid transparent',
+    backgroundOrigin: 'border-box',
+    // background: !pending && theme.palette.ds.bg_gradient_2,
+    transition: 'opacity 1s ease-in-out',
   },
 }));
 

packages/yoroi-extension/app/UI/features/governace/common/VotingSkeletonCard.tsx

@@ -10,17 +10,26 @@ const StyledCard = styled(Stack)(({ theme }: any) => ({
   width: '294px',
   borderRadius: '8px',
   padding: '16px',
-  backgroundImage: theme.palette.ds?.bg_gradient_1,
-  backgroundOrigin: 'border-box',
-  boxShadow: 'inset 0 100vw white',
-  border: '2px solid transparent',
+  border: `2px solid ${theme.palette.ds?.primary_100}`,
 }));
 export const VotingSkeletonCard = () => {
   return (
     <StyledCard>
-      <Skeleton animation="wave" variant="rounded" width={157} height={180} sx={{ marginBottom: '22px' }} />
-      <Skeleton animation="wave" variant="rounded" width={185} height={22} sx={{ marginBottom: '12px' }} />
-      <Skeleton animation="wave" variant="rounded" width={262} height={88} />
+      <Skeleton
+        animation="wave"
+        variant="rounded"
+        width={157}
+        height={180}
+        sx={{ marginBottom: '22px', backgroundColor: 'ds.gray_100' }}
+      />
+      <Skeleton
+        animation="wave"
+        variant="rounded"
+        width={185}
+        height={22}
+        sx={{ marginBottom: '12px', backgroundColor: 'ds.gray_100' }}
+      />
+      <Skeleton animation="wave" variant="rounded" width={262} height={88} sx={{ backgroundColor: 'ds.gray_100' }} />
     </StyledCard>
   );
 };

packages/yoroi-extension/app/UI/features/governace/useCases/DelagationForm/DelagationForm.tsx

@@ -114,26 +114,26 @@ export const DelagationForm = () => {
   return (
     <Container>
       <Stack>
-        <Typography variant="body2" color="ds.gray_c600" mb="4px">
+        <Typography variant="body2" color="ds.text_gray_low" mb="4px">
           {mapStatus[governanceVote.kind || '']}
         </Typography>
-        <Typography variant="body1" mb="24px">
+        <Typography variant="body1" mb="24px" color="ds.text_gray_medium">
           {mapStatusDescription[governanceVote.kind || '']}
         </Typography>
         <TotalBox>
-          <Typography variant="h4" color="ds.gray_min">
+          <Typography variant="h4" color="ds.white_static">
             {strings.total}
           </Typography>
           <Box textAlign="right">
-            <Typography variant="h4" fontWeight="500" color="ds.gray_cmin">
+            <Typography variant="h4" fontWeight="500" color="ds.white_static">
               {txFee} ADA
             </Typography>
-            <Typography variant="body2" color="ds.gray_c300">
+            <Typography variant="body2" color="ds.white_static" sx={{ opacity: '0.5' }}>
               {String(getFormattedPairingAmount(String(Number(txFee) * 1000000)))}
             </Typography>
           </Box>
         </TotalBox>
-        <Typography variant="body2" color="ds.gray_600" mb="24px">
+        <Typography variant="body2" color="ds.text_gray_low" mb="24px">
           {strings.transactionDetails}
         </Typography>
         <Box mb="40px">
@@ -193,14 +193,14 @@ type OperationInfoProps = {
 const OperationInfo = ({ label, fee }: OperationInfoProps) => {
   return (
     <>
-      <Typography variant="body1" color="ds.text_gray_normal">
+      <Typography variant="body1" color="ds.text_gray_medium">
         {label}
       </Typography>
       <Stack direction="row" justifyContent="space-between">
-        <Typography variant="body1" fontWeight="500">
+        <Typography variant="body1" fontWeight="500" color="ds.text_gray_normal">
           Transaction fee
         </Typography>
-        <Typography variant="body1" color="ds.text_gray_normal">
+        <Typography variant="body1" color="ds.text_gray_max">
           {fee} ADA
         </Typography>
       </Stack>

packages/yoroi-extension/app/UI/features/governace/useCases/SelectGovernanceStatus/GovernanceStatusSelection.tsx

@@ -146,9 +146,9 @@ export const GovernanceStatusSelection = () => {
 
   if (walletAdaBalance !== null && walletAdaBalance === 0) {
     return (
-      <Stack mt="185px" alignItems="center">
+      <Stack alignItems="center" margin="0 auto" mt="185px" maxWidth="500px">
         <NoTransactions />
-        <Typography variant="h3" fontWeight="500" mt="84px">
+        <Typography variant="h3" fontSize="26px" fontWeight="500" mt="32px" textAlign="center" color="ds.text_gray_medium">
           To participate in governance you need to have ADA in your wallet.
         </Typography>
         {/* @ts-ignore */}
@@ -161,10 +161,10 @@ export const GovernanceStatusSelection = () => {
 
   return (
     <Container>
-      <Typography variant="h3" fontWeight="500" mb={2} gutterBottom>
+      <Typography variant="h3" fontWeight="500" mb={2} gutterBottom color="ds.text_gray_medium">
         {pageTitle}
       </Typography>
-      <Typography variant="body1" mb="64px" gutterBottom>
+      <Typography variant="body1" mb="64px" gutterBottom color="ds.text_gray_low">
         {isPendindDrepDelegationTx ? strings.statusPending : pageSubtitle}
       </Typography>
       <Box display="flex" justifyContent="center" gap="24px">
@@ -196,11 +196,11 @@ export const GovernanceStatusSelection = () => {
           </Typography>
         )}
         {governanceStatus.status === 'none' && (
-          <Link href={BECOME_DREP_LINK} target="_blank" rel="noopener" variant="body1" lineHeight="22px">
+          <Link href={BECOME_DREP_LINK} target="_blank" rel="noopener" lineHeight="22px">
             {strings.becomeADrep}
           </Link>
         )}
-        <Link href={LEARN_MORE_LINK} target="_blank" rel="noopener" variant="body1" lineHeight="22px">
+        <Link href={LEARN_MORE_LINK} target="_blank" rel="noopener" lineHeight="22px">
           {strings.learnMore}
         </Link>
       </Stack>