From 92416a03be672c2d2bd99886b663667d4937417f Mon Sep 17 00:00:00 2001
From: Adrian Rumpold <a.rumpold@gmail.com>
Date: Wed, 21 May 2025 09:40:19 +0200
Subject: [PATCH] Improved styling and margins

---
 src/components/AlphabeticalFilter/AlphabeticalFilter.css | 1 +
 src/components/StringFilter/StringFilter.css             | 4 ++++
 src/components/StringFilter/StringFilter.tsx             | 2 ++
 src/index.css                                            | 2 +-
 src/theme.css                                            | 2 ++
 5 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/components/StringFilter/StringFilter.css

diff --git a/src/components/AlphabeticalFilter/AlphabeticalFilter.css b/src/components/AlphabeticalFilter/AlphabeticalFilter.css
index 5a7610f..c01c4d7 100644
--- a/src/components/AlphabeticalFilter/AlphabeticalFilter.css
+++ b/src/components/AlphabeticalFilter/AlphabeticalFilter.css
@@ -3,6 +3,7 @@
   flex-flow: row wrap;
   align-items: center;
   gap: 1ch;
+  margin-block: 1rem;
   button {
     display: flex;
     justify-content: center;
diff --git a/src/components/StringFilter/StringFilter.css b/src/components/StringFilter/StringFilter.css
new file mode 100644
index 0000000..b19b216
--- /dev/null
+++ b/src/components/StringFilter/StringFilter.css
@@ -0,0 +1,4 @@
+.string-filter {
+  width: 32ch;
+  margin-block: 1rem;
+}
diff --git a/src/components/StringFilter/StringFilter.tsx b/src/components/StringFilter/StringFilter.tsx
index c27bf26..99d8386 100644
--- a/src/components/StringFilter/StringFilter.tsx
+++ b/src/components/StringFilter/StringFilter.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import "./StringFilter.css";
 
 function StringFilter({ onChange }: { onChange: (value: string) => void }) {
   const [inputValue, setInputValue] = useState("");
@@ -11,6 +12,7 @@ function StringFilter({ onChange }: { onChange: (value: string) => void }) {
 
   return (
     <input
+      className="string-filter"
       type="text"
       value={inputValue}
       onChange={handleChange}
diff --git a/src/index.css b/src/index.css
index 7263c94..c7f2f66 100644
--- a/src/index.css
+++ b/src/index.css
@@ -47,7 +47,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--color-background-alt);
   cursor: pointer;
   transition: border-color 0.25s;
 }
diff --git a/src/theme.css b/src/theme.css
index 48c617b..a794de7 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -2,6 +2,7 @@
   color: rgba(255, 255, 255, 0.87);
 
   --color-background: #242424;
+  --color-background-alt: #1e1e1e;
   --color-text: #ffffff;
   --color-accent: #646cff;
   --color-accent-hover: #535bf2;
@@ -11,6 +12,7 @@
 @media (prefers-color-scheme: light) {
   :root {
     --color-background: #ffffff;
+    --color-background-alt: #f5f5f5;
     --color-text: #213547;
     --color-accent: #747bff;
     --color-accent-hover: #646cff;