From 6cfc397dd215031c541674294ae2b5581cff1c69 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 9 Sep 2022 11:00:47 +1000
Subject: [PATCH] fix loaders

---
 components/TradeHistoryTable.tsx        |  8 ++---
 components/account/AccountPage.tsx      |  8 ++---
 components/shared/DetailedAreaChart.tsx | 39 +++++--------------------
 components/shared/SheenLoader.tsx       |  8 ++++-
 components/swap/SwapForm.tsx            |  4 +--
 5 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/components/TradeHistoryTable.tsx b/components/TradeHistoryTable.tsx
index d1b118cf..20a9df6e 100644
--- a/components/TradeHistoryTable.tsx
+++ b/components/TradeHistoryTable.tsx
@@ -340,16 +340,16 @@ const TradeHistoryTable = ({
       )
     ) : (
       <div className="mt-8 space-y-2">
-        <SheenLoader>
+        <SheenLoader className="flex flex-1">
           <div className="h-8 w-full rounded bg-th-bkg-2" />
         </SheenLoader>
-        <SheenLoader>
+        <SheenLoader className="flex flex-1">
           <div className="h-16 w-full rounded bg-th-bkg-2" />
         </SheenLoader>
-        <SheenLoader>
+        <SheenLoader className="flex flex-1">
           <div className="h-16 w-full rounded bg-th-bkg-2" />
         </SheenLoader>
-        <SheenLoader>
+        <SheenLoader className="flex flex-1">
           <div className="h-16 w-full rounded bg-th-bkg-2" />
         </SheenLoader>
       </div>
diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 14480693..668a1547 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -219,12 +219,12 @@ const AccountPage = () => {
         </div>
         <AccountActions />
       </div>
-      <div className="grid grid-cols-4 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
-        <div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+      <div className="grid grid-cols-3 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
+        <div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <p className="text-th-fgd-3">{t('health')}</p>
           <p className="text-2xl font-bold text-th-fgd-1">{maintHealth}%</p>
         </div>
-        <div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+        <div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <p className="text-th-fgd-3">{t('free-collateral')}</p>
           <p className="text-2xl font-bold text-th-fgd-1">
             {mangoAccount
@@ -253,7 +253,7 @@ const AccountPage = () => {
             </IconButton>
           ) : null}
         </div> */}
-        <div className="col-span-4 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+        <div className="col-span-3 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <div>
             <p className="text-th-fgd-3">{t('total-interest-value')}</p>
             <p className="text-2xl font-bold text-th-fgd-1">
diff --git a/components/shared/DetailedAreaChart.tsx b/components/shared/DetailedAreaChart.tsx
index 1efa5130..c58b40bb 100644
--- a/components/shared/DetailedAreaChart.tsx
+++ b/components/shared/DetailedAreaChart.tsx
@@ -21,6 +21,7 @@ import { IconButton } from './Button'
 import { ArrowLeftIcon } from '@heroicons/react/20/solid'
 import { FadeInFadeOut } from './Transitions'
 import ChartRangeButtons from './ChartRangeButtons'
+import PercentageChange from './PercentageChange'
 
 dayjs.extend(relativeTime)
 
@@ -91,8 +92,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
     <FadeInFadeOut show={true}>
       <ContentBox hideBorder hidePadding>
         {loading ? (
-          <SheenLoader>
-            <div className="h-[448px] rounded-lg bg-th-bkg-2" />
+          <SheenLoader className="flex flex-1">
+            <div className="h-[448px] w-full rounded-lg bg-th-bkg-2" />
           </SheenLoader>
         ) : data.length ? (
           <div className="relative">
@@ -114,21 +115,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                           numbers={mouseData[yKey].toFixed(2)}
                         />
                         {!hideChange ? (
-                          <span
-                            className={`ml-3 flex items-center text-sm ${
-                              calculateChartChange() >= 0
-                                ? 'text-th-green'
-                                : 'text-th-red'
-                            }`}
-                          >
-                            {calculateChartChange() >= 0 ? (
-                              <UpTriangle />
-                            ) : (
-                              <DownTriangle />
-                            )}
-                            <span className="ml-1">
-                              {calculateChartChange().toFixed(2)}%
-                            </span>
+                          <span className="ml-3">
+                            <PercentageChange change={calculateChartChange()} />
                           </span>
                         ) : null}
                       </div>
@@ -147,21 +135,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                           numbers={data[data.length - 1][yKey].toFixed(2)}
                         />
                         {!hideChange ? (
-                          <span
-                            className={`ml-3 mt-0 flex items-center text-sm ${
-                              calculateChartChange() >= 0
-                                ? 'text-th-green'
-                                : 'text-th-red'
-                            }`}
-                          >
-                            {calculateChartChange() >= 0 ? (
-                              <UpTriangle />
-                            ) : (
-                              <DownTriangle />
-                            )}
-                            <span className="ml-1">
-                              {calculateChartChange().toFixed(2)}%
-                            </span>
+                          <span className="ml-3">
+                            <PercentageChange change={calculateChartChange()} />
                           </span>
                         ) : null}
                       </div>
diff --git a/components/shared/SheenLoader.tsx b/components/shared/SheenLoader.tsx
index 0ab712e6..938156d0 100644
--- a/components/shared/SheenLoader.tsx
+++ b/components/shared/SheenLoader.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes'
 import { ReactNode } from 'react'
 
 // Children should be a shape or set of shapes with a bg color to animate over
@@ -9,10 +10,15 @@ const SheenLoader = ({
   children: ReactNode
   className?: string
 }) => {
+  const { theme } = useTheme()
   return (
     <div className="flex items-center">
       <div
-        className={`relative ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent before:via-th-bkg-3 before:to-transparent`}
+        className={`relative ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent ${
+          theme === 'Light'
+            ? 'before:via-[rgba(0,0,0,0.1)]'
+            : 'before:via-[rgba(255,255,255,0.1)]'
+        } before:to-transparent`}
       >
         {children}
       </div>
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 90a9e09a..298630ac 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -317,8 +317,8 @@ const SwapForm = () => {
           <div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-xl font-bold tracking-wider text-th-fgd-3">
             {isLoadingTradeDetails ? (
               <div className="w-full">
-                <SheenLoader className="rounded-l-none">
-                  <div className="h-[52px] w-full rounded-r-lg bg-th-bkg-3" />
+                <SheenLoader className="flex flex-1 rounded-l-none">
+                  <div className="h-[52px] w-full rounded-r-lg bg-th-bkg-4" />
                 </SheenLoader>
               </div>
             ) : (