Update About page to display correct Freetube logo based on currently…

… set theme (#5126) * adding ft-logo-full component and using it on about page * running lint-fix * convert unnecessary scss file to css * updating class names to be more descriptive * setting better default logo color variables for themes with single color logo
FreeTubeApp · Jun 18, 2024 · d42e2ad · d42e2ad
1 parent af96536
commit d42e2ad
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 8 deletions.
diff --git a/src/renderer/components/ft-logo-full/ft-logo-full.css b/src/renderer/components/ft-logo-full/ft-logo-full.css
@@ -0,0 +1,11 @@
+.primary-color {
+  fill: var(--logo-primary-color);
+}
+
+.secondary-color {
+  fill: var(--logo-secondary-color);
+}
+
+.tertiary-color {
+  fill: var(--logo-tertiary-color);
+}
diff --git a/src/renderer/components/ft-logo-full/ft-logo-full.vue b/src/renderer/components/ft-logo-full/ft-logo-full.vue
@@ -0,0 +1,66 @@
+<template>
+  <svg
+    class="ft-logo-full"
+    viewBox="0 0 640 200"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xml:space="preserve"
+  >
+    <g>
+      <path
+        class="tertiary-color"
+        d="M610.803,154.398c0.141,0.306 0.212,0.603 0.212,0.893c-0,0.53 -0.208,0.98 -0.623,1.35c-0.415,0.37 -0.89,0.555 -1.422,0.555c-0.361,-0 -0.69,-0.097 -0.988,-0.29c-0.297,-0.192 -0.533,-0.482 -0.705,-0.868l-1.058,-2.435l-7.616,-0l-1.082,2.435c-0.172,0.386 -0.411,0.676 -0.717,0.868c-0.305,0.193 -0.638,0.29 -0.999,0.29c-0.533,-0 -1.015,-0.185 -1.446,-0.555c-0.431,-0.37 -0.646,-0.82 -0.646,-1.35c0,-0.29 0.071,-0.587 0.212,-0.893l6.206,-13.07c0.203,-0.435 0.505,-0.768 0.905,-1.001c0.399,-0.233 0.842,-0.35 1.328,-0.35c0.47,0 0.909,0.117 1.316,0.35c0.408,0.233 0.713,0.566 0.917,1.001l6.206,13.07Zm-6.041,-4.123l-2.351,-5.378l-2.351,5.378l4.702,-0Z"
+      />
+      <path
+        class="tertiary-color"
+        d="M620.206,144.969c0.988,0 1.869,0.261 2.645,0.784c0.776,0.522 1.379,1.258 1.81,2.206c0.431,0.949 0.647,2.034 0.647,3.256c-0,1.222 -0.216,2.295 -0.647,3.22c-0.431,0.924 -1.03,1.635 -1.798,2.134c-0.768,0.498 -1.654,0.747 -2.657,0.747c-0.736,0 -1.414,-0.152 -2.033,-0.458c-0.619,-0.305 -1.101,-0.715 -1.446,-1.23l0,4.1c0,0.563 -0.188,1.013 -0.564,1.351c-0.376,0.337 -0.87,0.506 -1.481,0.506c-0.643,0 -1.16,-0.181 -1.551,-0.543c-0.392,-0.361 -0.588,-0.824 -0.588,-1.386l-0,-12.661c-0,-0.595 0.184,-1.073 0.552,-1.435c0.369,-0.362 0.866,-0.543 1.493,-0.543c0.596,0 1.077,0.161 1.446,0.483c0.368,0.321 0.576,0.747 0.623,1.278c0.329,-0.563 0.811,-1.005 1.445,-1.327c0.635,-0.321 1.336,-0.482 2.104,-0.482Zm-1.269,9.14c0.721,0 1.273,-0.249 1.657,-0.748c0.384,-0.498 0.576,-1.213 0.576,-2.146c0,-0.981 -0.196,-1.732 -0.588,-2.255c-0.391,-0.522 -0.948,-0.784 -1.669,-0.784c-0.72,0 -1.277,0.258 -1.669,0.772c-0.391,0.515 -0.587,1.254 -0.587,2.219c-0,0.948 0.196,1.676 0.587,2.182c0.392,0.507 0.956,0.76 1.693,0.76Z"
+      />
+      <path
+        class="tertiary-color"
+        d="M634.899,144.969c0.987,0 1.869,0.261 2.644,0.784c0.776,0.522 1.38,1.258 1.811,2.206c0.431,0.949 0.646,2.034 0.646,3.256c0,1.222 -0.215,2.295 -0.646,3.22c-0.431,0.924 -1.031,1.635 -1.799,2.134c-0.768,0.498 -1.653,0.747 -2.656,0.747c-0.737,0 -1.415,-0.152 -2.034,-0.458c-0.619,-0.305 -1.101,-0.715 -1.445,-1.23l-0,4.1c-0,0.563 -0.188,1.013 -0.565,1.351c-0.376,0.337 -0.869,0.506 -1.481,0.506c-0.642,0 -1.159,-0.181 -1.551,-0.543c-0.392,-0.361 -0.588,-0.824 -0.588,-1.386l0,-12.661c0,-0.595 0.184,-1.073 0.553,-1.435c0.368,-0.362 0.866,-0.543 1.492,-0.543c0.596,0 1.078,0.161 1.446,0.483c0.368,0.321 0.576,0.747 0.623,1.278c0.329,-0.563 0.811,-1.005 1.446,-1.327c0.635,-0.321 1.336,-0.482 2.104,-0.482Zm-1.27,9.14c0.721,0 1.274,-0.249 1.658,-0.748c0.384,-0.498 0.576,-1.213 0.576,-2.146c-0,-0.981 -0.196,-1.732 -0.588,-2.255c-0.392,-0.522 -0.948,-0.784 -1.669,-0.784c-0.721,0 -1.277,0.258 -1.669,0.772c-0.392,0.515 -0.588,1.254 -0.588,2.219c0,0.948 0.196,1.676 0.588,2.182c0.392,0.507 0.956,0.76 1.692,0.76Z"
+      />
+    </g>
+    <path
+      class="primary-color"
+      d="M242.417,136.617c-1.853,0 -3.339,-0.575 -4.457,-1.725c-1.118,-1.15 -1.677,-2.652 -1.677,-4.504l-0,-56.063c-0,-1.853 0.527,-3.29 1.582,-4.312c1.054,-1.023 2.507,-1.534 4.36,-1.534l33.638,0c3.897,0 5.845,1.661 5.845,4.984c-0,3.258 -1.948,4.887 -5.845,4.887l-27.409,0l-0,18.4l25.492,0c3.897,0 5.846,1.661 5.846,4.983c-0,3.259 -1.949,4.888 -5.846,4.888l-25.492,0l-0,23.767c-0,1.852 -0.543,3.354 -1.629,4.504c-1.086,1.15 -2.556,1.725 -4.408,1.725Z"
+    />
+    <path
+      class="primary-color"
+      d="M309.673,88.221c1.503,-0.128 2.688,0.223 3.555,1.054c0.868,0.831 1.301,2.076 1.301,3.737c-0,1.725 -0.376,3.003 -1.127,3.834c-0.752,0.83 -2.11,1.373 -4.076,1.629l-2.601,0.287c-3.411,0.384 -5.911,1.662 -7.501,3.834c-1.59,2.172 -2.385,4.887 -2.385,8.146l-0,20.125c-0,1.852 -0.52,3.274 -1.561,4.264c-1.04,0.991 -2.341,1.486 -3.902,1.486c-1.561,0 -2.847,-0.495 -3.858,-1.486c-1.012,-0.99 -1.518,-2.412 -1.518,-4.264l-0,-37.088c-0,-1.789 0.506,-3.162 1.518,-4.121c1.011,-0.958 2.269,-1.437 3.772,-1.437c1.503,0 2.717,0.463 3.642,1.389c0.925,0.927 1.387,2.252 1.387,3.977l-0,3.834c1.098,-2.811 2.732,-4.984 4.899,-6.517c2.168,-1.533 4.582,-2.396 7.241,-2.587l1.214,-0.096Z"
+    />
+    <path
+      class="primary-color"
+      d="M360.691,123.2c1.136,0 2.054,0.415 2.756,1.246c0.701,0.83 1.052,1.948 1.052,3.354c-0,1.981 -1.236,3.642 -3.708,4.983c-2.272,1.214 -4.844,2.189 -7.717,2.923c-2.873,0.735 -5.612,1.102 -8.218,1.102c-7.884,0 -14.131,-2.172 -18.741,-6.516c-4.61,-4.345 -6.915,-10.286 -6.915,-17.825c-0,-4.792 1.002,-9.041 3.007,-12.746c2.004,-3.706 4.827,-6.581 8.468,-8.625c3.641,-2.045 7.767,-3.067 12.377,-3.067c4.41,0 8.252,0.927 11.525,2.779c3.274,1.853 5.813,4.473 7.617,7.859c1.804,3.386 2.706,7.379 2.706,11.979c-0,2.747 -1.269,4.121 -3.808,4.121l-29.565,0c0.401,4.408 1.704,7.65 3.909,9.727c2.204,2.076 5.411,3.114 9.621,3.114c2.138,0 4.025,-0.255 5.662,-0.766c1.637,-0.511 3.491,-1.214 5.562,-2.109c2.005,-1.022 3.474,-1.533 4.41,-1.533Zm-17.338,-26.738c-3.408,0 -6.13,1.023 -8.168,3.067c-2.038,2.045 -3.257,4.983 -3.658,8.817l22.65,0c-0.134,-3.897 -1.136,-6.852 -3.007,-8.865c-1.871,-2.012 -4.477,-3.019 -7.817,-3.019Z"
+    />
+    <path
+      class="primary-color"
+      d="M415.049,123.2c1.136,0 2.055,0.415 2.756,1.246c0.702,0.83 1.052,1.948 1.052,3.354c-0,1.981 -1.236,3.642 -3.708,4.983c-2.271,1.214 -4.844,2.189 -7.717,2.923c-2.872,0.735 -5.612,1.102 -8.218,1.102c-7.883,0 -14.13,-2.172 -18.741,-6.516c-4.61,-4.345 -6.915,-10.286 -6.915,-17.825c-0,-4.792 1.003,-9.041 3.007,-12.746c2.004,-3.706 4.827,-6.581 8.468,-8.625c3.642,-2.045 7.767,-3.067 12.378,-3.067c4.409,0 8.251,0.927 11.525,2.779c3.274,1.853 5.812,4.473 7.616,7.859c1.804,3.386 2.706,7.379 2.706,11.979c-0,2.747 -1.269,4.121 -3.808,4.121l-29.565,0c0.401,4.408 1.704,7.65 3.909,9.727c2.205,2.076 5.412,3.114 9.621,3.114c2.138,0 4.025,-0.255 5.662,-0.766c1.637,-0.511 3.491,-1.214 5.562,-2.109c2.005,-1.022 3.475,-1.533 4.41,-1.533Zm-17.338,-26.738c-3.407,0 -6.13,1.023 -8.168,3.067c-2.037,2.045 -3.257,4.983 -3.658,8.817l22.65,0c-0.134,-3.897 -1.136,-6.852 -3.007,-8.865c-1.87,-2.012 -4.476,-3.019 -7.817,-3.019Z"
+    />
+    <path
+      class="secondary-color"
+      d="M452.658,136.617c-2.137,0 -4.861,-0.672 -6.173,-2.016c-1.313,-1.343 -1.969,-3.135 -1.969,-5.374l-0,-48.56l-13.833,0c-4.517,0 -6.775,-2.047 -6.775,-6.142c-0,-4.03 2.258,-6.046 6.775,-6.046l43.949,0c4.517,0 6.776,2.016 6.776,6.046c-0,4.095 -2.259,6.142 -6.776,6.142l-13.833,0l0,48.56c0,2.239 -0.64,4.031 -1.922,5.374c-1.282,1.344 -4.022,2.016 -6.219,2.016Z"
+    />
+    <path
+      class="secondary-color"
+      d="M515.741,88.529c2.236,0 4.009,0.607 5.319,1.821c1.31,1.214 1.964,2.875 1.964,4.983l-0,35.171c-0,1.981 -0.686,3.578 -2.06,4.792c-1.374,1.214 -3.147,1.821 -5.319,1.821c-2.044,0 -3.673,-0.575 -4.887,-1.725c-1.214,-1.15 -1.821,-2.684 -1.821,-4.6l-0,-0.959c-1.47,2.428 -3.402,4.281 -5.798,5.559c-2.396,1.277 -5.095,1.916 -8.098,1.916c-5.942,0 -10.366,-1.645 -13.273,-4.935c-2.907,-3.29 -4.36,-8.258 -4.36,-14.902l-0,-22.138c-0,-2.108 0.655,-3.769 1.964,-4.983c1.31,-1.214 3.083,-1.821 5.319,-1.821c2.236,0 3.993,0.607 5.271,1.821c1.278,1.214 1.917,2.875 1.917,4.983l-0,22.425c-0,2.811 0.591,4.888 1.772,6.23c1.182,1.341 2.987,2.012 5.415,2.012c2.811,0 5.095,-0.958 6.852,-2.875c1.757,-1.917 2.636,-4.44 2.636,-7.571l-0,-20.221c-0,-2.108 0.638,-3.769 1.916,-4.983c1.278,-1.214 3.035,-1.821 5.271,-1.821Z"
+    />
+    <path
+      class="secondary-color"
+      d="M563.858,88.338c4.171,-0.001 7.853,0.99 11.046,2.97c3.193,1.981 5.686,4.808 7.478,8.482c1.792,3.673 2.688,7.938 2.688,12.793c-0,4.856 -0.896,9.152 -2.688,12.89c-1.792,3.737 -4.301,6.644 -7.527,8.721c-3.226,2.076 -6.891,3.114 -10.997,3.114c-3.324,-0 -6.321,-0.686 -8.993,-2.06c-2.672,-1.374 -4.725,-3.274 -6.159,-5.702l-0,0.766c-0,2.045 -0.651,3.69 -1.955,4.936c-1.303,1.246 -3.063,1.869 -5.278,1.869c-2.216,-0 -3.992,-0.623 -5.328,-1.869c-1.336,-1.246 -2.004,-2.891 -2.004,-4.936l0,-55.2c0,-1.98 0.701,-3.577 2.102,-4.791c1.401,-1.214 3.242,-1.821 5.523,-1.821c2.15,-0 3.877,0.575 5.181,1.725c1.303,1.15 1.955,2.683 1.955,4.6l-0,20.987c1.433,-2.363 3.47,-4.2 6.109,-5.51c2.64,-1.31 5.588,-1.965 8.847,-1.965l-0,0.001Zm-4.301,37.95c3.454,-0 6.126,-1.197 8.016,-3.593c1.889,-2.396 2.834,-5.766 2.834,-10.111c0,-4.28 -0.945,-7.555 -2.834,-9.823c-1.89,-2.268 -4.562,-3.402 -8.016,-3.402c-3.454,0 -6.126,1.166 -8.016,3.498c-1.89,2.332 -2.835,5.638 -2.835,9.919c-0,4.344 0.945,7.683 2.835,10.015c1.89,2.332 4.562,3.498 8.016,3.498l0,-0.001Z"
+    />
+    <path
+      class="secondary-color"
+      d="M635.013,122.55c1.385,0 2.511,0.511 3.377,1.533c0.865,1.023 1.298,2.332 1.298,3.929c-0,1.087 -0.346,2.093 -1.039,3.019c-0.692,0.927 -1.662,1.709 -2.909,2.348c-2.354,1.15 -5.09,2.093 -8.207,2.827c-3.117,0.735 -5.991,1.102 -8.623,1.102c-5.541,0 -10.372,-0.99 -14.493,-2.971c-4.121,-1.98 -7.289,-4.807 -9.506,-8.481c-2.216,-3.673 -3.324,-8.002 -3.324,-12.985c0,-4.792 1.073,-9.04 3.221,-12.746c2.147,-3.706 5.125,-6.597 8.934,-8.673c3.809,-2.076 8.138,-3.115 12.986,-3.115c4.641,0 8.71,0.943 12.208,2.828c3.497,1.884 6.216,4.568 8.155,8.05c1.939,3.482 2.909,7.554 2.909,12.218c0,1.406 -0.364,2.476 -1.091,3.211c-0.727,0.734 -1.749,1.102 -3.065,1.102l-29.089,0c0.485,3.769 1.731,6.501 3.74,8.194c2.009,1.693 4.883,2.539 8.623,2.539c2.009,0 3.809,-0.223 5.402,-0.671c1.593,-0.447 3.359,-1.054 5.299,-1.821c0.969,-0.383 1.904,-0.718 2.805,-1.006c0.9,-0.287 1.697,-0.431 2.389,-0.431Zm-17.869,-24.246c-2.978,-0 -5.368,0.879 -7.168,2.636c-1.801,1.757 -2.875,4.296 -3.221,7.618l20.051,-0c-0.208,-3.386 -1.126,-5.941 -2.753,-7.666c-1.628,-1.725 -3.931,-2.588 -6.909,-2.588Z"
+    />
+    <path
+      class="primary-color"
+      d="M39.222,0c7.499,0 13.578,6.079 13.578,13.578l0,186.422l-18.639,0c-9.06,0 -17.749,-3.599 -24.155,-10.006c-6.407,-6.406 -10.006,-15.095 -10.006,-24.155l0,-152.261c0,-7.499 6.079,-13.578 13.578,-13.578l25.644,0Zm160.778,-0l0,16.174c0,9.713 -3.859,19.029 -10.728,25.898c-6.869,6.869 -16.185,10.728 -25.898,10.728l-88.33,0c-7.425,0 -13.444,-6.019 -13.444,-13.444l0,-25.912c0,-7.425 6.019,-13.444 13.444,-13.444l124.956,-0Z"
+    />
+    <path
+      class="secondary-color"
+      d="M143.486,97.784c1.755,0.87 2.864,2.658 2.864,4.616c0,1.958 -1.109,3.746 -2.864,4.616l-74.185,36.767c-1.653,0.819 -3.612,0.726 -5.179,-0.246c-1.568,-0.973 -2.522,-2.687 -2.522,-4.532l0,-73.21c0,-1.845 0.954,-3.559 2.522,-4.532c1.567,-0.972 3.526,-1.065 5.179,-0.246l74.185,36.767Z"
+    />
+  </svg>
+</template>
+
+<style scoped src="./ft-logo-full.css" />
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
@@ -67,12 +67,27 @@
 
 }
 
