Modified styles for the app to look better

assets/styles/gargoyle.scss

@@ -1,5 +1,7 @@
-$primary-color: orange;
+$primary-color: orangered;
 $primary-color-highlight: darken($primary-color, 10%);
+$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 
 $nav-bar-height: 60px;
 
@@ -8,6 +10,29 @@ body{
   background: lightgrey;
 }
 
+a{
+  color: $primary-color;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    color: $primary-color-highlight;
+  }
+}
+
+.button.button-primary,
+button.button-primary,
+input[type="button"].button-primary,
+input[type="reset"].button-primary,
+input[type="submit"].button-primary{
+  background-color: $primary-color;
+  color: white;
+  transition: all 230ms ease-in-out;
+
+  &:hover{
+    background-color: $primary-color-highlight;
+  }
+}
+
 .container.fluid{
   max-width: 100%;
 }
@@ -19,7 +44,7 @@ body{
   width: 100%;
   height: $nav-bar-height;
   background: #212121;
-  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
+  box-shadow: $box-shadow-1;
   color: white;
 
   .nav-bar-left{
@@ -36,26 +61,43 @@ body{
 
   .site-logo,
   .nav-link a{
-    padding: 9px 12px;
+    padding: 10px 12px;
     font-size: 2.5rem;
+    text-decoration: none;
   }
 
   .site-logo{
+    padding-left: 35px;
     font-weight: bold;
   }
-
-  .nav-link a{
-    color: $primary-color;
-    transition: all 230ms ease-in-out;
-
-    &:hover{
-      color: $primary-color-highlight;
-    }
-  }
 }
 
 #main-content{
   margin-top: 25px;
-  padding: 15px 25px;
+  padding: 20px 32px;
   background: white;
+  box-shadow: $box-shadow-2;
+}
+
+#record-actions{
+  p{
+    margin-bottom: 0;
+    font-size: 2rem;
+  }
+}
+
+#item-header{
+  margin-bottom: 25px;
+
+  h1{
+    margin-bottom: 7px;
+  }
+
+  .item-added-date,
+  .item-updated-date{
+    margin-bottom: 5px;
+    color: #666;
+    font-size: 1.6rem;
+    font-style: italic;
+  }
 }

views/index.twig

@@ -11,22 +11,28 @@
   </div>
 </header>
 
-<section class="row">
+<section id="record-actions" class="row">
   <div class="columns six">
     <a href="/item/add">
-      <i class="fa-solid fa-plus"></i>
+      <p><i class="fa-solid fa-plus"></i> Add Item</p>
-      <p>Add Item</p>
     </a>
   </div>
 
   <div class="columns six">
     <a href="/item/search">
-      <i class="fa-solid fa-search"></i>
+      <p><i class="fa-solid fa-search"></i> Search</p>
-      <p>Search</p>
     </a>
   </div>
 </section>
 
+<hr>
+
+<section class="row">
+  <div class="columns twelve">
+    <h3>Recently updated records:</h3>
+  </div>
+</section>
+
 <section class="row">
   <table class="columns twelve">
     <thead>

views/item/add.twig

@@ -1,6 +1,6 @@
 {% extends 'layout.twig' %}
 
-{% block title %}Create Item{% endblock %}
+{% block title %}Add New Item{% endblock %}
 
 {% block content %}
 
@@ -17,7 +17,7 @@
       <div class="row">
         <div class="columns twelve">
           <label for="item_name">Item name:</label>
-          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name">
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
         </div>
       </div>
 
@@ -65,7 +65,7 @@
         </div>
       </div>
 
-      <input class="button-primary" type="submit" value="Submit">
+      <input class="button-primary u-full-width" type="submit" value="Submit">
     </form>
   </div>
 </section>

views/item/view.twig

@@ -5,9 +5,11 @@
 {% block content %}
 
 <!-- page header -->
-<header class="row">
+<header id="item-header" class="row">
   <div class="columns twelve">
     <h1>{{ item.name }}</h1>
+    <h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
+    <h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
   </div>
 </header>
 
@@ -16,18 +18,24 @@
   <table class="columns twelve">
     <thead>
       <tr>
-        <th>Name</th>
+        <th>Product name</th>
+        <th>Serial number</th>
+        <th>SKU Number</th>
         <th>Manufacturer</th>
         <th>Type</th>
-        <th>Created date</th>
+        <th>Seller</th>
+        <th>Purchase date</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>{{ item.name }}</td>
-        <td>{{ item.manufacturer }}</td>
+        <td>{{ item.serialNumber ? item.serialNumber : 'N/a' }}</td>
+        <td>{{ item.skuNumber ? item.skuNumber : 'N/a' }}</td>
+        <td>{{ item.manufacturer ? item.manufacturer : 'N/a' }}</td>
         <td>{{ item.type }}</td>
-        <td>{{ item.createdAt | date("m/d/Y h:i:s A") }}</td>
+        <td>{{ item.purchasedFrom ? item.purchasedFrom : 'N/a' }}</td>
+        <td>{{ item.purchasedAt | date("m/d/Y h:i:s A") }}</td>
       </tr>
     </tbody>
   </table>

views/layout.twig

@@ -25,7 +25,7 @@
   </nav>
 
   <!-- main content -->
-  <div id="main-content" class="container">
+  <div id="main-content" class="container fluid">
     {% block content %}{% endblock %}
   </div>
 </body>