Merge pull request aave#19 from paulcodiny/feat/dashboard

feat: dashboard, borrow, modals, wip: stake
paulcodiny · Feb 16, 2022 · 6d0c314 · 6d0c314
2 parents 76beb43 + 432c5b8
commit 6d0c314
Show file tree

Hide file tree

Showing 54 changed files with 151 additions and 142 deletions.
diff --git a/src/components/DepositBorrowTopPanel/index.tsx b/src/components/DepositBorrowTopPanel/index.tsx
@@ -22,7 +22,7 @@ import ApproximateBalanceHelpModal from '../HelpModal/ApproximateBalanceHelpModa
 import messages from './messages';
 import staticStyles from './style';
 import { getAssetInfo, getAssetColor } from '../../helpers/config/assets-config';
-import ContentWrapperWithTopLine from "../wrappers/ContentWrapperWithTopLine";
+import ContentWrapperWithTopLine from '../wrappers/ContentWrapperWithTopLine';
 
 export default function DepositBorrowTopPanel() {
   const intl = useIntl();
@@ -122,9 +122,13 @@ export default function DepositBorrowTopPanel() {
           )}
         >
           <div
-            className={classNames('DepositBorrowTopPanel__topPanel-inner', {
-              DepositBorrowTopPanel__topPanelInnerFull: !depositCompositionData.length,
-            })}
+            className={classNames(
+              'DepositBorrowTopPanel__topPanel-inner',
+              'DepositBorrowTopPanel__deposit-top-panel',
+              {
+                DepositBorrowTopPanel__topPanelInnerFull: !depositCompositionData.length,
+              }
+            )}
           >
             <div className="DepositBorrowTopPanel__topPanel-values">
               <Row
@@ -145,7 +149,7 @@ export default function DepositBorrowTopPanel() {
                     withSmallDecimals={true}
                   />
                 ) : (
-                  <NoData color="dark" onWhiteBackground={true}  />
+                  <NoData color="dark" onWhiteBackground={true} />
                 )}
               </Row>
             </div>
@@ -189,7 +193,7 @@ export default function DepositBorrowTopPanel() {
                         maximumValueDecimals={2}
                       />
                     ) : (
-                      <NoData color="dark" onWhiteBackground={true}  />
+                      <NoData color="dark" onWhiteBackground={true} />
                     )}
                   </Row>
 
@@ -208,7 +212,7 @@ export default function DepositBorrowTopPanel() {
                           maximumValueDecimals={2}
                         />
                       ) : (
-                        <NoData color="dark" onWhiteBackground={true}  />
+                        <NoData color="dark" onWhiteBackground={true} />
                       )}
                     </Row>
                   )}
@@ -243,7 +247,7 @@ export default function DepositBorrowTopPanel() {
                           maximumValueDecimals={2}
                         />
                       ) : (
-                        <NoData color="dark" onWhiteBackground={true}  />
+                        <NoData color="dark" onWhiteBackground={true} />
                       )}
                     </Row>
                   )}
@@ -257,7 +261,7 @@ export default function DepositBorrowTopPanel() {
                       {user && collateralUsagePercent !== '0' ? (
                         <ValuePercent value={collateralUsagePercent} />
                       ) : (
-                        <NoData color="dark" onWhiteBackground={true}  />
+                        <NoData color="dark" onWhiteBackground={true} />
                       )}
                     </Row>
                   )}
@@ -282,19 +286,20 @@ export default function DepositBorrowTopPanel() {
                       {user && loanToValue !== '0' ? (
                         <ValuePercent value={loanToValue} />
                       ) : (
-                        <NoData color="dark" onWhiteBackground={true}  />
+                        <NoData color="dark" onWhiteBackground={true} />
                       )}
                     </Row>
                   )}
 
                   {loanToValue !== '0' && (
                     <DefaultButton
+                      color="dark"
                       title={intl.formatMessage(messages.details)}
                       transparent={true}
                       className={classNames('DepositBorrowTopPanel__button', {
                         DepositBorrowTopPanel__buttonCollapse: isCollapse,
                       })}
-                      size="small"
+                      size="normal"
                       onClick={() => setLTVModalVisible(true)}
                     />
                   )}
