some layout improvements

mongoosejs · Jan 28, 2025 · 8619cb3 · 8619cb3
1 parent e1a8c18
commit 8619cb3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/frontend/src/create-document/create-document.html b/frontend/src/create-document/create-document.html
@@ -2,7 +2,7 @@
   <div class="mb-2">
     <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
   </div>
-  <button @click="createDocument()" class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
+  <button @click="createDocument()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
   <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
     <div class="flex">
       <div class="flex-shrink-0">
@@ -22,4 +22,4 @@ <h3 class="text-sm font-medium text-red-800">There were {{errors.length}} errors
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/frontend/src/document/document.html b/frontend/src/document/document.html
@@ -1,7 +1,9 @@
 <div class="document">
   <div class="document-menu">
     <div class="left">
-      <button @click="$router.push('/model/' + this.model)">
+      <button
+        @click="$router.push('/model/' + this.model)"
+        class="rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600">
         &lsaquo; Back
       </button>
     </div>
@@ -11,7 +13,7 @@
         v-if="!editting"
         @click="editting = true"
         type="button"
-        class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+        class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
         <img src="images/edit.svg" class="inline" /> Edit
       </button>
       <button
@@ -25,13 +27,13 @@
         v-if="editting"
         @click="shouldShowConfirmModal=true;"
         type="button"
-        class="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
+        class="rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
         <img src="images/save.svg" class="inline" /> Save
       </button>
       <button
         @click="shouldShowDeleteModal=true;"
         type="button"
-        class="rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
+        class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
         <img src="images/delete.svg" class="inline" /> Delete
       </button>
     </div>

diff --git a/frontend/src/modal/modal.css b/frontend/src/modal/modal.css
@@ -33,7 +33,7 @@
 .modal-header {
   margin-top: 0;
   font-size: 18px;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .modal-header-success {
@@ -82,4 +82,13 @@
   right: 0.25em;
   top: 0.25em;
   cursor: pointer;
+  font-size: 1.25em;
+  height: 1.25em;
+  width: 1.25em;
+  border-radius: 100%;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 0.25em;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -49,6 +49,32 @@ module.exports = {
             '900': '#060eac',
             '950': '#000c87',
         },
+        'forest-green': {
+            '50': '#ecfff1',
+            '100': '#d3ffe0',
+            '200': '#aaffc3',
+            '300': '#69ff95',
+            '400': '#21ff5f',
+            '500': '#00f23a',
+            '600': '#00ca2c',
+            '700': '#009e25',
+            '800': '#008726',
+            '900': '#02651f',
+            '950': '#00390e',
+        },
+        'valencia': {
+            '50': '#fdf3f3',
+            '100': '#fbe5e5',
+            '200': '#f9cfcf',
+            '300': '#f3aeae',
+            '400': '#eb7e7e',
+            '500': '#dc4949',
+            '600': '#ca3838',
+            '700': '#aa2b2b',
+            '800': '#8d2727',
+            '900': '#752727',
+            '950': '#3f1010',
+        }
       }
     }
   }