style: overall improvements

bryanlundberg · Dec 28, 2023 · 9191068 · 9191068
1 parent 5bf25c8
commit 9191068
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 27 deletions.
diff --git a/src/app/solves/page.tsx b/src/app/solves/page.tsx
@@ -13,6 +13,7 @@ import { Filter } from "@/components/solves/Filter";
 import { ButtonsSection } from "@/components/solves/ButtonsSection";
 import { SolvesArea } from "@/components/solves/SolvesArea";
 import useSolvesPage from "@/hooks/useSolvesPage";
+import { InputText } from "@/components/input-text/index";
 
 export default function SolvesPage() {
   const { handleTabClick, currentTab, handleMoveAll, handleTrashAll } =
@@ -28,22 +29,29 @@ export default function SolvesPage() {
 
         <SolveFilters>
           <Filter handleClick={handleTabClick} currentTab={currentTab} />
-          <ButtonsSection currentTab={currentTab}>
-            <Button
-              onClick={() => handleMoveAll()}
-              icon={<MoveAll />}
-              label={translation.inputs["move-all"][lang]}
+          <div className="flex gap-3 grow">
+            <InputText
+              className="border light:bg-neutral-50 light:border-neutral-200 light:focus:bg-white dark:bg-zinc-950 dark:border-zinc-800 dark:focus:bg-zinc-900"
+              placeholder="⏱︎ Search by time"
+              onChange={() => {}}
             />
-            <Button
-              onClick={() => handleTrashAll()}
-              icon={
-                <div className="w-4 h-4">
-                  <Trash />
-                </div>
-              }
-              label={translation.inputs["trash-all"][lang]}
-            />
-          </ButtonsSection>
+            <ButtonsSection currentTab={currentTab}>
+              <Button
+                onClick={() => handleMoveAll()}
+                icon={<MoveAll />}
+                label={translation.inputs["move-all"][lang]}
+              />
+              <Button
+                onClick={() => handleTrashAll()}
+                icon={
+                  <div className="w-4 h-4">
+                    <Trash />
+                  </div>
+                }
+                label={translation.inputs["trash-all"][lang]}
+              />
+            </ButtonsSection>
+          </div>
         </SolveFilters>
         <SolvesArea currentTab={currentTab} />
         <ModalSolve />

diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx
@@ -11,7 +11,7 @@ export default function StatsPage() {
   return (
     <>
       <OverallContainer>
-        <OverallHeader title={translation.solves["header"][lang]} />
+        <OverallHeader title={translation.metrics["header"][lang]} />
         <CategoryStatistics />
       </OverallContainer>
     </>

diff --git a/src/components/button/ButtonContainer.tsx b/src/components/button/ButtonContainer.tsx
@@ -13,7 +13,7 @@ export function ButtonContainer({
     <>
       <button
         type="button"
-        className={`min-h-9 w-auto px-3 transition duration-200 rounded-md border font-medium justify-center align-middle light:hover:bg-neutral-200 light:text-neutral-950 light:border-neutral-200 dark:hover:bg-zinc-900 dark:border-zinc-800 text-md disabled:bg-zinc-900 ${className}`}
+        className={`min-h-9 px-3 transition duration-200 rounded-md border font-medium justify-center align-middle light:hover:bg-neutral-200 light:text-neutral-950 light:border-neutral-200 dark:hover:bg-zinc-900 dark:border-zinc-800 text-md disabled:bg-zinc-900 ${className}`}
         onClick={handleClick}
       >
         {children}

diff --git a/src/components/button/ButtonContent.tsx b/src/components/button/ButtonContent.tsx
@@ -8,7 +8,7 @@ export function ButtonContent({ icon, label }: ButtonContent) {
     <>
       <div className="flex items-center justify-between gap-1">
         <div>{icon}</div>
-        <div>{label}</div>
+        <div className="hidden">{label}</div>
       </div>
     </>
   );

diff --git a/src/components/input-text/InputText.tsx b/src/components/input-text/InputText.tsx
@@ -11,7 +11,7 @@ interface InputTextProps {
 export default function InputText({
   placeholder,
   value = "",
-  focus,
+  focus = false,
   className,
   onChange,
 }: InputTextProps) {

diff --git a/src/components/solves/ButtonsSection.tsx b/src/components/solves/ButtonsSection.tsx
@@ -9,7 +9,7 @@ export function ButtonsSection({ children, currentTab }: ButtonsSection) {
   if (currentTab === "All") return null;
   return (
     <>
-      <div className="flex gap-2">{children}</div>
+      <div className="flex justify-end gap-2 h-9">{children}</div>
     </>
   );
 }
diff --git a/src/components/solves/Filter.tsx b/src/components/solves/Filter.tsx
@@ -12,7 +12,7 @@ export function Filter({ currentTab, handleClick }: Filter) {
   const { lang } = useSettingsModalStore();
   return (
     <>
-      <div className="flex w-full gap-1 p-1 font-medium rounded-md h-9 light:bg-neutral-200 light:text-neutral-700 dark:bg-zinc-800 md:w-56 xl:w-96">
+      <div className="flex w-auto gap-1 p-1 font-medium rounded-md h-9 light:bg-neutral-200 light:text-neutral-700 dark:bg-zinc-800">
         <ToggleSolvesButton
           handleClick={() => handleClick("Session")}
           active={currentTab === "Session"}

diff --git a/src/components/solves/SolveFilters.tsx b/src/components/solves/SolveFilters.tsx
@@ -5,7 +5,7 @@ interface SolveFilters {
 export function SolveFilters({ children }: SolveFilters) {
   return (
     <>
-      <div className="z-10 flex flex-col justify-between gap-3 px-3 py-2 text-sm rounded-b-lg shadow-sm light:shadow-neutral-200 dark:shadow-zinc-800 md:flex-row">
+      <div className="z-10 flex flex-col justify-between w-full gap-3 px-3 py-2 text-sm rounded-b-lg shadow-sm light:shadow-neutral-200 dark:shadow-zinc-800 md:flex-row">
         {children}
       </div>
     </>

diff --git a/src/components/solves/ToggleSolvesButton.tsx b/src/components/solves/ToggleSolvesButton.tsx
@@ -14,9 +14,9 @@ export default function ToggleSolvesButton({
       <button
         onClick={() => handleClick()}
         type="button"
-        className={`w-full appearance-none rounded-md ${
+        className={`grow w-auto px-4 appearance-none rounded-md ${
           active
-            ? "light:bg-neutral-400 light:text-neutral-950 dark:bg-zinc-950"
+            ? "light:bg-neutral-100 light:text-neutral-950 dark:bg-zinc-950"
             : "dark:bg-transparent"
         }`}
       >

diff --git a/src/components/timer/HeaderTimer.tsx b/src/components/timer/HeaderTimer.tsx
@@ -19,7 +19,7 @@ export default function HeaderTimer() {
 
   if (isSolving || timerStatus !== "IDLE") return null;
   return (
-    <div className="flex flex-col items-center justify-center gap-1 pt-4">
+    <div className="flex flex-col items-center justify-center gap-5 pt-4">
       <div className="flex items-center justify-between w-full gap-2 sm:justify-center">
         <Link
           href={{

diff --git a/src/components/timer/ScrambleZone.tsx b/src/components/timer/ScrambleZone.tsx
@@ -10,7 +10,7 @@ export function ScrambleZone() {
       <div
         className={`h-auto p-2 overflow-auto text-2xl sm:text-3xl font-semilight text-center rounded-md min-w-auto sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-md max-h-28 md:max-h-full ${
           settings.features.scrambleBackground.status
-            ? "dark:bg-zinc-900 light:bg-neutral-100"
+            ? "dark:bg-zinc-900 light:bg-neutral-200"
             : "bg-transparent"
         }`}
       >

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
@@ -49,7 +49,7 @@ export default function Timer() {
           {selectedCube && (
             <div className={`${timerStatusClasses[timerStatus]}`}>
               {hideWhileSolving && isSolving ? (
-                <span className="sm:text-5xl md:text-6xl lg:text-7xl">
+                <span className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl">
                   {translation.timer["solving"][lang]}
                 </span>
               ) : (