Add new feature notice for dark mode (#4922)

frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useUiStore } from "~/stores/ui"
+
+import VFeatureNotice from "~/components/VFeatureNotice/VFeatureNotice.vue"
+
+const uiStore = useUiStore()
+
+const handleClick = () => {
+  uiStore.setIsDarkModeSeen(true)
+}
+</script>
+
+<template>
+  <!-- TODO: Populate the post permalink. -->
+  <VFeatureNotice
+    see-more-href="https://make.wordpress.org/openverse/"
+    @click="handleClick"
+  >
+    {{ $t("notification.darkMode.text") }}
+  </VFeatureNotice>
+</template>

frontend/src/components/VFeatureNotice/VFeatureNotice.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import VLink from "~/components/VLink.vue"
+
+defineProps<{
+  seeMoreHref: string
+}>()
+
+const emit = defineEmits<{
+  click: [MouseEvent]
+}>()
+
+const handleClick = (e: MouseEvent) => {
+  emit("click", e)
+}
+</script>
+
+<template>
+  <VLink
+    :href="seeMoreHref"
+    class="group flex h-10 w-full flex-row items-center gap-2 rounded-full border border-secondary pe-4 ps-2 hover:no-underline sm:w-[23.125rem]"
+    @click="handleClick"
+  >
+    <div
+      class="flex h-6 items-center rounded-full bg-primary px-2 text-xs font-semibold uppercase text-over-negative"
+    >
+      {{ $t("notification.new") }}
+    </div>
+    <div class="label-regular flex-grow text-default">
+      <!-- @slot Content goes here. -->
+      <slot />
+    </div>
+    <span
+      class="label-bold text-default group-hover:underline group-focus:underline"
+      >{{ $t("notification.more") }}</span
+    >
+  </VLink>
+</template>

frontend/src/components/VHomepageContent.vue

@@ -88,7 +88,7 @@ const {
 
     <VStandaloneSearchBar
       ref="searchBarRef"
-      class="mt-4 md:mt-6"
+      class="mt-4 md:mt-6 xl:max-w-[43.75rem]"
       :has-popover="!!triggerElement && isContentSwitcherVisible"
       @submit="handleSearch"
     >

frontend/src/components/VSelectField/VSelectField.vue

@@ -34,11 +34,14 @@ const props = withDefaults(
     labelText: string
     choices: Choice[]
     showSelected?: boolean
+    /** whether to show a glowing pink outline, indicating a new feature */
+    showNewHighlight?: boolean
   }>(),
   {
     modelValue: "",
     blankText: "",
     showSelected: true,
+    showHighlight: false,
   }
 )
 
