From fdb995186522c93896d414cb418850f239d8ed49 Mon Sep 17 00:00:00 2001
From: PH Tools <phtools@bldgtyp.com>
Date: Thu, 12 Dec 2024 18:04:31 -0500
Subject: [PATCH] Assembly Layers Add/Edit/Delete

---
 PH_Materials/templates/account/login.html     | 14 ++--
 PH_Materials/templates/account/logout.html    |  6 +-
 PH_Materials/templates/account/signup.html    | 18 ++---
 static/css/styles.css                         | 11 ++-
 webportal/templates/webportal/assemblies.html |  8 +-
 webportal/templates/webportal/index.html      | 12 +--
 .../partials/assemblies/assembly.html         | 80 ++++++++++++-------
 .../partials/assemblies/sidebar.html          | 26 +++---
 .../partials/materials/container.html         |  6 +-
 .../webportal/partials/materials/create.html  |  2 +-
 .../webportal/partials/materials/details.html | 14 ++--
 .../webportal/partials/materials/import.html  |  2 +-
 .../webportal/partials/materials/sidebar.html | 12 +--
 .../webportal/partials/materials/table.html   |  6 +-
 .../webportal/partials/materials/update.html  |  2 +-
 .../templates/webportal/partials/navbar.html  | 10 +--
 16 files changed, 129 insertions(+), 100 deletions(-)

diff --git a/PH_Materials/templates/account/login.html b/PH_Materials/templates/account/login.html
index 71f0531..8068829 100644
--- a/PH_Materials/templates/account/login.html
+++ b/PH_Materials/templates/account/login.html
@@ -7,7 +7,7 @@
 
 {% block content %}
 
-<h1 class="my-4 text-2xl leading-none tracking-tight text-white md:text-3xl lg:text-4xl">{% trans "Sign In" %}</h1>
+<h1 class="my-4 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl">{% trans "Sign In" %}</h1>
 
 {% get_providers as socialaccount_providers %}
 
@@ -29,7 +29,7 @@ <h1 class="my-4 text-2xl leading-none tracking-tight text-white md:text-3xl lg:t
 {% include "socialaccount/snippets/login_extra.html" %}
 
 {% else %}
-<p class="mb-4 text-white">
+<p class="mb-4 ">
   {% blocktrans %}If you do not have an account yet, please create one:
     <a class="alert alert-info hover:underline" href="{{ signup_url }}">Create an Account</a>
   {% endblocktrans %}
@@ -40,20 +40,20 @@ <h1 class="my-4 text-2xl leading-none tracking-tight text-white md:text-3xl lg:t
   {% csrf_token %}
 
   <div class="mb-4">
