ui tweaks

lichess-org · Dec 18, 2023 · 06c0e26 · 06c0e26
1 parent dd32612
commit 06c0e26
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lichess PGN Broadcaster</title>
-  </head>
 
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lichess PGN Broadcaster</title>
+</head>
+
+<body class="h-screen bg-gray-800 p-4">
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -33,29 +33,27 @@ listen<string>('started_broadcast_thread', (event) => {
 </script>
 
 <template>
-  <div class="h-screen bg-gray-800 p-4">
-    <header class="mb-12 flex">
-      <div class="">
-        <img src="./assets/lichess-white.svg" class="w-12 inline-block" alt="Lichess logo" />
-      </div>
-
-      <div class="grow">
-        <nav class="flex space-x-4 justify-end">
-          <router-link to="/" class="nav-item" active-class="active">
-            Home
-          </router-link>
-
-          <router-link to="/broadcasts" class="nav-item" active-class="active" v-if="user.isLoggedIn()">
-            Broadcasts
-          </router-link>
-
-          <router-link to="/settings" class="nav-item" active-class="active">
-            Settings
-          </router-link>
-        </nav>
-      </div>
-    </header>
-
-    <router-view />
-  </div>
+  <header class="mb-12 flex">
+    <div class="">
+      <img src="./assets/lichess-white.svg" class="w-12 inline-block" alt="Lichess logo" />
+    </div>
+
+    <div class="grow">
+      <nav class="flex space-x-4 justify-end">
+        <router-link to="/" class="nav-item" active-class="active">
+          Home
+        </router-link>
+
+        <router-link to="/broadcasts" class="nav-item" active-class="active" v-if="user.isLoggedIn()">
+          Broadcasts
+        </router-link>
+
+        <router-link to="/settings" class="nav-item" active-class="active">
+          Settings
+        </router-link>
+      </nav>
+    </div>
+  </header>
+
+  <router-view />
 </template>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -47,7 +47,7 @@ const status = computed<Status>(() => {
             </div>
         </div>
     </div>
-    <div v-if="logs.logs.length" class="bg-gray-700 text-gray-100 mt-4 p-2 text-sm font-mono overflow-y-scroll h-1/2">
+    <div v-if="logs.logs.length" class="bg-gray-700 text-gray-100 mt-4 p-2 text-sm font-mono h-1/2">
         <div v-for="log in logs.logs">
             {{ log.date.toLocaleTimeString() }}:
             {{ log.message }}

diff --git a/src/components/NewFolderSync.vue b/src/components/NewFolderSync.vue
@@ -52,14 +52,14 @@ async function startWatchingFolder() {
     <span class="ml-3 font-mono text-white text-sm">{{ pgnFolder }}</span>
 
     <button v-if="pgnFolder"
-      class="ml-4 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+      class="ml-4 rounded-md bg-green-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-800"
       type="submit">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
         class="inline-block w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round"
           d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
       </svg>
-      Start
+      Start Upload
     </button>
   </form>
 </template>
diff --git a/src/components/Round.vue b/src/components/Round.vue
@@ -74,16 +74,17 @@ const isBroadcasting = computed<boolean>(() => {
         </div>
       </div>
     </div>
-    <div v-else>
-      <h3 class="text-white text-xl mt-4">
+    <div v-else class="border-gray-700 border-2 p-6 m-8">
+      <h3 class="text-white text-xl mb-2">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="inline-block w-4 h-4">
           <path stroke-linecap="round" stroke-linejoin="round"
             d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
         </svg>
         Upload PGN
       </h3>
-      <p class="text-gray-200">Monitor a local folder and automatically upload PGN files to Lichess.</p>
+      <p class="text-gray-300">As game PGNs are written to a folder, they can be automatically be uploaded to Lichess.
+      </p>
       <NewFolderSync :broadcast-round-id="round.id" />
     </div>