@@ -330,16 +335,13 @@ export default function DepositBorrowTopPanel() {
         .DepositBorrowTopPanel {
           &__topPanel-caption {
             p {
-
             }
           }
 
           &__topPanel-inner {
-
           }
 
           &__topPanel-captionWrapper {
-
           }
         }
       `}</style>

diff --git a/src/components/DepositBorrowTopPanel/style.ts b/src/components/DepositBorrowTopPanel/style.ts
@@ -46,13 +46,10 @@ const staticStyles = css.global`
         border-top-right-radius: $borderRadius;
         border-top-left-radius: $borderRadius;
         @include respond-to(xl) {
-
         }
         @include respond-to(lg) {
-
         }
         @include respond-to(md) {
-
         }
         i {
           font-style: normal;
@@ -96,15 +93,17 @@ const staticStyles = css.global`
       border-bottom-right-radius: $borderRadius;
       border-bottom-left-radius: $borderRadius;
       transition: $transition;
-      padding: 25px 20px;
+      padding: 35px 30px;
       @include respond-to(lg) {
-
       }
       @include respond-to(md) {
-
       }
     }
 
+    &__deposit-top-panel {
+      height: 100%;
+    }
+
     &__topPanelInnerFull {
       width: 100% !important;
     }
@@ -113,6 +112,7 @@ const staticStyles = css.global`
       display: flex;
       flex-direction: column;
       width: 100%;
+      min-width: 285px;
       .Row {
         margin-right: 60px;
         @include respond-to(xl) {
@@ -127,7 +127,6 @@ const staticStyles = css.global`
       display: flex;
       margin-bottom: 15px;
       @include respond-to(xl) {
-        margin-bottom: 10px;
       }
       &:last-of-type {
         align-items: center;
@@ -172,12 +171,9 @@ const staticStyles = css.global`
       align-items: center;
       justify-content: space-between;
       @include respond-to(md) {
-
       }
       .CircleCompositionBar {
-        margin-left: 35px;
         @include respond-to(xl) {
-          margin-left: 25px;
         }
         @include respond-to(md) {
           margin-left: 0;
@@ -190,6 +186,21 @@ const staticStyles = css.global`
     }
 
     .Row.Row__column {
+      .Row__title {
+        font-size: $small;
+        white-space: nowrap;
+      }
+
+      .Value__value,
+      .Value__symbol,
+      .ValuePercent__value,
+      .ValuePercent__value span,
+      .ValueWithSmallDecimals,
+      .TokenIcon__dollar {
+        font-size: $regular;
+        font-weight: 600 !important;
+      }
+
       .Row__title-inner {
         text-align: left;
       }

diff --git a/src/components/HealthFactor/index.tsx b/src/components/HealthFactor/index.tsx
@@ -55,7 +55,7 @@ export default function HealthFactor({
   const formattedHealthFactor = Number(valueToBigNumber(newValue).toFixed(2, BigNumber.ROUND_DOWN));
   let healthFactorColor = '';
   if (formattedHealthFactor >= 1.5) {
-    healthFactorColor = currentTheme.green.hex;
+    healthFactorColor = currentTheme.darkGreen.hex;
   } else if (formattedHealthFactor < 1.1 && formattedHealthFactor > 0) {
     healthFactorColor = currentTheme.red.hex;
   } else {

diff --git a/src/components/HealthFactor/style.ts b/src/components/HealthFactor/style.ts
@@ -27,11 +27,10 @@ const staticStyles = css.global`
       display: block;
       text-align: center;
       .ValuePercent {
-        align-items: center;
-        justify-content: center;
       }
       .TextWithModal {
         display: inline-block;
+        margin-bottom: 5px;
       }
     }
 

diff --git a/src/components/HelpModal/AccessMaticMarketHelpModal/index.tsx b/src/components/HelpModal/AccessMaticMarketHelpModal/index.tsx
@@ -49,6 +49,7 @@ export default function AccessMaticMarketHelpModal({
         lightWeight={lightWeight}
         onWhiteBackground={false}
         clickOnText={true}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/ApproximateBalanceHelpModal/index.tsx b/src/components/HelpModal/ApproximateBalanceHelpModal/index.tsx
@@ -33,6 +33,7 @@ export default function ApproximateBalanceHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/BorrowInterestHelpModal/index.tsx b/src/components/HelpModal/BorrowInterestHelpModal/index.tsx
@@ -42,7 +42,7 @@ export default function BorrowInterestHelpModal({
             })}
           </p>
         }
-        captionColor="primary"
+        captionColor="dark"
       />
       <HelpItem
         caption={intl.formatMessage(messages.secondHelpItemCaption)}

diff --git a/src/components/HelpModal/CollateralHelpModal/index.tsx b/src/components/HelpModal/CollateralHelpModal/index.tsx
@@ -25,6 +25,7 @@ export default function CollateralHelpModal({
       caption={intl.formatMessage(messages.caption)}
       description={intl.formatMessage(messages.description)}
       onWhiteBackground={onWhiteBackground}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/CooldownUnstakeHelpModal/index.tsx b/src/components/HelpModal/CooldownUnstakeHelpModal/index.tsx
@@ -34,6 +34,7 @@ export default function CooldownUnstakeHelpModal({
         </>
       }
       lightWeight={true}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/DelegationHelpModal/index.tsx b/src/components/HelpModal/DelegationHelpModal/index.tsx
@@ -33,6 +33,7 @@ export default function DelegationHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/HealthFactorHelpModal/index.tsx b/src/components/HelpModal/HealthFactorHelpModal/index.tsx
@@ -29,6 +29,7 @@ export default function HealthFactorHelpModal({
       lightWeight={lightWeight}
       onWhiteBackground={onWhiteBackground}
       secondaryIcon={withSecondaryIcon ? (props) => <HALNotificationIcon {...props} /> : undefined}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/LiquidationBonusHelpModal/index.tsx b/src/components/HelpModal/LiquidationBonusHelpModal/index.tsx
@@ -27,6 +27,7 @@ export default function LiquidationBonusHelpModal({
       color={color}
       lightWeight={lightWeight}
       onWhiteBackground={onWhiteBackground}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/LiquidationThresholdHelpModal/index.tsx b/src/components/HelpModal/LiquidationThresholdHelpModal/index.tsx
@@ -27,6 +27,7 @@ export default function LiquidationThresholdHelpModal({
       lightWeight={lightWeight}
       color={color}
       onWhiteBackground={onWhiteBackground}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/MaxLTVHelpModal/index.tsx b/src/components/HelpModal/MaxLTVHelpModal/index.tsx
@@ -25,6 +25,7 @@ export default function MaxLTVHelpModal({
       color={color}
       lightWeight={lightWeight}
       onWhiteBackground={onWhiteBackground}
+      captionColor="dark"
     />
   );
 }
diff --git a/src/components/HelpModal/NotHaveEnoughFundsToRepayHelpModal/index.tsx b/src/components/HelpModal/NotHaveEnoughFundsToRepayHelpModal/index.tsx
@@ -35,6 +35,7 @@ export default function NotHaveEnoughFundsToRepayHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/ThresholdHelpModal/index.tsx b/src/components/HelpModal/ThresholdHelpModal/index.tsx
@@ -45,6 +45,7 @@ export default function ThresholdHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/TribeRewardHelpModal/index.tsx b/src/components/HelpModal/TribeRewardHelpModal/index.tsx
@@ -72,6 +72,7 @@ export default function TribeRewardHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/HelpModal/VotingPowerCalculatedHelpModal/index.tsx b/src/components/HelpModal/VotingPowerCalculatedHelpModal/index.tsx
@@ -33,6 +33,7 @@ export default function VotingPowerCalculatedHelpModal({
         color={color}
         lightWeight={lightWeight}
         onWhiteBackground={onWhiteBackground}
+        captionColor="dark"
       />
 
       <style jsx={true} global={true}>

diff --git a/src/components/LTVInfoModal/index.tsx b/src/components/LTVInfoModal/index.tsx
@@ -128,6 +128,7 @@ export default function LTVInfoModal({ visible, setVisible }: LTVInfoModalProps)
           title={intl.formatMessage(messages.liquidationOverview)}
           description={intl.formatMessage(messages.liquidationOverviewDescription)}
           onWhiteBackground={true}
+          color="dark"
         />
 
         <div className="LTVInfoModal__content">

diff --git a/src/components/NoDataPanel/index.tsx b/src/components/NoDataPanel/index.tsx
@@ -13,7 +13,7 @@ import staticStyles from './style';
 
 export interface NoDataPanelProps {
   title: string;
-  description?: string | ReactNodeArray;
+  description?: string | ReactNodeArray | ReactNode;
   buttonTitle?: string;
   linkTo?: string;
   className?: string;
@@ -41,7 +41,12 @@ export default function NoDataPanel({
 
   return (
     <div className={classNames('NoDataPanel', className)}>
-      <Caption title={title} description={description} withAnimationCircle={withAnimationCircle} />
+      <Caption
+        color="dark"
+        title={title}
+        description={description}
+        withAnimationCircle={withAnimationCircle}
+      />
 
       {linkTo && buttonTitle && (
         <Link to={linkTo} className="ButtonLink">

diff --git a/src/components/TextWithModal/index.tsx b/src/components/TextWithModal/index.tsx
@@ -136,6 +136,7 @@ export default function TextWithModal({
 
           {!withoutContentButton && (
             <DefaultButton
+              color="purple"
               title={intl.formatMessage(messages.buttonTitle)}
               size="medium"
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {

diff --git a/src/components/TxConfirmationView/ActionsWrapper/style.ts b/src/components/TxConfirmationView/ActionsWrapper/style.ts
@@ -14,12 +14,13 @@ const staticStyles = css.global`
     transition: $transition;
 
     &__buttons {
-      width: 100%;
+      width: calc(100% + 1px);
       display: flex;
     }
     &__button {
       display: flex;
       align-items: center;
+      border-right: 1px solid #ffffff;
       justify-content: center;
       text-align: center;
       min-height: 20px;
@@ -30,7 +31,13 @@ const staticStyles = css.global`
       cursor: default;
       padding: 6px 0;
       background: #e2e2e2;
+
+      &:first-of-type {
+        border-top-left-radius: 4px;
+      }
+
       &:last-of-type {
+        border-top-right-radius: 4px;
         border-right: none !important;
       }
       span,