fix(ui): design feedback ui tweaks (#784)

- Adjusted padding and border radius on sidebar container - Removed divider line between tiles and start mining button - Adjusted spacing on mining stat tiles to make them tighter - Adjusted large sidebar text to blend it in to the background more and moved it closer to the edge - Added `toLocaleString` to ruler numbers so they have a comma ![CleanShot 2024-10-09 at 17 32 55](https://github.com/user-attachments/assets/486ca684-e0cb-4347-8e1c-028ae05c4029)
tari-project · Oct 9, 2024 · 70e44d4 · 70e44d4
1 parent 6b09f21
commit 70e44d4
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 31 deletions.
diff --git a/src/components/elements/inputs/Select.styles.ts b/src/components/elements/inputs/Select.styles.ts
@@ -53,21 +53,29 @@ export const Options = styled.div<{ $open?: boolean; $isBordered?: boolean }>`
     z-index: 10;
 `;
 
-export const SelectedOption = styled.div<{ $isBordered?: boolean }>`
+export const SelectedOption = styled.div<{ $isBordered?: boolean; $forceHeight?: number }>`
     color: ${({ theme }) => theme.palette.text.primary};
+
     display: flex;
     align-items: center;
     gap: 5px;
 
     font-size: ${({ $isBordered }) => ($isBordered ? '14px' : '18px')};
     font-weight: 500;
-    height: 36px;
+
     width: 100%;
     letter-spacing: -0.2px;
+
     img {
         width: 14px;
         display: flex;
     }
+
+    ${({ $forceHeight }) =>
+        $forceHeight &&
+        css`
+            height: ${$forceHeight}px;
+        `}
 `;
 
 export const OptionLabelWrapper = styled.div`

diff --git a/src/components/elements/inputs/Select.tsx b/src/components/elements/inputs/Select.tsx
@@ -30,9 +30,18 @@ interface Props {
     variant?: SelectVariant;
     disabled?: boolean;
     loading?: boolean;
+    forceHeight?: number;
 }
 
-export function Select({ options, selectedValue, disabled, loading, onChange, variant = 'primary' }: Props) {
+export function Select({
+    options,
+    selectedValue,
+    disabled,
+    loading,
+    onChange,
+    variant = 'primary',
+    forceHeight,
+}: Props) {
     const [isOpen, setIsOpen] = useState(false);
     const isBordered = variant === 'bordered';
 
@@ -72,7 +81,7 @@ export function Select({ options, selectedValue, disabled, loading, onChange, va
                 $disabled={disabled}
                 $isBordered={isBordered}
             >
-                <SelectedOption $isBordered={isBordered}>
+                <SelectedOption $isBordered={isBordered} $forceHeight={forceHeight}>
                     <Typography>{selectedLabel}</Typography>
                     {selectedIcon ? <img src={selectedIcon} alt={`Selected option: ${selectedLabel} icon `} /> : null}
                 </SelectedOption>

diff --git a/src/containers/Dashboard/MiningView/components/BlockHeightAccent.styles.ts b/src/containers/Dashboard/MiningView/components/BlockHeightAccent.styles.ts
@@ -9,6 +9,9 @@ export const AccentWrapper = styled(m.div)`
     align-items: center;
     justify-content: center;
     display: flex;
+
+    top: 0;
+    right: -40px;
 `;
 
 export const AccentText = styled(m.div)`
@@ -29,5 +32,9 @@ export const SpacedNum = styled(m.span)<{ $isDec?: boolean }>`
     position: relative;
     align-items: flex-end;
     justify-content: center;
+
+    opacity: 0.6;
+    mix-blend-mode: multiply;
+
     width: ${({ $isDec }) => ($isDec ? 'min-content' : '1ch')};
 `;
diff --git a/src/containers/Dashboard/MiningView/components/BlockHeightAccent.tsx b/src/containers/Dashboard/MiningView/components/BlockHeightAccent.tsx
@@ -9,7 +9,7 @@ import { useBlockchainVisualisationStore } from '@app/store/useBlockchainVisuali
 
 export function BlockHeightAccent() {
     const height = useBlockchainVisualisationStore((s) => s.displayBlockHeight);
-    const heightString = height?.toLocaleString();
+    const heightString = height?.toString();
 
     const [windowHeight, setWindowHeight] = useState(window.innerHeight - 80);
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -42,7 +42,7 @@ export function BlockHeightAccent() {
     }, []);
 
     return (
-        <AccentWrapper layoutId="accent-wrapper" style={{ width: deferredFontSize, top: 0, right: `-25px` }}>
+        <AccentWrapper layoutId="accent-wrapper" style={{ width: deferredFontSize }}>
             <AnimatePresence>
                 {height && height > 0 ? (
                     <LayoutGroup id="accent-content">

diff --git a/src/containers/Dashboard/MiningView/components/Ruler.styles.ts b/src/containers/Dashboard/MiningView/components/Ruler.styles.ts
@@ -53,8 +53,9 @@ export const RulerMark = styled(m.div)<{ $opacity?: number }>`
         content: attr(data-before);
         position: absolute;
         transform: translateY(-50%);
-        right: 15px;
+        right: 24px;
     }
+
     &:after {
         content: '';
         width: 10px;

diff --git a/src/containers/Dashboard/MiningView/components/Ruler.tsx b/src/containers/Dashboard/MiningView/components/Ruler.tsx
@@ -30,6 +30,7 @@ export function Ruler() {
             </MarkGroup>
         );
     });
+
     const bottomMarkSegments = rulerSegments.map((segment, i) => {
         const diff = height && height > 50 ? 10 : 5;
         const renderNumber = heightSegment && heightSegment > diff;
@@ -41,11 +42,13 @@ export function Ruler() {
         const prevSegment = (heightSegment || 0) + diff;
         const groupOpacity = (rulerSegments.length * 1.25 - segment) * 0.075;
         const numberMark =
-            heightSegment && heightSegment > diff && heightSegment != prevSegment ? heightSegment?.toString() : '';
+            heightSegment && heightSegment > diff && heightSegment != prevSegment
+                ? heightSegment?.toLocaleString()
+                : '';
         return (
             <MarkGroup key={`row-${segment}-${i}`} layout style={{ opacity: groupOpacity }}>
                 <RulerMarkGroup>
-                    <RulerMark $opacity={1} data-before={numberMark}></RulerMark>
+                    <RulerMark $opacity={1} data-before={numberMark} />
                     <RulerMark />
                     <RulerMark />
                     <RulerMark />

diff --git a/src/containers/Settings/components/LanguageDropdown.tsx b/src/containers/Settings/components/LanguageDropdown.tsx
@@ -30,6 +30,7 @@ export default function LanguageDropdown() {
                 onChange={(value) => setApplicationLanguage(value as Language)}
                 selectedValue={resolveI18nLanguage(i18n.language)}
                 variant="bordered"
+                forceHeight={36}
             />
         </Wrapper>
     );

diff --git a/src/containers/SideBar/Miner/components/ModeSelect.tsx b/src/containers/SideBar/Miner/components/ModeSelect.tsx
@@ -44,6 +44,7 @@ function ModeSelect() {
                         { label: 'ECO', value: 'Eco', iconSrc: eco },
                         { label: 'Ludicrous', value: 'Ludicrous', iconSrc: fire },
                     ]}
+                    forceHeight={21}
                 />
             </ModeSelectWrapper>
         </TileItem>

diff --git a/src/containers/SideBar/Miner/styles.ts b/src/containers/SideBar/Miner/styles.ts
@@ -9,19 +9,19 @@ export const MinerContainer = styled(m.div)`
 `;
 
 export const TileItem = styled(m.div)`
-    height: 65px;
-    width: 155px;
+    height: 61px;
+    width: 161px;
     flex-shrink: 0;
     flex-grow: 0;
     padding: 10px;
     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);
-    gap: 6px;
-    display: flex;
 
+    display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 3px;
 
     color: ${({ theme }) => theme.palette.text.secondary};
     font-family: Poppins, sans-serif;
@@ -55,5 +55,5 @@ export const TileContainer = styled(m.div)`
 export const ModeSelectWrapper = styled.div`
     position: relative;
     display: flex;
-    height: 100%;
+    height: 21px;
 `;
diff --git a/src/containers/SideBar/SideBar.tsx b/src/containers/SideBar/SideBar.tsx
@@ -1,23 +1,21 @@
 import Miner from './Miner/Miner';
 import Wallet from './components/Wallet/Wallet.tsx';
 import Heading from './components/Heading';
-import { Bottom, Scroll, SideBarContainer, Top } from './styles';
+import { Bottom, Scroll, SideBarContainer, SidebarTop, Top } from './styles';
 
 import MiningButton from '@app/containers/Dashboard/MiningView/components/MiningButton.tsx';
 import AirdropGiftTracker from '@app/containers/Airdrop/AirdropGiftTracker/AirdropGiftTracker';
-import { Divider } from '@app/components/elements/Divider.tsx';
 import LostConnectionAlert from './components/LostConnectionAlert';
 
 function SideBar() {
     return (
         <SideBarContainer>
-            <Top style={{ padding: '0 16px 12px', gap: '20px' }}>
+            <SidebarTop>
                 <Heading />
                 <MiningButton />
                 <LostConnectionAlert />
-            </Top>
-            <Divider />
-            <Scroll style={{ padding: '12px 16px 16px' }}>
+            </SidebarTop>
+            <Scroll>
                 <Top>
                     <Miner />
                 </Top>

diff --git a/src/containers/SideBar/components/Wallet/Wallet.styles.ts b/src/containers/SideBar/components/Wallet/Wallet.styles.ts
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { IconButton } from '@app/components/elements/Button';
 import cardBg from '../../../../assets/images/wallet-bg.png';
 import { ButtonBase } from '@app/components/elements/buttons/ButtonBase.tsx';
-import { sidebarWidth } from '@app/theme/styles.ts';
 
 // Wallet
 export const WalletContainer = styled(m.div)`
@@ -17,9 +16,9 @@ export const WalletContainer = styled(m.div)`
     padding: 10px;
     border-radius: 20px;
     position: absolute;
-    bottom: 16px;
-    left: 16px;
-    width: calc(${sidebarWidth} - 32px);
+    bottom: 12px;
+    left: 10px;
+    width: 328px;
     box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.3);
     max-height: 508px;
     min-height: 178px;
@@ -63,7 +62,7 @@ export const ShowHistoryButton = styled(ButtonBase).attrs({
     align-self: flex-end;
 `;
 
-export const ScrollMask = styled.div`
+export const ScrollMask = styled(m.div)`
     position: absolute;
     background: linear-gradient(to top, #000 20%, rgba(9, 11, 12, 0.01));
     bottom: 0;
@@ -73,6 +72,7 @@ export const ScrollMask = styled.div`
     z-index: 1;
     opacity: 0.7;
 `;
+
 export const HistoryContainer = styled(m.div)`
     display: flex;
     flex-direction: column;

diff --git a/src/containers/SideBar/components/Wallet/Wallet.tsx b/src/containers/SideBar/components/Wallet/Wallet.tsx
@@ -29,7 +29,7 @@ export default function Wallet() {
     const displayValue = balance === null ? '-' : showBalance ? formatted : '*****';
 
     const balanceMarkup = (
-        <WalletBalanceContainer layout>
+        <WalletBalanceContainer layout="position">
             <Stack direction="row" alignItems="center">
                 <Typography variant="span" style={{ fontSize: '15px' }}>
                     {t('wallet-balance')}
@@ -50,7 +50,7 @@ export default function Wallet() {
 
     return (
         <WalletContainer
-            layout
+            layout="size"
             style={{ height: showHistory ? 'auto' : 178 }}
             transition={{ duration: 0.1, ease: 'linear' }}
         >
@@ -60,8 +60,14 @@ export default function Wallet() {
                 </ShowHistoryButton>
             ) : null}
             {balanceMarkup}
-            <AnimatePresence mode="wait">{showHistory ? <History /> : null}</AnimatePresence>
-            <ScrollMask />
+            <AnimatePresence mode="wait">
+                {showHistory ? (
+                    <>
+                        <History />
+                        <ScrollMask initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
+                    </>
+                ) : null}
+            </AnimatePresence>
         </WalletContainer>
     );
 }
diff --git a/src/containers/SideBar/styles.ts b/src/containers/SideBar/styles.ts
@@ -11,7 +11,7 @@ export const SideBarContainer = styled(m.div)`
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.15);
-    border-radius: ${({ theme }) => theme.shape.borderRadius.app};
+    border-radius: 20px;
     background: ${({ theme }) => theme.palette.background.paper};
     position: relative;
     height: 100%;
@@ -26,11 +26,22 @@ export const Scroll = styled(m.div)`
     overflow-y: auto;
     gap: 8px;
     height: 100%;
+    padding: 0px 10px 12px 10px;
 `;
+
 export const Top = styled(m.div)`
     display: flex;
     flex-direction: column;
+    width: 100%;
+`;
+
+export const SidebarTop = styled('div')`
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px 10px 10px;
+    gap: 20px;
 `;
+
 export const Bottom = styled(m.div)`
     display: flex;
     flex-direction: column;