Fix some more a11y issues with grey text

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

js/src/common.scss

@@ -32,7 +32,6 @@ $color-black: #000;
 
 .mention {
   background: rgba($color-black, 0.1);
-  color: rgba($color-black, 0.6);
   font-size: 0.9rem;
   font-weight: bold;
   border-radius: 5px;

js/src/components/Account/ActorCard.vue

@@ -12,7 +12,7 @@
         <p>
           {{ actor.name || `@${usernameWithDomain(actor)}` }}
         </p>
-        <p class="has-text-grey" v-if="actor.name">
+        <p class="has-text-grey-dark" v-if="actor.name">
           @{{ usernameWithDomain(actor) }}
         </p>
         <div

js/src/components/Comment/Comment.vue

@@ -67,7 +67,8 @@
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
-              <b-icon icon="chevron-down" /><span>{{
+              <b-icon icon="chevron-down" class="reply-btn" />
+              <span class="reply-btn">{{
                 $tc("View a reply", comment.totalReplies, {
                   totalReplies: comment.totalReplies,
                 })
@@ -77,8 +78,8 @@
               v-else-if="comment.totalReplies && showReplies"
               @click="showReplies = false"
             >
-              <b-icon icon="chevron-up" />
-              <span>{{ $t("Hide replies") }}</span>
+              <b-icon icon="chevron-up" class="reply-btn" />
+              <span class="reply-btn">{{ $t("Hide replies") }}</span>
             </p>
           </div>
         </div>
@@ -465,7 +466,7 @@ a.comment-link {
 
   & > p > span {
     font-weight: bold;
-    color: $primary;
+    color: $violet-2;
   }
 }
 

js/src/views/Event/Event.vue

@@ -315,7 +315,9 @@
                         >
                           {{ physicalAddress.poiInfos.name }}
                         </p>
-                        <p>{{ physicalAddress.poiInfos.alternativeName }}</p>
+                        <p class="has-text-grey-dark">
+                          {{ physicalAddress.poiInfos.alternativeName }}
+                        </p>
                       </address>
                     </div>
                     <span
@@ -1424,7 +1426,6 @@ div.sidebar {
           }
 
           :not(.addressDescription) {
-            color: rgba(46, 62, 72, 0.6);
             flex: 1;
             min-width: 100%;
           }