visual improvements

pages/choose-username.tsx

@@ -6,6 +6,7 @@ import { useSession } from "next-auth/react";
 import useAccountStore from "@/store/account";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
 
 export default function ChooseUsername() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -72,10 +73,10 @@ export default function ChooseUsername() {
             </p>
           </div>
 
-          <SubmitButton
+          <AccentSubmitButton
             type="submit"
             label="Complete Registration"
-            className="mt-2 w-full text-center"
+            className="mt-2 w-full"
             loading={submitLoader}
           />
 

pages/dashboard.tsx

@@ -192,7 +192,7 @@ export default function Dashboard() {
                   onClick={() => {
                     setNewLinkModal(true);
                   }}
-                  className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group"
+                  className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
                 >
                   <FontAwesomeIcon
                     icon={faPlus}

pages/forgot.tsx

@@ -1,4 +1,4 @@
-import SubmitButton from "@/components/SubmitButton";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
@@ -73,10 +73,10 @@ export default function Forgot() {
             />
           </div>
 
-          <SubmitButton
+          <AccentSubmitButton
             type="submit"
             label="Send Login Link"
-            className="mt-2 w-full text-center"
+            className="mt-2 w-full"
             loading={submitLoader}
           />
           <div className="flex items-baseline gap-1 justify-center">

pages/links/[id].tsx

@@ -244,7 +244,9 @@ export default function Index() {
                 : undefined}
             </p>
 
-            {link?.name ? <p>{link?.description}</p> : undefined}
+            {link?.name ? (
+              <p>{unescapeString(link?.description)}</p>
+            ) : undefined}
           </div>
         </div>
 

pages/login.tsx

@@ -1,4 +1,4 @@
-import SubmitButton from "@/components/SubmitButton";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
@@ -78,7 +78,7 @@ export default function Login() {
       <form onSubmit={loginUser}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           {process.env.NEXT_PUBLIC_DISABLE_LOGIN !== "true" ? (
-            <div>
+            <>
               <p className="text-3xl text-center font-extralight">
                 Enter your credentials
               </p>
@@ -126,29 +126,29 @@ export default function Login() {
                 )}
               </div>
 
-              <SubmitButton
+              <AccentSubmitButton
                 type="submit"
                 label="Login"
-                className=" w-full text-center"
+                className="w-full text-center"
                 loading={submitLoader}
               />
-            </div>
+            </>
           ) : undefined}
           {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true" ? (
-            <SubmitButton
+            <AccentSubmitButton
               type="button"
               onClick={loginUserKeycloak}
               label="Sign in with Keycloak"
-              className=" w-full text-center"
+              className="w-full text-center"
               loading={submitLoader}
             />
           ) : undefined}
           {process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true" ? (
-            <SubmitButton
+            <AccentSubmitButton
               type="button"
               onClick={loginUserAuthentik}
               label="Sign in with Authentiks"
-              className=" w-full text-center"
+              className="w-full text-center"
               loading={submitLoader}
             />
           ) : undefined}

pages/register.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link";
 import { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
-import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -220,12 +220,12 @@ export default function Register() {
               </div>
             ) : undefined}
 
-            <button
+            <AccentSubmitButton
               type="submit"
-              className={`border primary-btn-gradient select-none duration-100 bg-black border-[#0071B7] hover:border-[#059bf8] rounded-lg text-center px-4 py-2 text-slate-200 hover:text-white `}
-            >
-              <p className="text-center w-full font-bold">Sign Up</p>
-            </button>
+              label="Sign Up"
+              className="w-full"
+              loading={submitLoader}
+            />
             <div className="flex items-baseline gap-1 justify-center">
               <p className="w-fit text-neutral">Already have an account?</p>
               <Link href={"/login"} className="block font-bold">

pages/settings/account.tsx

@@ -1,6 +1,10 @@
 import { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClose,
+  faFileExport,
+  faFileImport,
+} from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
@@ -247,10 +251,14 @@ export default function Account() {
                 <div
                   tabIndex={0}
                   role="button"
-                  className="flex gap-2 text-sm btn btn-outline btn-neutral btn-xs"
+                  className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  Import From
+                  <FontAwesomeIcon
+                    icon={faFileImport}
+                    className="w-5 h-5 duration-100"
+                  />
+                  <p>Import From</p>
                 </div>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                   <li>
@@ -300,8 +308,12 @@ export default function Account() {
             <div>
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
-                <div className="btn btn-outline btn-neutral btn-xs">
-                  Export Data
+                <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
+                  <FontAwesomeIcon
+                    icon={faFileExport}
+                    className="w-5 h-5 duration-100"
+                  />
+                  <p>Export Data</p>
                 </div>
               </Link>
             </div>

pages/subscribe.tsx

@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -47,7 +48,7 @@ export default function Subscribe() {
           </p>
         </div>
 
-        <div className="flex text-white dark:text-black gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
+        <div className="flex gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
             className={`w-full duration-100 text-sm rounded-lg p-1 ${
@@ -95,14 +96,13 @@ export default function Subscribe() {
           </fieldset>
         </div>
 
-        <button
-          className={`border primary-btn-gradient select-none duration-100 bg-black border-[#0071B7] hover:border-[#059bf8] rounded-lg text-center px-4 py-2 text-slate-200 hover:text-white `}
-          onClick={() => {
-            if (!submitLoader) submit();
-          }}
-        >
-          <p className="text-center w-full font-bold">Complete Subscription!</p>
-        </button>
+        <AccentSubmitButton
+          type="button"
+          label="Complete Subscription!"
+          className="w-full"
+          onClick={submit}
+          loading={submitLoader}
+        />
 
         <div
           onClick={() => signOut()}