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"
+      class="text-brand"
-      style="
+      style="margin-right: 0.075em;"
-        color: var(--logo-color-bg-white);
-        margin-right: 2px;"
       >
       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">
+<style lang="scss" scoped>
-  body {
+  .logo-component {
-    background: white;
+    svg {
-    margin: 0rem;
+      width: 1em;
-    min-height: 100vh;
+      height: 1em;
-    font-family: Futura, sans-serif;
+      margin-right: 0.125em;
+    }
+
+    span {
+      line-height: 1;
+    }
   }
 
-  #canvas {
+  .fill-brand {
-    position: absolute;
+    fill: $brand;
-    display: block;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  }
-
-  .iconcolor {
-    --icon-color: #27A7E7;
   }
 
   @keyframes blink {
     100%,
     0% {
-      fill: #fa9e7a;
+      fill: $brand2;
     }
     60% {
-      fill: #F36D3A;
+      fill: $brand2;
+      opacity: 0.8;
     }
   }
 

src/css/app.scss

@@ -1,17 +1,17 @@
 .text-brand {
-  color: #27A7E7 !important;
+  color: $brand !important;
 }
   
 .bg-brand {
-  background: #27A7E7 !important;
+  background: $brand !important;
 }
 
 .text-brand2 {
-  color: #F36D3A !important;
+  color: $brand2 !important;
 }
   
 .bg-brand2 {
-  background: #F36D3A !important;
+  background: $brand2 !important;
 }
 
 $base-width: 100;
@@ -20,6 +20,16 @@ $base-width: 100;
    $base-width: $base-width - 10;
 }
 
+body, html, #q-app {
+  font-family: $typography-font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  font-family: inherit;
+}
+
 :root {
   --body-width: 1200px;
   --logo-color-bg-white: grey;

src/css/quasar.variables.scss

@@ -24,14 +24,7 @@ $negative  : #C10015;
 $info      : #31CCEC;
 $warning   : #F2C037;
 
+$brand: #27A7E7;
+$brand2: #F36D3A;
+
 $typography-font-family : 'myFont', Roboto !default;
-
-body, html, #q-app {
-  font-family: $typography-font-family;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-  font-family: inherit;
-}