Improved styling and margins

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;

src/components/StringFilter/StringFilter.css

@@ -0,0 +1,4 @@
+.string-filter {
+  width: 32ch;
+  margin-block: 1rem;
+}

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}

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;
 }

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;