From fe7d48dbe31744d2e3ba2514d5e33527df93391a Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 28 Jun 2026 17:13:08 +0000
Subject: [PATCH] Fix icons in icon buttons

---
 client/src/index.css             | 8 ++++----
 client/src/routes/_app/timer.tsx | 9 ++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 2d64b0a..a5beaa5 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -24,19 +24,19 @@ when we have perfectly fine CSS solutions to deal with the same problem.
 
   /* TODO button states */
   .button {
-    @apply flex cursor-default gap-x-2 text-center;
+    @apply flex cursor-default items-center justify-center gap-x-2 px-6 py-4;
 
     &[data-variant="filled"] {
-      @apply bg-primary text-on-primary flex items-center justify-center gap-2 rounded-full px-6 py-4;
+      @apply bg-primary text-on-primary justify-center rounded-full;
       &:disabled {
         @apply bg-on-surface/10 text-on-surface/38;
       }
     }
     &[data-variant="text"] {
-      @apply text-primary block px-6 py-4;
+      @apply text-primary block;
     }
     &[data-variant="outlined"] {
-      @apply border-outline-variant text-on-surface-variant rounded-full border px-6 py-4;
+      @apply border-outline-variant text-on-surface-variant rounded-full border;
     }
   }
 
diff --git a/client/src/routes/_app/timer.tsx b/client/src/routes/_app/timer.tsx
index 17fef32..a5bb8de 100644
--- a/client/src/routes/_app/timer.tsx
+++ b/client/src/routes/_app/timer.tsx
@@ -3,8 +3,8 @@ import { createFileRoute } from "@tanstack/solid-router";
 import { createEffect, createMemo, createSignal, For, onCleanup, Show, Suspense } from "solid-js";
 
 import { FloatingActionButtonAction } from "@/FloatingActionButton";
-import Icon from "@/Icon";
 import { useI18n } from "@/i18n";
+import Icon from "@/Icon";
 import { isProject, query as projectQuery, type Id as ProjectId } from "@/project";
 import { query as timesQuery } from "@/time";
 import {
@@ -41,7 +41,8 @@ function EntryRow(properties: {
 }) {
   const { t, locale } = useI18n();
   const timeFormatter = createMemo(
-    () => new Intl.DateTimeFormat(locale(), { hour: "2-digit", minute: "2-digit", second: "2-digit" }),
+    () =>
+      new Intl.DateTimeFormat(locale(), { hour: "2-digit", minute: "2-digit", second: "2-digit" }),
   );
   const durationFormatter = createMemo(
     () =>
@@ -297,7 +298,9 @@ function TimerPage() {
             </p>
             <Suspense
               fallback={
-                <p class="text-on-surface-variant py-4 text-center">{t("timer-loading-projects")}</p>
+                <p class="text-on-surface-variant py-4 text-center">
+                  {t("timer-loading-projects")}
+                </p>
               }
             >
               <ul class="flex flex-col gap-2">
-- 
2.51.2