+.catppuccinMocha,
+.dracula,
+.hotPink,
+.nordic,
+.pastelPink,
+.solarizedDark,
+.solarizedLight {
+  --logo-primary-color: var(--primary-text-color);
+  --logo-secondary-color: var(--primary-text-color);
+  --logo-tertiary-color: var(--primary-text-color);
+}
+
 .system[data-system-theme*='light'], .light,
 .system[data-system-theme*='dark'], .dark,
 .black,
 .gray {
   --logo-icon: url("../../_icons/iconColorSmall.svg");
   --logo-text: url("../../_icons/textColorSmall.svg");
+  --logo-primary-color: #f33;
+  --logo-secondary-color: #29abe1;
+  --logo-tertiary-color: #000;
 }
 
 .system[data-system-theme*='dark'], .dark,

diff --git a/src/renderer/views/About/About.css b/src/renderer/views/About/About.css
@@ -8,7 +8,7 @@
   text-align: center;
 }
 
-.logo {
+.ft-logo-full {
   max-inline-size: 100%;
   inline-size: 500px;
 }

diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
@@ -2,11 +2,13 @@ import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import packageDetails from '../../../../package.json'
 import { ABOUT_BITCOIN_ADDRESS, ABOUT_MONERO_ADDRESS } from '../../../constants'
+import FtLogoFull from '../../components/ft-logo-full/ft-logo-full.vue'
 
 export default defineComponent({
   name: 'About',
   components: {
-    'ft-card': FtCard
+    'ft-card': FtCard,
+    'ft-logo-full': FtLogoFull,
   },
   data: function () {
     return {
@@ -82,7 +84,7 @@ export default defineComponent({
           title: `${this.$t('About.Donate')} - XMR`,
           content: `<a href="monero:${ABOUT_MONERO_ADDRESS}">${ABOUT_MONERO_ADDRESS}</a>`
         }
-      ]
+      ],
     }
   }
 })
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
@@ -5,11 +5,7 @@
         {{ $t("About.About") }}
       </h1>
       <section class="brand">
-        <img
-          src="../../../../_icons/logoColor.svg"
-          class="logo"
-          alt=""
-        >
+        <ft-logo-full />
         <div class="version">
           {{ versionNumber }} {{ $t("About.Beta") }}
         </div>