UI enhancements

imac-web · Mar 29, 2023 · 52fbafd · 52fbafd
1 parent b77cba4
commit 52fbafd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/templates/components/molecules/Card/CardBack.vue b/src/templates/components/molecules/Card/CardBack.vue
@@ -5,7 +5,7 @@
       <table class="m-card-back__content-table">
         <tr v-for="(data, i) in data" :key="`detail-${i}`">
           <td v-if="data.label && data.score >= 0">{{ data.label }}</td>
-          <td v-if="data.score >= 0" class="score-value">{{ data.score }}</td>
+          <td v-if="data.score >= 0" class="score-value">{{ data.score }} <span>/ 10</span></td>
         </tr>
       </table>
     </div>
@@ -93,7 +93,7 @@ export default defineComponent({
         90deg,
         rgba(2, 0, 36, 1) 0%,
         rgba(37, 198, 133, 0) 0%,
-        rgba(37, 198, 133, 0.9598433123249299) 50%,
+        rgba(130, 130, 130, 0.9598433123249299) 50%,
         rgba(37, 198, 133, 0) 100%
       );
     }
@@ -119,7 +119,7 @@ export default defineComponent({
             90deg,
             rgba(2, 0, 36, 1) 0%,
             rgba(37, 198, 133, 0) 0%,
-            rgba(37, 198, 133, 0.9598433123249299) 50%,
+            rgba(130, 130, 130, 0.9598433123249299) 50%,
             rgba(37, 198, 133, 0) 100%
           );
         }
@@ -141,6 +141,10 @@ export default defineComponent({
 
       & .score-value {
         font-weight: bold;
+
+        & > span {
+          color: var(--color-haven_grey);
+        }
       }
     }
   }

diff --git a/src/templates/components/molecules/Card/CardFront.vue b/src/templates/components/molecules/Card/CardFront.vue
@@ -10,7 +10,9 @@
           :progress="score * 10"
           :angle="90"
           :size="80"
-          emptyColor="transparent"
+          emptyColor="rgba(255, 255, 255, 0.1)"
+          :thickness="8"
+          :empty-thickness="8"
           :legend="score"
           :legend-formatter="myFormatter"
           color="#25c685"
@@ -53,7 +55,7 @@ export default defineComponent({
 
     const myFormatter = (computed) => {
       return `
-        <span style=" font-size: 2.5rem;">${score.value}</span>
+        <span style=" font-size: 2.5rem; font-weight: bold">${score.value}</span>
       `;
     };