refactor: dashboard modals; some other fixes after review;

Author: KirillKirill

packages/apps/staking/src/assets/styles/color-palette.ts

@@ -29,7 +29,7 @@ export const colorPalette = {
     light: '#FFD54F',
   },
   error: {
-    main: '#FFB300',
+    main: '#fa2a75',
     light: '#F20D5F',
   },
   fog: {

packages/apps/staking/src/components/Amount/index.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
+
+import { formatHmtAmount } from '../../utils/string';
 
 type Props = {
   amount: string | number;
@@ -21,18 +23,13 @@ const Amount: FC<Props> = ({ amount, isConnected, size = 'sm' }) => {
   }
 
   return (
-    <Box display="flex" gap={1.5} alignItems="baseline">
-      <Typography
-        variant="h3"
-        fontWeight={size === 'sm' ? 400 : 600}
-        fontSize={size === 'sm' ? 24 : 48}
-      >
-        {amount}
-      </Typography>
-      <Typography component="span" fontSize={size === 'sm' ? 20 : 34}>
-        HMT
-      </Typography>
-    </Box>
+    <Typography
+      variant="h3"
+      fontWeight={size === 'sm' ? 400 : 600}
+      fontSize={size === 'sm' ? 24 : 48}
+    >
+      {formatHmtAmount(amount)}
+    </Typography>
   );
 };
 

packages/apps/staking/src/components/BalanceCard/index.tsx

@@ -25,7 +25,7 @@ const BalanceCard: FC = () => {
         </CustomTooltip>
         <Box display="flex" flexDirection="column" alignItems="flex-start">
           <Typography variant="body1" color="primary">
-            Wallet Balance
+            Wallet Balance <strong>HMT</strong>
           </Typography>
           <Amount size="lg" amount={tokenBalance} isConnected={isConnected} />
         </Box>

packages/apps/staking/src/components/Header/index.tsx

@@ -52,7 +52,7 @@ const DefaultHeader: FC = () => {
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%',
-          height: 82,
+          height: { xs: 64, md: 82 },
         }}
       >
         <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
@@ -76,19 +76,20 @@ const DefaultHeader: FC = () => {
           alignItems="center"
           gap={2}
         >
-          <NavLink href={import.meta.env.VITE_HEADER_LINK_DASHBOARD}>
-            Staking Overview
-          </NavLink>
+          <NavLink href="/">Staking Overview</NavLink>
           <NavLink href="/kvstore">KV Store</NavLink>
-          <NavLink href={import.meta.env.VITE_HEADER_LINK_DASHBOARD}>
+          <NavLink href="https://dashboard.humanprotocol.org" target="_blank">
             Dashboard
           </NavLink>
-          <NavLink href="https://humanprotocol.org">HUMAN Website</NavLink>
+          <NavLink href="https://humanprotocol.org" target="_blank">
+            HUMAN Website
+          </NavLink>
           <Button
             size="medium"
             variant="outlined"
+            disabled={!isConnected}
             sx={{ height: '100%' }}
-            onClick={() => setStakeModalOpen(true)}
+            onClick={() => isConnected && setStakeModalOpen(true)}
           >
             Stake HMT
           </Button>
@@ -135,6 +136,7 @@ const DefaultHeader: FC = () => {
               <CloseIcon />
             </IconButton>
             {isConnected && <Account />}
+            {!isConnected && <ConnectWallet />}
             <MuiLink
               href={import.meta.env.VITE_HEADER_LINK_DASHBOARD}
               underline="none"

packages/apps/staking/src/components/LockedAmountCard/index.tsx

@@ -27,7 +27,7 @@ const LockedAmountCard: FC = () => {
         </CustomTooltip>
         <Box display="flex" flexDirection="column">
           <Typography variant="body1" color="primary" mb={1}>
-            Locked Amount
+            Locked Amount <strong>HMT</strong>
           </Typography>
           <Amount size="sm" amount={lockedAmount} isConnected={isConnected} />
         </Box>

packages/apps/staking/src/components/ModalState/Error.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { Box, Typography } from '@mui/material';
+
+import { colorPalette } from '../../assets/styles/color-palette';
+import { CloseIcon } from '../../icons';
+
+const ModalError: FC = () => {
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        mb={2}
+        p="3px"
+        color={colorPalette.whiteBackground}
+        bgcolor={colorPalette.error.main}
+        borderRadius={100}
+      >
+        <CloseIcon sx={{ width: 34, height: 34 }} />
+      </Box>
+      <Typography variant="subtitle2" color={colorPalette.error.main}>
+        An error occurred, please try again.
+      </Typography>
+    </>
+  );
+};
+
+export default ModalError;

packages/apps/staking/src/components/ModalState/Loading.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CircularProgress } from '@mui/material';
+
+const ModalLoading: FC = () => {
+  return <CircularProgress size={40} color="primary" />;
+};
+
+export default ModalLoading;

packages/apps/staking/src/components/ModalState/Success.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react';
+import { Box } from '@mui/material';
+
+import { SuccessIcon } from '../../icons';
+import { colorPalette } from '../../assets/styles/color-palette';
+
+const ModalSuccess: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        mb={2}
+        p="3px"
+        color={colorPalette.whiteBackground}
+        bgcolor={colorPalette.success.main}
+        borderRadius={100}
+      >
+        <SuccessIcon sx={{ width: 34, height: 34 }} />
+      </Box>
+      {children}
+    </>
+  );
+};
+
+export default ModalSuccess;

packages/apps/staking/src/components/ModalState/index.tsx

@@ -0,0 +1,5 @@
+import ModalLoading from './Loading';
+import ModalSuccess from './Success';
+import ModalError from './Error';
+
+export { ModalLoading, ModalSuccess, ModalError };

packages/apps/staking/src/components/NetworkStatus/index.tsx

@@ -33,11 +33,10 @@ const NetworkStatus: React.FC = () => {
           }
           label={
             <Typography
-              variant="h6"
+              variant="h3"
               sx={{
                 padding: 0,
                 fontWeight: 400,
-                fontSize: 28,
                 lineHeight: 1.5,
                 color: theme.palette.primary.main,
                 marginLeft: 1,