From b13047e6e9a5e0f9a2a5b9ecbfbb637e95663591 Mon Sep 17 00:00:00 2001
From: Faiq Naufal <43695578+faiq-naufal@users.noreply.github.com>
Date: Fri, 14 Jun 2024 17:13:32 +0700
Subject: [PATCH] fix: update homepage design (#232)

---
 app/_features/home/join-room-field.tsx        | 22 +++--
 app/_features/home/not-signed-in.tsx          |  3 +-
 app/_features/home/signed-in.tsx              |  2 +-
 app/_features/meeting/meeting-list.tsx        | 90 +++++++++----------
 .../icons/tabler-circle-arrow-down-icon.tsx   | 22 +++++
 5 files changed, 85 insertions(+), 54 deletions(-)
 create mode 100644 app/_shared/components/icons/tabler-circle-arrow-down-icon.tsx

diff --git a/app/_features/home/join-room-field.tsx b/app/_features/home/join-room-field.tsx
index ee95aaa4..820b4335 100644
--- a/app/_features/home/join-room-field.tsx
+++ b/app/_features/home/join-room-field.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@nextui-org/react';
-import { useForm, type SubmitHandler } from 'react-hook-form';
+import { useForm, type SubmitHandler, useWatch } from 'react-hook-form';
 import { useNavigate } from '@/_shared/hooks/use-navigate';
 import TablerArrowRightIcon from '@/_shared/components/icons/tabler-arrow-right-icon';
 
@@ -9,13 +9,16 @@ type JoinRoomInput = { roomID: string };
 
 export default function JoinRoomField() {
   const { navigateTo } = useNavigate();
-  const { register, handleSubmit } = useForm<JoinRoomInput>();
+  const { register, handleSubmit, control } = useForm<JoinRoomInput>();
 
   const handleJoinRoom: SubmitHandler<JoinRoomInput> = async (data) => {
     const { roomID } = data;
     navigateTo(`/rooms/${roomID}`);
   };
 
+  const roomID = useWatch({ control, name: 'roomID' });
+  const roomIDLength = roomID ? roomID.trim().length : 0;
+
   return (
     <form
       onSubmit={handleSubmit(handleJoinRoom)}
@@ -23,7 +26,7 @@ export default function JoinRoomField() {
     >
       <div className="flex-1">
         <input
-          className="w-full rounded-md bg-zinc-950 px-3 py-2.5 text-sm shadow-sm outline-blue-300 ring-1 ring-zinc-800 placeholder:text-zinc-500"
+          className="w-full rounded-md bg-zinc-950 px-3 py-2.5 text-sm shadow-sm ring-1 ring-zinc-800 placeholder:text-zinc-500 focus-visible:outline-0 focus-visible:ring-zinc-100"
           type="text"
           placeholder="Enter room code"
           autoComplete="off"
@@ -34,9 +37,18 @@ export default function JoinRoomField() {
       <div>
         <Button
           type="submit"
-          className="h-auto min-h-0 min-w-0 rounded-lg bg-zinc-800/50 px-4 py-2.5 antialiased hover:bg-zinc-800 active:bg-zinc-700"
+          className={`h-auto min-h-0 min-w-0 rounded-md px-4 py-2.5 antialiased !opacity-100 ${
+            roomIDLength > 0 ? 'bg-zinc-800' : 'bg-zinc-800/50'
+          }`}
+          disabled={roomIDLength === 0}
+          isDisabled={roomIDLength === 0}
+          aria-disabled={roomIDLength === 0}
         >
-          <TablerArrowRightIcon className="h-5 w-5 text-zinc-100/50" />
+          <TablerArrowRightIcon
+            className={`h-5 w-5 ${
+              roomIDLength > 0 ? 'text-zinc-100' : 'text-zinc-100/50'
+            }`}
+          />
         </Button>
       </div>
     </form>
diff --git a/app/_features/home/not-signed-in.tsx b/app/_features/home/not-signed-in.tsx
index 10fa1899..05e1b940 100644
--- a/app/_features/home/not-signed-in.tsx
+++ b/app/_features/home/not-signed-in.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { Button } from '@nextui-org/react';
 import JoinRoomField from '@/_features/home/join-room-field';
 import TablerArrowRightIcon from '@/_shared/components/icons/tabler-arrow-right-icon';
+import TablerCircleArrowDownIcon from '@/_shared/components/icons/tabler-circle-arrow-down-icon';
 import TablerExternalIcon from '@/_shared/components/icons/tabler-external-icon';
 
 export default function NotSignedIn() {
@@ -44,7 +45,7 @@ export default function NotSignedIn() {
                   >
                     <span className="text-sm font-medium">Learn more</span>
                     <span>
-                      <TablerArrowRightIcon className="h-5 w-5 rotate-90" />
+                      <TablerCircleArrowDownIcon className="h-5 w-5" />
                     </span>
                   </Button>
                 </div>
diff --git a/app/_features/home/signed-in.tsx b/app/_features/home/signed-in.tsx
index fcdddad2..99dc8cd8 100644
--- a/app/_features/home/signed-in.tsx
+++ b/app/_features/home/signed-in.tsx
@@ -83,7 +83,7 @@ export default function SignedIn({
   return (
     <>
       <div className="grid w-full grid-cols-1 gap-y-12 py-10 md:grid-cols-2 md:py-0">
-        <div className="flex items-center md:px-5 lg:px-10">
+        <div className="flex items-center">
           <div>
             <h2 className="text-3xl font-semibold tracking-wide text-zinc-200 lg:text-4xl">
               Hi, {firstName}.
diff --git a/app/_features/meeting/meeting-list.tsx b/app/_features/meeting/meeting-list.tsx
index cfed2983..eee25b72 100644
--- a/app/_features/meeting/meeting-list.tsx
+++ b/app/_features/meeting/meeting-list.tsx
@@ -64,50 +64,51 @@ export default function MeetingList({ events }: { events: EventType.Event[] }) {
     <>
       <ScheduleModal />
       <div className="max-w-full rounded-xl bg-zinc-900 ring-1 ring-zinc-800">
-        <nav className="flex items-center justify-between gap-4 px-4 pt-4">
-          <ul className="flex items-center border-b border-zinc-800 text-sm font-medium">
-            <li className="relative py-2">
-              <Button
-                className={`h-8 min-h-0 w-full min-w-0 rounded bg-transparent px-3 py-1.5 font-medium antialiased hover:bg-zinc-800 active:bg-zinc-700 ${
-                  activeTab === 'today' ? 'text-zinc-100' : 'text-zinc-400'
-                }`}
-                onPress={() => setActiveTab('today')}
-              >
-                Today
-              </Button>
-              {activeTab === 'today' ? (
-                <div className="absolute bottom-0 left-1/2 inline-block h-[2px] w-3/4 -translate-x-1/2 bg-white"></div>
-              ) : null}
-            </li>
-            <li className="relative py-2">
-              <Button
-                className={`h-8 min-h-0 w-full min-w-0 rounded bg-transparent px-3 py-1.5 font-medium antialiased hover:bg-zinc-800 active:bg-zinc-700 ${
-                  activeTab === 'upcoming' ? 'text-zinc-100' : 'text-zinc-400'
-                }`}
-                onPress={() => setActiveTab('upcoming')}
-              >
-                Upcoming
-              </Button>
-              {activeTab === 'upcoming' ? (
-                <div className="absolute bottom-0 left-1/2 inline-block h-[2px] w-3/4 -translate-x-1/2 bg-white"></div>
-              ) : null}
-            </li>
-          </ul>
-          <Button
-            className="inline-flex h-auto min-h-0 min-w-0 items-center gap-2 rounded-md bg-zinc-700 px-3 py-1.5 text-sm font-medium text-zinc-100 antialiased hover:bg-zinc-600 active:bg-zinc-500"
-            onPress={() =>
-              document.dispatchEvent(
-                new CustomEvent('open:schedule-meeting-modal')
-              )
-            }
-          >
-            Add schedule
-          </Button>
+        <nav className="px-4 pt-4">
+          <div className="flex items-center justify-between gap-4 border-b border-zinc-800">
+            <ul className="flex items-center text-sm font-medium">
+              <li className="relative py-2">
+                <Button
+                  className={`h-8 min-h-0 w-full min-w-0 rounded bg-transparent px-3 py-1.5 font-medium antialiased hover:bg-zinc-800 active:bg-zinc-700 ${
+                    activeTab === 'today' ? 'text-zinc-100' : 'text-zinc-400'
+                  }`}
+                  onPress={() => setActiveTab('today')}
+                >
+                  Today
+                </Button>
+                {activeTab === 'today' ? (
+                  <div className="absolute bottom-0 left-1/2 inline-block h-[2px] w-3/4 -translate-x-1/2 bg-white"></div>
+                ) : null}
+              </li>
+              <li className="relative py-2">
+                <Button
+                  className={`h-8 min-h-0 w-full min-w-0 rounded bg-transparent px-3 py-1.5 font-medium antialiased hover:bg-zinc-800 active:bg-zinc-700 ${
+                    activeTab === 'upcoming' ? 'text-zinc-100' : 'text-zinc-400'
+                  }`}
+                  onPress={() => setActiveTab('upcoming')}
+                >
+                  Upcoming
+                </Button>
+                {activeTab === 'upcoming' ? (
+                  <div className="absolute bottom-0 left-1/2 inline-block h-[2px] w-3/4 -translate-x-1/2 bg-white"></div>
+                ) : null}
+              </li>
+            </ul>
+            <Button
+              className="inline-flex h-auto min-h-0 min-w-0 items-center gap-2 rounded-md bg-zinc-700 px-3 py-1.5 text-sm font-medium text-zinc-100 antialiased hover:bg-zinc-600 active:bg-zinc-500"
+              onPress={() =>
+                document.dispatchEvent(
+                  new CustomEvent('open:schedule-meeting-modal')
+                )
+              }
+            >
+              Add schedule
+            </Button>
+          </div>
         </nav>
-
         {activeEvents.length > 0 ? (
           <div className="relative">
-            <ul className="flex h-[300px] flex-col gap-4 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-5 pt-4">
+            <ul className="flex h-[310px] flex-col gap-4 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-8 pt-4">
               {activeEvents.map((event, index) => {
                 const active = index === 0 && activeTab === 'today';
 
@@ -164,7 +165,7 @@ const MeetingItem = ({
     <Button
       as={Link}
       href={`/rooms/${event.roomId}`}
-      className={`flex h-[66px] min-h-0 w-full min-w-0 items-center gap-4 rounded px-4 py-3 antialiased ${
+      className={`flex h-auto min-h-0 w-full min-w-0 items-center gap-4 rounded px-4 py-3 antialiased ${
         activeItem
           ? 'bg-red-900 hover:bg-red-800 active:bg-red-700'
           : 'bg-zinc-900 hover:bg-zinc-800 active:bg-zinc-700'
@@ -195,11 +196,6 @@ const MeetingItem = ({
           >
             {event.name}
           </div>
-          <div
-            className={`truncate text-xs ${
-              activeItem ? 'text-red-400' : 'text-zinc-500'
-            }`}
-          ></div>
         </div>
       </div>
       {activeItem && now ? (
diff --git a/app/_shared/components/icons/tabler-circle-arrow-down-icon.tsx b/app/_shared/components/icons/tabler-circle-arrow-down-icon.tsx
new file mode 100644
index 00000000..8324db9e
--- /dev/null
+++ b/app/_shared/components/icons/tabler-circle-arrow-down-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGElementPropsType } from '@/_shared/types/types';
+
+export default function TablerCircleArrowDownIcon(props: SVGElementPropsType) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+      <path d="M8 12l4 4" />
+      <path d="M12 8v8" />
+      <path d="M16 12l-4 4" />
+    </svg>
+  );
+}