Random Style Improvements

dashboard/src/components/dashboard/GuildConfigEditor.vue

@@ -10,7 +10,7 @@
 
     <div class="flex items-center flex-wrap">
       <h1 class="flex-full md:flex-auto">Config for {{ guild.name }}</h1>
-      <button v-if="!saving" class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save">
+      <button v-if="!saving" class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700 transition duration-100" v-on:click="save">
         <span v-if="saved">Saved!</span>
         <span v-else>Save</span>
       </button>

dashboard/src/components/dashboard/GuildList.vue

@@ -6,20 +6,20 @@
 		<h1>Guilds</h1>
     <ul class="list-none flex flex-wrap -m-4 pt-4">
       <li v-for="guild in guilds" class="flex-none p-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
-        <div class="flex items-center">
+        <div class="flex items-center overflow-hidden whitespace-nowrap">
           <div class="flex-none w-12 h-12">
-            <img v-if="guild.icon" class="rounded-full w-full h-full" :src="guild.icon" alt="" :title="'Logo for guild ' + guild.name">
+            <img v-if="guild.icon" class="rounded-full w-full h-full" :src="guild.icon" alt="" :title="'Icon for guild ' + guild.name">
             <div v-else class="bg-gray-700 rounded-full w-full h-full"></div>
           </div>
-          <div class="flex-auto ml-4">
+          <div class="flex-auto pl-4">
             <div>
               <div class="font-semibold leading-tight">{{ guild.name }}</div>
               <div class="text-gray-600 text-sm leading-tight">{{ guild.id }}</div>
             </div>
             <div class="pt-1">
-              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Info</span>
-              <router-link class="inline-block bg-gray-700 rounded px-1 hover:bg-gray-800" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
-              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Access</span>
+              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none cursor-not-allowed">Info</span>
+              <router-link class="inline-block bg-gray-700 rounded px-1 hover:bg-gray-800 transition duration-100" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
+              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none cursor-not-allowed">Access</span>
             </div>
           </div>
         </div>

dashboard/src/components/dashboard/Layout.vue

@@ -7,21 +7,21 @@
         <img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/dashboard">
-          <h1 class="font-semibold">Zeppelin Dashboard</h1>
+          <h1 class="font-semibold hover:opacity-75 transition duration-250">Zeppelin Dashboard</h1>
         </router-link>
       </div>
 
       <div class="flex-1 flex items-center flex-wrap">
         <ul class="dashboard-nav list-none flex md:ml-8">
-          <router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
-          <a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2" v-on:click="logout()">Log out</a>
+          <router-link class="flex-auto mr-4 transition duration-250" to="/dashboard">Guilds</router-link>
+          <a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2 transition duration-250" v-on:click="logout()">Log out</a>
         </ul>
 
         <div class="flex-1 flex items-center md:justify-end">
           <router-link
             to="/docs"
             role="menuitem"
-            class="py-1 px-2 rounded hover:bg-gray-700">
+            class="py-1 px-2 rounded hover:bg-gray-700 transition duration-250">
             Go to documentation
           </router-link>
         </div>

dashboard/src/components/docs/DocsLayout.vue

@@ -8,14 +8,14 @@
         <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/docs">
-          <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
+          <h1 class="flex-auto font-semibold hover:opacity-75 transition duration-250">Zeppelin Documentation</h1>
         </router-link>
       </div>
       <div class="flex-1 flex items-center justify-end">
         <router-link
           to="/dashboard"
           role="menuitem"
-          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
+          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block transition duration-250">
           Go to dashboard
         </router-link>
         <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()" aria-hidden="true">

dashboard/src/index.html

@@ -1,18 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Zeppelin - Moderation bot for Discord</title>
-</head>
-<body>
-  <noscript>
-    <h1>Zeppelin</h1>
-    The Zeppelin website requires JavaScript to load.
-  </noscript>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Zeppelin - Moderation bot for Discord</title>
+  </head>
+  <body>
+    <noscript>
+      <h1>Zeppelin</h1>
+      The Zeppelin website requires JavaScript to load.
+    </noscript>
 
-  <div id="app"></div>
-</body>
+    <div id="app"></div>
+  </body>
 </html>

dashboard/src/splash.html

@@ -2,7 +2,7 @@
   <div id="error"></div>
   <div class="wrapper">
     <div class="logo-column">
-      <img class="logo" src="./img/logo.png" alt="Zeppelin Logo">
+      <img class="logo" src="./img/logo.png" alt="Zeppelin Logo" />
     </div>
     <div class="info-column">
       <h1>Zeppelin</h1>