Restyling new contact

htmx_contact/main.py

@@ -67,7 +67,7 @@ def new_contact():
                 **request.form
             )
             with Session.begin() as session:
-                contact = Contact(**validated_form)
+                contact = Contact(user_id=current_user.id, **validated_form.model_dump())
                 session.add(contact)
                 session.commit()
             flash("New Contacted added!")

htmx_contact/static/css/main.css

@@ -24,8 +24,8 @@
     opacity: 1;
 }
 
-input[type=text] {
-    width: 300px;
+input[type=text],
+input[type=email] {
     padding: 10px 5px;
     border-radius: .25rem;
     border: 2px solid black;
@@ -117,3 +117,51 @@ table {
     justify-content: space-between;
     align-items: center;
 }
+
+label {
+    display: block;
+}
+
+fieldset {
+    font-size: 20px;
+    border-radius: 5px;
+}
+
+.red {
+    background-color: crimson;
+}
+
+.flex-row {
+    display: flex;
+}
+
+.flex-space-betw {
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flex-center {
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.font-red {
+    color: crimson;
+}
+
+form span {
+    display: block;
+}
+
+.width-375-px {
+    width: 375px;
+}
+
+.width-100 {
+    width: 100%;
+}

htmx_contact/templates/contacts.html

@@ -2,11 +2,12 @@
 
 {% block content %}
 <div class="container">
+    <h1>Contact.app</h1>
     <div class="width-60">
-        <div class="form-container">
+        <div class="flex-row flex-space-betw">
             <form action="/contacts" method="get">
-                <label for="search">Search Term</label>
-                <input id="search" type="text" name="q", value="{{ request.args.get('q') or '' }}">
+                <!-- <label for="search">Search Term</label> -->
+                <input class="width-375-px" id="search" type="text" name="q", value="{{ request.args.get('q') or '' }}">
                 <input class="button" type="submit", value="Search">
             </form>
             <span><a class="button" href="/contacts/new">Add Contact</a></span>

htmx_contact/templates/new_contact.html

@@ -1,36 +1,39 @@
 {% extends 'base.html' %}
 
 {% block content %}
+<div class="flex-row flex-center">
+<div class=".flex-column flex-center">
 <h1>New Contact</h1>
-
-
-<form action="/contacts/new" method="post">
+<form class="width-375-px" action="/contacts/new" method="post">
     <fieldset>
         <legend>Contact Values</legend>
         <p>
             <label for="email">Email</label>
-            <input name="email" id="email" type="email" placeholder="Email">
-            <span class="error">{{ errors.get('email','') }}</span>
+            <input class="width-100" name="email" id="email" type="email" placeholder="Email">
+            <span class="error font-red">{{ errors.get('email','') }}</span>
         </p>
         <p>
             <label for="first_name">First Name</label>
-            <input name="first_name" id="first_name" type="text" placeholder="First Name">
-            <span class="error">{{ errors.get('first_name','') }}</span>
+            <input class="width-100" name="first_name" id="first_name" type="text" placeholder="First Name">
+            <span class="error font-red">{{ errors.get('first_name','') }}</span>
         </p>
         <p>
             <label for="last_name">Last Name</label>
-            <input name="last_name" id="last_name" type="text" placeholder="Last Name">
-            <span class="error">{{ errors.get('last_name', '') }}</span>
+            <input class="width-100" name="last_name" id="last_name" type="text" placeholder="Last Name">
+            <span class="error font-red">{{ errors.get('last_name', '') }}</span>
         </p>
         <p>
             <label for="phone">Phone</label>
-            <input name="phone" id="phone" type="text" placeholder="Phone">
-            <span class="error">{{ errors.get('phone','') }}</span>
+            <input class="width-100" name="phone" id="phone" type="text" placeholder="Phone">
+            <span class="error font-red">{{ errors.get('phone','') }}</span>
         </p>
-        <button>Save</button>
+        <div class="flex-row flex-space-betw">
+            <span><a class="button red" href="/contacts">Back</a></span>
+            <button class="button">Save</button>
+        </div>
     </fieldset>
 </form>
-<p>
-    <a href="/contacts">Back</a>
-</p>
+</div>
+</div>
+
 {% endblock %}