Update social icons and default locale

Kolektivo-Labs · Nov 3, 2023 · 616dd0a · 616dd0a
1 parent d4bac2e
commit 616dd0a
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 84 deletions.
diff --git a/src/assets/css/global/social-icons.css b/src/assets/css/global/social-icons.css
@@ -1,5 +1,5 @@
 .social-icon .logo {
-  fill: #fff;
+  fill: #001c52;
 
   @apply transition-all;
 }
@@ -15,7 +15,7 @@
 }
 
 .social-icon .bg {
-  fill: #0f172a; /* gray-900 */
+  fill: #fff; /* gray-900 */
 
   @apply transition-all;
 }

diff --git a/src/components/footer/Footer.vue b/src/components/footer/Footer.vue
@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-import IconDiscord from '@/components/icons/IconDiscord.vue';
 import IconGithub from '@/components/icons/IconGithub.vue';
 import IconLinkedin from '@/components/icons/IconLinkedin.vue';
 import IconMail from '@/components/icons/IconMail.vue';
-import IconMedium from '@/components/icons/IconMedium.vue';
 import IconTwitter from '@/components/icons/IconTwitter.vue';
-import IconYoutube from '@/components/icons/IconYoutube.vue';
 import { EXTERNAL_LINKS } from '@/constants/links';
+import IconTelegram from '../icons/IconTelegram.vue';
 
 import useNetwork from '@/composables/useNetwork';
 
 import AppLogo from '../images/AppLogo.vue';
-import { useThirdPartyServices } from '@/composables/useThirdPartyServices';
 
 const { networkSlug } = useNetwork();
-const { handleThirdPartyModalToggle } = useThirdPartyServices();
 </script>
 
 <template>
@@ -30,7 +26,7 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
             class="font-medium link"
             :to="{ name: 'home', params: { networkSlug } }"
           >
-            <AppLogo class="mb-4" />
+            <AppLogo class="mb-4" :isFooter="true" />
           </router-link>
 
           <div class="flex md:hidden flex-col gap-2">
@@ -77,24 +73,13 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
           </div>
 
           <div class="flex flex-wrap md:order-3 gap-3 md:gap-4">
