Improved styling and margins

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Local Netlify folder
+.netlify

netlify.toml

@@ -0,0 +1,21 @@
+# example netlify.toml
+[build]
+  command = "npm run build"
+  functions = "netlify/functions"
+  publish = "dist"
+
+  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
+  ## Not needed for static site generators.
+  #[[redirects]]
+  #  from = "/*"
+  #  to = "/index.html"
+  #  status = 200
+
+  ## (optional) Settings for Netlify Dev
+  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
+  #[dev]
+  #  command = "yarn start" # Command to start your dev server
+  #  port = 3000 # Port that the dev server will be listening on
+  #  publish = "dist" # Folder with the static content for _redirect file
+
+  ## more info on configuring this file: https://ntl.fyi/file-based-build-config

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;