Add placeholder for deleting one hour of history

AJGeel · Oct 20, 2024 · 1909532 · 1909532
1 parent 9389a0d
commit 1909532
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/pages/history/History.tsx b/src/pages/history/History.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { format, parseISO } from "date-fns";
+import { addHours, format, parseISO } from "date-fns";
 import { useMemo, useState } from "react";
 import { InView } from "react-intersection-observer";
 
@@ -75,9 +75,19 @@ const History = () => {
                       }
                     }}
                   >
-                    <h3 className="my-4 font-medium text-black/80">
-                      {hour}:00
-                    </h3>
+                    <div className="flex items-center justify-between gap-4">
+                      <h3 className="my-4 font-medium text-black/80">
+                        {hour}:00
+                      </h3>
+                      <button
+                        onClick={() => {
+                          alert("TODO: Delete the history range");
+                        }}
+                        className="rounded-md bg-gray-50 px-1.5 py-0.5 text-xs border border-gray-200 duration-150 hover:border-black hover:bg-black hover:text-white focus-visible:ring-2 ring-offset-2 ring-gray-300 outline-none"
+                      >
+                        Delete
+                      </button>
+                    </div>
                     {items.map((item) => (
                       <HistoryItem key={item.id} {...item} />
                     ))}

diff --git a/src/pages/history/components/SearchHeader.tsx b/src/pages/history/components/SearchHeader.tsx
@@ -8,7 +8,7 @@ type SearchHeaderProps = {
 const SearchHeader = ({ searchQuery, setSearchQuery }: SearchHeaderProps) => (
   <div className="flex items-center gap-6">
     <h1 className="text-xl font-bold">History</h1>
-    <div className="relative w-full max-w-sm overflow-hidden rounded-md border bg-gray-50 ring-sky-500 ring-offset-2 duration-150 focus-within:ring-2">
+    <div className="relative w-full max-w-sm overflow-hidden rounded-md border bg-gray-50 ring-gray-300 ring-offset-2 duration-150 focus-within:ring-2">
       <input
         className="group w-full bg-transparent px-2 py-1.5 pl-9 font-sans focus-within:outline-none"
         placeholder="Search title or url"

diff --git a/src/pages/history/components/TimelineView/partials/DayButton.tsx b/src/pages/history/components/TimelineView/partials/DayButton.tsx
@@ -25,8 +25,8 @@ const DayButton = ({ date, isActive, onClick }: DayButtonProps) => {
     <button
       onClick={onClick}
       className={cn(
-        "flex w-20 flex-col items-center rounded-md bg-gray-50 px-2 py-1 outline outline-1 outline-black/10 duration-150 hover:bg-black hover:text-white",
-        isActive && "bg-black text-white"
+        "flex w-20 flex-col items-center rounded-md bg-gray-50 px-2 py-1 border border-gray-200 duration-150 hover:border-black hover:bg-black hover:text-white focus-visible:ring-2 ring-offset-2 ring-gray-300 outline-none",
+        isActive && "bg-black text-white border-black"
       )}
     >
       <p className="text-[12px] font-semibold capitalize">{title}</p>

diff --git a/src/pages/history/components/TimelineView/partials/PaginationButton.tsx b/src/pages/history/components/TimelineView/partials/PaginationButton.tsx
@@ -15,7 +15,7 @@ const PaginationButton = ({
 }: PaginationButtonProps) => (
   <button
     className={cn(
-      "rounded-md border bg-gray-50 px-1.5 py-2 text-gray-600 duration-150",
+      "rounded-md border bg-gray-50 px-1.5 py-2 text-gray-600 duration-150 focus-visible:ring-2 ring-offset-2 ring-gray-300 outline-none",
       isDisabled && "opacity-50",
       !isDisabled && "hover:bg-black hover:text-white"
     )}