From 2cc69382c15aeed665b32aed01c701840ee80c9c Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Fri, 30 Aug 2024 15:17:43 +0100
Subject: Removed most of w3 and working on fixing the forms.

---
 core/static/css/output.css     | 674 +++++++++++++++++++++++++++++++++++------
 core/templates/core/base.html  |  38 ++-
 core/templates/core/index.html | 152 +++++-----
 3 files changed, 682 insertions(+), 182 deletions(-)

(limited to 'core')

diff --git a/core/static/css/output.css b/core/static/css/output.css
index e8bd71c..e25155d 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -916,12 +916,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
-
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
 }
 
 .btn {
@@ -1112,48 +1106,7 @@ html {
   min-height: fit-content;
 }
 
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown > *:not(summary):focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.dropdown .dropdown-content {
-  position: absolute;
-}
-
-.dropdown:is(:not(details)) .dropdown-content {
-  visibility: hidden;
-  opacity: 0;
-  transform-origin: top;
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:not(.dropdown-hover):focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
-  visibility: visible;
-  opacity: 1;
-}
-
 @media (hover: hover) {
-  .dropdown.dropdown-hover:hover .dropdown-content {
-    visibility: visible;
-    opacity: 1;
-  }
-
   .btm-nav > *.disabled:hover,
       .btm-nav > *[disabled]:hover {
     pointer-events: none;
@@ -1227,12 +1180,6 @@ html {
     }
   }
 
-  .dropdown.dropdown-hover:hover .dropdown-content {
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .tab[disabled],
     .tab[disabled]:hover {
     cursor: not-allowed;
@@ -1241,10 +1188,6 @@ html {
   }
 }
 
-.dropdown:is(details) summary::-webkit-details-marker {
-  display: none;
-}
-
 .form-control {
   display: flex;
   flex-direction: column;
@@ -1288,12 +1231,6 @@ html {
   margin-inline-end: -1rem;
 }
 
-.join .dropdown .join-item:first-child:not(:last-child),
-  .join *:first-child:not(:last-child) .dropdown .join-item {
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
 .link {
   cursor: pointer;
   text-decoration-line: underline;
@@ -1376,6 +1313,40 @@ html {
   --tw-border-opacity: 0.2;
 }
 
+.select {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 3rem;
+  min-height: 3rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 2;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 20px) calc(1px + 50%),
+    calc(100% - 16.1px) calc(1px + 50%);
+  background-size: 4px 4px,
+    4px 4px;
+  background-repeat: no-repeat;
+}
+
+.select[multiple] {
+  height: auto;
+}
+
 .tabs {
   display: grid;
   align-items: flex-end;
@@ -1485,11 +1456,6 @@ input.tab:checked + .tab-content,
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
-.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
-
 .btm-nav > *:where(.active) {
   border-top-width: 2px;
   --tw-bg-opacity: 1;
@@ -1833,14 +1799,6 @@ details.collapse summary::-webkit-details-marker {
   content: "−";
 }
 
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .input input {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -2059,6 +2017,50 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+.select:focus {
+  box-shadow: none;
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.select-disabled,
+  .select:disabled,
+  .select[disabled] {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  color: var(--fallback-bc,oklch(var(--bc)/0.4));
+}
+
+.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.select-disabled::placeholder,
+  .select:disabled::placeholder,
+  .select[disabled]::placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.select-multiple,
+  .select[multiple],
+  .select[size].select:not([size="1"]) {
+  background-image: none;
+  padding-right: 1rem;
+}
+
+[dir="rtl"] .select {
+  background-position: calc(0% + 12px) calc(1px + 50%),
+    calc(0% + 16px) calc(1px + 50%);
+}
+
 @keyframes skeleton {
   from {
     background-position: 150%;
@@ -2349,36 +2351,80 @@ details.collapse summary::-webkit-details-marker {
   margin: 0px;
 }
 
-.m-3 {
-  margin: 0.75rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .mb-0 {
   margin-bottom: 0px;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
 
+.flex {
+  display: flex;
+}
+
 .table {
   display: table;
 }
@@ -2391,25 +2437,291 @@ details.collapse summary::-webkit-details-marker {
   display: none;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-auto {
   height: auto;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.list-inside {
+  list-style-position: inside;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.p-3 {
-  padding: 0.75rem;
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.pe-3 {
-  padding-inline-end: 0.75rem;
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
 }
 
 .text-2xl {
@@ -2427,7 +2739,195 @@ details.collapse summary::-webkit-details-marker {
   line-height: 2.5rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
+.hover\:text-blue-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+@media (min-width: 640px) {
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .sm\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
\ No newline at end of file
diff --git a/core/templates/core/base.html b/core/templates/core/base.html
index 65c1842..682395f 100644
--- a/core/templates/core/base.html
+++ b/core/templates/core/base.html
@@ -27,28 +27,26 @@
 </head>
 <body>
 {% block navbar %}
-<div class="navbar bg-blue-500">
-  <!-- <a href="/" class="w3-bar-item w3-button w3-dark-gray w3-xxlarge"><i class="fa fa-home"></i></a> -->
-  <a href="#" class="text-3xl pe-3">Home</a>
-  <a href="{% url 'engagements:home' %}" class="text-3xl link pe-3">Engagement Plans</a>
-  <a href="{% url 'engagements:regulatedentities' %}" class="text-3xl link pe-3">Regulated Entities</a>
-  <a href="#" class="text-3xl link pe-3">Reporting</a>
-  <a href="#" class="text-3xl link pe-3">Dashboards</a>
-  <div class="dropdown">
-    <button class="w3-button w3-large">Teams</button>
-    <div class="w3-dropdown-content w3-bar-block w3-card-4">
-      <a href="#" class="w3-bar-item w3-button">Submarines and Propulsion</a>
-      <a href="#" class="w3-bar-item w3-button">Transport</a>
+<nav class="bg-blue-600 p-4">
+  <div class="container mx-auto flex items-center justify-between">
+    <div class="flex items-center space-x-4">
+      <a href="#" class="text-white text-xl font-semibold">Home</a>
+      <a href="{% url 'engagements:home' %}" class="text-white hover:text-blue-200">Engagement Plans</a>
+      <a href="{% url 'engagements:regulatedentities' %}" class="text-white hover:text-blue-200">Regulated Entities</a>
+      <a href="#" class="text-white hover:text-blue-200">Reporting</a>
+      <a href="#" class="text-white hover:text-blue-200">Dashboards</a>
+    </div>
+    <div class="flex items-center space-x-4">
+      {% if request.user.is_authenticated %}
+        <span class="text-white">{{ user }}</span>
+        <a href="{% url 'logout' %}" class="text-white hover:text-blue-200">Log Out</a>
+      {% else %}
+        <a href="{% url 'login' %}" class="text-white hover:text-blue-200">Log In</a>
+      {% endif %}
+      <a href="#" class="text-white hover:text-blue-200">Help</a>
     </div>
   </div>
-    {% if request.user.is_authenticated %}
-    <a class="w3-bar-item w3-right w3-button w3-large" href="#">{{ user }}</a>
-    <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'logout' %}">Log Out</a>
-    {% else %}
-    <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'login' %}">Log In</a>
-    {% endif %}
-  <a href="#" class="w3-right w3-bar-item w3-button w3-large">Help</a>
-</div>
+</nav>
 {% endblock navbar %}
 
   <div class="container mx-auto">
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index a2c9307..ae25fbd 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,101 +4,103 @@
 {% block title %}DefNucSyR Engagement Database (DED) - Information Management for DefNucSyR{% endblock title %}
 
 {% block content %}
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold mb-8">DED - Information Management for DefNucSyR</h1>
 
-    <div class="bg-blue-500 text-white p-3 my-2">
-        This is a Tailwind styled div.
-    </div>
-
-    <div class="container mx-auto">
-        <h1 class="text-4xl">DED - Information Management for DefNucSyR</h1>
-        <div class="w3-panel w3-leftbar w3-sand w3-xlarge w3-serif w3-display-container">
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-            <h3>Quote of the day</h3>
-            <p>This is a placeholder for some interesting test. Use of lose.</p>
+        <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-8">
+            <div class="flex justify-between items-center">
+                <h3 class="text-xl font-semibold">Quote of the day</h3>
+                <button class="text-gray-600 hover:text-gray-800"
+                        onclick="this.parentElement.parentElement.style.display='none'">&times;
+                </button>
+            </div>
+            <p class="mt-2">This is a placeholder for some interesting test. Use or lose.</p>
         </div>
 
-        <p>{% lorem %}</p>
+        <p class="mb-8">{% lorem %}</p>
 
-        <div class="container">
-            <header class="text-3xl">
-                <h3>Submarines and Propulsion</h3>
-            </header>
-            <div class="w3-container">
-
-                <h3 class="text-2xl">Assessments & Inspections:</h3>
-                <table class="table table-zebra">
-                    <tr>
-                        <th>Start Date</th>
-                        <th>End Date</th>
-                        <th>Event</th>
-                        <th>Site</th>
-                        <th>Inspectors</th>
+        <div class="mb-12">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Submarines and Propulsion</h2>
+        </header>
+        <div class="p-4">
+            <h3 class="text-2xl font-semibold mb-4">Assessments & Inspections:</h3>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Start Date</th>
+                        <th class="p-2 text-left">End Date</th>
+                        <th class="p-2 text-left">Event</th>
+                        <th class="p-2 text-left">Site</th>
+                        <th class="p-2 text-left">Inspectors</th>
                     </tr>
+                </thead>
+                <tbody>
                     {% for s in subs_regulatory %}
-                        <tr>
-                            <td>{{ s.proposed_start_date|date:'j M y' }}</td>
-                            <td>{{ s.proposed_end_date|date:'j M y' }}</td>
-                            <td><a href="{% url 'engagements:engagement_detail' s.pk %}">{{ s }}</a></td>
-                            <td>{{ s.external_party }}</td>
-                            <td>
-                                {% if s.officers.all %}
-                                    {{ s.officers.all|commalist }}
-                                {% endif %}
-                            </td>
-                        </tr>
+                    <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                        <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+                        <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+                        <td class="p-2"><a href="{% url 'engagements:engagement_detail' s.pk %}" class="text-blue-600 hover:underline">{{ s }}</a></td>
+                        <td class="p-2">{{ s.external_party }}</td>
+                        <td class="p-2">
+                            {% if s.officers.all %}
+                                {{ s.officers.all|commalist }}
+                            {% endif %}
+                        </td>
+                    </tr>
                     {% endfor %}
-                </table>
-                <div class="w3-cell-row">
-                    <div class="w3-cell w3-left">
-                        <a href="{% url 'engagements:create' 'reg' %}" class="w3-button w3-round w3-blue">Add New</a>
-                    </div>
-                    <div class="w3-cell w3-right">
-                        <small>See <a href="#">Enagements</a> for full list</small>
-                    </div>
-                </div>
-                <hr>
-                <h4>Non-regulatory events:</h4>
-                <table class="table table-zebra">
-                    <tr>
-                        <th>Start Date</th>
-                        <th>End Date</th>
-                        <th>Summary</th>
+                </tbody>
+            </table>
+
+            <div class="flex justify-between items-center mb-8">
+                <a href="{% url 'engagements:create' 'reg' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</a>
+                <small>See <a href="#" class="text-blue-600 hover:underline">Engagements</a> for full list</small>
+            </div>
+
+            <div class="border-b border-gray-300 my-8"></div>
+
+            <h4 class="text-xl font-semibold mb-4">Non-regulatory events:</h4>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Start Date</th>
+                        <th class="p-2 text-left">End Date</th>
+                        <th class="p-2 text-left">Summary</th>
                     </tr>
+                </thead>
+                <tbody>
                     {% if not subs %}
-                        <tr>
-                            <td>None</td>
-                            <td>None</td>
-                            <td>None</td>
-                        </tr>
+                    <tr>
+                        <td class="p-2" colspan="3">No events found</td>
+                    </tr>
                     {% else %}
                         {% for s in subs %}
-                            <tr>
-                                <td>{{ s.proposed_start_date|date:'j M y' }}</td>
-                                <td>{{ s.proposed_end_date|date:'j M y' }}</td>
-                                <td><a href="#">{{ s }}</a></td>
-                            </tr>
+                        <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                            <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+                            <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+                            <td class="p-2"><a href="#" class="text-blue-600 hover:underline">{{ s }}</a></td>
+                        </tr>
                         {% endfor %}
                     {% endif %}
-                </table>
-                <div>
-                    <button class="w3-button w3-round w3-blue">Add New</button>
-                </div>
-
-                <p>{% lorem %}</p>
+                </tbody>
+            </table>
 
+            <div class="mt-4">
+                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</button>
             </div>
         </div>
+    </div>
+</div>
+
 
-        <div class="w3-card-2 w3-margin-top">
-            <header class="w3-container w3-light-blue">
-                <h3>Transport</h3>
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h3 class="text-2xl font-bold">Transport</h3>
             </header>
-            <div class="w3-container">
+            <div class="p-4">
                 <p>{% lorem %}</p>
             </div>
         </div>
-
     </div>
-
 {% endblock content %}
-- 
cgit v1.2.3