fix: migrate OfflineBanner styles to Tailwind CSS

Author: ItsAbir005

src/components/OfflineBanner/OfflineBanner.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import isClient from "../../utilities/is-client.js";
-import "./OfflineBanner.scss";
 
 export default function OfflineBanner() {
   const [online, setOnline] = useState(() =>
@@ -26,21 +25,21 @@ export default function OfflineBanner() {
 
   return (
     <div
-      className="offline-banner"
+      className="flex items-center justify-center px-20 py-[8px] bg-blue-600 text-white text-14 font-medium text-center border-b border-blue-800"
       role="status"
       aria-live="polite"
       data-testid="offline-banner"
     >
-      <div className="offline-banner__content">
+      <div className="flex items-center gap-[8px]">
         <svg
-          className="offline-banner__icon"
+          className="shrink-0 w-[16px] h-[16px] fill-blue-200"
           aria-hidden="true"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
         </svg>
-        <span className="offline-banner__text">
+        <span className="tracking-[0.01em]">
           You are currently offline. Some features may be unavailable.
         </span>
       </div>

src/components/OfflineBanner/OfflineBanner.scss

@@ -3,16 +3,16 @@
 exports[`OfflineBanner renders the offline banner snapshot 1`] = `
 <div
   aria-live="polite"
-  class="offline-banner"
+  class="flex items-center justify-center px-20 py-[8px] bg-blue-600 text-white text-14 font-medium text-center border-b border-blue-800"
   data-testid="offline-banner"
   role="status"
 >
   <div
-    class="offline-banner__content"
+    class="flex items-center gap-[8px]"
   >
     <svg
       aria-hidden="true"
-      class="offline-banner__icon"
+      class="shrink-0 w-[16px] h-[16px] fill-blue-200"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,7 +21,7 @@ exports[`OfflineBanner renders the offline banner snapshot 1`] = `
       />
     </svg>
     <span
-      class="offline-banner__text"
+      class="tracking-[0.01em]"
     >
       You are currently offline. Some features may be unavailable.
     </span>