From 24d93d0d898740183118e667b295b2033c95a336 Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Sat, 8 Jan 2022 19:36:24 -0500
Subject: [PATCH] add padding to global notification component

---
 components/DayHighLow.tsx           |  4 ++--
 components/GlobalNotification.tsx   |  4 ++--
 components/Input.tsx                |  2 +-
 components/MarketDetails.tsx        | 10 +++++-----
 components/trade_form/TradeType.jsx |  2 +-
 tailwind.config.js                  |  8 ++++----
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/DayHighLow.tsx b/components/DayHighLow.tsx
index c124f83e..e8e7df5e 100644
--- a/components/DayHighLow.tsx
+++ b/components/DayHighLow.tsx
@@ -18,7 +18,7 @@ const DayHighLow = ({ high, low, latest }) => {
         {t('daily-range')}
       </div>
       <div className="flex items-center font-semibold">
-        <div className="pr-2 text-th-fgd-1 md:text-xs">
+        <div className="pr-2 text-th-fgd-2 md:text-xs">
           {low ? formatUsdValue(low) : <MarketDataLoader />}
         </div>
         <div className="h-1.5 flex rounded bg-th-bkg-3 w-16 sm:w-20">
@@ -29,7 +29,7 @@ const DayHighLow = ({ high, low, latest }) => {
             className="flex rounded bg-th-primary"
           ></div>
         </div>
-        <div className="pl-2 text-th-fgd-1 md:text-xs">
+        <div className="pl-2 text-th-fgd-2 md:text-xs">
           {high ? formatUsdValue(high) : <MarketDataLoader />}
         </div>
       </div>
diff --git a/components/GlobalNotification.tsx b/components/GlobalNotification.tsx
index 987c15f9..5216ff3d 100644
--- a/components/GlobalNotification.tsx
+++ b/components/GlobalNotification.tsx
@@ -11,10 +11,10 @@ const GlobalNotification = () => {
   if (show) {
     return (
       <div className="flex items-center bg-th-bkg-4 text-th-fgd-1">
-        <div className="w-full text-center py-1">
+        <div className="w-full text-center p-2.5">
           <span>
             The Solana network is currently experiencing degraded performance
-            resulting in some transactions timing out
+            resulting in some transactions timing out.
           </span>
           <a
             href="https://status.solana.com"
diff --git a/components/Input.tsx b/components/Input.tsx
index 1a66d77a..45e9fab6 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -41,7 +41,7 @@ const Input = ({
         onChange={onChange}
         className={`${className} bg-th-bkg-1 pb-px px-2 flex-1 rounded-md h-10 text-th-fgd-1 w-full
           border ${
-            error ? 'border-th-red' : 'border-th-fgd-4'
+            error ? 'border-th-red' : 'border-th-bkg-4'
           } default-transition hover:border-th-primary 
           focus:border-th-primary focus:outline-none 
           ${
diff --git a/components/MarketDetails.tsx b/components/MarketDetails.tsx
index 59e262e3..1555c3ff 100644
--- a/components/MarketDetails.tsx
+++ b/components/MarketDetails.tsx
@@ -178,7 +178,7 @@ const MarketDetails = () => {
             <div className="text-th-fgd-3 tiny-text pb-0.5">
               {t('oracle-price')}
             </div>
-            <div className="font-semibold text-th-fgd-1 md:text-xs">
+            <div className="font-semibold text-th-fgd-2 md:text-xs">
               {oraclePrice && selectedMarket
                 ? oraclePrice.toFixed(getDecimalCount(selectedMarket.tickSize))
                 : '--'}
@@ -195,7 +195,7 @@ const MarketDetails = () => {
                     ? `text-th-green`
                     : change < 0
                     ? `text-th-red`
-                    : `text-th-fgd-1`
+                    : `text-th-fgd-2`
                 }`}
               >
                 {change.toFixed(2) + '%'}
@@ -209,7 +209,7 @@ const MarketDetails = () => {
               <div className="text-th-fgd-3 tiny-text pb-0.5">
                 {t('daily-volume')}
               </div>
-              <div className="font-semibold text-th-fgd-1 md:text-xs">
+              <div className="font-semibold text-th-fgd-2 md:text-xs">
                 {perpVolume ? (
                   usdFormatter(perpVolume, 0)
                 ) : (
@@ -224,7 +224,7 @@ const MarketDetails = () => {
                 <div className="text-th-fgd-3 tiny-text pb-0.5">
                   {t('average-funding')}
                 </div>
-                <div className="font-semibold text-th-fgd-1 md:text-xs">
+                <div className="font-semibold text-th-fgd-2 md:text-xs">
                   {selectedMarket ? (
                     `${funding1hStr}% (${fundingAprStr}% APR)`
                   ) : (
@@ -236,7 +236,7 @@ const MarketDetails = () => {
                 <div className="text-th-fgd-3 tiny-text pb-0.5">
                   {t('open-interest')}
                 </div>
-                <div className="font-semibold text-th-fgd-1 md:text-xs">
+                <div className="font-semibold text-th-fgd-2 md:text-xs">
                   {selectedMarket ? (
                     `${parseOpenInterest(
                       selectedMarket as PerpMarket
diff --git a/components/trade_form/TradeType.jsx b/components/trade_form/TradeType.jsx
index 47aca2b0..9bcbda15 100644
--- a/components/trade_form/TradeType.jsx
+++ b/components/trade_form/TradeType.jsx
@@ -24,7 +24,7 @@ const TradeType = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`font-normal w-full bg-th-bkg-1 border border-th-fgd-4 px-2 h-10 hover:border-th-primary rounded-md focus:outline-none focus:border-th-primary`}
+              className={`font-normal w-full bg-th-bkg-1 border border-th-bkg-4 px-2 h-10 hover:border-th-primary rounded-md focus:outline-none focus:border-th-primary`}
             >
               <div className={`flex items-center justify-between space-x-4`}>
                 <span>{t(value.toLowerCase().replaceAll(' ', '-'))}</span>
diff --git a/tailwind.config.js b/tailwind.config.js
index 007ba7c8..8d93a31c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,9 +51,9 @@ module.exports = {
           'bkg-2': '#1B1B1F',
           'bkg-3': '#27272B',
           'bkg-4': '#38383D',
-          'fgd-1': '#F7F7F7',
-          'fgd-2': '#E7E7E7',
-          'fgd-3': '#DADADA',
+          'fgd-1': '#E1E1E1',
+          'fgd-2': '#D1D1D1',
+          'fgd-3': '#B3B3B3',
           'fgd-4': '#878787',
         },
         'mango-theme': {
@@ -68,7 +68,7 @@ module.exports = {
           'bkg-2': '#1D1832',
           'bkg-3': '#2A2440',
           'bkg-4': '#37324D',
-          'fgd-1': '#F0EDFF',
+          'fgd-1': '#E5E3EC',
           'fgd-2': '#E5E3EC',
           'fgd-3': '#C1BED3',
           'fgd-4': '#706C81',