From a63c214d8d3074b329882e2fdd446b0c79de4805 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 2 Apr 2025 09:20:04 +0200
Subject: [PATCH] Use tailwind-based components in AppUpdateBanner

---
 src/app/App.tsx                 |  2 +-
 src/common/AppUpdateBanner.scss | 17 ---------------
 src/common/AppUpdateBanner.tsx  | 38 +++++++++++++++++++++------------
 3 files changed, 25 insertions(+), 32 deletions(-)
 delete mode 100644 src/common/AppUpdateBanner.scss

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 18ce3fc0..11e99895 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -87,7 +87,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
         </div>
       </div>
 
-      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
+      <AppUpdateBanner isOpen={appUpdated} onClose={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>
   );
 };
diff --git a/src/common/AppUpdateBanner.scss b/src/common/AppUpdateBanner.scss
deleted file mode 100644
index 5f84ca85..00000000
--- a/src/common/AppUpdateBanner.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@use '../utils/mixins/horizontal-align';
-
-.app-update-banner.app-update-banner {
-  @include horizontal-align.horizontal-align();
-
-  position: fixed;
-  top: base.$headerHeight - 25px;
-  padding: 0 4rem 0 0;
-  z-index: 1040;
-  margin: 0;
-  color: var(--text-color);
-  text-align: center;
-  width: 700px;
-  max-width: calc(100% - 30px);
-  box-shadow: 0 0 1rem var(--brand-color);
-}
diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx
index c3c6db62..05c01abb 100644
--- a/src/common/AppUpdateBanner.tsx
+++ b/src/common/AppUpdateBanner.tsx
@@ -1,34 +1,44 @@
 import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SimpleCard, useToggle } from '@shlinkio/shlink-frontend-kit';
-import type { MouseEventHandler } from 'react';
-import { forwardRef, useCallback } from 'react';
-import { Alert, Button } from 'reactstrap';
-import './AppUpdateBanner.scss';
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
+import { Button, Card, CloseButton } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { clsx } from 'clsx';
+import type { FC } from 'react';
+import { useCallback } from 'react';
 
 interface AppUpdateBannerProps {
   isOpen: boolean;
-  toggle: MouseEventHandler<any>;
+  onClose: () => void;
   forceUpdate: () => void;
 }
 
-export const AppUpdateBanner = forwardRef<HTMLElement, AppUpdateBannerProps>(({ isOpen, toggle, forceUpdate }, ref) => {
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, forceUpdate }) => {
   const [isUpdating,, setUpdating] = useToggle();
   const update = useCallback(() => {
     setUpdating();
     forceUpdate();
   }, [forceUpdate, setUpdating]);
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary" innerRef={ref}>
-      <h4 className="mb-4">This app has just been updated!</h4>
-      <p className="mb-0">
+    <Card className={clsx(
+      'tw:w-[700px] tw:max-w-[calc(100%-30px)]',
+      'tw:fixed tw:top-[35px] tw:left-[50%] tw:translate-x-[-50%] tw:z-[1040]',
+    )}>
+      <Card.Header className="tw:flex tw:items-center tw:justify-between">
+        <b>This app has just been updated!</b>
+        <CloseButton onClick={onClose} />
+      </Card.Header>
+      <Card.Body className="tw:flex tw:gap-4 tw:items-center tw:justify-between tw:max-md:flex-col">
         Restart it to enjoy the new features.
-        <Button role="button" disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
+        <Button disabled={isUpdating} variant="secondary" solid onClick={update}>
           {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
           {isUpdating && <>Restarting...</>}
         </Button>
-      </p>
-    </Alert>
+      </Card.Body>
+    </Card>
   );
-});
+};