Accountcircle white in normal & dark mode

lib/web/views/page_view.ex

@@ -80,7 +80,7 @@ defmodule Mobilizon.Web.PageView do
   end
 
   def theme_color do
-    "#ffd599"
+    "#000000"
   end
 
   def language_direction(assigns) do

src/assets/oruga-tailwindcss.css

@@ -1,5 +1,5 @@
 body {
-  @apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
+  @apply bg-body-background-color dark:bg-gray-900 dark:text-white;
 }
 
 .out {

src/assets/tailwind.css

@@ -24,7 +24,7 @@
 
 @layer components {
   .mbz-card {
-    @apply block bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 text-violet-title dark:text-white dark:hover:text-white rounded-lg dark:border-violet-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-400 dark:text-white dark:hover:text-white;
+    @apply block bg-white hover:bg-white text-black-title shadow-eventcard dark:text-white dark:hover:text-white dark:border-black-title  dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
   }
 }
 

src/components/Dashboard/NumberDashboardTile.vue

@@ -2,7 +2,7 @@
   <article
     :class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
   >
-    <p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
+    <p class="text-black-title text-4xl font-bold">{{ number }}</p>
     <slot name="subtitle">
       {{ subtitle }}
     </slot>

src/components/Discussion/DiscussionListItem.vue

@@ -26,7 +26,7 @@
     </div>
     <div class="flex-1">
       <div class="flex items-center">
-        <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">
+        <p class="text-black-title dark:text-white text-lg font-semibold flex-1">
           {{ discussion.title }}
         </p>
         <span class="" :title="formatDateTimeString(actualDate)">

src/components/Event/DateCalendarIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >

src/components/Event/EventCard.vue

@@ -9,7 +9,7 @@
     :isInternal="isInternal"
   >
     <div
-      class="rounded-lg"
+      class=""
       :class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
     >
       <figure class="block relative pt-40">
@@ -69,13 +69,13 @@
           />
         </div>
         <span
-          class="text-gray-700 dark:text-white font-semibold hidden"
+          class="text-black dark:text-white font-semibold hidden"
           :class="{ 'sm:block': mode === 'row' }"
           >{{ formatDateTimeWithCurrentLocale }}</span
         >
         <div class="w-full flex flex-col justify-between h-full">
           <h2
-            class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white"
+            class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-black-title dark:text-white"
             dir="auto"
             :lang="event.language"
           >
@@ -83,7 +83,7 @@
           </h2>
           <div class="">
             <div
-              class="flex items-center text-violet-3 dark:text-white"
+              class="flex items-center text-black bg-fomo-card-1"
               dir="auto"
             >
               <figure class="" v-if="actorAvatarURL">
@@ -102,6 +102,7 @@
               </span>
             </div>
             <inline-address
+              class="bg-fomo-card-2 text-black"
               v-if="event.physicalAddress"
               :physical-address="event.physicalAddress"
             />

src/components/Event/EventMinimalistCard.vue

@@ -18,7 +18,7 @@
     </div>
     <div class="p-2">
       <h3
-        class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
+        class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-black-title dark:text-white"
         :lang="event.language"
         dir="auto"
       >

src/components/Event/EventParticipationCard.vue

@@ -3,7 +3,7 @@
     class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0 rounded-t-lg"
   >
     <div
-      class="bg-mbz-yellow-alt-100 flex p-2 text-violet-title rounded-t-lg"
+      class="bg-mbz-yellow-alt-100 flex p-2 text-black-title rounded-t-lg"
       dir="auto"
     >
       <figure
@@ -79,7 +79,7 @@
               }"
             >
               <h3
-                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-violet-title dark:text-white"
+                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-black-title dark:text-white"
                 :lang="participation.event.language"
               >
                 {{ participation.event.title }}

src/components/Event/SkeletonDateCalendarIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
   >
     <div class="datetime-container-content">
       <div class="ml-2 h-8 bg-slate-200 w-16"></div>

src/components/Event/StartTimeIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >

src/components/FullCalendar/EventsCalendar.vue

@@ -2,7 +2,7 @@
   <FullCalendar ref="calendarRef" :options="calendarOptions">
     <template v-slot:eventContent="arg">
       <span
