fix(ui): more ui polish based on design feedback (#826)

This PR contains a few minor UI updates to add polish based on design feedback. - Adjust font and padding on the sidebar Miner tiles ![CleanShot 2024-10-11 at 18 44 42](https://github.com/user-attachments/assets/ef8b3b3f-380c-4418-9ba7-a83b7b59ad21) - Fix line-height issues on Airdrop logged in state ![CleanShot 2024-10-11 at 18 58 23](https://github.com/user-attachments/assets/980ca553-faa3-4fff-8719-0723d4da5ccb) - Shrink sidebar elements so they dont overlap as much on short viewport heights ![CleanShot 2024-10-11 at 18 59 23](https://github.com/user-attachments/assets/528c1e1f-577f-4fba-993b-a514435d67a5) - Updated bg color on history items to white 0.7 ![CleanShot 2024-10-11 at 19 00 28](https://github.com/user-attachments/assets/739a56bb-2f40-4e9a-b677-ee73caf52106)
tari-project · Oct 11, 2024 · a8085bd · a8085bd
1 parent 515d38d
commit a8085bd
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 34 deletions.
diff --git a/src/components/CharSpinner/CharSpinner.styles.ts b/src/components/CharSpinner/CharSpinner.styles.ts
@@ -59,6 +59,7 @@ export const Character = styled(m.div)<Props>`
     width: min-content;
     letter-spacing: -3px;
     z-index: 1;
+
     // for the unit & decimal
 
     ${({ $decimal, $unit }) =>
@@ -68,4 +69,10 @@ export const Character = styled(m.div)<Props>`
             margin-left: 1px;
             margin-right: -1px;
         `}
+
+    ${({ $unit }) =>
+        $unit &&
+        css`
+            margin-top: 3px;
+        `}
 `;
diff --git a/src/components/CharSpinner/CharSpinner.tsx b/src/components/CharSpinner/CharSpinner.tsx
@@ -60,7 +60,6 @@ export default function CharSpinner({ value, variant = 'large', fontSize }: Char
                             layout-id={`${i}-${char}`}
                             $letterWidth={letterWidth}
                             $fontSize={fontSize - 8}
-                            style={{ marginTop: '4px' }}
                         >
                             {char}
                         </Character>

diff --git a/src/containers/Airdrop/AirdropGiftTracker/components/Gems/styles.ts b/src/containers/Airdrop/AirdropGiftTracker/components/Gems/styles.ts
@@ -18,12 +18,16 @@ export const Number = styled('div')`
     color: #000;
     font-size: 18px;
     font-weight: 600;
+    line-height: 100%;
+
+    font-variant-numeric: tabular-nums;
 `;
 
 export const Label = styled('div')`
     color: #797979;
     font-size: 12px;
     font-weight: 500;
+    line-height: 100%;
 `;
 
 export const GemImage = styled('img')`

diff --git a/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Invite/styles.ts b/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Invite/styles.ts
@@ -50,13 +50,15 @@ export const Title = styled('div')`
     text-align: center;
     font-size: 12px;
     font-weight: 600;
+    line-height: 120%;
 `;
 
 export const Text = styled('div')`
     color: rgba(255, 255, 255, 0.5);
     text-align: center;
     font-size: 11px;
     font-weight: 600;
+    line-height: 120%;
 
     span {
         color: #fff;

diff --git a/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/styles.ts b/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/styles.ts
@@ -5,6 +5,10 @@ export const Wrapper = styled('div')`
     flex-direction: column;
     gap: 20px;
     width: 100%;
+
+    @media (max-height: 670px) {
+        gap: 10px;
+    }
 `;
 
 export const UserRow = styled('div')`

diff --git a/src/containers/Airdrop/AirdropGiftTracker/styles.ts b/src/containers/Airdrop/AirdropGiftTracker/styles.ts
@@ -15,6 +15,10 @@ export const Wrapper = styled(m.div)`
 
     position: relative;
     height: auto;
+
+    @media (max-height: 670px) {
+        padding: 15px 20px 15px 20px;
+    }
 `;
 
 export const TitleWrapper = styled('div')`
@@ -28,4 +32,5 @@ export const Title = styled('div')`
     color: #797979;
     font-size: 12px;
     font-weight: 500;
+    line-height: 120%;
 `;
diff --git a/src/containers/Dashboard/MiningView/components/MiningButton.styles.ts b/src/containers/Dashboard/MiningView/components/MiningButton.styles.ts
@@ -13,7 +13,7 @@ export const spin = keyframes`
 export const StyledIcon = styled(ImSpinner3)`
     animation: ${spin} 2s infinite;
     animation-timing-function: cubic-bezier(0.76, 0.89, 0.95, 0.85);
-    height: 16px;
+    height: 18px;
 `;
 
 export const IconWrapper = styled.div`

diff --git a/src/containers/SideBar/Miner/components/ExpandableTile.tsx b/src/containers/SideBar/Miner/components/ExpandableTile.tsx
@@ -77,22 +77,7 @@ export function ExpandableTile({
                 )}
 
                 {!expanded &&
-                    (isLoading ? (
-                        <StyledIcon />
-                    ) : (
-                        <StatWrapper $useLowerCase={useLowerCase}>
-                            <Typography
-                                variant="h5"
-                                title={stats}
-                                style={{
-                                    textTransform: useLowerCase ? 'lowercase' : 'inherit',
-                                    lineHeight: '1.02',
-                                }}
-                            >
-                                {stats}
-                            </Typography>
-                        </StatWrapper>
-                    ))}
+                    (isLoading ? <StyledIcon /> : <StatWrapper $useLowerCase={useLowerCase}>{stats}</StatWrapper>)}
             </AnimatePresence>
         </TileItem>
     );

diff --git a/src/containers/SideBar/Miner/components/Tile.tsx b/src/containers/SideBar/Miner/components/Tile.tsx
@@ -34,16 +34,8 @@ function Tile({ title, stats, chipValue = 0, unit, isLoading = false, useLowerCa
                 <StyledIcon />
             ) : (
                 <StatWrapper $useLowerCase={useLowerCase} layout>
-                    <Typography
-                        variant="h5"
-                        title={stats}
-                        style={{ textTransform: useLowerCase ? 'lowercase' : 'inherit', lineHeight: '1.02' }}
-                    >
-                        {truncateString(stats, 8)}
-                    </Typography>
-                    <Unit>
-                        <Typography>{unit}</Typography>
-                    </Unit>
+                    {truncateString(stats, 8)}
+                    <Unit>{unit}</Unit>
                 </StatWrapper>
             )}
         </TileItem>

diff --git a/src/containers/SideBar/Miner/styles.ts b/src/containers/SideBar/Miner/styles.ts
@@ -13,7 +13,8 @@ export const TileItem = styled(m.div)`
     width: 161px;
     flex-shrink: 0;
     flex-grow: 0;
-    padding: 10px;
+    padding: 9px 15px;
+
     background-color: ${({ theme }) => theme.palette.background.paper};
     border-radius: ${({ theme }) => theme.shape.borderRadius.app};
     box-shadow: 2px 8px 8px 0 rgba(0, 0, 0, 0.04);
@@ -39,11 +40,23 @@ export const StatWrapper = styled(m.div)<{ $useLowerCase?: boolean }>`
     justify-content: space-between;
     align-items: baseline;
     color: ${({ theme }) => theme.palette.text.primary};
-    min-height: 16px;
+    min-height: 18px;
+
+    color: #000;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    line-height: 100%;
+    text-transform: ${({ $useLowerCase }) => ($useLowerCase ? 'lowercase' : 'uppercase')};
 `;
+
 export const Unit = styled(m.div)`
-    line-height: 1;
+    color: #000;
     font-size: 10px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 100%;
 `;
 
 export const TileContainer = styled(m.div)`

diff --git a/src/containers/SideBar/components/Wallet/History.tsx b/src/containers/SideBar/components/Wallet/History.tsx
@@ -5,6 +5,7 @@ import { useWalletStore } from '@app/store/useWalletStore';
 import { useEffect } from 'react';
 import { CircularProgress } from '@app/components/elements/CircularProgress';
 import { useTranslation } from 'react-i18next';
+import { ListLabel } from './HistoryItem.styles';
 
 const container = {
     hidden: { opacity: 0, height: 0 },
@@ -27,7 +28,7 @@ export default function History() {
     return (
         <HistoryContainer initial="hidden" animate="visible" exit="hidden" variants={container}>
             <HistoryPadding>
-                <Typography variant="h6">{t('recent-wins')}</Typography>
+                <ListLabel>{t('recent-wins')}</ListLabel>
                 {isTransactionLoading ? (
                     <CircularProgress />
                 ) : (

diff --git a/src/containers/SideBar/components/Wallet/HistoryItem.styles.ts b/src/containers/SideBar/components/Wallet/HistoryItem.styles.ts
@@ -10,8 +10,10 @@ export const Wrapper = styled(m.div)`
     justify-content: space-between;
     align-items: center;
     border-radius: 10px;
-    background: ${({ theme }) => theme.palette.colors.gothic[950]};
-    box-shadow: 0 4px 65px 0 rgba(90, 90, 90, 0.2);
+
+    background: rgba(255, 255, 255, 0.07);
+    box-shadow: 0px 4px 65px 0px rgba(90, 90, 90, 0.2);
+
     flex-shrink: 0;
     flex-grow: 0;
     max-height: 269px;
@@ -67,3 +69,11 @@ export const EarningsWrapper = styled.div`
     font-weight: 600;
     font-size: 16px;
 `;
+
+export const ListLabel = styled.div`
+    color: #fff;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+`;
diff --git a/src/containers/SideBar/components/Wallet/Wallet.styles.ts b/src/containers/SideBar/components/Wallet/Wallet.styles.ts
@@ -25,6 +25,10 @@ export const WalletContainer = styled(m.div)`
     z-index: 2;
     overflow: hidden;
     justify-content: space-between;
+
+    @media (max-height: 670px) {
+        min-height: 140px;
+    }
 `;
 
 export const WalletBalance = styled.div`
@@ -44,6 +48,10 @@ export const WalletBalanceContainer = styled(m.div)`
     color: ${({ theme }) => theme.palette.text.secondary};
     padding: 10px 5px 5px;
     height: 140px;
+
+    @media (max-height: 670px) {
+        height: 90px;
+    }
 `;
 
 export const BalanceVisibilityButton = styled(IconButton)`

diff --git a/src/containers/SideBar/styles.ts b/src/containers/SideBar/styles.ts
@@ -40,6 +40,10 @@ export const SidebarTop = styled('div')`
     flex-direction: column;
     padding: 0 10px 10px 10px;
     gap: 20px;
+
+    @media (max-height: 670px) {
+        gap: 5px;
+    }
 `;
 
 export const Bottom = styled(m.div)`