feat: Improve visual cues

src/assets/forms.css

@@ -1,5 +1,6 @@
 :root {
   --control-width-max: 40rem;
+  accent-color: var(--primary-start);
 }
 
 input,

src/assets/main.css

@@ -33,7 +33,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
 }
 
 [hidden] {
@@ -60,7 +60,6 @@ nav a[href] {
 }
 
 .icon {
-  font-size: 0.7em;
   display: inline-block;
   padding: 0.2em 0.25rem;
 }

src/components/Icon.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const props = defineProps<{
+  type: string;
+  small?: boolean;
+}>();
+
+const size = ref(1);
+if (props.small) {
+  size.value = 0.75;
+}
+</script>
+
+<template>
+  <i
+    :class="['icon', `bi-${$props.type}`]"
+    :style="{ fontSize: `${size}em` }"
+  ></i>
+</template>

src/components/NavBar.vue

@@ -1,11 +1,38 @@
+<script setup lang="ts">
+import Icon from "./Icon.vue";
+</script>
+
 <template>
   <ul>
-    <li><router-link to="/">Home</router-link></li>
-    <li><router-link to="/how-to-use">How to use</router-link></li>
-    <li><router-link to="/start">Start</router-link></li>
-    <li><router-link to="/implementation">Implementation</router-link></li>
-    <li><router-link to="/rules">Rules</router-link></li>
-    <li><router-link to="/export">Export</router-link></li>
+    <li>
+      <router-link to="/"> <Icon type="house" />Home </router-link>
+    </li>
+    <li>
+      <router-link to="/how-to-use">
+        <Icon type="question-circle" />How to use
+      </router-link>
+    </li>
+    <li>
+      <router-link to="/start"> <Icon type="cloud-upload" />Start </router-link>
+    </li>
+    <li>
+      <router-link to="/implementation">
+        <Icon type="card-heading" />Implementation
+      </router-link>
+    </li>
+    <li>
+      <router-link
+        to="/rules/"
+        :class="{ active: $route.fullPath.includes('/rules/') }"
+      >
+        <Icon type="card-list" />Rules
+      </router-link>
+    </li>
+    <li>
+      <router-link to="/export">
+        <Icon type="cloud-download" />Export
+      </router-link>
+    </li>
   </ul>
 </template>
 
@@ -20,11 +47,16 @@ li {
 }
 a {
   text-decoration: none;
-  padding: 0.5em 1em;
+  border-top: 3px solid transparent;
+  padding: 0.25em 1em;
   display: inline-block;
 }
 a:hover,
 a:focus {
   text-decoration: underline;
 }
+a.router-link-active,
+a.active {
+  border-top-color: var(--primary-start);
+}
 </style>

src/views/Export.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from "../components/Icon.vue";
 import { ref } from "vue";
 import { useMainStore } from "../stores/useMain";
 
@@ -50,7 +51,11 @@ function downloadFile() {
         v-text="reportText"
       />
     </label>
-    <button @click="copyTextarea">Copy to clipboard</button>
-    <button @click="downloadFile">Download file</button>
+    <button @click="copyTextarea">
+      <Icon type="clipboard-plus" /> Copy to clipboard
+    </button>
+    <button @click="downloadFile">
+      <Icon type="file-earmark-arrow-down" /> Download file
+    </button>
   </template>
 </template>

src/views/HowToUse.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import Icon from "../components/Icon.vue";
+</script>
+
 <template>
   <h1>How to use</h1>
   <p>
@@ -69,31 +73,31 @@
         href="https://www.w3.org/WAI/standards-guidelines/act/rules/about/"
         target="_blank"
       >
-        About ACT Rules<i class="bi-box-arrow-up-right icon"></i>
+        About ACT Rules<Icon type="box-arrow-up-right" small />
       </a>
     </li>
     <li>
       <a
         href="https://act-rules.github.io/pages/implementations/overview/"
         target="_blank"
       >
-        ACT Rule implementations<i class="bi-box-arrow-up-right icon"></i>
+        ACT Rule implementations<Icon type="box-arrow-up-right" small />
       </a>
     </li>
     <li>
       <a
         href="https://act-rules.github.io/pages/implementations/mapping/"
         target="_blank"
       >
-        Mapping to ACT rules<i class="bi-box-arrow-up-right icon"></i>
+        Mapping to ACT rules<Icon type="box-arrow-up-right" small />
       </a>
     </li>
     <li>
       <a
         href="https://act-rules.github.io/pages/implementations/reporting/"
         target="_blank"
       >
-        Submit an implementation<i class="bi-box-arrow-up-right icon"></i>
+        Submit an implementation<Icon type="box-arrow-up-right" small />
       </a>
     </li>
   </ul>