added dark-mode logo-dark.svg; changed various colours on NavBar

2024-09-22 21:11:31 +02:00 · 2024-09-22 21:11:31 +02:00 · 6bee508b54
parent 9351e6fae3
commit 6bee508b54
8 changed files with 70 additions and 27 deletions
--- a/flake.nix
+++ b/flake.nix
@ -256,6 +256,7 @@
          old: {
            postPatch = ''
              cp '${logo}' src/assets/logo.svg
+              cp '${logoDark}' src/assets/logo-dark.svg

              magick convert \
                -resize x16 \
--- a/src/assets/logo-dark.svg
+++ b/src/assets/logo-dark.svg
@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
+    <title>Fomo Logo</title>
+    <g data-name="header">
+      <path
+        d="M 62.099803,46.107167 H 61.977828 L 56.44017,42.887031 q -0.170765,-0.09758 -0.170765,-0.292739 L 56.171825,11.905419 Q 56.19622,11.734654 56.34259,11.637074 75.248692,0.70812735 75.346272,0.70812735 q 0.09758,0 5.659633,3.24453105 l 0.04879,0.04879 0.04879,0.024395 v 0.024395 h 0.02439 l 0.04879,0.09758 0.02439,3.7080355 Q 81.176669,8.0510134 81.0303,8.1485933 L 65.490704,17.101547 v 2.805422 q 9.806778,-5.659633 9.904357,-5.659633 0.07318,0 2.878607,1.634463 2.805422,1.610068 2.805422,1.634463 h 0.0244 v 0.02439 q 0.02439,0.0244 0.02439,0.04879 0.02439,0 0.02439,0 0.02439,0 0.02439,0.0244 l 0.02439,0.121975 h 0.02439 v 3.659245 q 0,0.170765 -0.170764,0.268345 l -15.515202,8.977349 0.0244,13.344049 q 0,0.170765 -0.170764,0.268344 -3.171347,1.854018 -3.293321,1.854018 z m 3.415295,-19.833111 14.710168,-8.489449 -4.830205,-2.829817 -9.879963,5.708423 z m -3.756825,18.930497 -0.07319,-29.883838 -4.830204,-2.829817 0.07319,29.908234 z M 62.002223,14.735235 80.176476,4.2453981 75.346272,1.4399765 57.172019,11.929814 Z m 0.414714,30.469318 2.488287,-1.414908 -0.04879,-13.344049 q 0.0244,-0.19516 0.170765,-0.292739 l 15.539596,-8.952955 v -2.854211 q -15.295646,8.830979 -15.368831,8.830979 -0.317135,0 -0.34153,-0.341529 l -0.02439,-9.928753 q 0,-0.170765 0.170765,-0.268345 L 80.518005,7.6606939 V 4.8308773 L 62.343752,15.320715 Z"
+        stroke="#000000"
+        stroke-opacity="1"
+      />
+      <path
+        d="m 98.667864,46.107167 q -0.09758,0 -0.09758,-0.02439 h -0.04879 l -5.513264,-3.220136 q -0.146369,-0.09758 -0.170764,-0.268344 l -0.07319,-30.688873 q 0.0244,-0.170765 0.170764,-0.268345 18.906104,-10.92894665 19.003684,-10.92894665 0.0732,0 2.8786,1.63446305 l 2.80543,1.634463 h 0.0244 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 v 0.024395 q 0.0244,0.09758 0.0244,0.09758 0.0244,0 0.0244,0.024395 l 0.0732,30.6888729 q 0,0.19516 -0.17076,0.292739 Q 98.789839,46.107167 98.667864,46.107167 Z M 98.35073,45.204553 98.25315,15.320715 93.422946,12.490898 93.520526,42.399132 Z M 98.59468,14.735235 116.76893,4.2453981 111.93873,1.4399765 93.764475,11.929814 Z M 99.009394,45.204553 117.18365,34.714716 117.11046,4.8064824 98.936209,15.320715 Z m 2.805426,-4.513069 q -0.34153,0 -0.34153,-0.317135 l -0.0732,-23.467961 q 0.0244,-0.170765 0.17077,-0.268345 12.6122,-7.3184911 12.73417,-7.3184911 0.31714,0 0.31714,0.3415296 l 0.0732,23.4923565 q -0.0244,0.14637 -0.17076,0.24395 -12.6122,7.294096 -12.70978,7.294096 z m 0.31713,-7.269701 6.39148,-3.708036 -0.0488,-16.320235 -6.39148,3.708035 z m 0,6.367087 11.56322,-6.684222 -4.83021,-2.805422 -6.73301,3.903196 z m 11.90475,-7.245306 -0.0732,-22.297003 -4.80581,2.781026 0.0488,16.68616 z"
+        stroke="#000000"
+        stroke-opacity="1"
+      />
+      <path
+        d="m 135.28472,46.107167 q -0.12198,0 -0.12198,-0.02439 h -0.0488 l -5.51326,-3.220136 q -0.14637,-0.09758 -0.17077,-0.268344 l -0.0732,-30.688873 q 0.0244,-0.170765 0.17076,-0.268345 18.90611,-10.92894665 19.00369,-10.92894665 0.0732,0 2.903,1.63446305 l 2.80542,1.634463 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 0.0488,0.1463698 0.0732,30.6888729 q 0,0.19516 -0.14637,0.292739 -3.19574,1.829623 -3.24453,1.854018 -0.0244,0 -0.0732,0 l -0.12197,-0.02439 -4.26912,-2.488287 0.0244,4.903389 q -0.0244,0.170765 -0.17076,0.268345 -3.19574,1.854018 -3.24453,1.878413 -0.0244,0 -0.0732,0 -0.0488,0 -0.0976,0 -0.0244,-0.0244 -0.0488,-0.04879 l -4.24472,-2.463892 0.0244,4.878994 q 0,0.19516 -0.17076,0.292739 -3.19574,1.854018 -3.29332,1.854018 z m -0.34153,-0.902614 -0.0976,-29.883838 -4.83021,-2.829817 0.0976,29.908234 z m 0.24395,-30.469318 18.17425,-10.4898369 -4.8302,-2.8054216 -18.17426,10.4898375 z m 7.61123,25.931854 -0.0732,-25.907459 -4.04956,2.341917 0.0488,21.223625 z m 7.83078,-4.51307 -0.0732,-25.907458 -4.04957,2.317522 0.0732,21.223624 z m -15.0273,9.050534 2.48829,-1.414908 -0.0732,-26.883257 q 0,-0.170765 0.14637,-0.29274 4.78142,-2.756632 4.879,-2.756632 0.34153,0 0.34153,0.34153 l 0.0732,26.468543 2.46389,-1.414908 v -5.269314 l -0.0732,-21.589549 q 0,-0.19516 0.17076,-0.292739 4.78142,-2.7810271 4.879,-2.7810271 0.31713,0 0.31713,0.3415296 l 0.0976,26.4929375 2.46389,-1.439303 -0.0732,-29.9082336 -18.17425,10.5142326 z"
+        stroke="#000000"
+        stroke-opacity="1"
+      />
+      <path
+        d="m 171.85278,46.107167 q -0.0976,0 -0.0976,-0.02439 h -0.0488 l -5.51326,-3.220136 q -0.14637,-0.09758 -0.17077,-0.268344 l -0.0732,-30.688873 q 0.0244,-0.170765 0.17076,-0.268345 18.90611,-10.92894665 19.00369,-10.92894665 0.0732,0 2.8786,1.63446305 l 2.80542,1.634463 h 0.0244 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 v 0.024395 q 0.0244,0.09758 0.0244,0.09758 0.0244,0 0.0244,0.024395 l 0.0732,30.6888729 q 0,0.19516 -0.17077,0.292739 -18.8817,10.904552 -19.00368,10.904552 z m -0.31713,-0.902614 -0.0976,-29.883838 -4.83021,-2.829817 0.0976,29.908234 z M 171.7796,14.735235 189.95385,4.2453981 185.12365,1.4399765 166.94939,11.929814 Z m 0.41471,30.469318 18.17425,-10.489837 -0.0732,-29.9082336 -18.17425,10.5142326 z m 2.80542,-4.513069 q -0.34153,0 -0.34153,-0.317135 l -0.0732,-23.467961 q 0.0244,-0.170765 0.17076,-0.268345 12.6122,-7.3184911 12.73418,-7.3184911 0.31713,0 0.31713,0.3415296 l 0.0732,23.4923565 q -0.0244,0.14637 -0.17077,0.24395 -12.6122,7.294096 -12.70978,7.294096 z m 0.31714,-7.269701 6.39148,-3.708036 -0.0488,-16.320235 -6.39148,3.708035 z m 0,6.367087 11.56321,-6.684222 -4.8302,-2.805422 -6.73301,3.903196 z m 11.90474,-7.245306 -0.0732,-22.297003 -4.80581,2.781026 0.0488,16.68616 z"
+        stroke="#000000"
+        stroke-opacity="1"
+      />
+    </g>
+  </svg>
+
--- a/src/assets/oruga-tailwindcss.css
+++ b/src/assets/oruga-tailwindcss.css
@ -8,7 +8,7 @@ body {

 /* Button */
 .btn {
-  @apply font-bold py-2 px-4 bg-mbz-bluegreen hover:bg-mbz-bluegreen-600 text-white rounded h-10 outline-none focus:ring ring-offset-1 ring-offset-slate-50 ring-blue-300;
+  @apply font-bold py-2 px-4 bg-gray-500 hover:bg-gray-600 text-white rounded h-10 outline-none focus:ring ring-offset-1 ring-offset-slate-50 ring-blue-300;
 }
 .btn:hover {
  @apply text-slate-200;
@ -95,7 +95,15 @@ body {

 /* Input */
 .input {
-  @apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+  @apply appearance-none box-border rounded w-full py-2 px-3 text-black leading-tight dark:bg-gray-500 dark:placeholder:text-gray-400 dark:text-gray-50;
+}
+.input {
+  border-color: black;
+}
+.input:focus {
+  border-color: black;
+  outline: black;
+  box-shadow: 0 0 0 1px black;
 }
 .input-size-small {
  @apply text-sm;
--- a/src/components/MobilizonLogo.vue
+++ b/src/components/MobilizonLogo.vue
@ -1,17 +1,25 @@
 <template>
  <figure>
-    <svgLogo/>
+    <!-- Conditional rendering based on dark mode -->
+    <component :is="isDarkMode ? svgLogoDark : svgLogo" />
  </figure>
 </template>

 <script lang="ts" setup>
+import { ref, watchEffect } from "vue";  // Import the Vue composables
+import svgLogo from "../assets/logo.svg?component";  // Normal mode logo
+import svgLogoDark from "../assets/logo-dark.svg?component";  // Dark mode logo

-import svgLogo from "../assets/logo.svg?component";
+// Reactive reference for dark mode
+const isDarkMode = ref(false);

-withDefaults(
-  defineProps<{
-    invert?: boolean;
-  }>(),
-  { invert: false }
-);
+// Check if dark mode is enabled at first load
+watchEffect(() => {
+  isDarkMode.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
+});
+
+// Listen for changes in dark mode preference dynamically
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
+  isDarkMode.value = event.matches;
+});
 </script>
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@ -1,6 +1,6 @@
 <template>
  <nav
-    class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900"
+    class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-white"
    id="navbar"
  >
    <div
@ -11,7 +11,7 @@
        class="flex items-center"
        :class="{ 'flex-1': !currentActor?.id }"
      >
-        <MobilizonLogo class="w-40" />
+        <MobilizonLogo class="w-60" />
      </router-link>

      <div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
@ -49,12 +49,12 @@
                  displayName(currentActor)
                }}</span>
                <span
-                  class="block text-sm font-medium text-zinc-500 truncate dark:text-zinc-400"
+                  class="block text-sm font-medium text-zinc-500 truncate dark:text-gray-950"
                  v-if="currentUser?.role === ICurrentUserRole.ADMINISTRATOR"
                  >{{ t("Administrator") }}</span
                >
                <span
-                  class="block text-sm font-medium text-zinc-500 truncate dark:text-zinc-400"
+                  class="block text-sm font-medium text-zinc-500 truncate dark:text-gray-950"
                  v-if="currentUser?.role === ICurrentUserRole.MODERATOR"
                  >{{ t("Moderator") }}</span
                >
@ -107,7 +107,7 @@
              :to="{ name: RouteName.SETTINGS }"
            >
              <span
-                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 md:dark:hover:text-gray-900"
                >{{ t("My account") }}</span
              >
            </o-dropdown-item>
@ -118,7 +118,7 @@
              :to="{ name: RouteName.ADMIN_DASHBOARD }"
            >
              <span
-                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 md:dark:hover:text-gray-900"
                >{{ t("Administration") }}</span
              >
            </o-dropdown-item>
@ -128,7 +128,7 @@
              @keyup.enter="performLogout"
            >
              <span
-                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 md:dark:hover:text-gray-900"
                >{{ t("Log out") }}</span
              >
            </o-dropdown-item>
@ -138,7 +138,7 @@
      <button
        @click="showMobileMenu = !showMobileMenu"
        type="button"
-        class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600"
+        class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-950 dark:hover:bg-zinc-700 dark:focus:ring-gray-600"
        aria-controls="mobile-menu-2"
        aria-expanded="false"
      >
@ -175,35 +175,35 @@
          <li class="m-auto">
            <router-link
              :to="{ name: RouteName.EVENT_CALENDAR }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-gray-950 md:dark:hover:text-gray-900 dark:hover:bg-zinc-700 md:dark:hover:text-gray-900 md:dark:hover:bg-transparent dark:border-gray-700"
              >{{ t("Calendar") }}</router-link
            >
          </li>
          <li class="m-auto" v-if="currentActor?.id">
            <router-link
              :to="{ name: RouteName.MY_EVENTS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-gray-950 md:dark:hover:text-gray-900 dark:hover:bg-zinc-700 md:dark:hover:text-gray-900 md:dark:hover:bg-transparent dark:border-gray-700"
              >{{ t("My events") }}</router-link
            >
          </li>
          <li class="m-auto" v-if="currentActor?.id">
            <router-link
              :to="{ name: RouteName.MY_GROUPS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-gray-950 md:dark:hover:text-gray-900 dark:hover:bg-zinc-700 md:dark:hover:text-gray-900 md:dark:hover:bg-transparent dark:border-gray-700"
              >{{ t("My groups") }}</router-link
            >
          </li>
          <li class="m-auto" v-if="!currentActor?.id">
            <router-link
              :to="{ name: RouteName.LOGIN }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-gray-950 md:dark:hover:text-gray-900 dark:hover:bg-zinc-700 md:dark:hover:text-gray-900 md:dark:hover:bg-transparent dark:border-gray-700"
              >{{ t("Login") }}</router-link
            >
          </li>
          <li class="m-auto" v-if="!currentActor?.id && canRegister">
            <router-link
              :to="{ name: RouteName.REGISTER }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-gray-950 md:dark:hover:text-gray-900 dark:hover:bg-zinc-700 md:dark:hover:text-gray-900 md:dark:hover:bg-transparent dark:border-gray-700"
              >{{ t("Register") }}</router-link
            >
          </li>
--- a/src/views/Admin/InstancesView.vue
+++ b/src/views/Admin/InstancesView.vue
@ -79,7 +79,7 @@
            <img
              class="w-12"
              v-if="instance.software === 'Mobilizon'"
-              src="/img/logo.svg"
+              :src="isDarkMode ? '/img/logo-dark.svg' : '/img/logo.svg'"
              alt=""
            />
            <mastodon-logo
@ -96,7 +96,7 @@
            <img
              class="w-8 mx-2"
              v-else-if="instance.software?.toLowerCase() === 'wordpress'"
-              src="/img/wordpress-logo.svg"
+              :src="isDarkMode ? '/img/logo-dark.svg' : '/img/logo.svg'"
              alt=""
            />
            <CloudQuestion class="mx-1.5" v-else :size="36" />
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -9,7 +9,7 @@ module.exports = {
        "violet-title": "#3c376e",
        tag: "rgb(var(--color-tag) / <alpha-value>)",
        "frama-violet": "#725794",
-        "frama-orange": "#cc4e13",
+        "frama-orange": "#EEEEEE",
        "mbz-yellow": {
          DEFAULT: "#FFD599",
          50: "#FFFFFF",
--- a/tests/unit/specs/components/snapshots/navbar.spec.ts.snap
+++ b/tests/unit/specs/components/snapshots/navbar.spec.ts.snap
@ -4,7 +4,7 @@ exports[`App component > renders a Vue component 1`] = `
 "<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900\\" id=\\"navbar\\">
  <div class=\\"container mx-auto flex flex-wrap items-center mx-auto gap-2 sm:gap-4\\">
    <router-link to=\\"[object Object]\\" class=\\"flex items-center flex-1\\">
-      <mobilizon-logo-stub invert=\\"false\\" class=\\"w-40\\"></mobilizon-logo-stub>
+      <mobilizon-logo-stub invert=\\"false\\" class=\\"w-60\\"></mobilizon-logo-stub>
    </router-link>
    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
        <path fill-rule=\\"evenodd\\" d=\\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\\" clip-rule=\\"evenodd\\"></path>