the-tricktionary · swantzter · Jun 21, 2021
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <meta name="application-name" content="the Tricktionary">
     <meta name="msapplication-TileColor" content="#da532c">
   </head>
-  <body>
+  <body class="bg-white dark:bg-gray-900 text-black dark:text-gray-100">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/src/components/DisciplineSelector.vue b/src/components/DisciplineSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full border-b border-gray-300 flex justify-center overflow-x-auto">
+  <div class="sticky top-49px bg-white dark:bg-gray-900 dark:text-white z-100 w-full border-b border-gray-300 flex justify-center overflow-x-auto">
     <button
       v-for="(name, dOpt) in disciplines"
       :key="dOpt"
@@ -9,7 +9,7 @@
         'mb-0': discipline === dOpt,
         'mb-2px': discipline !== dOpt
       }"
-      class="hover:bg-gray-200 hover:border-ttred-900 hover:border-b-2 hover:mb-0 py-2 px-8 whitespace-nowrap"
+      class="hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-ttred-900 hover:border-b-2 hover:mb-0 py-2 px-8 whitespace-nowrap"
       @click="$emit('update:discipline', dOpt)"
     >{{ name }}</button>
   </div>

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="grid rounded cursor-pointer grid-cols-[2rem,auto] bg-gray-300 hover:bg-ttyellow-300"
+    class="grid rounded cursor-pointer grid-cols-[2rem,auto] bg-gray-300 dark:bg-gray-700 dark:border dark:border-gray-300 hover:bg-ttyellow-300 hover:text-black"
   >
     <div class="flex h-full items-center justify-center">
       <slot name="icon"></slot>

diff --git a/src/components/TrickBox.vue b/src/components/TrickBox.vue
@@ -5,7 +5,7 @@
   >
     <label
       v-if="user"
-      class="cursor-pointer flex rounded-l h-full border border-r-0 border-gray-300 hover:bg-gray-200 items-center justify-center"
+      class="cursor-pointer flex rounded-l h-full border border-r-0 border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 items-center justify-center"
       :class="{
         'bg-green-500': completed,
         'border-green-500': completed,
@@ -19,7 +19,7 @@
       <input @click="completeTrick()" type="checkbox" class="hidden" :checked="completed" :disabled="!user || loading">
     </label>
     <router-link
-      class="flex rounded-r border border-gray-300 p-2 items-center justify-center text-center hover:bg-gray-200"
+      class="flex rounded-r border border-gray-300 p-2 items-center justify-center text-center hover:bg-gray-200 dark:hover:bg-gray-700"
       :class="{
         'border-green-500': completed,
         'rounded-l': !user

diff --git a/src/components/Videos.vue b/src/components/Videos.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full aspect-w-9/16 mx-auto bg-gray-300">
+  <div class="w-full aspect-w-9/16 mx-auto bg-gray-300 dark:bg-gray-700">
     <iframe
     v-if="primaryYouTubeEmbedLink"
     type="text/html"

diff --git a/src/views/Auth.vue b/src/views/Auth.vue
@@ -4,7 +4,7 @@
     <form @submit.prevent="logInWithProvider('google')" class="w-full md:max-w-80 mb-4">
       <h2 class="text-lg font-semibold">Sign in/sign up with external accounts</h2>
       <input type="submit" value="Sign in with Google" class="btn">
-      <p class="text-ttred-900" v-if="socialErr">
+      <p class="text-ttred-900 dark:text-ttred-500" v-if="socialErr">
           Failed to log in with error: "{{ socialErr }}". Please try again,
           if this error persists please <a href="mailto:[email protected]">contact us</a>
         </p>
@@ -15,7 +15,7 @@
         <h2 class="text-lg font-semibold">Sign in/sign up with email</h2>
         <input type="email" :disabled="email.linkSent" v-model="email.email" aria-label="Email" required placeholder="Email" class="w-full block rounded focus:border-b-ttred-900" >
         <input type="submit" :disabled="email.linkSent" value="Send magic link" class="btn">