-            <BalLink
-              :href="EXTERNAL_LINKS.Balancer.Home"
-              external
-              noStyle
-              class="group link link--external"
-            >
-              {{ $t('about') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
-            </BalLink>
-
             <BalLink
               :href="EXTERNAL_LINKS.Balancer.Docs"
               external
               noStyle
               class="group link link--external"
             >
               {{ $t('docs') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
             </BalLink>
 
             <BalLink
@@ -103,48 +88,34 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
               noStyle
               class="group link link--external"
             >
-              {{ $t('forum') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
-            </BalLink>
-
-            <BalLink
-              :href="EXTERNAL_LINKS.Balancer.Vote"
-              external
-              noStyle
-              class="group link link--external"
-            >
-              {{ $t('vote') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
+              {{ $t('tokens') }}
             </BalLink>
 
             <BalLink
-              :href="EXTERNAL_LINKS.Balancer.Grants"
+              :href="EXTERNAL_LINKS.Balancer.Forum"
               external
               noStyle
               class="group link link--external"
             >
-              {{ $t('grants') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
+              {{ $t('forum') }}
             </BalLink>
 
             <BalLink
-              :href="EXTERNAL_LINKS.Balancer.BugBounty"
+              :href="EXTERNAL_LINKS.Balancer.Forum"
               external
               noStyle
               class="group link link--external"
             >
-              {{ $t('bugBounty') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
+              {{ $t('support') }}
             </BalLink>
 
             <BalLink
-              :href="EXTERNAL_LINKS.Balancer.Analytics"
+              :href="EXTERNAL_LINKS.Balancer.Forum"
               external
               noStyle
               class="group link link--external"
             >
               {{ $t('analytics') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
             </BalLink>
           </div>
         </div>
@@ -159,26 +130,12 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
                 >
                   <IconTwitter />
                 </BalLink>
-                <BalLink
-                  :href="EXTERNAL_LINKS.Balancer.Social.Discord"
-                  external
-                  noStyle
-                >
-                  <IconDiscord />
-                </BalLink>
                 <BalLink
                   :href="EXTERNAL_LINKS.Balancer.Social.Medium"
                   external
                   noStyle
                 >
-                  <IconMedium />
-                </BalLink>
-                <BalLink
-                  :href="EXTERNAL_LINKS.Balancer.Social.Youtube"
-                  external
-                  noStyle
-                >
-                  <IconYoutube />
+                  <IconTelegram />
                 </BalLink>
                 <BalLink
                   :href="EXTERNAL_LINKS.Balancer.Social.Github"
@@ -223,19 +180,6 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
                 {{ $t('policies.cookiesPolicy') }}
               </router-link>
             </p>
-            <p>
-              <router-link class="policy" :to="{ name: 'risks' }">
-                {{ $t('policies.risks') }}
-              </router-link>
-            </p>
-            <p>
-              <span
-                class="cursor-pointer policy"
-                @click="handleThirdPartyModalToggle(true)"
-              >
-                {{ $t('policies.thirdPartyServices') }}
-              </span>
-            </p>
           </div>
         </div>
       </div>
@@ -245,7 +189,7 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
 
 <style scoped>
 footer {
-  @apply bg-gray-50 dark:bg-gray-900;
+  @apply bg-[#001C52] dark:bg-gray-900;
 }
 
 footer :deep(.logotype) {
@@ -255,7 +199,7 @@ footer :deep(.logotype) {
 }
 
 .link {
-  @apply text-black dark:text-white transition-colors flex items-center no-underline hover:text-purple-600;
+  @apply text-white dark:text-white transition-colors flex items-center no-underline hover:text-purple-600;
 }
 
 .link--external {
@@ -272,7 +216,7 @@ footer :deep(.logotype) {
 }
 
 .policy {
-  @apply text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-yellow-500;
+  @apply text-sm text-white dark:text-gray-400 hover:text-purple-600 dark:hover:text-yellow-500;
 }
 
 .arrow {

diff --git a/src/components/icons/IconTelegram.vue b/src/components/icons/IconTelegram.vue
@@ -0,0 +1,44 @@
+<template>
+  <svg
+    id="telegram"
+    class="social-icon logo-group"
+    viewBox="5.9822 -1.2567 31.924 32"
+    width="31.924px"
+    height="32px"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="telegramTitle"
+    role="img"
+  >
+    <title id="telegramTitle">Link to Balancer's Telegram</title>
+    <g
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      fill-rule="evenodd"
+      transform="matrix(1, 0, 0, 1, 5.962174892425594, -1.2566560506820679)"
+    >
+      <path
+        class="bg"
+        d="M15.981 0C7.167 0 .02 7.163.02 16c0 8.836 7.148 16 15.962 16 8.815 0 15.962-7.164 15.962-16 0-8.837-7.147-16-15.962-16z"
+        fill="#FFF"
+      />
+      <path
+        xmlns="http://www.w3.org/2000/svg"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        class="logo"
+        d="M 22.133 9.17 C 21.068 9.582 7.942 14.879 7.749 14.975 C 7.107 15.295 7.031 15.718 7.566 16.004 C 7.618 16.031 8.506 16.33 9.541 16.667 L 11.421 17.28 L 15.691 14.474 C 18.039 12.931 20.008 11.651 20.066 11.629 C 20.211 11.576 20.336 11.581 20.394 11.642 C 20.435 11.685 20.437 11.707 20.404 11.77 C 20.383 11.811 18.823 13.299 16.939 15.076 C 15.054 16.853 13.507 18.32 13.501 18.337 C 13.494 18.354 13.431 19.242 13.359 20.309 L 13.229 22.249 L 13.37 22.229 C 13.448 22.218 13.572 22.176 13.644 22.135 C 13.717 22.095 14.208 21.628 14.735 21.098 C 15.262 20.567 15.711 20.126 15.733 20.117 C 15.755 20.108 16.594 20.733 17.598 21.505 C 18.601 22.277 19.5 22.947 19.596 22.993 C 19.848 23.115 20.132 23.128 20.316 23.024 C 20.481 22.931 20.642 22.701 20.709 22.462 C 20.736 22.369 21.309 19.586 21.984 16.277 C 23.107 10.767 23.21 10.233 23.211 9.947 C 23.211 9.677 23.201 9.613 23.132 9.47 C 23.083 9.37 23 9.268 22.919 9.208 C 22.734 9.071 22.427 9.056 22.133 9.17 Z"
+        fill="#001C52"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.social-icon:hover .bg {
+  fill: #7289da;
+}
+</style>
diff --git a/src/components/images/AppLogo.vue b/src/components/images/AppLogo.vue
@@ -1,36 +1,36 @@
 <script lang="ts" setup>
-import useDarkMode from '@/composables/useDarkMode';
-import useTailwind from '@/composables/useTailwind';
-
 /**
  * TYPES
  */
 type Props = {
   forceDark?: boolean;
+  isFooter?: boolean;
 };
 
 /**
  * PROPS & EMITS
  */
 const props = withDefaults(defineProps<Props>(), {
   forceDark: false,
+  isFooter: false,
 });
 
 /**
  * COMPOSABLES
  */
-const { darkMode } = useDarkMode();
-const tailwind = useTailwind();
+// const { darkMode } = useDarkMode();
+// const tailwind = useTailwind();
 
 /**
  * COMPUTED
  */
-const fillColor = computed(() => {
-  if (props.forceDark) return tailwind.theme.colors.white;
-
-  return darkMode.value
-    ? tailwind.theme.colors.white
-    : tailwind.theme.colors.gray['900'];
+const pathFillColor = computed(() => {
+  if (props.isFooter) return '#ffffff'; // white color
+  return 'url(#paint0_linear_564_1779)'; // default color
+});
+const logoText = computed(() => {
+  if (props.isFooter) return 'regenerative finance'; // white color
+  return 'regenerative'; // default color
 });
 </script>
 
@@ -49,8 +49,23 @@ const fillColor = computed(() => {
       <title id="logoTitle">Balancer logo homepage link</title>
       <desc id="logoDesc">Balancer Logotype homepage link</desc>
       <path
-        d="M6.09193 1.78711C6.76483 1.78711 7.31032 2.33188 7.31032 3.0039V13.955C7.31032 14.6271 7.85581 15.1718 8.52871 15.1718C9.2016 15.1718 9.74709 14.6271 9.74709 13.955V5.43748C9.74709 4.76547 10.2926 4.22069 10.9655 4.22069C11.6384 4.22069 12.1839 4.76547 12.1839 5.43748V12.7382C12.1839 13.4103 12.7294 13.955 13.4023 13.955C14.0751 13.955 14.6206 13.4103 14.6206 12.7382V1.78711C14.6206 1.11509 15.1661 0.570312 15.839 0.570312C16.5119 0.570312 17.0574 1.11509 17.0574 1.78711V11.5215C17.0574 12.1935 17.6029 12.7382 18.2758 12.7382C18.9487 12.7382 19.4942 12.1935 19.4942 11.5215V9.08786C19.4942 8.41585 20.0397 7.87107 20.7126 7.87107C21.3341 7.87107 21.8469 8.33578 21.9216 8.93625C21.6818 14.7726 16.8683 19.4306 10.9655 19.4306C4.90941 19.4306 0 14.5276 0 8.47947C0 8.17382 0.0125377 7.8711 0.0371275 7.57179C0.17066 7.04449 0.648895 6.65428 1.21839 6.65428C1.89128 6.65428 2.43677 7.19905 2.43677 7.87107V11.5215C2.43677 12.1935 2.98226 12.7382 3.65516 12.7382C4.32806 12.7382 4.87355 12.1935 4.87355 11.5215V3.0039C4.87355 2.33188 5.41904 1.78711 6.09193 1.78711Z"
-        fill="url(#paint0_linear_564_1779)"
+        d="M6.09193 1.78711C6.76483 1.78711 7.31032 2.33188 7.31032
+      3.0039V13.955C7.31032 14.6271 7.85581 15.1718 8.52871 15.1718C9.2016
+      15.1718 9.74709 14.6271 9.74709 13.955V5.43748C9.74709 4.76547 10.2926
+      4.22069 10.9655 4.22069C11.6384 4.22069 12.1839 4.76547 12.1839
+      5.43748V12.7382C12.1839 13.4103 12.7294 13.955 13.4023 13.955C14.0751
+      13.955 14.6206 13.4103 14.6206 12.7382V1.78711C14.6206 1.11509 15.1661
+      0.570312 15.839 0.570312C16.5119 0.570312 17.0574 1.11509 17.0574
+      1.78711V11.5215C17.0574 12.1935 17.6029 12.7382 18.2758 12.7382C18.9487
+      12.7382 19.4942 12.1935 19.4942 11.5215V9.08786C19.4942 8.41585 20.0397
+      7.87107 20.7126 7.87107C21.3341 7.87107 21.8469 8.33578 21.9216
+      8.93625C21.6818 14.7726 16.8683 19.4306 10.9655 19.4306C4.90941 19.4306 0
+      14.5276 0 8.47947C0 8.17382 0.0125377 7.8711 0.0371275 7.57179C0.17066
+      7.04449 0.648895 6.65428 1.21839 6.65428C1.89128 6.65428 2.43677 7.19905
+      2.43677 7.87107V11.5215C2.43677 12.1935 2.98226 12.7382 3.65516
+      12.7382C4.32806 12.7382 4.87355 12.1935 4.87355 11.5215V3.0039C4.87355
+      2.33188 5.41904 1.78711 6.09193 1.78711Z"
+        :fill="pathFillColor"
       />
       <defs>
         <linearGradient
@@ -66,7 +81,7 @@ const fillColor = computed(() => {
         </linearGradient>
       </defs>
     </svg>
-    regenerative
+    {{ logoText }}
   </div>
 </template>
 

diff --git a/src/locales/default.json b/src/locales/default.json
@@ -1008,6 +1008,7 @@
   "strategy": "Strategy",
   "submit": "Submit",
   "summary": "Summary",
+  "support": "Support",
   "swap": "Swap",
   "swapDetails": "Swap details",
   "swapFee": "Swap fee",