From f0bb5dd74014e8ceef9cedeccb440e0ac1677b59 Mon Sep 17 00:00:00 2001
From: Naman Khandelwal <khandelwalnaman0101@gmail.com>
Date: Mon, 16 Jun 2025 00:57:56 +0530
Subject: [PATCH] refactor(client): update OfflineWarning to use Alert and
 Spacer components (#60871)

---
 client/src/components/OfflineWarning/offline-warning.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/OfflineWarning/offline-warning.tsx b/client/src/components/OfflineWarning/offline-warning.tsx
index 42d3605a282..4754c2c5916 100644
--- a/client/src/components/OfflineWarning/offline-warning.tsx
+++ b/client/src/components/OfflineWarning/offline-warning.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Alert, Spacer } from '@freecodecamp/ui';
 
 import './offline-warning.css';
 
@@ -43,8 +44,10 @@ function OfflineWarning({
 
   return showWarning ? (
     <>
-      <div className='offline-warning alert-info'>{message}</div>
-      <div style={{ height: `38px` }} />
+      <Alert variant='info' className='offline-warning'>
+        {message}
+      </Alert>
+      <Spacer size='m' />
     </>
   ) : null;
 }