-        <p class="text-ttred-900" v-if="email.error">
+        <p class="text-ttred-900 dark:text-ttred-500" v-if="email.error">
           Failed to log in with error: "{{ email.error }}". Please try again,
           if this error persists please <a href="mailto:[email protected]">contact us</a>
         </p>
@@ -25,7 +25,7 @@
         <p>Phone number including country code, e.g +46 123 456 78 90</p>
         <input type="tel" v-model="phone.phoneNumber" aria-label="Phone number" required placeholder="Phone number" class="w-full block rounded focus:border-b-ttred-900" >
         <input type="submit" value="Send verification code" class="btn">
-        <p class="text-ttred-900" v-if="phone.error">
+        <p class="text-ttred-900 dark:text-ttred-500" v-if="phone.error">
           Failed to log in with error: "{{ phone.error }}". Please try again,
           if this error persists please <a href="mailto:[email protected]">contact us</a>
         </p>

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -5,7 +5,7 @@
     <trick-list :discipline="discipline" />
   </div>
 
-  <footer class="py-2 mt-6 w-full border-t border-gray-300">
+  <footer class="py-2 mt-6 w-full border-t border-gray-300 dark:bg-gray-700">
     <p class="container p-2 mx-auto">
       <router-link to="/policies">
         Privacy policy, store policy

diff --git a/src/views/Trick.vue b/src/views/Trick.vue
@@ -9,7 +9,7 @@
       <div class="mb-4">
         <h1>{{ trick.localised?.name ?? trick.en?.name }}</h1>
 
-        <p class="text-gray-600 font-semibold">
+        <p class="text-gray-600 dark:text-gray-300 font-semibold">
           <span class="inline-flex items-center">
             {{ trick.trickType }}
             &mdash; IJRU Level {{ trick.ijruLevels[0]?.level }}
@@ -49,7 +49,7 @@
     </div>
   </div>
 
-  <div class="bg-white fixed bottom-0 border-t border-gray-300 w-full p-2 overflow-x-auto">
+  <div class="bg-white dark:bg-gray-700 fixed bottom-0 border-t border-gray-300 w-full p-2 overflow-x-auto">
     <div class="container mx-auto flex justify-between gap-4 ">
       <router-link to="/">
         <icon-button class="btn inline-flex items-center mt-0 w-max">
@@ -60,25 +60,25 @@
         </icon-button>
       </router-link>
 
-      <div class="<md:hidden flex-grow"></div>
+      <div class="hidden sm:block flex-grow"></div>
 
       <label
         v-if="user && trick"
-        class="grid rounded cursor-pointer grid-cols-[3rem,auto] bg-gray-300 hover:bg-ttyellow-300"
+        class="grid rounded cursor-pointer grid-cols-[3rem,auto] bg-gray-300 dark:bg-gray-700 hover:bg-ttyellow-300 dark:hover:text-black"
       >
         <input @click="completeTrick()" type="checkbox" class="hidden" :checked="completed.has(trick.id)" :disabled="mutating">
         <div
-          class="flex rounded-l h-full items-center justify-center"
+          class="flex rounded-l h-full items-center justify-center dark:border dark:border-r-0 dark:rounded-l dark:border-gray-200"
           :class="{
             'bg-green-500': completed.has(trick.id),
             'bg-green-300': mutating
           }"
         >
           <icon-loading class="text-white animate-spin" v-if="mutating" />
           <icon-check class="text-white" v-else-if="completed.has(trick.id)" />
-          <icon-close class="text-black" v-else />
+          <icon-close v-else />
         </div>
-        <div class="flex px-2 items-center">Completed</div>
+        <div class="flex px-2 items-center dark:border dark:rounded-r dark:border-gray-300">Completed</div>
       </label>
 
       <icon-button