Merge pull request #70 from novasamatech/feat/new-dashboard

Feat: new dashboard ui

src/components/Icon/IconButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@nextui-org/react';
-import { FootnoteText, Icon } from '@/components';
+import { Icon, LabelText } from '@/components';
 import { IconNames } from './types';
 
 type Props = {
@@ -8,17 +8,21 @@ type Props = {
   className?: string;
   alt?: string;
   text?: string;
-  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
   onClick: () => void;
 };
 
-const IconButton = ({ iconName, onClick, size = 40, className, text = '', color }: Props) => {
+const IconButton = ({ iconName, onClick, size = 40, className, text = '' }: Props) => {
   return (
-    <div className="text-center grid gap-2 justify-items-center">
-      <Button radius="full" isIconOnly color={color} variant="shadow" className="bg-none" onClick={onClick}>
+    <div className="grid">
+      <Button
+        radius="full"
+        variant="shadow"
+        className="bg-white h-full w-full p-1 gap-4 justify-start border border-border-neutral shadow-button"
+        onClick={onClick}
+      >
         <Icon name={iconName} size={size} className={className} alt={text} />
+        <LabelText as="span">{text}</LabelText>
       </Button>
-      <FootnoteText as="span">{text}</FootnoteText>
     </div>
   );
 };

src/components/Plate/CreatedGiftPlate.tsx

@@ -10,8 +10,8 @@ const CreatedGiftPlate = () => {
   if (!isGiftsInfo) return;
 
   return (
-    <Plate className="w-full rounded-xl mb-2 active:bg-bg-item-pressed">
-      <Link to={Paths.GIFTS} className="w-full grid grid-cols-[auto,1fr,auto] items-center gap-4 min-h-[48px]">
+    <Plate className="w-full h-[90px] rounded-3xl mt-4 active:bg-bg-item-pressed">
+      <Link to={Paths.GIFTS} className="w-full grid grid-cols-[auto,1fr,auto] items-center gap-4">
         <Icon name="present" className="w-[60px] h-[60px]" />
         <div className="grid">
           <TitleText align="left">Created Gifts</TitleText>

src/components/Price/Price.tsx

@@ -8,11 +8,13 @@ type Props = {
 const Price = ({ amount, symbol = '$' }: Props) => {
   if (amount === undefined) return <Shimmering width={50} height={30} />;
   const value = parseFloat(amount.toFixed(3));
+  const [integerPart, decimalPart] = value.toString().split('.');
 
   return (
     <>
-      {symbol}
-      {value}
+      <span className="text-text-hint inline-block">{symbol}</span>
+      <span className="inline-block"> {integerPart}</span>
+      {decimalPart && <span className="text-text-hint inline-block">.{decimalPart}</span>}
     </>
   );
 };

src/components/Typography/components/LabelText.tsx

@@ -1,11 +1,7 @@
-import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';
-
 import { cnTw } from '@common/utils/twMerge';
+import TextBase from '../common/TextBase';
+import { TypographyProps } from '../common/types';
 
-// eslint-plugin-react has problems with DetailedHTMLProps so this workaround needed
-// https://github.com/jsx-eslint/eslint-plugin-react/issues/3284
-interface LabelProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {}
-
-export const LabelText = ({ className = 'text-text-primary', ...props }: LabelProps) => (
-  <label className={cnTw('text-footnote', className)} {...props} />
+export const LabelText = ({ className = 'text-text-primary', ...props }: TypographyProps) => (
+  <TextBase className={cnTw('text-label', className)} {...props} />
 );

src/components/Typography/index.ts

@@ -1,5 +1,4 @@
 import { BodyText } from './components/BodyText';
-import { FootnoteText } from './components/FootnoteText';
 import { TitleText } from './components/TitleText';
 import { MediumTitle } from './components/MediumTitle';
 import { HeadlineText } from './components/HeadlineText';
@@ -8,4 +7,4 @@ import { LabelText } from './components/LabelText';
 import { HelpText } from './components/HelpText';
 import TextBase from './common/TextBase';
 
-export { TextBase, FootnoteText, BodyText, TitleText, MediumTitle, LargeTitleText, HeadlineText, LabelText, HelpText };
+export { TextBase, BodyText, TitleText, MediumTitle, LargeTitleText, HeadlineText, LabelText, HelpText };

src/components/index.ts

@@ -4,7 +4,6 @@ import {
   MediumTitle,
   HeadlineText,
   BodyText,
-  FootnoteText,
   LabelText,
   HelpText,
   TextBase,
@@ -27,7 +26,6 @@ import RecoveryPhrase from './RecoveryPhrase/RecoveryPhrase';
 
 export {
   TextBase,
-  FootnoteText,
   BodyText,
   TitleText,
   MediumTitle,

src/screens/dashboard/main/DashboardMain.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { encodeAddress } from '@polkadot/util-crypto';
-import { Avatar } from '@nextui-org/react';
+import { Avatar, Button } from '@nextui-org/react';
 
 import { useGlobalContext } from '@/common/providers/contextProvider';
 import { useMainButton } from '@/common/telegram/useMainButton';
@@ -24,6 +24,9 @@ import {
   LargeTitleText,
   GiftModal,
   CreatedGiftPlate,
+  HeadlineText,
+  TitleText,
+  Icon,
 } from '@/components';
 
 export const DashboardMain = () => {
@@ -93,21 +96,23 @@ export const DashboardMain = () => {
           }}
         />
         <MediumTitle className="self-center">Hello, {user?.first_name || 'friend'}</MediumTitle>
-        <IconButton iconName="settings" onClick={() => navigate(Paths.SETTINGS)} />
+        <Button isIconOnly className="bg-transparent" onClick={() => navigate(Paths.SETTINGS)}>
+          <Icon name="settings" size={40} />
+        </Button>
       </div>
-      <Plate className="flex flex-col items-center mb-2 rounded-3xl">
-        <BodyText className="text-text-hint mb-1">Total Balance</BodyText>
+      <div className="flex flex-col m-4">
+        <HeadlineText className="text-text-hint mb-1">Total Balance</HeadlineText>
         <LargeTitleText>
           <Price amount={getTotalBalance(assets, assetsPrices)} />
         </LargeTitleText>
-        <div className="grid grid-cols-2 w-full justify-items-center mt-4">
-          <IconButton text="Send" iconName="send" color="primary" onClick={() => navigate(Paths.TRANSFER)} />
-          <IconButton text="Receive" iconName="receive" color="success" onClick={() => navigate(Paths.RECEIVE)} />
+        <div className="grid grid-cols-2 w-full mt-7 gap-2">
+          <IconButton text="Send" iconName="send" onClick={() => navigate(Paths.TRANSFER)} />
+          <IconButton text="Receive" iconName="receive" onClick={() => navigate(Paths.RECEIVE)} />
         </div>
-      </Plate>
+      </div>
       <CreatedGiftPlate />
-      <Plate className="flex flex-col mb-2 rounded-3xl">
-        <MediumTitle>Assets</MediumTitle>
+      <Plate className="flex flex-col my-2 rounded-3xl">
+        <TitleText align="left">Assets</TitleText>
         <AssetsList />
       </Plate>
       <GiftModal />

src/screens/dashboard/receive/ReceivePage.tsx

@@ -42,7 +42,7 @@ export default function ReceivePage() {
   }, []);
 
   return (
-    <div className="flex items-center flex-col h-screen justify-center mx-[-16px]">
+    <div className="flex items-center flex-col h-[95vh] justify-center mx-[-16px]">
       <TitleText className="mb-7">Receive {assets[activeSlideIndex].asset.symbol}</TitleText>
       <Carousel
         activeSlideIndex={activeSlideIndex}

src/screens/gifts/GiftDetailsPage.tsx

@@ -36,7 +36,7 @@ export default function GiftDetailsPage() {
 
   // TODO change image
   return (
-    <div className="flex flex-col items-center gap-3">
+    <div className="flex flex-col items-center justify-center gap-3 h-[95vh]">
       <Image src="/images/gift.svg" alt="gift" width={300} height={300} className="mb-3" />
       <GiftDetails link={link} webApp={webApp as WebApp} />
     </div>

src/screens/onboarding/create-wallet/CreateWallet.tsx

@@ -51,7 +51,7 @@ export default function CreateWalletPage() {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center h-screen">
+    <div className="flex flex-col justify-center items-center h-[95vh]">
       <Player
         src="/gifs/create-wallet.json"
         keepLastFrame

src/screens/settings/password/PasswordConfirmation.tsx

@@ -25,7 +25,7 @@ export default function PasswordConfirmationPage() {
   }, []);
 
   return (
-    <div className="flex flex-col justify-center items-center h-screen">
+    <div className="flex flex-col justify-center items-center h-[95vh]">
       <div className="bg-white rounded-full p-3 w-[114px] h-[114px]" />
       <TitleText className="m-3">Password changed sussessfully!</TitleText>
     </div>

src/screens/transfer/ResultPage.tsx

@@ -29,7 +29,7 @@ export default function ResultPage() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen gap-3">
+    <div className="flex flex-col items-center justify-center h-[95vh] gap-3">
       <TitleText>
         {selectedAsset?.amount} {selectedAsset?.asset?.symbol} Sent to
       </TitleText>

tailwind.config.ts

@@ -21,6 +21,9 @@ export default {
       fontFamily: {
         manrope: ['var(--font-manrope)'],
       },
+      boxShadow: {
+        button: '0px 2px 3.7px 0px #E2E4F1',
+      },
       fontSize: fontSizes,
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',

tw-config-consts/colors.ts

@@ -21,6 +21,7 @@ export default {
   'border-icon-accent-tertiary': 'var(--violet-violet400)',
   'border-icon-accent-secondary': 'var(--green-green400)',
   'border-icon-accent-primary': 'var(--blue-blue400)',
+  'border-neutral': '#E0E4F5',
 
   'bg-primary': 'var(--gray-gray50)',
   'bg-input': 'var(--gray-gray100)',

tw-config-consts/font-sizes.ts

@@ -8,7 +8,7 @@ const fontSizes: Required<Config>['theme']['fontSize'] = {
 
   // SEMI BOLD
   'medium-title': ['1rem', { lineHeight: '1.5rem', letterSpacing: '-0.2px', fontWeight: 600 }],
-  footnote: ['0.8125rem', { lineHeight: '1.25rem', letterSpacing: '-0.01em', fontWeight: 600 }],
+  label: ['1.0625rem', { lineHeight: 'normal', letterSpacing: '0.37px', fontWeight: 600 }],
 
   // MEDIUM
   headline: ['1rem', { lineHeight: '1.5rem', letterSpacing: '-0.027em', fontWeight: 500 }],