From e42646d8a1135d28a8794a7092b7957835a38fb1 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sun, 18 Feb 2024 11:17:05 +0100
Subject: [PATCH] feat(instance-chooser): add dark mode support

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2701>
---
 front/src/assets/logo/logo-full-500-white.png | Bin 0 -> 9868 bytes
 front/src/components/auth/LoginForm.vue       |  42 ++++++++++++++----
 front/src/views/ChooseInstance.vue            |  27 +++++++++--
 3 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 front/src/assets/logo/logo-full-500-white.png

diff --git a/front/src/assets/logo/logo-full-500-white.png b/front/src/assets/logo/logo-full-500-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bd22fb345a73b47cbb1b3de78d15abd4b3cc657
GIT binary patch
literal 9868
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

literal 0
HcmV?d00001

diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 44e9d0f90..3fb4b2119 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -77,14 +77,22 @@ const submit = async () => {
 </script>
 
 <template>
-  <form class="ui form" @submit.prevent="submit()">
-    <div v-if="errors.length > 0" role="alert" class="ui negative message">
+  <form
+    class="ui form"
+    @submit.prevent="submit()"
+  >
+    <div
+      v-if="errors.length > 0"
+      role="alert"
+      class="ui negative message"
+    >
       <h4 class="header">
         {{ $t('components.auth.LoginForm.header.loginFailure') }}
       </h4>
       <ul class="list">
         <li
-          v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
+          v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"
+        >
           {{ $t('components.auth.LoginForm.help.approvalRequired') }}
         </li>
         <li v-else-if="errors[0] == 'invalid_credentials'">
@@ -106,18 +114,33 @@ const submit = async () => {
             </router-link>
           </template>
         </label>
-        <input id="username-field" ref="username" v-model="credentials.username" required name="username" type="text"
-          autofocus :placeholder="labels.usernamePlaceholder">
+        <input
+          id="username-field"
+          ref="username"
+          v-model="credentials.username"
+          required
+          name="username"
+          type="text"
+          autofocus
+          :placeholder="labels.usernamePlaceholder"
+        >
       </div>
       <div class="field">
         <label for="password-field">
           {{ $t('components.auth.LoginForm.label.password') }}
           <span class="middle pipe symbol" />
-          <router-link tabindex="1" :to="{ name: 'auth.password-reset', query: { email: credentials.username } }">
+          <router-link
+            tabindex="1"
+            :to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
+          >
             {{ $t('components.auth.LoginForm.link.resetPassword') }}
           </router-link>
         </label>
-        <password-input v-model="credentials.password" field-id="password-field" required />
+        <password-input
+          v-model="credentials.password"
+          field-id="password-field"
+          required
+        />
       </div>
     </template>
     <template v-else>
@@ -125,7 +148,10 @@ const submit = async () => {
         {{ $t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
       </p>
     </template>
-    <button :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']" type="submit">
+    <button
+      :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
+      type="submit"
+    >
       {{ $t('components.auth.LoginForm.button.login') }}
     </button>
   </form>
diff --git a/front/src/views/ChooseInstance.vue b/front/src/views/ChooseInstance.vue
index 09e80d05d..9214317f4 100644
--- a/front/src/views/ChooseInstance.vue
+++ b/front/src/views/ChooseInstance.vue
@@ -57,7 +57,14 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
 
 <template>
   <div class="instance-chooser">
-    <img src="../assets/logo/logo-full-500.png">
+    <img
+      class="light-logo"
+      src="../assets/logo/logo-full-500.png"
+    >
+    <img
+      class="dark-logo"
+      src="../assets/logo/logo-full-500-white.png"
+    >
 
     <div class="card">
       <h3 class="header">
@@ -100,7 +107,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
                 <i class="external icon" />
               </a>
             </i18n-t>
-            {{ t('', {url: store.state.instance.instanceUrl, hostname: store.getters['instance/domain']}) }}
+            {{ t('', { url: store.state.instance.instanceUrl, hostname: store.getters['instance/domain'] }) }}
           </p>
           <p
             v-else
@@ -120,7 +127,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
               >
               <button
                 type="submit"
-                :class="['ui', 'icon', {loading: isLoading}, 'button']"
+                :class="['ui', 'icon', { loading: isLoading }, 'button']"
               >
                 {{ t('views.ChooseInstance.button.submit') }}
               </button>
@@ -172,7 +179,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
   align-items: center;
   justify-content: center;
 
-  > .card {
+  >.card {
     margin-top: 2rem;
     max-width: 30rem;
     width: 100%;
@@ -189,4 +196,16 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
     }
   }
 }
+
+.theme-dark .instance-chooser>.card {
+  background: var(--sidebar-background);
+}
+
+.theme-dark .instance-chooser>.light-logo {
+  display: none;
+}
+
+.theme-light .instance-chooser>.dark-logo {
+  display: none;
+}
 </style>