-    {{ form.login|add_label_class:"text-white mb-4" }}
-    {% render_field form.login class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
+    {{ form.login|add_label_class:" mb-4" }}
+    {% render_field form.login class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark: dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
   </div>
 
   <div class="mb-4">
-    {{ form.password|add_label_class:"text-white mb-2" }}
-    {% render_field form.password class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
+    {{ form.password|add_label_class:" mb-2" }}
+    {% render_field form.password class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark: dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
   </div>
 
   {% if redirect_field_value %}
   <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
   {% endif %}
   
-  <button class="primaryAction mt-2 bg-[#73B769] hover:bg-[#56964a] focus:outline-none text-white focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2" type="submit">
+  <button class="primaryAction mt-2 bg-[#73B769] hover:bg-[#56964a] focus:outline-none  focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2" type="submit">
     {% trans "Sign In" %}
   </button>
 </form>
diff --git a/PH_Materials/templates/account/logout.html b/PH_Materials/templates/account/logout.html
index 0d01c89..4bcb6e0 100644
--- a/PH_Materials/templates/account/logout.html
+++ b/PH_Materials/templates/account/logout.html
@@ -5,8 +5,8 @@
 {% block head_title %}{% trans "Sign Out" %}{% endblock %}
 
 {% block content %}
-<div class="flex flex-col items-center text-white">
-  <h1 class="text-4xl tracking-wide dark:text-white my-4">{% trans "Sign Out" %}</h1>
+<div class="flex flex-col items-center ">
+  <h1 class="text-4xl tracking-wide dark: my-4">{% trans "Sign Out" %}</h1>
 
   <p class="mt-2">{% trans 'Are you sure you want to sign out?' %}</p>
 
@@ -17,7 +17,7 @@ <h1 class="text-4xl tracking-wide dark:text-white my-4">{% trans "Sign Out" %}</
       <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
     {% endif %}
 
-    <button class="mt-6 bg-[#73B769] hover:bg-[#56964a] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
+    <button class="mt-6 bg-[#73B769] hover:bg-[#56964a]  font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
       {% trans 'Sign Out' %}
     </button>
   </form>
diff --git a/PH_Materials/templates/account/signup.html b/PH_Materials/templates/account/signup.html
index 320e5a2..30b4979 100644
--- a/PH_Materials/templates/account/signup.html
+++ b/PH_Materials/templates/account/signup.html
@@ -5,9 +5,9 @@
 {% block head_title %}{% trans "Signup" %}{% endblock %}
 
 {% block content %}
-<h1 class="my-4 text-2xl leading-none tracking-tight text-white md:text-3xl lg:text-4xl">{% trans "Sign Up" %}</h1>
+<h1 class="my-4 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl">{% trans "Sign Up" %}</h1>
 
-<p class="mb-4 text-white">
+<p class="mb-4 ">
     {% blocktrans %}Already have an account? Then please 
         <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="{{ login_url }}">sign in</a>.
     {% endblocktrans %}
@@ -27,25 +27,25 @@ <h1 class="my-4 text-2xl leading-none tracking-tight text-white md:text-3xl lg:t
   {% endif %}
 
   <div class="mb-4">
-    {{ form.username|add_label_class:"text-white mb-4" }}
-    {% render_field form.username class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
+    {{ form.username|add_label_class:" mb-4" }}
+    {% render_field form.username class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark: dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
   </div>
 
   <div class="mb-4">
-    {{ form.password1|add_label_class:"text-white mb-2" }}
-    {% render_field form.password1 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
+    {{ form.password1|add_label_class:" mb-2" }}
+    {% render_field form.password1 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark: dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
   </div>
 
 
   <div class="mb-4">
-    {{ form.password2|add_label_class:"text-white mb-2" }}
-    {% render_field form.password2 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
+    {{ form.password2|add_label_class:" mb-2" }}
+    {% render_field form.password2 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark: dark:focus:ring-blue-500 dark:focus:border-blue-500" %}
   </div>
 
   {% if redirect_field_value %}
   <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
   {% endif %}
-    <button class="mt-2 focus:outline-none text-white bg-[#73B769] hover:bg-[#56964a] focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2" type="submit">
+    <button class="mt-2 focus:outline-none  bg-[#73B769] hover:bg-[#56964a] focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2" type="submit">
         {% trans "Sign Up" %} &raquo;
     </button>
 </form>
diff --git a/static/css/styles.css b/static/css/styles.css
index 60370c4..609c071 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,10 +1,13 @@
+:root {
+    --cell-color: rgb(255, 255, 204);
+    --cell-important: rgb(204, 255, 204);
+}
+
 nav {
-    color: white;
-    background: rgb(22, 8, 42);
-    border-bottom: 0.5px solid white;
+    border-bottom: 0.5px solid rgb(167, 167, 167);
 }
 
 body {
-    background: radial-gradient(circle at 0% 10%, rgb(22, 8, 42) 20%, rgb(114, 74, 170) 200%);
+    background: radial-gradient(circle at 170% -10%, rgb(99, 102, 241) -10%, rgb(250, 250, 250) 60%);
     min-height: 100vh;
 }
\ No newline at end of file
diff --git a/webportal/templates/webportal/assemblies.html b/webportal/templates/webportal/assemblies.html
index 527f118..3ae32e0 100644
--- a/webportal/templates/webportal/assemblies.html
+++ b/webportal/templates/webportal/assemblies.html
@@ -7,9 +7,9 @@
 
 {% block content %}
 
-<div class="relative text-white" id="assemblies-page">
+<div class="relative " id="assemblies-page">
     
-    <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl lg:text-4xl flex items-center mb-4">
+    <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl flex items-center mb-4">
         <svg 
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -23,8 +23,8 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl
         Assemblies
     </h1>
 
-    <div id="assemblies-container" class="relative text-white">
-        <div id="assemblies-grid-container" class="flex flex-col md:grid md:grid-cols-5 md:gap-4">
+    <div id="assemblies-container" class="relative ">
+        <div id="assemblies-grid-container" class="flex flex-col md:grid md:grid-cols-5 md:gap-6">
             
             {% include 'webportal/partials/assemblies/sidebar.html' %}
             {% include 'webportal/partials/assemblies/assembly.html' %}
diff --git a/webportal/templates/webportal/index.html b/webportal/templates/webportal/index.html
index ae00fd0..93ce8da 100644
--- a/webportal/templates/webportal/index.html
+++ b/webportal/templates/webportal/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl lg:text-4xl">
+<h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl">
     Welcome!
 </h1>
 
@@ -10,11 +10,11 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl
 {% if user.is_authenticated %}
 
     <div class="flex items-center mb-6">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-6 h-6 text-white">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-6 h-6 ">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
         </svg>
     
-        <p class="text-xl text-white">
+        <p class="text-xl ">
             Welcome, {{ user.username }}
         </p>
     </div>
@@ -22,13 +22,13 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl
     <div class="border mb-6"></div>
     <div class="flex flex-row gap-8 mb-3">
         
-        <a href="{% url 'materials-page' %}" class="font-medium text-white hover:underline flex items-center">
+        <a href="{% url 'materials-page' %}" class="font-medium  hover:underline flex items-center">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 me-1">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
             </svg>
             Materials
         
-        <a href="{% url 'assemblies-page' %}" class="font-medium text-white hover:underline flex items-center">
+        <a href="{% url 'assemblies-page' %}" class="font-medium  hover:underline flex items-center">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 me-1">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
             </svg>              
@@ -42,6 +42,6 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl
 {% endif %}
 
 
-<p class="text-white">{% lorem %}</p>
+<p class="">{% lorem %}</p>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/webportal/templates/webportal/partials/assemblies/assembly.html b/webportal/templates/webportal/partials/assemblies/assembly.html
index 0661871..b978823 100644
--- a/webportal/templates/webportal/partials/assemblies/assembly.html
+++ b/webportal/templates/webportal/partials/assemblies/assembly.html
@@ -2,48 +2,58 @@
     {% if assembly %}
         
         {% block assembly-name %}
-            <div id="assembly-name">
-                <form 
-                    hx-post="{% url 'update-assembly-name' assembly.id %}"
-                    hx-target="#assembly-name"
-                    hx-swap="outerHTML"
-                    >
-                    <input 
-                        type="text"
-                        name="name"
-                        class="text-black"
-                        value="{{ assembly.name }}" 
-                        hx-trigger="changed delay:500ms"
-                        style="border: 1px solid #939799; padding: 8px; border-radius: 4px; background: transparent; color: white;"
-                        onfocus="this.style.borderColor='#007bff'; this.style.boxShadow='0 0 5px rgba(0, 123, 255, 0.5)'; this.style.outline='none'; this.style.background='white'; this.style.color='black';"
-                        onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'; this.style.background='transparent'; this.style.color='white';"
-                    />
-                </form>
+            <div id="assembly-name" class="flex flex-1 mb-4">
+                <div class="flex flex-1 items-center">
+                    <div class="me-4" >Assembly:</div>
+                    <form 
+                        hx-post="{% url 'update-assembly-name' assembly.id %}"
+                        hx-target="#assembly-name"
+                        hx-swap="outerHTML"
+                        class="flex flex-1"
+                        >
+                        <input 
+                            type="text"
+                            name="name"
+                            class="text-black flex-1"
+                            value="{{ assembly.name }}" 
+                            hx-trigger="changed delay:500ms"
+                            style="border: 1px solid #939799; padding: 8px; border-radius: 3px; background: var(--cell-color);"
+                            onfocus="this.style.borderColor='#007bff'; this.style.boxShadow='0 0 5px rgba(0, 123, 255, 0.5)'; this.style.outline='none'; this.style.background='white'; this.style.color='black';"
+                            onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'; this.style.background='var(--cell-color)';"
+                        />
+                    </form>
+                </div>
             </div>
         {% endblock %}
         
         {% block assembly-detail-view %}
-            <div id="assembly-detail-view">
-
+            <div id="assembly-detail-view" class="flex flex-col">
+                <div id="assembly-headers" class="flex flex-1 flex-row items-center">
+                    <div class="justify-center text-center text-xs me-4" style="min-width:25px;">-</div>
+                    <div class="justify-center text-center text-xs" style="max-width:10ch;">Thickness [M]</div>
+                    <div class="flex flex-1 justify-center text-center text-xs">Layer Material</div>
+                </div>
+                
                 <div id="assembly-cells">
                     {% for layer in layers %}
                         
                         {% block layer %}
                             <div class="layer" id="layer-{{ layer.pk }}">
-                                <div class="flex flex-row items-center cell" id="cell-{{ cell.pk }}">
+                                <div class="flex flex-row items-center cell py-2" id="cell-{{ cell.pk }}">
                                     <a                                
                                         id="delete-layer-{{ assembly.pk }}"
                                         hx-delete="{% url 'delete-layer' assembly_pk=assembly.pk layer_pk=layer.pk %}"
                                         hx-target="#assembly"
                                         hx-swap="outerHTML"
                                         hx-confirm="Delete?" 
-                                        class="cursor-pointer">
+                                        class="cursor-pointer me-2"
+                                        style="min-width:25px;">
                                         <svg 
                                             xmlns="http://www.w3.org/2000/svg"
                                             fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5"
                                             stroke="currentColor"
-                                            class="size-4 me-2">
+                                            class="size-6 me-1">
                                             <path 
                                                 stroke-linecap="round" 
                                                 stroke-linejoin="round"
@@ -54,7 +64,7 @@
                                         hx-post="{% url 'update-layer-thickness' assembly.id layer.pk %}"
                                         hx-target="#layer-thickness-{{ layer.pk }}"
                                         hx-swap="innerHTML"
-                                        >
+                                        class="me-1">
                                         <input 
                                             id="layer-thickness-{{ layer.pk }}"
                                             type="text"
@@ -62,12 +72,26 @@
                                             class="text-black"
                                             value={{ layer.thickness }}
                                             hx-trigger="changed delay:500ms"
-                                            style="border: 1px solid #939799; padding: 8px; border-radius: 4px; background: transparent; color: white;"
+                                            style="border: 1px solid #939799; padding: 8px; border-radius: 3px; background: var(--cell-color); max-width:10ch;"
+                                            onfocus="this.style.borderColor='#007bff'; this.style.boxShadow='0 0 5px rgba(0, 123, 255, 0.5)'; this.style.outline='none'; this.style.background='white'; this.style.color='black';"
+                                            onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'; this.style.background='var(--cell-color)';"
+                                        />
+                                    </form>
+                                    <form
+                                        class="flex flex-1"    
+                                    >
+                                        <input
+                                            id="layer-name-{{ layer.pk }}"
+                                            type="text"
+                                            name="value"
+                                            class="text-black flex-1" 
+                                            value={% if layer.cells.value %}{{ layer.cells.value }}{% else %}"select material..."{% endif %}                                       
+                                            hx-trigger="changed delay:500ms"
+                                            style="border: 1px solid #939799; padding: 8px; border-radius: 3px; background: var(--cell-color)"
                                             onfocus="this.style.borderColor='#007bff'; this.style.boxShadow='0 0 5px rgba(0, 123, 255, 0.5)'; this.style.outline='none'; this.style.background='white'; this.style.color='black';"
-                                            onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'; this.style.background='transparent'; this.style.color='white';"
+                                            onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'; this.style.background='var(--cell-color)';"
                                         />
                                     </form>
-                                    <input id="layer-name-{{ layer.pk }}" class="text-black" value="Test" />
                                 </div>
                             </div>
                         {% endblock %}
@@ -75,8 +99,8 @@
                     {% endfor %}
                 </div>
             
-                <div id="grid-control-buttons">
-                    <button class="btn" hx-post="{% url 'add-layer' assembly.pk %}" hx-target="#assembly-cells" hx-swap="beforeend">Add Layer</button>
+                <div id="grid-control-buttons" class="mt-10">
+                    <button class="btn" hx-post="{% url 'add-layer' assembly.pk %}" hx-target="#assembly-cells" hx-swap="beforeend">Add New Layer +</button>
                 </div>
             
             </div>
diff --git a/webportal/templates/webportal/partials/assemblies/sidebar.html b/webportal/templates/webportal/partials/assemblies/sidebar.html
index fad4842..aa0f7c2 100644
--- a/webportal/templates/webportal/partials/assemblies/sidebar.html
+++ b/webportal/templates/webportal/partials/assemblies/sidebar.html
@@ -1,7 +1,17 @@
 {% load widget_tweaks %}
 {% load partials %}
 
-<div id="assembly-sidebar" class="col-span-1">
+<div id="assembly-sidebar" class="col-span-1" style="border-right:2px solid gray; padding-right:12px;">
+    
+    <form
+        id="assembly-sidebar-add-new-button"
+        hx-post="{% url 'add-new-assembly' %}"
+        hx-target="#assembly"
+        hx-swap="outerHTML">
+        <button class="btn">Add New Assembly +</button>
+    </form>
+
+    <hr style="margin-top:20px; margin-bottom:20px; border:1px dashed gray" />
 
     {% block assembly-sidebar-list %}
 
@@ -9,10 +19,10 @@
             {% for assembly in assemblies %}
                 <li class="cursor-pointer hover:underline">
                     <div 
-                        class="flex flex-row items-center"
+                        class="flex flex-row items-center mb-1 p-1"
                         id=assembly-{{ assembly.pk }}
                         {% if active_assembly_id == assembly.pk %}
-                            style="color:red"
+                            style="font-weight:800; background: rgb(240, 240, 240);"
                         {% endif %}
                         >
                         <a                                
@@ -21,7 +31,7 @@
                             hx-target="#assembly"
                             hx-swap="outerHTML"
                             hx-confirm="Delete?" 
-                            class="cursor-pointer">
+                            class="cursor-pointer ms-3">
                             <svg 
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none" viewBox="0 0 24 24"
@@ -49,12 +59,4 @@
     
     {% endblock %}
 
-    <form
-        id="assembly-sidebar-add-new-button"
-        hx-post="{% url 'add-new-assembly' %}"
-        hx-target="#assembly"
-        hx-swap="outerHTML">
-        <button class="btn btn-success">Add New Assembly +</button>
-    </form>
-
 </div>
\ No newline at end of file
diff --git a/webportal/templates/webportal/partials/materials/container.html b/webportal/templates/webportal/partials/materials/container.html
index b3609d3..f37d466 100644
--- a/webportal/templates/webportal/partials/materials/container.html
+++ b/webportal/templates/webportal/partials/materials/container.html
@@ -1,8 +1,8 @@
 {% load widget_tweaks %}
 
-<div class="relative text-white" id="material-list-page">
+<div class="relative " id="material-list-page">
     
-    <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl lg:text-4xl flex items-center mb-4">
+    <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight  md:text-3xl lg:text-4xl flex items-center mb-4">
         <svg 
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -19,7 +19,7 @@ <h1 class="mt-4 mb-6 text-2xl leading-none tracking-tight text-white md:text-3xl
         Materials List
     </h1>
 
-    <div class="relative text-white" id="material-list-container" >
+    <div class="relative " id="material-list-container" >
         <div class="flex flex-col md:grid md:grid-cols-5 md:gap-4">
             
             {% include 'webportal/partials/materials/sidebar.html' %}
diff --git a/webportal/templates/webportal/partials/materials/create.html b/webportal/templates/webportal/partials/materials/create.html
index 81a2140..617ae6a 100644
--- a/webportal/templates/webportal/partials/materials/create.html
+++ b/webportal/templates/webportal/partials/materials/create.html
@@ -1,6 +1,6 @@
 {% load widget_tweaks %}
 
-<h1 class="mt-8 mb-4 prose prose-2xl text-white">
+<h1 class="mt-8 mb-4 prose prose-2xl ">
     Create New Material:
 </h1>
 
diff --git a/webportal/templates/webportal/partials/materials/details.html b/webportal/templates/webportal/partials/materials/details.html
index 94a3d1a..85bc453 100644
--- a/webportal/templates/webportal/partials/materials/details.html
+++ b/webportal/templates/webportal/partials/materials/details.html
@@ -1,13 +1,13 @@
 {% load widget_tweaks %}
 
 <div class="mb-2 form-control text-black">
-    {{ form.category|add_label_class:"label text-white" }}
+    {{ form.category|add_label_class:"label " }}
     {% render_field form.category class="text-black"%}
 </div>
 
 
 <div class="mb-2 form-control text-black">
-    {{ form.name|add_label_class:"label text-white" }}
+    {{ form.name|add_label_class:"label " }}
     {% render_field form.name class="input text-black" %}
 
     {% for error in form.name.errors %}
@@ -16,7 +16,7 @@
 </div>
 
 <div class="mb-2 form-control">
-    {{ form.conductivity|add_label_class:"label text-white" }}
+    {{ form.conductivity|add_label_class:"label " }}
     {% render_field form.conductivity class="input text-black" %}
 
     {% for error in form.conductivity.errors %}
@@ -25,7 +25,7 @@
 </div>
 
 <div class="mb-2 form-control">
-    {{ form.emissivity|add_label_class:"label text-white" }}
+    {{ form.emissivity|add_label_class:"label " }}
     {% render_field form.emissivity class="input text-black" %}
 
     {% for error in form.emissivity.errors %}
@@ -34,17 +34,17 @@
 </div>
 
 <div class="mb-2 form-control">
-    {{ form.source|add_label_class:"label text-white" }}
+    {{ form.source|add_label_class:"label " }}
     {% render_field form.source class="input text-black" %}
 </div>
 
 <div class="mb-2 form-control">
-    {{ form.comments|add_label_class:"label text-white" }}
+    {{ form.comments|add_label_class:"label " }}
     {% render_field form.comments class="input text-black" %}
 </div>
 
 <div class="mb-2 form-control">
-    {{ form.color_argb|add_label_class:"label text-white" }}
+    {{ form.color_argb|add_label_class:"label " }}
     {% render_field form.color_argb class="input text-black" %}
 </div>
 
diff --git a/webportal/templates/webportal/partials/materials/import.html b/webportal/templates/webportal/partials/materials/import.html
index 3ae3a39..60a26d3 100644
--- a/webportal/templates/webportal/partials/materials/import.html
+++ b/webportal/templates/webportal/partials/materials/import.html
@@ -1,6 +1,6 @@
 {% load widget_tweaks %}
 
-<h1 class="mt-8 mb-4 prose prose-2xl text-white">
+<h1 class="mt-8 mb-4 prose prose-2xl ">
     Import Materials:
 </h1>
 
diff --git a/webportal/templates/webportal/partials/materials/sidebar.html b/webportal/templates/webportal/partials/materials/sidebar.html
index fa18491..21afd59 100644
--- a/webportal/templates/webportal/partials/materials/sidebar.html
+++ b/webportal/templates/webportal/partials/materials/sidebar.html
@@ -10,8 +10,8 @@
     >
         
         <div class="mb-4 form-control">
-            {{ filter.form.category|add_label_class:"label text-white" }}
-            {% render_field filter.form.category class="text-s text-white-300 border-gray-300 rounded focus:ring-green-500" %}
+            {{ filter.form.category|add_label_class:"label " }}
+            {% render_field filter.form.category class="text-s -300 border-gray-300 rounded focus:ring-green-500" %}
         </div>
         
         <button class="btn btn-white">
@@ -19,11 +19,11 @@
         </button>
     </form>
 
-    <hr style="margin-top:20px; margin-bottom:20px; border-style:dashed" />
+    <hr style="margin-top:20px; margin-bottom:20px; border:1px dashed gray" />
 
     <form id="unit-system-form">
         <label class="flex cursor-pointer gap-2">
-            <span class="label-text text-white">SI</span>
+            <span class="label-text ">SI</span>
             <input 
                 type="checkbox"
                 name="unit-system"
@@ -34,11 +34,11 @@
                 hx-target="#material-table"
                 hx-swap="outerHTML"
             />
-            <span class="label-text text-white">IP</span>
+            <span class="label-text ">IP</span>
         </label>
     </form>
 
-    <hr style="margin-top:20px; margin-bottom:20px; border-style:dashed" />
+    <hr style="margin-top:20px; margin-bottom:20px; border:1px dashed gray" />
     
     <div class="flex items-center" id="import-export-tools">
         <a 
diff --git a/webportal/templates/webportal/partials/materials/table.html b/webportal/templates/webportal/partials/materials/table.html
index b35d064..7ac6685 100644
--- a/webportal/templates/webportal/partials/materials/table.html
+++ b/webportal/templates/webportal/partials/materials/table.html
@@ -7,7 +7,7 @@
     <div class="flex flex-col">
         {% if materials %}
             <table class="table-xs overflow-x-auto overflow-y-auto" style="display:inline-block">
-                <thead class="text-xs text-white uppercase" style="border-bottom-width:2px;">
+                <thead class="text-xs  uppercase" style="border-bottom:2px solid gray;">
                     <tr>
                         <th></th>
                         <th class="px-6 pt-3 pb-0">Category</th>
@@ -35,7 +35,7 @@
                 <tbody>
                     {% partialdef material_list inline=True %}
                         {% for material in materials %}
-                                <tr class="hover:bg-gray-700">
+                                <tr class="hover:bg-gray-300">
                                     {% comment %} TODO: This causes an N+1 lookup issue that I can't fix.... {% endcomment %}
                                     {% if material.user == current_user %}
                                         <td class="flex items-center">
@@ -117,7 +117,7 @@
             {% endif %}
                     
         {% else %}
-            <p class="text-2xl text-white">No materials found.</p>
+            <p class="text-2xl ">No materials found.</p>
         {% endif %}
 
         <span id="spinner" class="loading loading-spinner loading-lg htmx-indicator"></span>
diff --git a/webportal/templates/webportal/partials/materials/update.html b/webportal/templates/webportal/partials/materials/update.html
index 2932523..50421db 100644
--- a/webportal/templates/webportal/partials/materials/update.html
+++ b/webportal/templates/webportal/partials/materials/update.html
@@ -1,6 +1,6 @@
 {% load widget_tweaks %}
 
-<h1 class="mt-8 mb-4 prose prose-2xl text-white">
+<h1 class="mt-8 mb-4 prose prose-2xl ">
     Update Material:
 </h1>
 
diff --git a/webportal/templates/webportal/partials/navbar.html b/webportal/templates/webportal/partials/navbar.html
index 3ad1e5a..73963c0 100644
--- a/webportal/templates/webportal/partials/navbar.html
+++ b/webportal/templates/webportal/partials/navbar.html
@@ -17,21 +17,21 @@
                 {% if user.is_authenticated %}
                     <li>
                         <a href="{% url 'materials-page' %}" 
-                            class="block py-2 pl-3 pr-4 text-white rounded md:p-0" 
+                            class="block py-2 pl-3 pr-4  rounded md:p-0" 
                             aria-current="page">
                                 Materials
                         </a>
                     </li>
                     <li>
                         <a href="{% url 'assemblies-page' %}" 
-                            class="block py-2 pl-3 pr-4 text-white rounded md:p-0" 
+                            class="block py-2 pl-3 pr-4  rounded md:p-0" 
                             aria-current="page">
                                 Assemblies
                         </a>
                     </li>
                     <li>
                         <a href="{% url 'account_logout' %}" 
-                            class="block py-2 pl-3 pr-4 text-white rounded md:p-0" 
+                            class="block py-2 pl-3 pr-4  rounded md:p-0" 
                             aria-current="page">
                                 Logout
                         </a>
@@ -39,14 +39,14 @@
                 {% else %}
                     <li>
                         <a href="{% url 'account_login' %}" 
-                            class="block py-2 pl-3 pr-4 text-white rounded md:p-0" 
+                            class="block py-2 pl-3 pr-4  rounded md:p-0" 
                             aria-current="page">
                                 Login
                         </a>
                     </li>
                     <li>
                         <a href="{% url 'account_signup' %}" 
-                            class="block py-2 pl-3 pr-4 text-white rounded md:p-0" 
+                            class="block py-2 pl-3 pr-4  rounded md:p-0" 
                             aria-current="page">
                                 Sign Up
                         </a>