change color of flag

front/src/components/structure/message/Options.vue

@@ -64,7 +64,12 @@ const setFlag = (flag: string, loadingState: Ref<boolean>) => {
                 />
             </span>
             <span @click="setFlaggedFlag()">
-                <SvgLoader svg="flag-line" class="option" :loading="flaggedLoading" />
+                <SvgLoader
+                    svg="flag-line"
+                    class="option"
+                    :loading="flaggedLoading"
+                    :classes="hasFlag(props.msg?.flags, '\\Flagged') ? 'warn' : ''"
+                />
                 <!-- 
                 <SvgLoader
                     v-if="isSeenFc(props.msg?.flags)"

front/src/components/utils/SvgLoader.vue

@@ -6,11 +6,6 @@ const props = defineProps({
     isDisabled: Boolean,
     classes: String,
     loading: { type: Boolean, default: false },
-    color: {
-        type: String,
-        default: `brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1934%) hue-rotate(130deg)
-            brightness(114%) contrast(100%)`,
-    },
 });
 
 console.log(props.loading);
@@ -20,27 +15,25 @@ const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
 <template>
     <div class="mainSvg">
         <div class="lds-dual-ring" v-if="loading"></div>
-        <img
+        <img v-if="!loading" :disabled="props.isDisabled" :src="pathSvg()" :class="props.classes" />
-            v-if="!loading"
-            :disabled="props.isDisabled"
-            :src="pathSvg()"
-            :class="props.classes"
-            :style="{ filter: color }"
-        />
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .mainSvg {
     display: inherit;
 }
 
 img {
     padding: 1px;
-}
+    filter: var(--svg-primary-text);
+    &.danger {
+        filter: var(--svg-danger);
+    }
 
-img.danger {
+    &.warn {
-    filter: var(--svg-danger) !important;
+        filter: var(--svg-warn);
+    }
 }
 
 .lds-dual-ring {