Fix styles and re-add server availability message (#334)

* Revert server availability code

Not ready for primetime

* Fix some global styles

* Add extra padding

* Re-add server availability code

* Fix some global styles

* Add extra padding

* Re-add server availability code

components/GridRepCollection/index.scss

@@ -3,6 +3,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   margin: 0 auto;
+  margin-top: $unit-2x;
   padding: 0;
   padding-top: $unit-fourth;
   transition: opacity 0.14s ease-in-out;

components/Layout/index.tsx

@@ -77,9 +77,7 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
 
   return (
     <>
-      {/* {appState.version ? ServerAvailable() : ''} */}
-      <TopHeader />
-      {updateToast()}
+      {appState.version ? ServerAvailable() : ''}
       <main>{children}</main>
     </>
   )

pages/_app.tsx

@@ -36,8 +36,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => () => unsubscribe(), [])
 
   useEffect(() => {
-    console.log('granblue.team version:')
-    console.log(appState.version)
+    console.log(`granblue.team version: ${appState.version?.version}`)
   }, [])
 
   const accountCookie = getCookie('account')
@@ -135,11 +134,11 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ToastProvider swipeDirection="right">
         <TooltipProvider>
           <Layout>
-            <Component {...pageProps} />
-            {/* {!appState.version ? (
+            {!appState.version ? (
               serverUnavailable()
             ) : (
-            )} */}
+              <Component {...pageProps} />
+            )}
           </Layout>
           <Viewport className="ToastViewport" />
         </TooltipProvider>

styles/globals.scss

@@ -160,21 +160,6 @@ select {
     gap: $unit * 2;
   }
 
-  #NotFound {
-    height: 200px;
-    width: 400px;
-    margin: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    h2 {
-      color: $grey-60;
-      font-size: $font-regular;
-      text-align: center;
-    }
-  }
-
   img.profile {
     background: $grey-90;
 
@@ -207,16 +192,6 @@ select {
     }
   }
 
-  i.tag {
-    background: var(--tag-bg);
-    color: var(--tag-text);
-    border-radius: calc($unit / 2);
-    font-size: 10px;
-    font-weight: $bold;
-    padding: 4px 6px;
-    text-transform: uppercase;
-  }
-
   .infinite-scroll-component {
     overflow: hidden !important;
   }
@@ -281,6 +256,16 @@ select {
   }
 }
 
+.MenuItem i.tag {
+  background: var(--tag-bg);
+  color: var(--tag-text);
+  border-radius: calc($unit / 2);
+  font-size: 10px;
+  font-weight: $bold;
+  padding: 4px 6px;
+  text-transform: uppercase;
+}
+
 .ServerUnavailableWrapper {
   display: flex;
   align-items: center;
@@ -407,3 +392,18 @@ select {
     }
   }
 }
+
+#NotFound {
+  height: 200px;
+  width: 400px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h2 {
+    color: $grey-60;
+    font-size: $font-regular;
+    text-align: center;
+  }
+}