overall styles changes

bryanlundberg · Sep 13, 2024 · 1b5b184 · 1b5b184
1 parent f9cddf4
commit 1b5b184
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 17 deletions.
diff --git a/src/app/[locale]/cubes/page.tsx b/src/app/[locale]/cubes/page.tsx
@@ -54,7 +54,7 @@ export default function Page() {
       <div className="max-w-5xl mx-auto p-1 flex flex-col min-h-full w-full bg-background">
         {/* header */}
         <Card className="w-full mb-2 border p-3 border-none">
-          <div className="flex gap-3 items-center justify-between">
+          <div className="flex gap-10 items-center justify-between">
             <h2 className="font-black text-xl">{t("CubesPage.title")}</h2>
             <div className="flex items-center justify-end gap-3 w-full">
               <Input

diff --git a/src/app/[locale]/solves/page.tsx b/src/app/[locale]/solves/page.tsx
@@ -5,13 +5,21 @@ import { Input } from "@/components/ui/input";
 import MainCubeSelector from "@/components/MainCubeSelector";
 import { SolvesArea } from "@/components/solves/SolvesArea";
 import { Sheet } from "@/components/ui/sheet";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useDialogSolve } from "@/store/DialogSolve";
 import SheetSolveDetails from "@/components/sheets/sheet-solve-details/SheetSolveDetails";
-import DropdownFilterSolves from "@/components/dropdrowns/dropdown-filter-options/dropdown-filter-options";
+import DropdownFilterSolves from "@/components/dropdowns/dropdown-filter-options/dropdown-filter-options";
 import { useTimerStore } from "@/store/timerStore";
 import { useSolveFiltersStore } from "@/store/SolvesFilters";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { EnterIcon } from "@radix-ui/react-icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function Page() {
   const { isDialogSolveOpen, handleCloseDialogSolve } = useDialogSolve();
@@ -24,7 +32,7 @@ export default function Page() {
       <div className="max-w-5xl mx-auto p-2 flex flex-col w-full min-h-full">
         {/* header */}
         <Card className="w-full mb-2 border p-3 flex flex-col gap-2">
-          <div className="flex justify-between">
+          <div className="flex justify-between gap-10">
             <h2 className="font-black text-xl">Solves</h2>
             <div className="flex items-center gap-2 w-full justify-end">
               <MainCubeSelector />
@@ -47,6 +55,19 @@ export default function Page() {
               placeholder="Filter by time"
               onChange={(e) => handleSearch(e.target.value)}
             />
+            <TooltipProvider delayDuration={100}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant={"outline"}>
+                    <EnterIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Move solves to history</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
             <DropdownFilterSolves />
           </div>
         </Card>

diff --git a/...ilter-options/dropdown-filter-options.tsx → ...ilter-options/dropdown-filter-options.tsx b/...ilter-options/dropdown-filter-options.tsx → ...ilter-options/dropdown-filter-options.tsx
diff --git a/src/components/navbar/NavContainer.tsx b/src/components/navbar/NavContainer.tsx
@@ -7,8 +7,8 @@ interface NavContainer {
 export function NavContainer({ children }: NavContainer) {
   return (
     <nav className="p-2 z-50">
-      <Card className="w-full gap-5 rounded-t-xl sm:mx-auto sm:w-96 bg-background">
-        <ul className={`flex justify-between items-center `}>{children}</ul>
+      <Card className="w-full gap-5 rounded-t-xl sm:mx-auto sm:w-60 bg-background">
+        <ul className={`flex justify-between items-center`}>{children}</ul>
       </Card>
     </nav>
   );

diff --git a/src/components/navbar/NavItem.tsx b/src/components/navbar/NavItem.tsx
@@ -10,13 +10,13 @@ export function NavItem({ path, icon }: NavItem) {
   const pathname = usePathname();
   return (
     <>
-      <li className="grow">
+      <li className="grow first:rounded-s-md last:rounded-e-md overflow-hidden">
         <Link
           href={path}
           className={twMerge(
             `${
               pathname === path ? "bg-secondary" : ""
-            } transition duration-300 py-2 rounded-md flex flex-col justify-center items-center font-medium`
+            } transition duration-300 py-2 flex flex-col justify-center items-center font-medium  `
           )}
         >
           {icon}

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,29 +1,28 @@
 import { NavContainer } from "@/components/navbar/NavContainer";
 import { NavItem } from "@/components/navbar/NavItem";
-
 import {
-  ChartBarIcon,
+  BarChartIcon,
   ClockIcon,
   CubeIcon,
-  Square3Stack3DIcon,
-} from "@heroicons/react/24/solid";
+  StackIcon,
+} from "@radix-ui/react-icons";
 
 const navigation: Navigation = [
   {
     path: "/",
-    icon: <ClockIcon className="w-6 h-6" />,
+    icon: <ClockIcon />,
   },
   {
     path: "/solves",
-    icon: <Square3Stack3DIcon className="w-6 h-6" />,
+    icon: <StackIcon />,
   },
   {
     path: "/stats",
-    icon: <ChartBarIcon className="w-6 h-6" />,
+    icon: <BarChartIcon />,
   },
   {
     path: "/cubes",
-    icon: <CubeIcon className="w-6 h-6" />,
+    icon: <CubeIcon />,
   },
 ];
 

diff --git a/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx b/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
@@ -71,7 +71,7 @@ export default function SheetSolveDetails() {
             <ClockIcon />
             {DateTime.fromMillis(solve?.endTime || 0)
               .setLocale(locale)
-              .toFormat("HH:mm")}
+              .toFormat("HH:mm:ss")}
           </p>
         </div>