Feat: Settings image

app/routes/dashboard/index.tsx

@@ -58,7 +58,7 @@ const Page = () => {
     <>
       <BackButton hidden />
       <div className="flex flex-col break-words">
-        <div className="mb-6 grid grid-cols-[auto,1fr,auto] items-center gap-2">
+        <div className="mb-8 grid grid-cols-[auto,1fr,auto] items-center gap-2">
           <Avatar
             src={user?.photo_url}
             className="h-10 w-10"
@@ -78,7 +78,7 @@ const Page = () => {
           </Button>
         </div>
 
-        <div className="mt-4 flex flex-col items-center">
+        <div className="mb-6 flex flex-col items-center">
           <HeadlineText className="mb-1 text-text-hint">Total Balance</HeadlineText>
           <AccountPrice amount={getTotalFiatBalance(chains, balances, prices)?.toFixed(2)} />
           <div className="mt-7 grid w-full grid-cols-3 gap-2">
@@ -98,10 +98,10 @@ const Page = () => {
           </div>
         </div>
 
-        <CreatedGiftPlate />
+        <CreatedGiftPlate className="mb-2" />
 
         {isChainsLoading && (
-          <Plate className="my-2 flex flex-col rounded-3xl border-1 border-border-neutral">
+          <Plate className="mb-2 flex flex-col rounded-3xl border-1 border-border-neutral">
             <Shimmering width={100} height={32} />
             <div className="mt-6 flex flex-col gap-y-6">
               {Array.from({ length: 4 }).map((_, index) => (
@@ -113,7 +113,7 @@ const Page = () => {
 
         {!isChainsLoading && !isEmpty(chains) && (
           <>
-            <Plate className="my-2 flex flex-col rounded-3xl border-1 border-border-neutral">
+            <Plate className="mb-2 flex flex-col rounded-3xl border-1 border-border-neutral">
               <TitleText align="left">Assets</TitleText>
               <div className="mt-6 flex flex-col gap-y-6">
                 <AssetsList showPrice animate chains={chains} assets={assets} prices={prices} balances={balances} />

app/routes/settings/index.tsx

@@ -105,18 +105,27 @@ const Page = () => {
             </PopoverContent>
           </Popover>
         </Plate>
-
         <button
-          className="flex h-[108px] w-full overflow-hidden rounded-2xl bg-[url('/assets/misc/gradient.avif')] bg-[25%_25%]"
+          className="flex h-[108px] w-full rounded-2xl"
+          style={{
+            background:
+              'linear-gradient(118deg, #2955B1 -12.5%, rgba(41, 85, 177, 0) 48%),' +
+              'linear-gradient(248deg, #581BC0 -14.5%, rgba(99, 42, 196, 0) 48%),' +
+              'linear-gradient(0deg, #000000, #000000)',
+          }}
           onClick={migrateToNovaWallet}
         >
-          <img src="/assets/misc/phone.avif" alt="" className="ml-6 mt-1.5 w-[106px]" />
           <div className="mx-auto flex w-[190px] flex-col gap-y-4 self-center">
             <BodyText className="-indent-1 text-body-bold text-white">Upgrade to Nova Wallet!</BodyText>
-            <HelpText className="text-balance font-semibold text-white">
+            <HelpText className="text-balance font-semibold text-text-light-hint">
               Earn up to <b>20% APY</b> using the Polkadot’s best wallet
             </HelpText>
           </div>
+          <img
+            src="/assets/misc/phone.avif"
+            alt=""
+            className="-mt-2.5 mr-6 h-[118px] w-[106px] object-cover object-top"
+          />
         </button>
         <Plate className="w-full p-0">
           <LinkCard

app/shared/config/tailwind/colors.ts

@@ -3,6 +3,7 @@ export default {
   'text-on-button': 'var(--white-white900)',
   'text-on-button-disabled': 'var(--gray-gray300)',
   'text-hint': 'var(--gray-gray700)',
+  'text-light-hint': 'var(--gray-gray250)',
   'text-link': 'var(--blue-blue600)',
   'text-link-pressed': 'var(--blue-blue800)',
   'text-on-button-bold': 'var(--blue-blue600)',

app/tailwind.css

@@ -11,6 +11,7 @@
   --gray-gray500: #8e93ab;
   --gray-gray400: #9fa3b9;
   --gray-gray300: #b2b5c8;
+  --gray-gray250: #a9b5ce;
   --gray-gray200: #c8cbd9;
   --gray-gray100: #dde0e9;
   --gray-gray50: #f2f2f7;

app/ui/molecules/CreatedGiftPlate/CreatedGiftPlate.tsx

@@ -5,12 +5,16 @@ import { useUnit } from 'effector-react';
 import { $path } from 'remix-routes';
 
 import { networkModel } from '@/models/network';
-import { getGifts } from '@/shared/helpers';
+import { cnTw, getGifts } from '@/shared/helpers';
 import { useGifts } from '@/shared/hooks';
 import { type Gift } from '@/types/substrate';
-import { BigTitle, BodyText, Icon, Plate, Shimmering } from '@/ui/atoms';
+import { BodyText, Icon, MediumTitle, Plate, Shimmering } from '@/ui/atoms';
 
-export const CreatedGiftPlate = () => {
+type Props = {
+  className?: string;
+};
+
+export const CreatedGiftPlate = ({ className }: Props) => {
   const { getGiftsState } = useGifts();
 
   const connections = useUnit(networkModel.$connections);
@@ -27,20 +31,20 @@ export const CreatedGiftPlate = () => {
   }, [connections]);
 
   return (
-    <Plate className="mt-4 h-[90px] w-full rounded-3xl border-1 border-border-neutral active:bg-bg-item-pressed">
-      <Link to={$path('/gifts')} className="grid w-full grid-cols-[auto,1fr,auto] items-center gap-4">
-        <Icon name="Present" size={60} />
-        <div className="grid">
-          <BigTitle align="left">Created Gifts</BigTitle>
-          {unclaimed ? (
-            <BodyText align="left" className="text-text-hint">
-              {unclaimed.length ? `Unclaimed: ${unclaimed.length}` : 'All your gifts were claimed'}
-            </BodyText>
-          ) : (
-            <Shimmering width={100} height={20} />
-          )}
+    <Plate
+      className={cnTw(
+        'w-full rounded-3xl border-1 border-border-neutral px-4 py-2.5 active:bg-bg-item-pressed',
+        className,
+      )}
+    >
+      <Link to={$path('/gifts')} className="grid h-10 w-full grid-cols-[auto,1fr,auto] items-center gap-x-2">
+        <Icon name="Gift" size={25} className="text-text-link" />
+        <div className="flex items-center gap-x-1">
+          <MediumTitle className="font-medium">Created Gifts</MediumTitle>
+          {!unclaimed && <Shimmering width={20} height={20} />}
+          {unclaimed && unclaimed?.length > 0 && <BodyText className="text-text-hint">{unclaimed.length}</BodyText>}
         </div>
-        <Icon name="ArrowBold" className="h-10 w-10 self-center" />
+        <Icon name="ChevronForward" size={24} className="self-center" />
       </Link>
     </Plate>
   );