[style]: fix icons on compat matrix page

Signed-off-by: Dmitry Balashov <[email protected]>
hyperledger-iroha · Nov 22, 2023 · bf4ef1e · bf4ef1e
1 parent 067971e
commit bf4ef1e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/.vitepress/theme/components/CompatibilityMatrixTableIcon.vue b/.vitepress/theme/components/CompatibilityMatrixTableIcon.vue
@@ -6,9 +6,13 @@ import { computed } from 'vue'
 
 export type Status = 'ok' | 'failed' | 'no-data'
 
-const props = defineProps<{
-  status: Status
-}>()
+const props = withDefaults(
+  defineProps<{
+    status: Status
+    inline: boolean
+  }>(),
+  { inline: false },
+)
 
 // eslint-disable-next-line vue/return-in-computed-property
 const chosenComponent = computed(() => {
@@ -24,25 +28,27 @@ const chosenComponent = computed(() => {
 </script>
 
 <template>
-  <component
-    :is="chosenComponent"
-    :data-status="status"
-    class="compat-matrix-table-icon"
-  />
+  <component :is="chosenComponent" :data-status="status" :class="{ 'inline-icon': inline }" />
 </template>
 
-<style lang="scss">
-svg.compat-matrix-table-icon {
+<style lang="scss" scoped>
+svg {
   &[data-status='ok'] {
-    color: var(--vp-c-green);
+    color: var(--vp-c-green-1);
   }
 
   &[data-status='failed'] {
-    color: var(--vp-c-red);
+    color: var(--vp-c-red-1);
   }
 
   &[data-status='no-data'] {
-    color: var(--vp-c-yellow);
+    color: var(--vp-c-yellow-1);
   }
+
+}
+
+.inline-icon {
+  display: inline;
+  vertical-align: middle;
 }
 </style>
diff --git a/src/reference/compatibility-matrix.md b/src/reference/compatibility-matrix.md
@@ -9,9 +9,9 @@ The matrix consists of:
 - **Stories**: Represented in the first column of the matrix, these are directly fetched from the TestOps API.
 - **SDKs**: Each subsequent column represents an SDK, such as "Java/Kotlin", "JavaScript", "Swift", etc.
 - **Status Symbols**: The status of each story for an SDK is denoted with:
-    - <CompatibilityMatrixTableIcon status="ok" class="inline-block relative -top-0.5" /> indicating the story passed.
-    - <CompatibilityMatrixTableIcon status="failed" class="inline-block relative -top-0.5" /> indicating the story failed to pass.
-    - <CompatibilityMatrixTableIcon status="no-data" class="inline-block relative -top-0.5" /> indicating the data is missing.
+    - <CompatibilityMatrixTableIcon status="ok" inline /> indicating the story passed.
+    - <CompatibilityMatrixTableIcon status="failed" inline /> indicating the story failed to pass.
+    - <CompatibilityMatrixTableIcon status="no-data" inline /> indicating the data is missing.
 
 <CompatibilityMatrixTable />