ui fixes

ddimitrov1108 · Jan 28, 2024 · 8e4d309 · 8e4d309
1 parent 59956a3
commit 8e4d309
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 68 deletions.
diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx
@@ -1,6 +1,8 @@
 import ChangePasswordWithTokenForm from "@/components/forms/ChangePasswordWithTokenForm";
 import ResetPasswordForm from "@/components/forms/ResetPasswordForm";
 import Title from "../title";
+import { redirect } from "next/navigation";
+import { toast } from "sonner";
 
 interface Props {
   searchParams: { token?: string | string[] | undefined };
@@ -24,7 +26,8 @@ const ResetPasswordPage = async ({ searchParams }: Props) => {
   ).default.getByToken(searchParams.token as string);
 
   if (!user) {
-    return (await import("next/navigation")).redirect("/sign-in");
+    toast.error("User does not exist");
+    return redirect("/sign-in");
   }
 
   return (

diff --git a/app/globals.css b/app/globals.css
@@ -54,7 +54,7 @@ body::-webkit-scrollbar-thumb {
 .styled-overflow-horizontal::-webkit-scrollbar-thumb {
   border-radius: 6px;
   height: 4px;
-  background-color: #28293D;
+  background-color: #303149;
 }
 
 .color-picker {

diff --git a/components/task/components/Task.tsx b/components/task/components/Task.tsx
@@ -53,7 +53,7 @@ const Task = ({ task }: Props) => {
   return (
     <div
       onClick={onClickHandler}
-      className="transition-all group p-2.5 cursor-pointer flex gap-4 items-start bg-black-main hover:bg-black-main/70 border border-transparent border-b-black-light/20 last:border-b-transparent first:rounded-t-md last:rounded-b-md"
+      className="transition-all group p-2.5 cursor-pointer flex gap-2 items-start bg-black-main hover:bg-black-main/70 border border-transparent border-b-black-light/20 last:border-b-transparent first:rounded-t-md last:rounded-b-md"
     >
       <ButtonIcon
         onClick={onCompletedHandler}
@@ -68,67 +68,74 @@ const Task = ({ task }: Props) => {
       </ButtonIcon>
 
       <div className="w-full grid gap-1">
-        <div>
-          <h1
-            className={cn(
-              "transition-all font-[500] w-full max-w-[400px] truncate ...",
-              task.completed ? "line-through text-main" : "text-light"
-            )}
-          >
-            {task.name}
-          </h1>
-
-          <div className="flex items-center gap-1">
-            <span
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <h1
+              title={task.name}
               className={cn(
-                "max-w-fit max-h-fit text-xs xxs:text-sm",
-                isPastDue ? "text-error-main" : "text-primary-main"
+                "transition-all font-medium w-full text-sm max-w-[170px] xxs:max-w-[220px] xs:max-w-[260px] sm:text-base sm:max-w-[440px] truncate ...",
+                task.completed ? "line-through text-main" : "text-light"
               )}
             >
-              {dueDate}
-            </span>
-
-            {task.description && (
-              <>
-                <span className="text-main">&#8226;</span>
-                <ReceiptText size={16} className="text-main" />
-              </>
-            )}
+              {task.name}
+            </h1>
+
+            <div className="flex items-center gap-1">
+              <span
+                className={cn(
+                  "max-w-fit max-h-fit text-xs xxs:text-sm",
+                  isPastDue ? "text-error-main" : "text-primary-main"
+                )}
+              >
+                {dueDate}
+              </span>
+
+              {task.description && (
+                <>
+                  <span className="text-main">&#8226;</span>
+                  <ReceiptText size={16} className="text-main" />
+                </>
+              )}
+            </div>
           </div>
-        </div>
 
-        {task.labels && !!task.labels.length && (
-          <div className="flex w-full items-center gap-1 py-1 overflow-auto styled-overflow-horizontal">
-            {task.labels.map((label) => (
-              <Link
-                onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                key={label.id}
-                href={`/todo/label/${label.id}`}
-              >
-                <Chip title={label.name} prepEndIcon={<AtSign />} />
-              </Link>
-            ))}
+          <div className="flex items-start gap-1">
+            <ButtonIcon
+              onClick={onImportantHandler}
+              className={cn(
+                "transition-all min-w-fit min-h-fit p-0.5",
+                task.important
+                  ? "text-warning-main"
+                  : "text-main hover:text-light"
+              )}
+            >
+              <Star size={20} />
+            </ButtonIcon>
+
+            <div
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
+              }}
+            >
+              <TaskInteractiveButtons task={task} />
+            </div>
           </div>
-        )}
-      </div>
+        </div>
 
-      <div className="flex items-start gap-1">
-        <ButtonIcon
-          onClick={onImportantHandler}
-          className={cn(
-            "transition-all min-w-fit min-h-fit p-0.5",
-            task.important ? "text-warning-main" : "text-main hover:text-light"
+        <div className="w-full grid gap-1 pr-3">
+          {task.labels && !!task.labels.length && (
+            <div className="flex w-full items-center gap-1 py-1 overflow-auto styled-overflow-horizontal">
+              {task.labels.map((label) => (
+                <Link
+                  onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                  key={label.id}
+                  href={`/todo/label/${label.id}`}
+                >
+                  <Chip title={label.name} prepEndIcon={<AtSign />} />
+                </Link>
+              ))}
+            </div>
           )}
-        >
-          <Star size={20} />
-        </ButtonIcon>
-
-        <div
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-          }}
-        >
-          <TaskInteractiveButtons task={task} />
         </div>
       </div>
     </div>

diff --git a/components/task/components/TaskDetails.tsx b/components/task/components/TaskDetails.tsx
@@ -33,7 +33,7 @@ const TaskDetails = () => {
         </h1>
       </div>
 
-      <div>
+      <div className="max-w-full">
         <Label
           className="mb-1 text-main"
           htmlFor="task-description"
@@ -53,7 +53,7 @@ const TaskDetails = () => {
 
         <div
           id="task-labels"
-          className="w-full flex items-center gap-1 flex-wrap max-h-[380px] styled-overflow overflow-auto"
+          className="max-w-[200px] flex items-center gap-1 flex-wrap max-h-[380px] styled-overflow overflow-auto"
         >
           {taskContext?.task?.labels?.map((label) => (
             <Chip key={label.id} title={label.name} prepEndIcon={<AtSign />} />

diff --git a/components/ui/DisclousureContainer.tsx b/components/ui/DisclousureContainer.tsx
@@ -51,15 +51,6 @@ const DisclousureContainer = ({
               {appendToTitle}
             </Disclosure.Button>
 
-            <Transition
-              show={open}
-              enter="transition duration-100 ease-out"
-              enterFrom="scale-95 opacity-0"
-              enterTo="scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="scale-100 opacity-100"
-              leaveTo="scale-95 opacity-0"
-            >
               <Disclosure.Panel
                 className={cn(
                   "transition-all duration-300 ease-in-out grid",
@@ -68,7 +59,6 @@ const DisclousureContainer = ({
               >
                 {children}
               </Disclosure.Panel>
-            </Transition>
           </>
         )}
       </Disclosure>