improve css for a11y

components/member/Card.vue

@@ -10,43 +10,43 @@
         <tbody>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Référent :</th>
-                <td :class="{'table-success': isReferent, 'table-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
+                <td :class="{'list-group-item-success': isReferent, 'list-group-item-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
             </tr>
             <tr v-if="hash.status != 'NEWCOMER'">
                 <th scope="row">Qualité :</th>
                 <td :class="{
-                    'table-success': hash.quality.ratio >= 80,
-                    'table-warning': hash.quality.ratio < 80,
+                    'list-group-item-success': hash.quality.ratio >= 80,
+                    'list-group-item-warning': hash.quality.ratio < 80,
                 }">{{ Math.round(hash.quality.ratio*100)/100 }}</td>
             </tr>
             <tr v-if="hash.status != 'NEWCOMER'">
                 <th scope="row">Distance :</th>
                 <td :class="{
-                    'table-success': hash.distance.value.ratio >= 80,
-                    'table-danger': hash.distance.value.ratio < 80,
+                    'list-group-item-success': hash.distance.value.ratio >= 80,
+                    'list-group-item-danger': hash.distance.value.ratio < 80,
                 }">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td>
             </tr>
             <tr>
                 <th scope="row">Date limite d'adhésion :</th>
-                <td :class="'table-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td>
+                <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td>
             </tr>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Date avant de manquer de certifs :</th>
-                <td :class="'table-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td>
+                <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td>
             </tr>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Disponible pour certifier :</th>
                 <td :class="{
-                    'table-success': hash.minDatePassed,
-                    'table-danger': !hash.minDatePassed,
+                    'list-group-item-success': hash.minDatePassed,
+                    'list-group-item-danger': !hash.minDatePassed,
                 }">{{ hash.minDatePassed ? 'Oui' : 'Non'  }} <small v-if="!hash.minDatePassed">( > {{ hash.minDate | formatDate }} )</small></td>
             </tr>
             <tr v-if="hash.status == 'MEMBER'">
                 <th scope="row">Nbre de certifs disponibles :</th>
                 <td :class="{
-                    'table-success': hash.sent_certifications.length<=80,
-                    'table-warning': hash.sent_certifications.length>80,
-                    'table-danger': hash.sent_certifications.length>90,
+                    'list-group-item-success': hash.sent_certifications.length<=80,
+                    'list-group-item-warning': hash.sent_certifications.length>80,
+                    'list-group-item-danger': hash.sent_certifications.length>90,
                 }">{{ 100-hash.sent_certifications.length }}</td>
             </tr>
         </tbody>
@@ -70,6 +70,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.member th
-  text-align: right
+.member
+  th
+    text-align: right
 </style>
\ No newline at end of file

layouts/default.vue

@@ -38,7 +38,7 @@ export default {
 /* Define styles for the default root window element */
 :root {
   --text-primary-color: var(--dark);
-  --text-secondary-color: var(--secondary);
+  --text-secondary-color: #322959;
   --background-color-primary: var(--white);
   --background-color-secondary: #e9ecef;
   --element-size: 4rem;
@@ -48,7 +48,7 @@ export default {
 /* Define styles for the root window with dark - mode preference */
 :root.dark-theme {
   --text-primary-color: var(--white);
-  --text-secondary-color: var(--secondary);
+  --text-secondary-color: #173346;
   --background-color-primary: var(--dark);
   --background-color-secondary: hsl(210, 16%, 60%);
 }

pages/hash/_hash.vue

@@ -110,6 +110,7 @@ export default {
 };
 </script>
 
-<style lang="sass" scoped>
-
+<style lang="sass">
+  .dark-theme *[class*="list-group-item-"]
+    opacity: .9
 </style>