feat: Updates styles in css and views.

Public/styles/site.css

@@ -1,8 +1,13 @@
+:root {
+  --form-control-color: violet;
+}
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }
+
 body {
   background-color: #1E1E2E;
   color: white;
@@ -57,32 +62,111 @@ ul {
   padding: 10px 20px;
 }
 
-.description {
+footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+}
+
+form {
+  position: relative;
+  padding: 40px;
+}
+
+.form-control {
+  font-family: system-ui, sans-serif;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.1;
+  display: inline-block;
+  grid-template-columns: 1em auto;
+  gap: 0.5em;
+}
+
+input[type="radio"] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  background-color: #fff;
+  /* Not removed via appearance */
+  margin: 2px 40px;
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 50%;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-control-color);
+  background-color: CanvasText;
+}
+
+input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="radio"]:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}
+
+.form-control:focus-within {
+  color: var(--form-control-color);
+}
+
+.form-control + .form-control {
+  margin-top: 1em;
+}
+
+.bg-dark {
+  background-color: violet;
+}
+
+.bg-light {
+  background-color: #ACFFFC;
+}
+
+.light {
+  color: violet;
+}
+
+.dark {
+  color: #ACFFFC;
+}
+
+.spaced-cnt {
   padding-top: 20px;
 }
 
+.grp-radio {
+  display: inline-block;
+}
+
 .container {
   display: flex;
 }
 
-.pros {
+.flex-cnt {
   flex 1 300px;
   width: 50%;
   min-height: 200px;
   padding: 5px;
 }
 
-.cons {
-  flex 1 300px;
-  min-height: 200px;
-  width: 50%;
-  padding: 5px;
-}
-
 .counter-container {
   position: relative;
-  /* border 5px solid MediumSeaGreen; */
-  /* border-radius: 5px 5px 0px 0px; */
 }
 
 .counter {
@@ -97,27 +181,26 @@ ul {
   left: 10px;
 }
 
-.pros-list {
+.list {
   position: relative;
-  border 2px solid green;
   border-radius: 10px;
-  background-color: MediumSeaGreen;
 }
 
-.cons-list {
+.dark-radius {
-  position: relative;
+  border: 2px solid violet;
-  border 2px solid green;
-  border-radius: 10px;
-  background-color: Tomato;
 }
 
+.light-radius {
+  border: 2px solid #ACFFFC;
+}
 
 .listHeader {
-  /* margin: auto; */
   padding: 10px;
 }
 
-.center {
+.centered {
+  display: block;
+  align-content: center;
   margin: auto;
   top: 50%;
   width: 100%;
@@ -130,16 +213,11 @@ ul {
   margin 80px;
 }
 
-form {
+.btn {
-  position: relative;
+  border-radius: 20px;
-  padding: 40px;
 }
 
-.loginButton {
+.btn-submit {
-  background-color: blue;
-  color: white;
-  border: 2px solid violet;
-  border-radius: 20px;
   height 100px;
   width: 50%;
   padding: 10px;

Resources/Views/loggedIn.leaf

@@ -1,8 +1,8 @@
 #extend("main"):
   #export("body"):
-  <div class="center">
+  <div class="centered">
     <h1>Welcome #capitalized(name)</h1>
-    <div class="description">
+    <div class="spaced-cnt">
       <p>
       <small>Please add your pro's and cons during the talk to the list below.</small>
       </p>
@@ -11,40 +11,52 @@
       </p>
     </div>
     <form id="proconForm" action="submitProOrCon">
-      <select id="type", name="type">
+      <div class="spaced-cnt">
-        <option value="pro">Pro</option>
+        <label class="form-control light" for="pro">
-        <option value="con">Con</option>
+          <input type="radio" id="pro" name="type" value="pro">
-      </select>
+          Pro
+        </label>
+        <label class="form-control dark" for="con">
+          <input type="radio" id="con" name="type" value="con">
+          Con
+        </label>
+      </div>
       <br>
       <input type="text" id="description" name="description" placeholder="Description" required>
       <br>
       <br>
-      <input class="loginButton" type="submit" value="Submit">
+      <input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
     </form>
   </div>
+  #if(count(pros) > 0 || count(cons) > 0):
   <div class="container">
-    <div class="pros">
+    <div class="flex-cnt">
       <div class="counter-container">
         <h3 class="counter-label">Pros</h3>
         <h3 class="counter">Count: #count(pros)</h3>
       </div>
-      <ul class="pros-list">
+      #if(count(pros) > 0):
+      <ul class="list light bg-light dark-radius">
         #for(item in pros):
         <li>#(item.description)</li>
         #endfor
       </ul>
+      #endif
     </div>
-    <div class="cons">
+    <div class="flex-cnt">
       <div class="counter-container">
         <h3 class="counter-label">Cons</h3>
         <h3 class="counter">Count: #count(cons)</h3>
       </div>
-      <ul class="cons-list">
+      #if(count(cons) > 0):
+      <ul class="list dark bg-dark light-radius">
         #for(item in cons):
         <li>#(item.description)</li>
         #endfor
       </ul>
+      #endif
     </div>
   </div>
+  #endif
   #endexport
 #endextend

Resources/Views/login.leaf

@@ -1,15 +1,13 @@
 #extend("main"):
   #export("body"):
-  <div class="center">
+  <div class="centered">
-      <h1>Welcome to chiller Pro vs. Cons</h1>
+      <h1>Welcome to Chiller - Pro vs. Cons</h1>
       <p style="font-size: 12px;">Enter your display name below to get started!</p>
       <form id="loginForm" action="login">
-        <label for="displayName">Display Name:</label>
-        <br>
         <input type="text" id="displayName" name="displayName" placeholder="Name" required>
         <br>
         <br>
-        <input type="submit" value="Submit" class="loginButton">
+        <input type="submit" class="btn btn-submit dark bg-dark light-radius" value="Submit">
       </form>
   </div>
   #endexport

Sources/App/Controllers/ApiController.swift

@@ -15,6 +15,7 @@ struct ApiController: RouteCollection {
 
     proCon.get(use: prosAndConsIndex(req:))
     proCon.post(use: createProCon(req:))
+    proCon.delete(":id", use: deleteProCon(req:))
 
     utils.post("check-words", use: checkWords(req:))
   }
@@ -44,6 +45,19 @@ struct ApiController: RouteCollection {
     return proCon
   }
 
+  @Sendable
+  func deleteProCon(req: Request) async throws -> HTTPStatus {
+    guard let idString = req.parameters.get("id"),
+          let id = UUID(uuidString: idString)
+    else {
+      throw Abort(.badRequest)
+    }
+    try await ProCon.query(on: req.db)
+      .filter(\.$id == id)
+      .delete()
+    return .ok
+  }
+
   @Sendable
   func checkWords(req: Request) async throws -> HTTPStatus {
     let input = try req.content.decode(CheckWords.self)