refactor(ui): better color names

components/firebase/Email.vue

@@ -27,7 +27,7 @@
     </div>
     <div v-else slot="body" class="flex flex-col items-center">
       <div class="flex justify-center max-w-md p-4 items-center flex-col">
-        <i class="material-icons text-acColor" style="font-size: 64px">
+        <i class="material-icons text-accent" style="font-size: 64px">
           verified
         </i>
         <h3 class="font-bold my-2 text-center text-lg">

components/firebase/Feeds.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="fb.currentFeeds.length !== 0"
-    class="divide-y virtual-list divide-dashed divide-brdColor"
+    class="divide-y virtual-list divide-dashed divide-divider"
   >
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
       <div data-test="list-item" class="show-on-large-screen">

components/firebase/Inputform.vue

@@ -11,7 +11,7 @@
         @keyup.enter="formPost"
       />
     </div>
-    <div class="border-b show-on-large-screen border-brdColor">
+    <div class="border-b show-on-large-screen border-divider">
       <input
         v-model="label"
         :aria-label="$t('label')"