Fresh coat of paint for the Advanced page

aloelabs · Feb 21, 2024 · ee8cf52 · ee8cf52
1 parent efafbf0
commit ee8cf52
Show file tree

Hide file tree

Showing 10 changed files with 291 additions and 338 deletions.
diff --git a/earn/src/components/advanced/BorrowMetrics.tsx b/earn/src/components/advanced/BorrowMetrics.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import Tooltip from 'shared/lib/components/common/Tooltip';
 import { Display, Text } from 'shared/lib/components/common/Typography';
-import { GREY_800 } from 'shared/lib/data/constants/Colors';
+import { GREY_700 } from 'shared/lib/data/constants/Colors';
 import { formatTokenAmount } from 'shared/lib/util/Numbers';
 import styled from 'styled-components';
 
@@ -22,7 +22,7 @@ const MetricCardContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  background-color: ${GREY_800};
+  background-color: ${GREY_700};
   border-radius: 8px;
   padding: 16px;
 `;
@@ -32,10 +32,10 @@ const MetricCardPlaceholder = styled.div.attrs((props: { height: number; $animat
   border-radius: 8px;
   padding: 16px;
   height: ${(props) => props.height}px;
-  background-color: #0d171e;
+  background-color: ${GREY_700};
   animation: ${(props) => (props.$animate ? 'metricCardShimmer 0.75s forwards linear infinite' : '')};
   background-image: ${(props) =>
-    props.$animate ? 'linear-gradient(to right, #0d171e 0%, #131f28 20%, #0d171e 40%, #0d171e 100%)' : ''};
+    props.$animate ? `linear-gradient(to right, ${GREY_700} 0%, #131f28 20%, ${GREY_700} 40%, ${GREY_700} 100%)` : ''};
   background-repeat: no-repeat;
   background-size: 200% 100%;
   overflow: hidden;
@@ -57,7 +57,7 @@ const HorizontalMetricCardContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  background-color: ${GREY_800};
+  background-color: ${GREY_700};
   border-radius: 8px;
   padding: 16px;
 `;

diff --git a/earn/src/components/advanced/GlobalStatsTable.tsx b/earn/src/components/advanced/GlobalStatsTable.tsx
@@ -16,7 +16,6 @@ const Wrapper = styled.div`
   flex-direction: column;
   /* 16px due to the bottom padding already being 8px making the total space 24px */
   gap: 16px;
-  margin-bottom: 64px;
 
   @media (max-width: ${RESPONSIVE_BREAKPOINT_XS}) {
     margin-bottom: 48px;

diff --git a/earn/src/components/advanced/ManageAccountButtons.tsx b/earn/src/components/advanced/ManageAccountButtons.tsx
@@ -21,7 +21,7 @@ export default function ManageAccountButtons(props: ManageAccountButtonsProps) {
   const { onAddCollateral, onRemoveCollateral, onBorrow, onRepay, onWithdrawAnte, isWithdrawAnteDisabled, isDisabled } =
     props;
   return (
-    <div className='flex flex-col gap-3 w-max'>
+    <div className='flex flex-row flex-wrap justify-start gap-3 w-full'>
       <OutlinedWhiteButtonWithIcon
         Icon={<PlusIcon />}
         position='leading'

diff --git a/earn/src/components/advanced/SmartWalletButton.tsx b/earn/src/components/advanced/SmartWalletButton.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-
+import TokenIcons from 'shared/lib/components/common/TokenIcons';
 import { Display } from 'shared/lib/components/common/Typography';
 import { Token } from 'shared/lib/data/Token';
 import styled from 'styled-components';
 
 import { ReactComponent as PlusIcon } from '../../assets/svg/plus.svg';
 import useProminentColor from '../../data/hooks/UseProminentColor';
 import { rgba } from '../../util/Colors';
-import TokenPairIcons from '../common/TokenPairIcons';
 
 const Container = styled.button.attrs(
   (props: { backgroundGradient: string; active: boolean; $animate: boolean }) => props
@@ -87,14 +85,9 @@ export default function SmartWalletButton(props: SmartWalletButtonProps) {
 
   return (
     <Container backgroundGradient={buttonBackgroundGradient} active={isActive} onClick={onClick}>
-      <div className='flex items-center gap-4'>
-        <TokenPairIcons
-          token0IconPath={token0.logoURI}
-          token1IconPath={token1.logoURI}
-          token0AltText={`${token0.name}'s Icon`}
-          token1AltText={`${token1.name}'s Icon`}
-        />
-        <Display size='S' weight='semibold'>
+      <div className='flex items-center gap-4 min-w-max'>
+        <TokenIcons tokens={[token0, token1]} width={16} height={16} />
+        <Display size='XS'>
           {token0.symbol} / {token1.symbol}
           {tokenId === null ? '' : ` (#${tokenId})`}
         </Display>

diff --git a/earn/src/components/advanced/UniswapPositionList.tsx b/earn/src/components/advanced/UniswapPositionList.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { SendTransactionResult } from '@wagmi/core';
 import { FilledGreyButton } from 'shared/lib/components/common/Buttons';
 import { Display, Text } from 'shared/lib/components/common/Typography';
+import { GREY_700 } from 'shared/lib/data/constants/Colors';
 import { formatTokenAmount, roundPercentage } from 'shared/lib/util/Numbers';
 import styled from 'styled-components';
 
@@ -59,7 +60,7 @@ function UniswapPositionCard(props: UniswapPositionCardProps) {
 
   if (!borrower || !uniswapPosition) {
     return (
-      <UniswapPositionCardWrapper>
+      <UniswapPositionCardWrapper $color={GREY_700}>
         <Text size='S' color={ACCENT_COLOR} className='text-center'>
           Empty
         </Text>
@@ -97,7 +98,7 @@ function UniswapPositionCard(props: UniswapPositionCardProps) {
   });
 
   return (
-    <UniswapPositionCardWrapper>
+    <UniswapPositionCardWrapper $color={GREY_700}>
       <div className='flex flex-col gap-4'>
         <div className='flex justify-center items-center'>
           <TokenPairIcons
@@ -186,7 +187,7 @@ export function UniswapPositionList(props: UniswapPositionListProps) {
               <Text size='S'>{slot}</Text>
               <UniswapPositionCard
                 borrower={borrower}
-                uniswapPosition={uniswapPositions.length > index ? uniswapPositions[index] : undefined}
+                uniswapPosition={uniswapPositions.at(index)}
                 withdrawableUniswapNFTs={withdrawableUniswapNFTs}
                 setSelectedUniswapPosition={setSelectedUniswapPosition}
                 setPendingTxn={props.setPendingTxn}

diff --git a/earn/src/components/advanced/modal/NewSmartWalletModal.tsx b/earn/src/components/advanced/modal/NewSmartWalletModal.tsx
@@ -25,9 +25,9 @@ const TERTIARY_COLOR = '#4b6980';
 const SmartWalletOptionsPage = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
   // The height of 5 buttons + gap between them
-  min-height: 304px;
+  min-height: 212px;
 `;
 
 type CreateSmartWalletButtonProps = {
@@ -177,7 +177,8 @@ export default function NewSmartWalletModal(props: NewSmartWalletModalProps) {
       <div className='w-full'>
         <div className='flex flex-col gap-4 mb-8'>
           <Text size='M' weight='medium'>
-            Select a pair to borrow from
+            On Aloe, all borrows are managed inside smart wallets, represented by NFTs. Select a pair and mint an NFT to
+            get started.
           </Text>
           <SquareInputWithIcon
             Icon={<SearchIcon />}

diff --git a/earn/src/components/common/UniswapPositionCard.tsx b/earn/src/components/common/UniswapPositionCard.tsx
@@ -15,11 +15,11 @@ export const UniswapPositionCardContainer = styled.div`
   gap: 8px;
 `;
 
-export const UniswapPositionCardWrapper = styled.div`
+export const UniswapPositionCardWrapper = styled.div<{ $color?: string }>`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  background-color: ${GREY_800};
+  background-color: ${(props) => props.$color ?? GREY_800};
   border-radius: 8px;
   padding: 16px;
   width: 100%;