Re-add scroll bar style, fix missed tw conversion

Fixed backup message still using old method of "className" changed to use css={ts}
readded scrollbar styling from PR#2118

Author: notAreYouScared

resources/scripts/assets/css/GlobalStylesheet.ts

@@ -6,19 +6,19 @@ export default createGlobalStyle`
         ${tw`font-sans bg-neutral-800 text-neutral-200`};
         letter-spacing: 0.015em;
     }
-   
+
     h1, h2, h3, h4, h5, h6 {
         ${tw`font-medium tracking-normal font-header`};
     }
-    
+
     p {
         ${tw`text-neutral-200 leading-snug font-sans`};
     }
-    
+
     form {
         ${tw`m-0`};
     }
-        
+
     textarea, select, input, button, button:focus, button:focus-visible {
         ${tw`outline-none`};
     }
@@ -32,4 +32,41 @@ export default createGlobalStyle`
     input[type=number] {
         -moz-appearance: textfield !important;
     }
+
+    /* Scroll Bar Style */
+    ::-webkit-scrollbar {
+        background: none;
+        width: 16px;
+        height: 16px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border: solid 0 rgb(0 0 0 / 0%);
+        border-right-width: 4px;
+        border-left-width: 4px;
+        -webkit-border-radius: 9px 4px;
+        -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+    }
+
+    ::-webkit-scrollbar-track-piece {
+        margin: 4px 0;
+    }
+
+    ::-webkit-scrollbar-thumb:horizontal {
+        border-right-width: 0;
+        border-left-width: 0;
+        border-top-width: 4px;
+        border-bottom-width: 4px;
+        -webkit-border-radius: 4px 9px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        -webkit-box-shadow:
+        inset 0 0 0 1px hsl(212, 92%, 43%),
+        inset 0 0 0 4px hsl(212, 92%, 43%);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: transparent;
+    }
 `;

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -52,7 +52,7 @@ export default () => {
                 </div>
             }
             {featureLimits.backups === 0 &&
-                <p className="text-center text-sm text-neutral-400">
+                <p css={tw`text-center text-sm text-neutral-400`}>
                     Backups cannot be created for this server.
                 </p>
             }