visual improvements

components/AccentSubmitButton.tsx

@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type Props = {
+  onClick?: Function;
+  icon?: IconProp;
+  label: string;
+  loading?: boolean;
+  className?: string;
+  type?: "button" | "submit" | "reset" | undefined;
+};
+
+export default function AccentSubmitButton({
+  onClick,
+  icon,
+  label,
+  loading,
+  className,
+  type,
+}: Props) {
+  return (
+    <button
+      type={type ? type : undefined}
+      className={`border primary-btn-gradient select-none duration-200 bg-black border-[oklch(var(--p))] hover:border-[#0070b5] rounded-lg text-center px-4 py-2 text-white active:scale-95 tracking-wider w-fit flex justify-center items-center gap-2 ${
+        className || ""
+      }`}
+      onClick={() => {
+        if (loading !== undefined && !loading && onClick) onClick();
+      }}
+    >
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="font-bold">{label}</p>
+    </button>
+  );
+}

components/Modal/Link/PreservedFormats.tsx

@@ -166,7 +166,7 @@ export default function PreservedFormats() {
       <div className="flex flex-col-reverse sm:flex-row gap-5 items-center justify-center">
         {link?.collection.ownerId === session.data?.user.id ? (
           <div
-            className={`btn btn-accent text-white ${
+            className={`btn btn-accent dark:border-violet-400 text-white ${
               link?.pdfPath &&
               link?.screenshotPath &&
               link?.pdfPath !== "pending" &&

components/ModalContent/EditCollectionModal.tsx

@@ -111,7 +111,7 @@ export default function EditCollectionModal({
         </div>
 
         <button
-          className="btn btn-accent text-white w-fit ml-auto"
+          className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
           Save

components/ModalContent/EditCollectionSharingModal.tsx

@@ -438,7 +438,7 @@ export default function EditCollectionSharingModal({
 
         {permissions === true && (
           <button
-            className="btn btn-accent text-white w-fit ml-auto mt-3"
+            className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
             onClick={submit}
           >
             Save

components/ModalContent/EditLinkModal.tsx

@@ -159,7 +159,10 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
       </div>
 
       <div className="flex justify-end items-center mt-5">
-        <button className="btn btn-accent text-white" onClick={submit}>
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
           Save
         </button>
       </div>

components/ModalContent/NewCollectionModal.tsx

@@ -116,7 +116,7 @@ export default function NewCollectionModal({ onClose }: Props) {
         </div>
 
         <button
-          className="btn btn-accent text-white w-fit ml-auto"
+          className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
           Create Collection

components/ModalContent/NewLinkModal.tsx

@@ -192,7 +192,10 @@ export default function NewLinkModal({ onClose }: Props) {
           <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>
 
-        <button className="btn btn-accent text-white" onClick={submit}>
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
           Create Link
         </button>
       </div>

components/ModalContent/PreservedFormatsModal.tsx

@@ -191,7 +191,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
         <div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
           {link?.collection.ownerId === session.data?.user.id ? (
             <div
-              className={`btn btn-accent text-white ${
+              className={`btn btn-accent dark:border-violet-400 text-white ${
                 link?.pdfPath &&
                 link?.screenshotPath &&
                 link?.pdfPath !== "pending" &&

components/ModalContent/UploadFileModal.tsx

@@ -237,7 +237,10 @@ export default function UploadFileModal({ onClose }: Props) {
           <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>
 
-        <button className="btn btn-accent text-white" onClick={submit}>
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
           Create Link
         </button>
       </div>

components/Navbar.tsx

@@ -68,7 +68,7 @@ export default function Navbar() {
             <div
               tabIndex={0}
               role="button"
-              className="flex items-center group btn btn-accent text-white btn-sm px-2"
+              className="flex items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
             >
               <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
               <FontAwesomeIcon

components/NoLinksFound.tsx

@@ -20,7 +20,7 @@ export default function NoLinksFound({ text }: Props) {
           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}

components/SubmitButton.tsx

@@ -21,7 +21,7 @@ export default function SubmitButton({
   return (
     <button
       type={type ? type : undefined}
-      className={`btn btn-accent text-white tracking-wider w-fit flex items-center gap-2 ${
+      className={`btn btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2 ${
         className || ""
       }`}
       onClick={() => {