From 3190629286021124adea259d43a3c7843ace8a6b Mon Sep 17 00:00:00 2001
From: Fredrik Wahlberg <fredrik@wahlberg.se>
Date: Fri, 24 Jan 2025 18:17:16 +0100
Subject: [PATCH] Material design!

---
 public/index.html | 26 +++++++++++++++++---------
 public/style.css  | 22 ----------------------
 2 files changed, 17 insertions(+), 31 deletions(-)
diff --git a/public/index.html b/public/index.html
index 8b10f48..83b087c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Fredriks todos</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <link rel="stylesheet" href="style.css">
     <link rel="manifest" href="manifest.json" />
 
@@ -13,20 +14,26 @@
 </head>
 <body>
     <div class="container">
-        <h1>TODO</h1>
+        <h1 class="center-align">TODO</h1>
         <form id="taskForm">
-            <label for="subject">Uppgift:</label>
-            <input type="text" id="subject" required><br><br>
+            <div class="input-field">
+                <label for="subject">Uppgift:</label>
+                <input type="text" id="subject" required>
+            </div>
 
-            <label for="description">Beskrivning:</label>
-            <textarea id="description"></textarea><br><br>
+            <div class="input-field">
+                <label for="description">Beskrivning:</label>
+                <textarea id="description" class="materialize-textarea"></textarea>
+            </div>
 
-            <label for="scheduled">Datum:</label>
-            <input type="date" id="scheduled" lang="sv-SE" required><br><br>
+            <div class="input-field">
+                <label for="scheduled">Datum:</label>
+                <input type="date" id="scheduled" lang="sv-SE" required>
+            </div>
 
-            <button type="submit">Spara</button>
+            <button class="btn waves-effect waves-light" type="submit">Spara</button>
         </form>
-        <p id="responseMessage"></p>
+        <p id="responseMessage" class="center-align"></p>
     </div>
 
     <script src="app.js"></script>
@@ -41,5 +48,6 @@
           firstDayOfWeek: 1 // Start weeks on Monday
       });
     </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
index 7aa6c22..3a61573 100644
--- a/public/style.css
+++ b/public/style.css
@@ -20,28 +20,6 @@ h1 {
     text-align: center;
 }
 
-input, textarea {
-    width: 90%;
-    padding: 8px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-button {
-    width: 100%;
-    padding: 10px;
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #45a049;
-}
-
 #responseMessage {
     text-align: center;
     color: green;
