From fb542bb5b5447ff4eeeef21ea4c24fcbf1c60a14 Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Sun, 6 Oct 2024 00:31:59 -0400
Subject: [PATCH] Polishing touches and tweaks

---
 web/config/tailwind.config.js                 | 14 ++++++++-
 .../components/ColorPicker/ColorPicker.tsx    |  2 ++
 .../ContactCard/ContactCard/ContactCard.tsx   |  4 +--
 .../components/FormTextList/FormTextList.tsx  | 27 ++++++++++-------
 .../Portrait/PortraitForm/PortraitForm.tsx    | 12 ++------
 .../components/Project/Project/Project.tsx    | 29 +++++++++++--------
 .../Project/ProjectForm/ProjectForm.tsx       |  8 ++---
 .../Resume/ResumeForm/ResumeForm.tsx          | 12 ++------
 .../components/ThemeToggle/ThemeToggle.tsx    | 11 ++-----
 web/src/components/Title/Titles/Titles.tsx    |  6 ++++
 .../Title/TitlesForm/TitlesForm.tsx           |  3 ++
 web/src/lib/tus.ts                            |  3 +-
 web/src/pages/HomePage/HomePage.tsx           | 26 +++++++++++++++--
 13 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/web/config/tailwind.config.js b/web/config/tailwind.config.js