-        class="text-violet-3 dark:text-white font-bold m-2"
+        class="text-black-title dark:text-white font-bold m-2"
         :title="arg.event.title"
       >
         {{ arg.event.title }}

src/components/Group/GroupCard.vue

@@ -27,7 +27,7 @@
       <div class="flex gap-1 mb-2">
         <div class="overflow-hidden flex-auto">
           <h3
-            class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
+            class="text-2xl leading-5 line-clamp-3 font-bold text-black-title dark:text-white"
             dir="auto"
           >
             {{ displayName(group) }}

src/components/Group/GroupSection.vue

@@ -6,7 +6,7 @@
       'border-yellow-1': !privateSection,
     }"
   >
-    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-black-title">
       <div class="flex flex-1 gap-1">
         <o-icon :icon="icon" custom-size="36" />
         <h2 class="text-2xl font-medium mt-0">{{ title }}</h2>

src/components/Image/LazyImage.vue

@@ -13,7 +13,7 @@
       <!-- Show the real image on the top and fade in after loading -->
       <img
         ref="image"
-        class="transition-opacity duration-500 rounded-lg object-cover h-full w-full"
+        class="transition-opacity duration-500 object-cover h-full w-full"
         :class="imageOpacity"
         alt=""
         src=""

src/components/Local/CloseContent.vue

@@ -27,7 +27,7 @@
         <span class="">&lt;</span>
       </button>
     </div> -->
-    <div class="overflow-hidden">
+    <div class="">
       <div
         class="multi-card-event"
       >

src/components/Local/MoreContent.vue

@@ -52,7 +52,7 @@
       class="flex h-full justify-between self-end flex-col p-2 pt-1 md:p-4 md:pt-2 leading-normal w-full"
     >
       <h2
-        class="mb-2 text-xl font-bold tracking-tight text-violet-title dark:text-white"
+        class="mb-2 text-xl font-bold tracking-tight text-black-title dark:text-white"
       >
         <slot name="default" />
       </h2>

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-black"
+    class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 text-white dark:text-white dark:bg-black"
     id="navbar"
   >
     <div
@@ -19,7 +19,7 @@
           <template #trigger>
             <button
               type="button"
-              class="flex sm:mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 text-white dark:text-black"
+              class="flex sm:mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300"
               id="user-menu-button"
               aria-expanded="false"
             >
@@ -49,12 +49,12 @@
                   displayName(currentActor)
                 }}</span>
                 <span
-                  class="block text-sm font-medium text-gray-500 truncate dark:text-gray-400"
+                  class="block text-sm font-medium text-gray-500 truncate dark:text-white"
                   v-if="currentUser?.role === ICurrentUserRole.ADMINISTRATOR"
                   >{{ t("Administrator") }}</span
                 >
                 <span
-                  class="block text-sm font-medium text-gray-500 truncate dark:text-gray-400"
+                  class="block text-sm font-medium text-gray-500 truncate dark:text-white"
                   v-if="currentUser?.role === ICurrentUserRole.MODERATOR"
                   >{{ t("Moderator") }}</span
                 >
@@ -92,7 +92,7 @@
                 </div>
 
                 <div
-                  class="text-base text-gray-700 dark:hover:bg-gray-800 dark:text-gray-100 flex flex-col flex-auto overflow-hidden items-start w-full"
+                  class="text-base text-gray-700 flex flex-col flex-auto overflow-hidden items-start w-full"
                 >
                   <p class="truncate w-full">{{ displayName(identity) }}</p>
                   <p class="truncate text-sm w-full" v-if="identity.name">
@@ -141,7 +141,7 @@
       <button
         @click="showMobileMenu = !showMobileMenu"
         type="button"
-        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-white"
         aria-controls="mobile-menu-2"
         aria-expanded="false"
       >
@@ -178,35 +178,35 @@
           <li class="m-auto">
             <router-link
               :to="{ name: RouteName.EVENT_CALENDAR }"
