Remove SCSS variables

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Account/PopoverActorCard.vue

@@ -26,13 +26,3 @@ withDefaults(
   }
 );
 </script>
-
-<style lang="scss">
-.v-popper__inner {
-  padding: 0 !important;
-  background-color: transparent !important;
-}
-.v-popper__arrow-outer {
-  border-color: $violet-1 !important;
-}
-</style>

js/src/components/Activity/activity.scss

@@ -9,9 +9,6 @@
     z-index: 2;
     flex-shrink: 0;
 
-    &.has-text-grey {
-      border-color: $grey;
-    }
   }
 
   .subject {

js/src/components/Categories/CategoryCard.vue

@@ -26,6 +26,8 @@
         class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
         :src="`/img/categories/${category.key.toLowerCase()}.jpg`"
         :srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
+        width="384"
+        height="384"
         alt=""
       />
     </picture>

js/src/components/Comment/Comment.vue

@@ -198,6 +198,7 @@ import Alert from "vue-material-design-icons/Alert.vue";
 import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
 import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
 import Reply from "vue-material-design-icons/Reply.vue";
+import type { Locale } from "date-fns";
 
 const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
 
@@ -359,7 +360,6 @@ form.reply {
   }
 
   strong.organizer {
-    background: $background-color;
     border-radius: 12px;
     color: white;
     padding: 0 6px;
@@ -400,29 +400,18 @@ a.comment-link {
   border-radius: 5px;
 
   &.announcement {
-    background: $purple-2;
-
     small {
       color: hsl(0, 0%, 21%);
     }
   }
 
   &.selected {
-    background-color: $violet-1;
-    color: $white;
     .reply-btn,
     small,
     span,
     strong,
-    .icons button {
-      color: $white;
-    }
     a.comment-link:hover {
       text-decoration: underline;
-      text-decoration-color: $white;
-      small {
-        color: $purple-3;
-      }
     }
   }
 
@@ -484,13 +473,11 @@ a.comment-link {
 
   & > p > span {
     font-weight: bold;
-    color: $violet-2;
   }
 }
 
 .level-item.reply-btn {
   font-weight: bold;
-  color: $violet-2;
 }
 
 article {

js/src/components/Dashboard/LinkedNumberDashboardTile.vue

@@ -0,0 +1,25 @@
+<template>
+  <router-link
+    v-if="to?.name"
+    :to="to"
+    class="bg-white dark:bg-black mb-4 shadow-md rounded p-4"
+  >
+    <NumberDashboardTile :number="number" :subtitle="subtitle" :style="false">
+      <template #subtitle>
+        <slot name="subtitle" />
+      </template>
+    </NumberDashboardTile>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import NumberDashboardTile from "./NumberDashboardTile.vue";
+defineProps<{
+  number?: number;
+  subtitle?: string;
+  to?: {
+    name: string;
+    params?: Record<string, any>;
+    query?: Record<string, any>;
+  };
+}>();
+</script>

js/src/components/Dashboard/NumberDashboardTile.vue

@@ -0,0 +1,20 @@
+<template>
+  <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>
+    <slot name="subtitle">
+      {{ subtitle }}
+    </slot>
+  </article>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    number?: number;
+    subtitle?: string;
+    style?: boolean;
+  }>(),
+  { style: true }
+);
+</script>

js/src/components/Discussion/DiscussionComment.vue

@@ -190,8 +190,6 @@ article.comment {
           display: block;
           line-height: 1rem;
         }
-
-        color: #3c376e;
       }
 
       .icons {
@@ -244,7 +242,6 @@ article.comment {
           a {
             display: inline-block;
             padding: 0.3rem;
-            background: $secondary;
             color: #111;
 
             &:empty {

js/src/components/Editor.vue

@@ -420,9 +420,6 @@ onBeforeUnmount(() => {
 @use "@/styles/_mixins" as *;
 @import "./Editor/style.scss";
 
-$color-black: #000;
-$color-white: #eee;
-
 .menubar {
   margin-bottom: 1rem;
   transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
@@ -432,19 +429,10 @@ $color-white: #eee;
     display: inline-flex;
     background: transparent;
     border: 0;
-    color: $color-black;
     padding: 0.2rem 0.5rem;
     // @include margin-right(0.2rem);
     border-radius: 3px;
     cursor: pointer;
-
-    &:hover {
-      background-color: rgba($color-black, 0.05);
-    }
-
-    &.is-active {
-      background-color: rgba($color-black, 0.1);
-    }
   }
 }
 
@@ -487,7 +475,6 @@ $color-white: #eee;
       padding: 12px 6px;
 
       &:focus {
-        border-color: $background-color;
         outline: none;
       }
     }
@@ -520,8 +507,6 @@ $color-white: #eee;
     }
 
     blockquote {
-      border-left: 3px solid rgba($color-black, 0.1);
-      color: rgba($color-black, 0.8);
       // @include padding-left(0.8rem);
       font-style: italic;
 
@@ -562,7 +547,6 @@ $color-white: #eee;
 
 .suggestion-list {
   padding: 0.2rem;
-  border: 2px solid rgba($color-black, 0.1);
   font-size: 0.8rem;
   font-weight: bold;
   &__no-results {
@@ -576,10 +560,6 @@ $color-white: #eee;
     &:last-child {
       margin-bottom: 0;
     }
-    &.is-selected,
-    &:hover {
-      background-color: rgba($color-white, 0.2);
-    }
     &.is-empty {
       opacity: 0.5;
     }
@@ -591,11 +571,9 @@ $color-white: #eee;
   }
 }
 .tippy-box[data-theme~="dark"] {
-  background-color: $color-black;
   padding: 0;
   font-size: 1rem;
   text-align: inherit;
-  color: $color-white;
   border-radius: 5px;
 }
 

js/src/components/Editor/MentionList.vue

@@ -90,11 +90,5 @@ const selectItem = (index: number): void => {
   background: transparent;
   border: none;
   padding: 0.5rem 0.75rem;
-
-  &.is-selected,
-  &:hover {
-    color: $background-color;
-    background: rgba($background-color, 0.1);
-  }
 }
 </style>

js/src/components/ErrorComponent.vue

@@ -198,7 +198,6 @@ const sentryProvider = computed((): IAnalyticsConfig | undefined => {
 <style lang="scss" scoped>
 #error-wrapper {
   width: 100%;
-  background: $white;
 
   section {
     margin-bottom: 2rem;

js/src/components/Event/EventCard.vue

@@ -46,7 +46,7 @@
         </div>
         <div class="flex-1 w-full flex flex-col justify-between">
           <h3
-            class="text-lg leading-5 line-clamp-3 font-bold"
+            class="text-lg leading-5 line-clamp-3 font-bold text-violet-3"
             :title="event.title"
             dir="auto"
             :lang="event.language"
@@ -54,7 +54,7 @@
             {{ event.title }}
           </h3>
           <div class="pt-3">
-            <div class="flex items-center" dir="auto">
+            <div class="flex items-center text-violet-3" dir="auto">
               <figure class="" v-if="actorAvatarURL">
                 <img
                   class="rounded-xl"

js/src/components/Event/EventMinimalistCard.vue

@@ -47,25 +47,25 @@
       </h3>
       <inline-address
         v-if="event.physicalAddress"
-        class="event-subtitle"
+        class=""
         :physical-address="event.physicalAddress"
       />
-      <div
-        class="event-subtitle"
-        v-else-if="event.options && event.options.isOnline"
-      >
+      <div class="" v-else-if="event.options && event.options.isOnline">
         <Video />
         <span>{{ $t("Online") }}</span>
       </div>
-      <div class="event-subtitle event-organizer flex" v-if="showOrganizer">
-        <figure
-          class="image is-24x24"
-          v-if="organizer(event) && organizer(event)?.avatar"
-        >
-          <img class="is-rounded" :src="organizer(event)?.avatar?.url" alt="" />
+      <div class="flex gap-1" v-if="showOrganizer">
+        <figure class="" v-if="organizer(event) && organizer(event)?.avatar">
+          <img
+            class="rounded-full"
+            :src="organizer(event)?.avatar?.url"
+            alt=""
+            width="24"
+            height="24"
+          />
         </figure>
-        <AccountCircle v-else />
-        <span class="organizer-name">
+        <AccountCircle v-else :size="24" />
+        <span class="">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
@@ -145,8 +145,6 @@ withDefaults(
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-// @import "node_modules/bulma/sass/utilities/mixins.sass";
-// @import "@/variables.scss";
 
 .event-minimalist-card-wrapper {
   // display: grid;
@@ -191,8 +189,7 @@ withDefaults(
     //   -webkit-box-orient: vertical;
     //   overflow: hidden;
     //   font-weight: bold;
-    //   color: $title-color;
-    // }
+    d    // }
 
     :deep(.icon) {
       vertical-align: middle;

js/src/components/Event/EventParticipationCard.vue

@@ -618,7 +618,6 @@ article.box {
         //     line-height: 24px;
         //     margin: auto 0;
         //     font-weight: bold;
-        //     color: $title-color;
         //   }
         // }
       }
@@ -626,7 +625,6 @@ article.box {
   }
 
   // .identity-header {
-  //   background: $yellow-2;
   //   display: flex;
   //   padding: 5px;
 

js/src/components/Event/GroupedMultiEventMinimalistCard.vue

@@ -69,7 +69,6 @@ const monthName = (event: IEvent): string => {
     font-size: 1.3rem;
 
     &::after {
-      background: $orange-3;
       position: absolute;
       left: 0;
       right: 0;

js/src/components/Event/RecentEventCardWrapper.vue

@@ -16,14 +16,10 @@ import { IEvent } from "@/types/event.model";
 import { formatDistanceToNow } from "date-fns";
 import { inject } from "vue";
 import EventCard from "./EventCard.vue";
+import type { Locale } from "date-fns";
 defineProps<{
   event: IEvent;
 }>();
 
 const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
-<style lang="scss" scoped>
-p.time {
-  color: $violet-3;
-}
-</style>

js/src/components/Footer.vue

@@ -15,8 +15,8 @@
       <img
         :src="`/img/pics/footer_${random}-1024w.jpg`"
         alt=""
-        width="5234"
-        height="2189"
+        width="1024"
+        height="428"
         loading="lazy"
       />
     </picture>

js/src/components/Group/InvitationCard.vue

@@ -80,13 +80,3 @@ defineProps<{
   member: IMember;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.media:not(.subfield) {
-  background: lighten($primary, 40%);
-  padding: 10px;
-}
-h3 {
-  color: $violet-3;
-}
-</style>

js/src/components/Group/InvitationsList.vue

@@ -17,8 +17,10 @@ import { IMember } from "@/types/actor/member.model";
 import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
 import { useMutation } from "@vue/apollo-composable";
 import { ErrorResponse } from "@/types/errors.model";
+import { inject } from "vue";
+import type { Notifier } from "@/plugins/notifier";
 
-const props = defineProps<{
+defineProps<{
   invitations: IMember[];
 }>();
 

js/src/components/Image/LazyImage.vue

@@ -75,11 +75,9 @@ onUnmounted(() => {
 });
 
 watchEffect(() => {
-  console.debug("src changed");
   // Image is visible (means: has entered the viewport),
   // so start loading by setting the src attribute
   if (image.value) {
-    console.debug("image is ok, setting it");
     image.value.src = src.value;
 
     image.value.onload = () => {

js/src/components/MobilizonLogo.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
+  <svg
+    class="bg-white dark:bg-gray-900 dark:fill-white"
+    :class="{ 'bg-gray-900': invert }"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 248.16 46.78"
+  >
     <title>Mobilizon Logo</title>
     <g data-name="header">
       <path
@@ -35,12 +40,3 @@ withDefaults(
   { invert: false }
 );
 </script>
-<style lang="scss" scoped>
-svg {
-  fill: $background-color;
-
-  &.invert {
-    fill: $secondary;
-  }
-}
-</style>

js/src/components/NavBar.vue

@@ -4,7 +4,7 @@
       class="container mx-auto flex flex-wrap justify-between items-center mx-auto"
     >
       <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
-        <logo class="w-40" />
+        <MobilizonLogo class="w-40" />
       </router-link>
       <div class="flex items-center md:order-2" v-if="currentActor?.id">
         <o-dropdown>
@@ -300,20 +300,21 @@
 </template>
 
 <script lang="ts" setup>
-import Logo from "@/components/Logo.vue";
+import MobilizonLogo from "@/components/MobilizonLogo.vue";
 import { ICurrentUserRole } from "@/types/enums";
 import { logout } from "../utils/auth";
-import { IDENTITIES } from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
+import { displayName } from "../types/actor";
 import RouteName from "../router/name";
-import { useQuery } from "@vue/apollo-composable";
-import { reactive, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 // import { useProgrammatic } from "@oruga-ui/oruga-next";
 import { useCurrentUserClient } from "@/composition/apollo/user";
-import { useCurrentActorClient } from "@/composition/apollo/actor";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
 // import { useRestrictions } from "@/composition/apollo/config";
 
 const { currentUser } = useCurrentUserClient();
@@ -325,7 +326,7 @@ const { currentActor } = useCurrentActorClient();
 const router = useRouter();
 // const route = useRoute();
 
-const identities = reactive<any[]>([]);
+const { identities } = useCurrentUserIdentities();
 
 // const mobileNavbarActive = ref(false);
 
@@ -336,44 +337,25 @@ const identities = reactive<any[]>([]);
 
 const { t } = useI18n({ useScope: "global" });
 
-// TODO: Refactor this
-const { onResult } = useQuery<{ identities: IPerson[] }>(
-  IDENTITIES,
-  {},
-  () => ({
-    enabled:
-      currentUser.value?.id !== undefined && currentUser.value?.id !== null,
-  })
-);
-
-onResult(async ({ data }) => {
-  identities.push([
-    ...data.identities.map((identity: IPerson) => new Person(identity)),
-  ]);
-
+watch(identities, () => {
   // If we don't have any identities, the user has validated their account,
   // is logging for the first time but didn't create an identity somehow
-  if (identities.length === 0) {
-    console.debug("We have no identities listed for current user", identities);
+  if (identities.value && identities.value.length === 0) {
+    console.debug(
+      "We have no identities listed for current user",
+      identities.value
+    );
     console.debug("Pushing route to REGISTER_PROFILE");
-    try {
-      await router.push({
-        name: RouteName.REGISTER_PROFILE,
-        params: {
-          email: currentUser.value?.email,
-          userAlreadyActivated: "true",
-        },
-      });
-    } catch (err) {
-      return undefined;
-    }
+    router.push({
+      name: RouteName.REGISTER_PROFILE,
+      params: {
+        email: currentUser.value?.email,
+        userAlreadyActivated: "true",
+      },
+    });
   }
 });
 
-watch(currentActor, async () => {
-  if (!currentUser.value?.isLoggedIn) return;
-});
-
 // watch(loggedUser, () => {
 //   if (loggedUser.value?.locale) {
 //     console.debug("Setting locale from navbar");
@@ -472,56 +454,3 @@ watch(currentActor, async () => {
 
 const showMobileMenu = ref(false);
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-nav {
-  .navbar-item {
-    a.button {
-      font-weight: bold;
-    }
-
-    svg {
-      height: 1.75rem;
-    }
-  }
-
-  .navbar-dropdown .navbar-item {
-    cursor: pointer;
-
-    span {
-      display: flex;
-    }
-
-    &.is-active {
-      background: $secondary;
-    }
-
-    span.icon.is-medium {
-      display: flex;
-    }
-
-    img {
-      max-height: 2.5em;
-    }
-  }
-
-  .navbar-item.has-dropdown a.navbar-link figure {
-    // @include margin-right(0.75rem);
-    display: flex;
-    align-items: center;
-  }
-
-  a.navbar-item:focus-within {
-    background-color: inherit;
-  }
-
-  .identity-wrapper {
-    display: flex;
-
-    .media-content span {
-      display: flex;
-      color: $violet-2;
-    }
-  }
-}
-</style>

js/src/components/Post/PostListItem.vue

@@ -102,7 +102,6 @@ const isBeforeLastWeek = computed((): boolean => {
 
 .title-info-wrapper {
   .post-minimalist-title {
-    // color: #3c376e;
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;

js/src/components/Resource/FolderItem.vue

@@ -166,7 +166,6 @@ a {
       display: block;
       font-weight: 500;
       margin-bottom: 5px;
-      // color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;

js/src/components/Resource/ResourceItem.vue

@@ -131,7 +131,6 @@ a {
       white-space: nowrap;
       display: inline-block;
       font-weight: 500;
-      // color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;

js/src/components/Resource/ResourceSelector.vue

@@ -171,7 +171,6 @@ const moveDisabled = computed((): boolean | undefined => {
   }
 
   &.is-primary .panel-heading {
-    background: $primary;
     color: #fff;
   }
 }

js/src/components/Settings/SettingMenuItem.vue

@@ -32,7 +32,6 @@ const isActive = computed((): boolean => {
 li.setting-menu-item {
   font-size: 1.05rem;
   background-color: #fff1de;
-  color: $background-color;
   margin: auto;
 
   span {

js/src/components/Settings/SettingMenuSection.vue

@@ -1,6 +1,11 @@
 <template>
-  <li>
-    <router-link v-if="to" :to="to">{{ title }}</router-link>
+  <li class="bg-yellow-1 text-violet-2 text-xl">
+    <router-link
+      class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
+      v-if="to"
+      :to="to"
+      >{{ title }}</router-link
+    >
     <b v-else>{{ title }}</b>
     <ul>
       <slot></slot>
@@ -29,26 +34,3 @@ defineProps<{
 //   return false;
 // });
 </script>
-
-<style lang="scss" scoped>
-li {
-  font-size: 1.3rem;
-  background-color: $secondary;
-  color: $background-color;
-  margin: 2px auto;
-
-  &.active {
-    background-color: #fea72b;
-  }
-
-  a,
-  b {
-    cursor: pointer;
-    margin: 5px 0;
-    display: block;
-    padding: 5px 10px;
-    color: inherit;
-    font-weight: 500;
-  }
-}
-</style>

js/src/components/User/AuthProvider.vue

@@ -1,6 +1,7 @@
 <template>
   <o-button
     outlined
+    variant="primary"
     :icon-left="oauthProvider.id"
     v-if="isProviderSelected && !oauthProvider.label"
     :href="`/auth/${oauthProvider.id}`"
@@ -9,6 +10,7 @@
   >
   <o-button
     outlined
+    variant="primary"
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
     icon-left="lock"

js/src/components/Utils/VerticalDivider.vue

@@ -12,8 +12,3 @@ const dataContent = computed((): string => {
   return props.content.toLocaleUpperCase();
 });
 </script>
-<style lang="scss" scoped>
-.is-divider-vertical[data-content]::after {
-  background-color: $body-background-color;
-}
-</style>

js/src/components/core/Dialog.vue

@@ -8,7 +8,7 @@
       <div class="" v-if="hasIcon && (icon || iconByType)">
         <o-icon
           :icon="icon ? icon : iconByType"
-          :type="type"
+          :variant="variant"
           :both="!icon"
           custom-size="48"
         />
@@ -37,11 +37,11 @@
       </div>
     </section>
 
-    <footer v-if="canCancel" class="flex gap-2">
-      <o-button ref="cancelButton" @click="cancel('button')">{{
+    <footer v-if="canCancel" class="flex gap-2 my-2">
+      <o-button ref="cancelButton" outlined @click="cancel('button')">{{
         cancelText ?? t("Cancel")
       }}</o-button>
-      <o-button :type="type" ref="confirmButton" @click="confirm">{{
+      <o-button :variant="variant" ref="confirmButton" @click="confirm">{{
         confirmText ?? t("Confirm")
       }}</o-button>
     </footer>
@@ -58,7 +58,7 @@ const props = withDefaults(
     message: string | string[];
     icon?: string;
     hasIcon?: boolean;
-    type?: string;
+    variant?: string;
     size?: string;
     canCancel?: boolean;
     confirmText?: string;
@@ -71,7 +71,12 @@ const props = withDefaults(
     hasInput?: boolean;
     inputAttrs?: Record<string, any>;
   }>(),
-  { type: "primary", canCancel: true, hasInput: false, inputAttrs: () => ({}) }
+  {
+    variant: "primary",
+    canCancel: true,
+    hasInput: false,
+    inputAttrs: () => ({}),
+  }
 );
 
 const emit = defineEmits(["confirm", "cancel", "close"]);
@@ -91,7 +96,7 @@ const dialogClass = computed(() => {
  * Icon name (MDI) based on the type.
  */
 const iconByType = computed(() => {
-  switch (props.type) {
+  switch (props.variant) {
     case "info":
       return "information";
     case "success":

js/src/components/core/MaterialIcon.vue

@@ -219,6 +219,14 @@ const icons: Record<string, () => Promise<any>> = {
     import(`../../../node_modules/vue-material-design-icons/Email.vue`),
   ChatAlert: () =>
     import(`../../../node_modules/vue-material-design-icons/ChatAlert.vue`),
+  InboxArrowDown: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/InboxArrowDown.vue`
+    ),
+  LanDisconnect: () =>
+    import(`../../../node_modules/vue-material-design-icons/LanDisconnect.vue`),
+  CloudQuestion: () =>
+    import(`../../../node_modules/vue-material-design-icons/CloudQuestion.vue`),
 };
 
 const props = withDefaults(
@@ -236,15 +244,6 @@ const componentInstance = computed(() =>
   defineAsyncComponent(icons[name.value])
 );
 
-/*
- defineAsyncComponent(
-  async () =>
-    await import(
-      `../../../node_modules/vue-material-design-icons/${name.value}.vue`
-    )
-);
-*/
-
 const realSize = computed(() => Number.parseInt(props.size ?? "18"));
 
 function toPascalCase(text: string) {