change logo

src/components/BaseLogo.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex row items-center no-wrap">
+  <div 
+    class="flex row items-center no-wrap logo-component"
+    >
     <svg
-      class="iconcolor q-mr-xs"
+      class="iconcolor"
       viewBox="0 0 8.4666662 8.4666662"
-      width="32"
-      height="32"
       version="1.1"
       id="svg1"
       xmlns="http://www.w3.org/2000/svg"
@@ -13,7 +13,8 @@
       <defs id="defs1" />
       <g id="layer1">
         <rect
-          style="fill:var(--icon-color);stroke-width:0.233149"
+          class="fill-brand"
+          style="stroke-width:0.233149"
           id="rect5"
           width="6.9885192"
           height="0.35581663"
@@ -22,7 +23,8 @@
           transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
         />
         <rect
-          style="fill:var(--icon-color);stroke-width:0.24961"
+          class="fill-brand"
+          style="stroke-width:0.24961"
           id="rect5-7"
           width="7.4819207"
           height="0.3809379"
@@ -31,28 +33,32 @@
           transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
         />
         <circle
-          style="fill:var(--icon-color);stroke-width:0.134869"
+          class="fill-brand"
+          style="stroke-width:0.134869"
           id="path5-8"
           cx="1.5875"
           cy="6.8791666"
           r="1.0583333"
         />
         <circle
-          style="fill:var(--icon-color);stroke-width:0.168586"
+          class="fill-brand"
+          style="stroke-width:0.168586"
           id="path5-8-5"
           cx="7.1437502"
           cy="7.1437502"
           r="1.3229166"
         />
         <circle
-          style="fill:var(--icon-color);stroke-width:0.118011"
+          class="fill-brand"
+          style="stroke-width:0.118011"
           id="path5-8-5-1"
           cx="1.4552083"
           cy="2.5135417"
           r="0.92604166"
         />
         <circle
-          style="fill:var(--icon-color);stroke-width:0.101152"
+          class="fill-brand"
+          style="stroke-width:0.101152"
           id="path5-8-5-1-7"
           cx="7.1437502"
           cy="1.3229166"
@@ -69,51 +75,46 @@
     </svg>
 
     <span
-      class="text-h4 text-brand"
-      style="
-        color: var(--logo-color-bg-white);
-        margin-right: 2px;"
+      class="text-brand"
+      style="margin-right: 0.075em;"
       >
       tg
     </span>
 
-    <span class="text-h4 text-brand2 text-bold q-pa-0">
+    <span class="text-brand2 text-bold">
       Crew
     </span>
-
   </div>
 </template>
 
 <script setup lang="ts">
 </script>
 
-<style lang="scss">
-  body {
-    background: white;
-    margin: 0rem;
-    min-height: 100vh;
-    font-family: Futura, sans-serif;
+<style lang="scss" scoped>
+  .logo-component {
+    svg {
+      width: 1em;
+      height: 1em;
+      margin-right: 0.125em;
+    }
+
+    span {
+      line-height: 1;
+    }
   }
 
-  #canvas {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  }
-
-  .iconcolor {
-    --icon-color: #27A7E7;
+  .fill-brand {
+    fill: $brand;
   }
 
   @keyframes blink {
     100%,
     0% {
-      fill: #fa9e7a;
+      fill: $brand2;
     }
     60% {
-      fill: #F36D3A;
+      fill: $brand2;
+      opacity: 0.8;
     }
   }