refactor code to improve readability and maintainability + redesigned announcement bar

components/ModalContent/DeleteLinkModal.tsx

@@ -4,6 +4,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -59,13 +60,10 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
           'Delete' to bypass this confirmation in the future.
         </p>
 
-        <button
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
-          onClick={deleteLink}
-        >
+        <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
           Delete
-        </button>
+        </Button>
       </div>
     </Modal>
   );

components/ModalContent/DeleteUserModal.tsx

@@ -1,6 +1,7 @@
 import toast from "react-hot-toast";
 import Modal from "../Modal";
 import useUserStore from "@/store/admin/users";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -38,13 +39,10 @@ export default function DeleteUserModal({ onClose, userId }: Props) {
           </span>
         </div>
 
-        <button
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
-          onClick={deleteUser}
-        >
+        <Button className="ml-auto" intent="destructive" onClick={deleteUser}>
           <i className="bi-trash text-xl" />
           Delete, I know what I&apos;m doing
-        </button>
+        </Button>
       </div>
     </Modal>
   );

components/ModalContent/EmailChangeVerificationModal.tsx

@@ -30,12 +30,11 @@ export default function EmailChangeVerificationModal({
             "Updating this field will change your billing email on Stripe as well."}
         </p>
 
-        {process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" && (
-          <p>
-            If you change your email address, any existing Google SSO
-            connections will be removed.
-          </p>
-        )}
+        <p>
+          If you change your email address, any existing{" "}
+          {process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" && "Google"} SSO
+          connections will be removed.
+        </p>
 
         <div>
           <p>Old Email</p>

components/ModalContent/NewTokenModal.tsx

@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import useTokenStore from "@/store/tokens";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -90,18 +91,19 @@ export default function NewTokenModal({ onClose }: Props) {
               <p className="mb-2">Expires in</p>
 
               <div className="dropdown dropdown-bottom dropdown-end w-full">
-                <div
+                <Button
                   tabIndex={0}
                   role="button"
+                  intent="secondary"
                   onMouseDown={dropdownTriggerer}
-                  className="btn btn-outline w-full sm:w-36 flex items-center btn-sm h-10"
+                  className="whitespace-nowrap w-32"
                 >
                   {token.expires === TokenExpiry.sevenDays && "7 Days"}
                   {token.expires === TokenExpiry.oneMonth && "30 Days"}
                   {token.expires === TokenExpiry.twoMonths && "60 Days"}
                   {token.expires === TokenExpiry.threeMonths && "90 Days"}
                   {token.expires === TokenExpiry.never && "No Expiration"}
-                </div>
+                </Button>
                 <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
                   <li>
                     <label