adding warning

client/components/modules/hubs/HubFormCard/HubFormCard.module.scss

@@ -103,10 +103,3 @@
   border-top: 2px solid $color-border-1;
   padding: 24px 32px;
 }
-
-.warning {
-  background: $color-semantic-warning;
-  margin: 0 32px;
-  padding: 24px;
-  border-radius: 20px;
-}

client/components/modules/hubs/HubFormCard/HubFormCard.tsx

@@ -18,6 +18,7 @@ import { HubT } from 'types/General';
 import SecretCopy from '@Shared/SecretCopy/SecretCopy';
 import { CookiesE } from 'types/Cookies';
 import { getCookie } from 'cookies-next';
+import Warning from '@Shared/Warning/Warning';
 
 type HubFormCardPropsT = {
   hub: HubT;
@@ -203,29 +204,6 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
     return true;
   };
 
-  const Warning = () => (
-    <div className={styles.warning}>
-      <div className="flex-align-center mb-12">
-        <Icon name="alert-triangle" classProp="flex-shrink-0 mr-12" />
-        <h3>Be Advised</h3>
-      </div>
-      <p className="mb-24">
-        Due to temporary system instability, customizing a subdomain or
-        connecting a custom domain may impact Spoke and the Admin panel. If you
-        experience any issues with these features, please contact us.
-      </p>
-
-      <div className="flex-justify-end ">
-        <Button
-          onClick={() => {
-            window.open('mailto:[email protected]');
-          }}
-          text="Contact"
-        />
-      </div>
-    </div>
-  );
-
   return (
     <div className={`${styles.card_wrapper} ${classProp}`}>
       <div className={styles.card_container}>
@@ -241,7 +219,17 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
           <h1 className={styles.title}>Hub Details</h1>
         </div>
 
-        <Warning />
+        <div className="mx-32">
+          <Warning
+            title="Be Advised"
+            message=" Due to temporary system instability, customizing a subdomain or
+        connecting a custom domain may impact Spoke and the Admin panel. If you
+        experience any issues with these features, please contact us."
+            onClick={() => {
+              window.open('mailto:[email protected]');
+            }}
+          />
+        </div>
 
         <form onSubmit={formik.handleSubmit}>
           <div className={styles.form_contents}>

client/components/shared/Warning/Warning.module.scss

@@ -0,0 +1,7 @@
+@use 'styles/core/boilerplate' as *;
+
+.warning {
+  background: $color-semantic-warning;
+  padding: 24px;
+  border-radius: 20px;
+}

client/components/shared/Warning/Warning.tsx

@@ -0,0 +1,24 @@
+import { Icon, Button } from '@mozilla/lilypad-ui';
+import styles from './Warning.module.scss';
+
+type WarningPropsT = {
+  onClick: () => void;
+  title: string;
+  message: string;
+};
+
+const Warning = ({ onClick, title, message }: WarningPropsT) => (
+  <div className={styles.warning}>
+    <div className="flex-align-center mb-12">
+      <Icon name="alert-triangle" classProp="flex-shrink-0 mr-12" />
+      <h3>{title}</h3>
+    </div>
+    <p className="mb-24">{message}</p>
+
+    <div className="flex-justify-end ">
+      <Button onClick={onClick} text="Contact" />
+    </div>
+  </div>
+);
+
+export default Warning;

client/pages/dashboard/dashboard.module.scss

@@ -9,3 +9,11 @@
     min-width: initial;
   }
 }
+
+.warning {
+  max-width: 1200px;
+  margin-bottom: 24px;
+  @include tablet-down {
+    max-width: 100%;
+  }
+}

client/pages/dashboard/index.tsx

@@ -15,6 +15,7 @@ import { AxiosRequestHeaders } from 'axios';
 import SidePanelLayout from 'layouts/SidePanelLayout/SidePanelLayout';
 import { CustomizeHub } from '@Modules/hubs/CustomizeHub/CustomizeHub';
 import { useIsProfessionalUp } from 'hooks/usePlans';
+import Warning from '@Shared/Warning/Warning';
 
 type DashboardPropsT = { subscription: SubscriptionT };
 
@@ -156,6 +157,16 @@ const Dashboard = ({ subscription }: DashboardPropsT) => {
         subscription={subscription}
         isLoading={isLoading && Boolean(account.planName)}
       >
+        <div className={styles.warning}>
+          <Warning
+            title="Be Advised"
+            message="We are aware of an outage currently impacting Starter and Personal plans in one of our service regions. If your assigned URL contains 'us1' you may be affected by this outage. Our team is actively working to resolve the issue, and we appreciate your patience. We apologize for any inconvenience this may cause. If you have any questions regarding this issue, please contact us,"
+            onClick={() => {
+              window.open('mailto:[email protected]');
+            }}
+          />
+        </div>
+
         <div className={styles.cards_wrapper}>
           {/* Hub Creating */}
           {/* TODO (Tech Debt): Right now (EA) we are only dealing with one hub, so, if there are zero