fix/assets page layout now fits in phone view.

SVGs colours changed to white

src/views/assets.ejs

@@ -10,7 +10,7 @@
 
     <!-- Main display -->
     <section>
-        <div class="mt-2 max-w-md mx-auto bg-white px-8 py-6 rounded-lg shadow-md flex flex-col justify-center">
+        <div class="my-2 mx-4 md:max-w-md md:mx-auto bg-white px-8 py-6 rounded-lg shadow-md flex flex-col justify-center">
             <div class="flex flex-row justify-between text-right">
                 <h1 class="text-lg font-medium">Assets:</h1>
                 <h1 class="text-lg font-medium"><%= assets.length %></h1>
@@ -24,7 +24,7 @@
             </div>
         </div>
 
-        <div class="w-md my-6 max-w-md mx-auto px-4 flex flex-row justify-between">
+        <div class="my-6 md:w-md md:mx-auto px-4 flex flex-row justify-between">
             <a href="/home" class="text-center w-sm py-2 mx-2 px-4 border 
             border-transparent rounded-md shadow-sm text-sm font-medium 
             text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
@@ -43,7 +43,7 @@
     <hr class="h-px my-8 bg-gray-500 border-0 mx-10">
 
     <!-- list each asset and create hidden popup modal for view/edit -->
-    <section class="mt-6">
+    <section class="my-6 mx-4">
         <% if (assets.length == 0) { %>
             <div class="max-w-md mx-auto mb-10 rounded-lg shadow-md text-white font-bold bg-red-400 py-4 text-center">
                 You have no assets, create a new asset.