updates

client/components/shared/Warning/Warning.tsx

@@ -1,23 +1,31 @@
 import { Icon, Button } from '@mozilla/lilypad-ui';
 import styles from './Warning.module.scss';
+import { ReactNode } from 'react';
 
 type WarningPropsT = {
-  onClick: () => void;
+  onClick?: () => void;
   title: string;
   message: string;
+  children?: ReactNode;
 };
 
-const Warning = ({ onClick, title, message }: WarningPropsT) => (
+const Warning = ({ onClick, title, message, children }: 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>
+    <p className="mb-24 paragraph">{message}</p>
 
-    <div className="flex-justify-end ">
-      <Button onClick={onClick} text="Contact" />
-    </div>
+    {children ? <div> {children}</div> : ''}
+
+    {onClick ? (
+      <div className="flex-justify-end ">
+        <Button onClick={onClick} text="Contact" />
+      </div>
+    ) : (
+      ''
+    )}
   </div>
 );
 

client/layouts/SidePanelLayout/SidePanelLayout.tsx

@@ -7,6 +7,7 @@ import SkeletonCard from '@Shared/SkeletonCard/SkeletonCard';
 import { SubscriptionT } from 'services/subscription.service';
 import Hub, { loadingHub } from 'classes/Hub';
 import Warning from '@Shared/Warning/Warning';
+import { Button } from '@mozilla/lilypad-ui';
 
 type SidePanelLayoutProps = {
   children: ReactNode;
@@ -32,12 +33,23 @@ const SidePanelLayout = ({
         <div className="flex-justify-center mt-20 px-20">
           <div className={styles.warning}>
             <Warning
-              title="Storage Maximum Reached"
-              message="Be Advised - The content storage has exceted the alloted maximum. Stored data may be affected. Contact us if you have any questions."
-              onClick={() => {
-                window.open('mailto:[email protected]');
-              }}
-            />
+              title="Content Storage Limit Exceeded"
+              message="You’ve reached the maximum data capacity for your current plan. To avoid performance issues with your Hub, please upgrade your plan or delete content from your Hub."
+            >
+              <div className="flex-justify-end ">
+                <Button
+                  href="/subscribe"
+                  text="Upgrade Now"
+                  classProp="mr-12"
+                />
+                <Button
+                  href="https://hubs.mozilla.com/docs/setup-faq.html"
+                  text="More info"
+                  category="primary_outline"
+                  target="_blank"
+                />
+              </div>
+            </Warning>
           </div>
         </div>
       )}