@@ -72,9 +75,17 @@ const splitAttrs = computed(() => {
 
 <template>
   <div
-    class="relative m-0.5px box-content block w-fit rounded-sm border border-default text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
-    :class="splitAttrs.classAttrs"
+    class="group/select relative m-0.5px box-content block w-fit rounded-sm border text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
+    :class="[
+      splitAttrs.classAttrs,
+      showNewHighlight ? 'border-tx' : 'border-default',
+    ]"
   >
+    <div
+      v-if="showNewHighlight"
+      class="new-highlight pointer-events-none absolute -inset-1.5px animate-new-highlight rounded-sm border-1.5 border-tx group-focus-within/select:hidden group-hover/select:hidden"
+      aria-hidden="true"
+    />
     <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
       <slot name="start" />
     </div>
@@ -100,3 +111,23 @@ const splitAttrs = computed(() => {
     </select>
   </div>
 </template>
+
+<style>
+@property --deg {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.new-highlight {
+  background:
+    linear-gradient(var(--color-bg-curr-page), var(--color-bg-curr-page))
+      content-box,
+    linear-gradient(
+        var(--deg),
+        var(--color-gray-new-highlight),
+        var(--color-new-highlight)
+      )
+      border-box;
+}
+</style>

frontend/src/components/VThemeSelect/VThemeSelect.vue

@@ -35,6 +35,11 @@ const colorMode = computed({
   },
 })
 
+const isDarkModeSeen = computed(() => uiStore.isDarkModeSeen)
+const setIsDarkModeSeen = () => {
+  uiStore.setIsDarkModeSeen(true)
+}
+
 const darkMode = useDarkMode()
 
 /**
@@ -68,6 +73,8 @@ const choices: ComputedRef<Choice[]> = computed(() => {
     :blank-text="$t('theme.theme')"
     :label-text="$t('theme.theme')"
     :show-selected="false"
+    :show-new-highlight="!isDarkModeSeen"
+    @click="setIsDarkModeSeen"
   >
     <template #start>
       <VIcon :name="currentThemeIcon" />

frontend/src/layouts/content-layout.vue

@@ -54,6 +54,8 @@ provide(ShowScrollButtonKey, showScrollButton)
 <style scoped>
 .app {
   grid-template-areas: "header" "main";
+  /* This is used by some elements. */
+  --color-bg-curr-page: var(--color-bg);
 }
 .header-el {
   grid-area: header;

frontend/src/layouts/default.vue

@@ -24,6 +24,8 @@ defineOptions({
 <style scoped>
 .app {
   grid-template-areas: "header" "main";
+  /* This is used by some elements. */
+  --color-bg-curr-page: var(--color-bg-complementary);
 }
 .header-el {
   grid-area: header;

frontend/src/layouts/search-layout.vue

@@ -109,6 +109,8 @@ provide(ShowScrollButtonKey, showScrollButton)
 }
 .app {
   grid-template-areas: "header" "main";
+  /* This is used by some elements. */
+  --color-bg-curr-page: var(--color-bg);
 }
 .header-el {
   grid-area: header;

frontend/src/locales/scripts/en.json5

@@ -37,6 +37,11 @@
       link: "the privacy page",
       close: "Close the analytics notice banner.",
     },
+    darkMode: {
+      text: "Dark mode is now available.",
+    },
+    new: "New",
+    more: "See more",
   },
   header: {
     homeLink: "{openverse} Home",

frontend/src/pages/index.vue

@@ -16,6 +16,7 @@ import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
+import VDarkModeFeatureNotice from "~/components/VFeatureNotice/VDarkModeFeatureNotice.vue"
 import VHomeGallery from "~/components/VHomeGallery/VHomeGallery.vue"
 import VHomepageContent from "~/components/VHomepageContent.vue"
 
@@ -48,6 +49,8 @@ onMounted(() => {
 
 const isXl = computed(() => uiStore.isBreakpoint("xl"))
 
+const isDarkModeSeen = computed(() => uiStore.isDarkModeSeen)
+
 const searchType = ref<SearchType>(ALL_MEDIA)
 
 const setSearchType = (type: SearchType) => {
@@ -61,6 +64,10 @@ const setSearchType = (type: SearchType) => {
   }
 }
 
+const showThemeSwitcher = computed(() =>
+  featureFlagStore.isOn("dark_mode_ui_toggle")
+)
+
 const handleSearch = (searchTerm: string) => {
   sendCustomEvent("SUBMIT_SEARCH", {
     searchType: searchType.value,
@@ -78,14 +85,23 @@ const handleSearch = (searchTerm: string) => {
 
 <template>
   <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:justify-between lg:gap-0"
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 xl:flex-row xl:items-center xl:gap-0"
   >
-    <VHomepageContent
-      class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
-      :handle-search="handleSearch"
-      :search-type="searchType"
-      :set-search-type="setSearchType"
-    />
+    <div
+      class="flex flex-grow flex-col items-center justify-center gap-6 xl:h-[33rem] xl:flex-grow-0 xl:items-start"
+    >
+      <VDarkModeFeatureNotice
+        v-if="showThemeSwitcher && !isDarkModeSeen"
+        class="sm:mx-14 md:mx-20 lg:mx-26 xl:me-0"
+      />
+
+      <VHomepageContent
+        class="my-auto sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
+        :handle-search="handleSearch"
+        :search-type="searchType"
+        :set-search-type="setSearchType"
+      />
+    </div>
 
     <!-- Image carousel -->
     <VHomeGallery v-if="isXl" class="mx-10 me-12 flex h-full flex-grow" />

frontend/src/stores/ui.ts

@@ -65,6 +65,8 @@ export interface UiState {
 
   /* The user-chosen color theme of the site. */
   colorMode: ColorMode
+  /** whether the user has seen the dark mode toggle */
+  isDarkModeSeen: boolean
 }
 
 export const breakpoints = Object.keys(ALL_SCREEN_SIZES)
@@ -81,6 +83,7 @@ export const useUiStore = defineStore("ui", {
     revealedSensitiveResults: [],
     headerHeight: 80,
     colorMode: "system",
+    isDarkModeSeen: false,
   }),
 
   getters: {
@@ -91,6 +94,7 @@ export const useUiStore = defineStore("ui", {
         breakpoint: state.breakpoint,
         dismissedBanners: Array.from(this.dismissedBanners),
         colorMode: state.colorMode,
+        isDarkModeSeen: state.isDarkModeSeen,
       }
     },
     areInstructionsVisible(state): boolean {
@@ -186,7 +190,11 @@ export const useUiStore = defineStore("ui", {
       }
 
       if (isColorMode(cookies.colorMode)) {
-        this.setColorMode(cookies.colorMode)
+        this.setColorMode(cookies.colorMode, false)
+      }
+
+      if (typeof cookies.isDarkModeSeen === "boolean") {
+        this.setIsDarkModeSeen(cookies.isDarkModeSeen, false)
       }
 
       this.writeToCookie()
@@ -279,10 +287,33 @@ export const useUiStore = defineStore("ui", {
       this.shouldBlurSensitive = value
       this.revealedSensitiveResults = []
     },
-    setColorMode(colorMode: ColorMode) {
+
+    /**
+     * Update the user's preferred color mode.
+     *
+     * @param colorMode - the user's preferred color mode.
+     * @param saveToCookie - whether to save the new breakpoint in the cookie.
+     */
+    setColorMode(colorMode: ColorMode, saveToCookie = true) {
       this.colorMode = colorMode
 
-      this.writeToCookie()
+      if (saveToCookie) {
+        this.writeToCookie()
+      }
+    },
+
+    /**
+     * Update the value of whether the user has seen dark mode.
+     *
+     * @param value - the new value of whether the user has seen dark mode
+     * @param saveToCookie - whether to save the new breakpoint in the cookie.
+     */
+    setIsDarkModeSeen(value: boolean, saveToCookie = true) {
+      this.isDarkModeSeen = value
+
+      if (saveToCookie) {
+        this.writeToCookie()
+      }
     },
     setHeaderHeight(height: number) {
       this.headerHeight = Math.max(height, 80)

frontend/src/styles/tailwind.css

@@ -159,6 +159,7 @@
       --color-text-disabled: var(--color-gray-5);
       --color-text-link: var(--color-pink-8);
       --color-text-over-dark: var(--color-white);
+      --color-text-over-negative: var(--color-gray-1);
       --color-text-secondary-over-dark: var(--color-gray-5);
       --color-icon-warning: var(--color-warning-8);
       --color-icon-info: var(--color-info-8);
@@ -167,6 +168,8 @@
       --color-wave-active: var(--color-yellow-9);
       --color-wave-inactive: var(--color-gray-12-20);
       --color-modal-layer: var(--color-gray-12-80);
+      --color-new-highlight: var(--color-pink-6);
+      --color-gray-new-highlight: var(--color-gray-12-20);
     }
   }
 
@@ -203,6 +206,7 @@
       --color-text-disabled: var(--color-gray-8);
       --color-text-link: var(--color-yellow-4);
       --color-text-over-dark: var(--color-gray-13);
+      --color-text-over-negative: var(--color-gray-12);
       --color-text-secondary-over-dark: var(--color-gray-8);
       --color-icon-warning: var(--color-warning-5);
       --color-icon-info: var(--color-info-5);
@@ -211,6 +215,8 @@
       --color-wave-active: var(--color-pink-4);
       --color-wave-inactive: var(--color-gray-1-30);
       --color-modal-layer: var(--color-gray-12-60);
+      --color-new-highlight: var(--color-yellow-3);
+      --color-gray-new-highlight: var(--color-gray-1-20);
     }
   }
 
@@ -248,6 +254,7 @@
     --color-text-disabled: var(--color-gray-5);
     --color-text-link: var(--color-pink-8);
     --color-text-over-dark: var(--color-white);
+    --color-text-over-negative: var(--color-gray-1);
     --color-text-secondary-over-dark: var(--color-gray-5);
     --color-icon-warning: var(--color-warning-8);
     --color-icon-info: var(--color-info-8);
@@ -256,6 +263,8 @@
     --color-wave-active: var(--color-yellow-9);
     --color-wave-inactive: var(--color-gray-12-20);
     --color-modal-layer: var(--color-gray-12-80);
+    --color-new-highlight: var(--color-pink-6);
+    --color-gray-new-highlight: var(--color-gray-12-20);
   }
 
   :is(.dark-mode *),
@@ -292,6 +301,7 @@
     --color-text-disabled: var(--color-gray-8);
     --color-text-link: var(--color-yellow-4);
     --color-text-over-dark: var(--color-gray-13);
+    --color-text-over-negative: var(--color-gray-12);
     --color-text-secondary-over-dark: var(--color-gray-8);
     --color-icon-warning: var(--color-warning-5);
     --color-icon-info: var(--color-info-5);
@@ -300,6 +310,8 @@
     --color-wave-active: var(--color-pink-4);
     --color-wave-inactive: var(--color-gray-1-30);
     --color-modal-layer: var(--color-gray-12-60);
+    --color-new-highlight: var(--color-yellow-3);
+    --color-gray-new-highlight: var(--color-gray-1-20);
   }
 
   body {