Updates to UI (#27)

Removed hover effect to stat cards as there is no reason for them as they don't link to anything
Cleaned up some code base
Removed user total from user list

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>
Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com>

src/dashboard.ts

@@ -65,9 +65,9 @@ app.use(async (req, res) => await Pager.render(res, req, TEMPLATE.ERRORS[404]))
 // Run DICK
 app.listen(app.get("port"), () => {
   console.log(
-    "  Dick is running at http://localhost:%d in %s mode",
+    "[DICK] Listening on Port: %d\n[DICK] Running in: %s mode",
     app.get("port"),
     app.get("env")
   )
-  console.log("  Press CTRL-C to stop\n")
+  console.log("[DICK] Press CTRL+C to stop")
 })

views/modals/admin/create-user.ejs

@@ -2,7 +2,7 @@
     <!-- Modal Outscreen -->
     <div class="buttonModal absolute inset-0 bg-gradient-to-tr opacity-90 from-gray-700 via-gray-900 to-gray-700">
     </div>
-    <!-- Modal Outscreen -->
+    <!-- End Modal Outscreen -->
 
     <form action="/admin/add/user" method="POST"
         class="rounded-2xl flex-col bg-tertiary flex shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50">
@@ -37,24 +37,19 @@
                 <div class="grid grid-cols-2 gap-5 text-sm md:text-base">
                     <div class="md:col-span-1 col-span-2">
                         <label class="mb-2 block text-color-tertiary text-sm">
-                            <div class="relative w-max">
-                                Username
-
-                            </div>
+                            <div class="relative w-max">Username</div>
                         </label>
                         <input
                             class="form-input block w-full mt-1 rounded text-sm  text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
-                            placeholder="Imposter" name="username" type="text" />
+                            name="username" type="text" />
                     </div>
                     <div class="md:col-span-1 col-span-2">
                         <label class="mb-2 block text-color-tertiary text-sm">
-                            <div class="relative w-max">
-                                Secret Key
-                            </div>
+                            <div class="relative w-max">Password</div>
                         </label>
                         <input
                             class="form-input block w-full mt-1 rounded text-sm  text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
-                            placeholder="***************" name="password" type="password" />
+                            name="password" type="password" />
                     </div>
                 </div>
             </div>
@@ -64,9 +59,7 @@
         <div class="p-6">
             <div class="flex items-center justify-end flex-wrap -mb-3">
                 <button type="submit"
-                    class="bg-accentsecondary w-auto hover:bg-accent rounded-md px-5 py-2 text-color-primary">
-                    Add User
-                </button>
+                    class="bg-accentsecondary w-auto hover:bg-accent rounded-md px-5 py-2 text-color-primary">Create User</button>
             </div>
             <div>
         <!-- End Modal Footer  -->

views/pages/admin/main.ejs

@@ -11,7 +11,7 @@
         <div class="flex flex-wrap lg:flex-row gap-6 pb-5">
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="users" class="text-color-accent mr-2"></i>
                     </div>
@@ -25,7 +25,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="files" class="text-color-accent mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -46,7 +46,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="image" class="text-blue-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -63,7 +63,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="video" class="text-yellow-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -80,7 +80,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="headphones" class="text-orange-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -97,7 +97,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="ghost" class="text-green-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">

views/pages/admin/tabs/users.ejs

@@ -7,7 +7,7 @@
 
                     <button type="button"
                         class="buttonModal rounded-md bg-accentsecondary py-2 px-2.5 font-medium text-color-primary hover:bg-accent">
-                        Add New user
+                        Create User
                     </button>
                     <!--
                     <button
@@ -19,14 +19,6 @@
             </div>
             <!-- End Add User -->
 
-            <!-- Total User -->
-            <div class="flex-1  lg:order-2 order-3 lg:basis-auto basis-full">
-                <div class="text-sm text-color-secondary lg:text-center text-right">
-                    Showing <%= totalUsers %> users
-                </div>
-            </div>
-            <!-- End Total User -->
-
             <!-- Search User -->
             <!--
             <div
@@ -48,6 +40,7 @@
             -->
             <!-- End Search user -->
         </div>
+
         <div class="mt-8">
             <!-- Table User  -->
             <table class="table-fixed w-full md:text-base text-sm text-black">
@@ -90,13 +83,9 @@
                                 </div>
                             </td>
                             <!--
+                            <td class="p-4 bg-tertiary text-color-secondary text-center">66</td>
                             <td class="p-4 bg-tertiary text-color-secondary text-center ">
-                                66
-                            </td>
-                            <td class="p-4 bg-tertiary text-color-secondary text-center ">
-                                <div class="sm:border-r border-slate-700  border-r-0">
-                                    65GB
-                                </div>
+                                <div class="sm:border-r border-slate-700  border-r-0">65GB</div>
                             </td>
                             -->
                             <!--
@@ -104,9 +93,7 @@
                                 <div class="flex justify-center">
                                     <button class="text-red-500 flex sm:flex-row flex-col justify-center items-center space-x-1 ">
                                         <i data-lucide="trash-2" class="text-color-red"></i>
-                                        <div>
-                                            Delete
-                                        </div>
+                                        <div>Delete</div>
                                     </button>
                                 </div>
                             </td>

views/pages/public/login.ejs

@@ -25,12 +25,12 @@
                 	<label class="block text-sm">
                     	<span class="text-color-tertiary">Username</span>
                     	<input class="form-input block w-full mt-1 rounded text-sm  text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
-                    		placeholder="Imposter" name="username" type="text" />
+                    		name="username" type="text" />
                   	</label>
                 	<label class="block mt-4 text-sm">
-                    	<span class="text-color-tertiary">Secret Key</span>
+                    	<span class="text-color-tertiary">Password</span>
                     	<input class="form-input block w-full mt-1 rounded text-sm  text-color-tertiary border-form bg-forminput transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-formaccent focus:text-color-accent"
-                      		placeholder="***************" name="password" type="password" />
+                      		name="password" type="password" />
                   	</label>
 					<% if(settingsDatabase.captchaEnabled) { %>
 						<div class="h-captcha mt-4" data-theme="dark" data-sitekey=<%= settingsDatabase.captchaSiteID %>></div>

views/pages/user/main.ejs

@@ -1,6 +1,4 @@
-<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">
-    Your Profile
-</span>
+<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">Your Profile</span>
 
 <div class="bg-tertiary mt-6 h-auto w-full rounded-lg">
     <div class="flex w-full flex-row flex-wrap items-center space-x-3 border-b border-purple-400/25 py-3 px-6 md:space-x-6 md:px-5 md:py-5 lg:space-x-6 lg:px-5 lg:py-5">
@@ -23,26 +21,20 @@
         <div class="flex flex-wrap lg:flex-row gap-6 items-center justify-center pb-5 -mx-5">
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="files" class="text-color-accent mr-2"></i>
-                        <p class="ml-auto text-slate-500 text-sm">
-                            <%= totalSize %>
-                        </p>
-                    </div>
-                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
-                        <%= usersDataObj.totalFiles %>
-                    </div> 
-                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
-                        Total Files
+                        <p class="ml-auto text-slate-500 text-sm"><%= totalSize %></p>
                     </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6"><%= usersDataObj.totalFiles %></div> 
+                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">Files</div>
                 </div>
             </div>
 
             <div class="col-span-6 sm:col-span-3 xl:col-span-1 w-px h-40 border border-r border-accent border-dashed mx-4 xl:mx-6 hidden md:table-cell" ></div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="image" class="text-blue-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -59,7 +51,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="video" class="text-yellow-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -76,7 +68,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="headphones" class="text-orange-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -93,7 +85,7 @@
             </div>
 
             <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
-                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                <div class="bg-secondary shadow-xl rounded-lg p-5">
                     <div class="flex">
                         <i data-lucide="ghost" class="text-green-400 mr-2"></i>
                         <p class="ml-auto text-slate-500 text-sm">
@@ -125,9 +117,7 @@
             class="tabUser inline-flex w-full items-center space-x-2 px-6 pb-5 text-sm text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
             <i data-lucide="Settings" class="text-color-secondary"></i>
             <span>Config Gen</span>
-            <span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">
-                TBA
-            </span>
+            <span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">TBA</span>
         </button>
     </div>
     <!-- End Profile Tabs -->

views/pages/user/tabs/filemanager/infinite-scroll/no-more-data.ejs

@@ -6,6 +6,6 @@
             <line x1="9" y1="9" x2="9.01" y2="9"></line>
             <line x1="15" y1="9" x2="15.01" y2="9"></line>
         </svg>
-        <span class="font-semibold text-color-primary">You have no more files to load! <%= settingsDatabase.appEmoji ? settingsDatabase.appEmoji : '🍆' %></span>
+        <span class="font-semibold text-color-primary">There are no more files to load.</span>
     </div>
 </div>

views/templates/errors/404.ejs

@@ -4,12 +4,10 @@
     <div class="flex flex-col items-center justify-center min-h-screen p-6">
         <div class="flex-col lg:flex-row items-center justify-center h-screen text-center lg:text-left">
             <div class="text-color-primary mt-10 lg:mt-0">
-                <div class="text-8xl font-medium">404</div>
-                <div class="text-xl lg:text-3xl font-medium mt-5">Oops. This page does not exist.</div>
-                <div class="text-lg mt-3">You may have mistyped the address or <%= settingsDatabase.name ? settingsDatabase.name.toUpperCase() : "DICK" %> seems to be malfunctioning</div>
-                <a href="/login" class="py-3 px-4 text-color-primary border-white dark:border-darkmode-400 dark:text-slate-200 mt-10">
-                    Back to Home
-                </a>
+                <div class="text-8xl font-medium">Error 404</div>
+                <div class="text-xl lg:text-3xl font-medium mt-5">Page Not Found</div>
+                <div class="text-lg mt-3">The page you were looking for does not exist. You may have mistyped the URL or the page may have moved.</div>
+                <a href="/" class="py-3 px-4 text-color-primary border-white dark:border-darkmode-400 dark:text-slate-200 mt-10">Return Home</a>
             </div>
         </div>
     </div>

views/templates/partials/nav/breadcrumb.ejs

@@ -10,7 +10,6 @@
         </svg>
 
         <% if(path == '/'){ %><div href="#" class="inline-block text-gray-300">Dashboard</div> <% } %>
-        <% if(path == '/admin'){ %><div href="#" class="inline-block text-gray-300">Admin Dashboard</div> <% } %>
-
+        <% if(path == '/admin'){ %><div href="#" class="inline-block text-gray-300">Admin</div> <% } %>
     </div>
 </div>

views/templates/partials/nav/profile.ejs

@@ -17,16 +17,14 @@
                     </svg>
                 </button>
                 <div id="themeTogglerToolTip" role="tooltip"
-                    class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
-                    Toggle theme
+                    class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">Toggle Theme
                     <div class="tooltip-arrow" data-popper-arrow></div>
                 </div>
                 <!-- End Theme Toggler -->
 
                 <!-- Navbar Profile Image -->
                 <div class="dropdownProfileBtn relative z-[100] cursor-pointer hover:scale-110">
-                    <img class="relative h-10 w-10 rounded-full object-cover object-center" src=<%= settingsDatabase.defaultProfilePicture ? settingsDatabase.defaultProfilePicture : "./images/profile.png" %>
-                        alt="Profile" />
+                    <img class="relative h-10 w-10 rounded-full object-cover object-center" src=<%= settingsDatabase.defaultProfilePicture ? settingsDatabase.defaultProfilePicture : "./images/profile.png" %> alt="Profile" />
                 </div>
                 <!-- End Navbar Profile Image -->
             </div>

views/templates/user.ejs

@@ -24,6 +24,5 @@
         <% } %>
 
         <%- include("./partials/footer") %>
-
     </body>
 </html>