index 492d82e..c427613 100644
--- a/web/config/tailwind.config.js
+++ b/web/config/tailwind.config.js
@@ -142,4 +142,16 @@ export const theme = {
 
 export const darkMode = ['class', '[data-theme="dark"]']
 export const plugins = [require('daisyui')]
-export const daisyui = { themes: ['light', 'dark'] }
+export const daisyui = {
+  themes: [
+    'light',
+    {
+      dark: {
+        ...require('daisyui/src/theming/themes')['dark'],
+        'base-100': '#212121',
+        'base-200': '#1d1d1d',
+        'base-300': '#191919',
+      },
+    },
+  ],
+}
diff --git a/web/src/components/ColorPicker/ColorPicker.tsx b/web/src/components/ColorPicker/ColorPicker.tsx
index debecab..f479241 100644
--- a/web/src/components/ColorPicker/ColorPicker.tsx
+++ b/web/src/components/ColorPicker/ColorPicker.tsx
@@ -22,6 +22,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
           <HexColorInput color={color} className="w-16" />
         </label>
         <button
+          type="button"
           className="btn btn-square btn-sm"
           onClick={async () => {
             try {
@@ -35,6 +36,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
           <Icon path={mdiContentCopy} className="size-4" />
         </button>
         <button
+          type="button"
           className="btn btn-square btn-sm  "
           onClick={async () => {
             try {
diff --git a/web/src/components/ContactCard/ContactCard/ContactCard.tsx b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
index e470dc2..7adef14 100644
--- a/web/src/components/ContactCard/ContactCard/ContactCard.tsx
+++ b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useLayoutEffect } from 'react'
 
 import SocialLinksCell from 'src/components/Social/SocialLinksCell'
 
@@ -12,7 +12,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
 
   const observedDiv = useRef(null)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!observedDiv.current) return
 
     const resizeObserver = new ResizeObserver(() => {
diff --git a/web/src/components/FormTextList/FormTextList.tsx b/web/src/components/FormTextList/FormTextList.tsx
index 4fad44c..6780ff6 100644
--- a/web/src/components/FormTextList/FormTextList.tsx
+++ b/web/src/components/FormTextList/FormTextList.tsx
@@ -4,6 +4,7 @@ import Icon from '@mdi/react'
 
 interface FormTextListProps {
   name: string
+  hint?: string
   itemPlaceholder: string
   icon?: string
   list: string[]
@@ -13,6 +14,7 @@ interface FormTextListProps {
 
 const FormTextList = ({
   name,
+  hint,
   itemPlaceholder,
   icon,
   list,
@@ -23,15 +25,20 @@ const FormTextList = ({
     <div className="flex flex-col space-y-2 bg-base-100 rounded-xl">
       <div className="flex space-x-2 justify-between">
         <div className="flex items-center">
-          <p className="font-semibold">{name}</p>
+          <p className="font-semibold text-center">{name}</p>
+        </div>
+        <div className="flex gap-2 items-center">
+          {hint && (
+            <p className="opacity-70 text-xs font-light text-center">{hint}</p>
+          )}
+          <button
+            className="btn btn-square btn-sm"
+            type="button"
+            onClick={() => setList([...list, ''])}
+          >
+            <Icon path={mdiPlus} className="size-4" />
+          </button>
         </div>
-        <button
-          className="btn btn-square btn-sm"
-          type="button"
-          onClick={() => setList([...list, ''])}
-        >
-          <Icon path={mdiPlus} className="size-4" />
-        </button>
       </div>
       {list.map((item, i) => (
         <label
@@ -53,11 +60,11 @@ const FormTextList = ({
             }
           />
           <button
-            className="btn btn-square btn-sm flex-none"
+            className="btn btn-square btn-error btn-sm flex-none"
             type="button"
             onClick={() => setList(list.filter((_, j) => j !== i))}
           >
-            <Icon path={mdiDelete} className="size-4 text-error" />
+            <Icon path={mdiDelete} className="size-4" />
           </button>
         </label>
       ))}
diff --git a/web/src/components/Portrait/PortraitForm/PortraitForm.tsx b/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
index 0b9387d..df625b8 100644
--- a/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
+++ b/web/src/components/Portrait/PortraitForm/PortraitForm.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { Meta, UploadResult } from '@uppy/core'
 import type {
@@ -56,13 +56,7 @@ const CREATE_PORTRAIT_MUTATION: TypedDocumentNode<
 `
 
 const PortraitForm = ({ portrait }: PortraitFormProps) => {
-  const [fileId, _setFileId] = useState<string>(portrait?.fileId)
-  const fileIdRef = useRef<string>(fileId)
-
-  const setFileId = (fileId: string) => {
-    _setFileId(fileId)
-    fileIdRef.current = fileId
-  }
+  const [fileId, setFileId] = useState<string>(portrait?.fileId)
 
   const unloadAbortController = new AbortController()
 
@@ -96,7 +90,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
     setFileId(result.successful[0]?.uploadURL)
     window.addEventListener(
       'beforeunload',
-      (e) => handleBeforeUnload(e, [fileIdRef.current]),
+      (e) => handleBeforeUnload(e, [fileId]),
       {
         once: true,
         signal: unloadAbortController.signal,
diff --git a/web/src/components/Project/Project/Project.tsx b/web/src/components/Project/Project/Project.tsx
index 71be951..4938381 100644
--- a/web/src/components/Project/Project/Project.tsx
+++ b/web/src/components/Project/Project/Project.tsx
@@ -46,18 +46,23 @@ const Project = ({ project }: Props) => {
           <>
             <h2 className="font-bold text-3xl w-fit">Links</h2>
             <div className="flex flex-col gap-2 w-fit">
-              {project.links.map((link, i) => (
-                <a
-                  key={i}
-                  href={link}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="btn btn-wide"
-                >
-                  <Icon path={mdiLinkVariant} className="size-5" />
-                  {link}
-                </a>
-              ))}
+              <ul className="list-none">
+                {project.links.map((link, i) => (
+                  <li key={i}>
+                    <div className="flex gap-2 items-center justify-start">
+                      <Icon path={mdiLinkVariant} className="size-4" />
+                      <a
+                        href={link}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="list-item link link-hover"
+                      >
+                        {link}
+                      </a>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             </div>
           </>
         )}
diff --git a/web/src/components/Project/ProjectForm/ProjectForm.tsx b/web/src/components/Project/ProjectForm/ProjectForm.tsx
index 26c0da3..c98cbd5 100644
--- a/web/src/components/Project/ProjectForm/ProjectForm.tsx
+++ b/web/src/components/Project/ProjectForm/ProjectForm.tsx
@@ -198,6 +198,7 @@ const ProjectForm = (props: ProjectFormProps) => {
       <div className={`${!pickerVisible && 'pt-2'}`}>
         <FormTextList
           name="Links"
+          hint="Short links are recommended"
           itemPlaceholder="URL"
           icon={mdiLinkVariant}
           list={links}
@@ -246,16 +247,13 @@ const ProjectForm = (props: ProjectFormProps) => {
                       <div className="card-actions rounded-md justify-end">
                         <button
                           type="button"
-                          className="btn btn-square btn-sm shadow-xl"
+                          className="btn btn-square btn-sm btn-error shadow-xl"
                           onClick={() => {
                             setToDelete([...toDelete, fileId])
                             setFileIds(fileIds.filter((id) => id !== fileId))
                           }}
                         >
-                          <Icon
-                            path={mdiDelete}
-                            className="size-4 text-error"
-                          />
+                          <Icon path={mdiDelete} className="size-4" />
                         </button>
                       </div>
                     </div>
diff --git a/web/src/components/Resume/ResumeForm/ResumeForm.tsx b/web/src/components/Resume/ResumeForm/ResumeForm.tsx
index 42239f4..6962b0b 100644
--- a/web/src/components/Resume/ResumeForm/ResumeForm.tsx
+++ b/web/src/components/Resume/ResumeForm/ResumeForm.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { Meta, UploadResult } from '@uppy/core'
 import type {
@@ -55,13 +55,7 @@ const CREATE_RESUME_MUTATION: TypedDocumentNode<
 `
 
 const ResumeForm = ({ resume }: ResumeFormProps) => {
-  const [fileId, _setFileId] = useState<string>(resume?.fileId)
-  const fileIdRef = useRef<string>(fileId)
-
-  const setFileId = (fileId: string) => {
-    _setFileId(fileId)
-    fileIdRef.current = fileId
-  }
+  const [fileId, setFileId] = useState<string>(resume?.fileId)
 
   const unloadAbortController = new AbortController()
 
@@ -95,7 +89,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
     setFileId(result.successful[0]?.uploadURL)
     window.addEventListener(
       'beforeunload',
-      (e) => handleBeforeUnload(e, [fileIdRef.current]),
+      (e) => handleBeforeUnload(e, [fileId]),
       {
         once: true,
         signal: unloadAbortController.signal,
diff --git a/web/src/components/ThemeToggle/ThemeToggle.tsx b/web/src/components/ThemeToggle/ThemeToggle.tsx
index b5e60a8..0b55cc0 100644
--- a/web/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/web/src/components/ThemeToggle/ThemeToggle.tsx
@@ -8,7 +8,7 @@ const DARK_THEME = 'dark'
 
 const ThemeToggle = () => {
   const [theme, setTheme] = useState(
-    localStorage.getItem('theme') ? localStorage.getItem('theme') : LIGHT_THEME
+    localStorage.getItem('theme') ?? LIGHT_THEME
   )
 
   const handleToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,13 +37,8 @@ const ThemeToggle = () => {
         checked={theme === DARK_THEME}
         onChange={handleToggle}
       />
-
-      <Icon
-        path={mdiWeatherSunny}
-        className="swap-off size-8 text-yellow-500"
-      />
-
-      <Icon path={mdiWeatherNight} className="swap-on size-8 text-blue-500" />
+      <Icon path={mdiWeatherSunny} className="swap-off size-8 text-warning" />
+      <Icon path={mdiWeatherNight} className="swap-on size-8 text-primary" />
     </label>
   )
 }
diff --git a/web/src/components/Title/Titles/Titles.tsx b/web/src/components/Title/Titles/Titles.tsx
index cd61a67..daad259 100644
--- a/web/src/components/Title/Titles/Titles.tsx
+++ b/web/src/components/Title/Titles/Titles.tsx
@@ -23,6 +23,12 @@ export const Titles = ({ titles, className }: TitlesProps) => {
               backDelay={1000}
               startWhenVisible
               loop
+              onStringTyped={(pos, self) => {
+                if (pos === 0) {
+                  self.stop()
+                  setTimeout(() => self.start(), 2500)
+                }
+              }}
             />
           </>
         )}
diff --git a/web/src/components/Title/TitlesForm/TitlesForm.tsx b/web/src/components/Title/TitlesForm/TitlesForm.tsx
index d04c30d..0644740 100644
--- a/web/src/components/Title/TitlesForm/TitlesForm.tsx
+++ b/web/src/components/Title/TitlesForm/TitlesForm.tsx
@@ -56,6 +56,9 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
 
   return (
     <Form onSubmit={onSubmit} className="max-w-80 space-y-2">
+      <p className="text-center opacity-70">
+        The first one gets displayed for longer
+      </p>
       {Array.from({ length: MAX_TITLES }).map((_, i) => (
         <Label key={i} name={`title${i}`} className="form-control w-full">
           <Label
diff --git a/web/src/lib/tus.ts b/web/src/lib/tus.ts
index 35940a9..70eba7e 100644
--- a/web/src/lib/tus.ts
+++ b/web/src/lib/tus.ts
@@ -8,9 +8,8 @@ export const deleteFile = async (fileId: string) => {
   })
 }
 
-export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) => {
+export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) =>
   batchDelete(files)
-}
 
 export const batchDelete = (files: string[]) => {
   for (const file of files) deleteFile(file)
diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx
index bc91be5..076a5af 100644
--- a/web/src/pages/HomePage/HomePage.tsx
+++ b/web/src/pages/HomePage/HomePage.tsx
@@ -1,3 +1,7 @@
+import { mdiCompass, mdiContacts } from '@mdi/js'
+import Icon from '@mdi/react'
+
+import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 import TitlesCell from 'src/components/Title/TitlesCell'
@@ -7,11 +11,27 @@ const HomePage = () => {
     <>
       <Metadata title="Home" />
 
-      <div className="hero min-h-64">
-        <div className="hero-content">
-          <div className="max-w-xl text-center">
+      <div className="hero min-h-[calc(100vh-6rem)]">
+        <div className="hero-content flex flex-col gap-8">
+          <div className="text-center">
             <TitlesCell className="text-primary" />
           </div>
+          <div className="flex gap-2">
+            <Link
+              to={routes.projects()}
+              className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            >
+              <Icon path={mdiCompass} className="size-6" />
+              Explore
+            </Link>
+            <Link
+              to={routes.contact()}
+              className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            >
+              <Icon path={mdiContacts} className="size-6" />
+              Contact
+            </Link>
+          </div>
         </div>
       </div>
     </>