-              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"
+              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-white md:dark:hover:text-white dark:hover:bg-black md:dark:hover:text-white md:dark:hover:bg-transparent"
               >{{ 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-gray-50 border-b border-gray-100 hover:bg-gray-950 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-950 dark:hover:bg-gray-950 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-gray-950 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0"
               >{{ 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-gray-50 border-b border-gray-100 hover:bg-gray-950 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-950 dark:hover:bg-gray-950 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-gray-950 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0"
               >{{ 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-gray-50 border-b border-gray-100 hover:bg-gray-950 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-950 dark:hover:bg-gray-950 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-gray-950 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0"
               >{{ 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-gray-50 border-b border-gray-100 hover:bg-gray-950 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-950 dark:hover:bg-gray-950 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-gray-950 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0"
               >{{ t("Register") }}</router-link
             >
           </li>

src/components/TagElement.vue

@@ -26,7 +26,7 @@ const typeClasses = computed(() => {
   switch (props.variant) {
     default:
     case "light":
-      return "bg-purple-3 dark:text-violet-3";
+      return "bg-purple-3 dark:text-black-title";
     case "info":
       return "bg-mbz-info dark:text-black";
     case "warning":

src/views/Event/EventView.vue

@@ -138,7 +138,7 @@
                     eventCategory
                   }}</tag>
                   <router-link
-                    class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
+                    class="rounded-md truncate text-sm text-black-title py-1 bg-purple-3 dark:text-black-title category"
                     v-for="tag in event?.tags ?? []"
                     :key="tag.title"
                     :to="{ name: RouteName.TAG, params: { tag: tag.title } }"

src/views/SettingsView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container mx-auto">
-    <h1 class="text-violet-3 dark:text-white">{{ t("Settings") }}</h1>
+    <h1 class="text-black-title dark:text-white">{{ t("Settings") }}</h1>
     <div class="flex flex-wrap gap-4">
       <SettingsMenu class="max-w-xs w-full" />
       <div class="flex-1">

tailwind.config.cjs

@@ -3,13 +3,18 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      boxShadow: {
+        "eventcard": "0 2px 13px -5px rgba(0, 0, 0, 1)",
+      },
       colors: {
         primary: "#1e7d97",
         secondary: "#ffd599",
-        "violet-title": "#3c376e",
+        "black-title": "#000000",
         tag: "rgb(var(--color-tag) / <alpha-value>)",
         "frama-violet": "#725794",
         "frama-orange": "#cc4e13",
+        "fomo-card-1": "#21bef3",
+        "fomo-card-2": "#9e9ef2",
         "mbz-yellow": {
           DEFAULT: "#FFD599",
           50: "#FFFFFF",
@@ -37,7 +42,7 @@ module.exports = {
           900: "#452D02",
         },
         "mbz-purple": {
-          DEFAULT: "#424056",
+          DEFAULT: "#2a3646",
           50: "#CAC9D7",
           100: "#BEBDCE",
           200: "#A8A6BC",
@@ -46,7 +51,7 @@ module.exports = {
           500: "#666385",
           600: "#54516D",
           700: "#424056",
-          800: "#292836",
+          800: "#1e293b",
           900: "#111016",
         },
         "mbz-bluegreen": {
@@ -67,7 +72,7 @@ module.exports = {
         "violet-3": "#3c376e",
         "yellow-1": "#ffd599",
         "yellow-2": "#fff1de",
-        "body-background-color": "#efeef4",
+        "body-background-color": "#f0ecf4",
         "purple-1": "#757199",
         "purple-2": "#cdcaea",
         "purple-3": "#e6e4f4",

tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`GroupSection > renders group section with basic informations 1`] = `
 "<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
@@ -16,7 +16,7 @@ exports[`GroupSection > renders group section with basic informations 1`] = `
 
 exports[`GroupSection > renders public group section 1`] = `
 "<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>

tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap

@@ -32,7 +32,7 @@ exports[`PostListItem > renders post list item with tags 1`] = `
   <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
     <h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
     <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
-    <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\">A tag</span></div>
+    <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-black-title px-2 py-1 bg-purple-3 dark:text-black-title\\">A tag</span></div>
     <!--v-if-->
     <!--v-if-->
   </div>

vite.config.js

@@ -35,7 +35,7 @@ export default defineConfig(({ command }) => {
           name: "Mobilizon",
           short_name: "Mobilizon",
           orientation: "portrait-primary",
-          theme_color: "#ffd599",
+          theme_color: "#000000",
           icons: [
             {
               src: "./img/icons/android-chrome-192x192.png",