add padding to global notification component

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>

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"

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 
           ${

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

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>

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',