add global alert component

components/GlobalNotification.tsx

@@ -0,0 +1,42 @@
+// import {useState, useEffect} from 'react'
+import useLocalStorageState from '../hooks/useLocalStorageState'
+
+import { XIcon } from '@heroicons/react/solid'
+
+const GLOBAL_NOTIFICATION_KEY = 'globalNotification-0.1'
+
+const GlobalNotification = () => {
+  const [show, setShow] = useLocalStorageState(GLOBAL_NOTIFICATION_KEY, true)
+
+  if (show) {
+    return (
+      <div className="flex items-center bg-th-bkg-4 text-th-fgd-1">
+        <div className="w-full text-center py-1">
+          <span>
+            The Solana network is currently experiencing degraded performance
+            resulting in some transactions timing out
+          </span>
+          <a
+            href="https://status.solana.com"
+            className="ml-2"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            https://status.solana.com
+          </a>
+        </div>
+
+        <button
+          className="text-th-fgd-1 mr-4 hover:text-th-primary"
+          onClick={() => setShow(false)}
+        >
+          <XIcon className="w-5 h-5" />
+        </button>
+      </div>
+    )
+  } else {
+    return null
+  }
+}
+
+export default GlobalNotification

pages/_app.tsx

@@ -15,6 +15,7 @@ import { ViewportProvider } from '../hooks/useViewport'
 import BottomBar from '../components/mobile/BottomBar'
 import { appWithTranslation } from 'next-i18next'
 import ErrorBoundary from '../components/ErrorBoundary'
+import GlobalNotification from '../components/GlobalNotification'
 
 const MangoStoreUpdater = () => {
   useHydrateStore()
@@ -96,6 +97,7 @@ function App({ Component, pageProps }) {
           <ViewportProvider>
             <div className="bg-th-bkg-1 min-h-screen">
               <ErrorBoundary>
+                <GlobalNotification />
                 <Component {...pageProps} />
               </ErrorBoundary>
             </div>

styles/index.css

@@ -165,14 +165,13 @@ input[type='number'] {
 /* Scrollbars */
 
 body::-webkit-scrollbar {
-  width: 12px;
-  height: 8px;
-  background-color: var(--bkg-4);
+  width: 8px;
+  background-color: var(--bkg-1);
 }
 
 body::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background-color: var(--bkg-2);
+  background-color: var(--bkg-4);
 }
 
 body::-webkit-scrollbar-track {