Kolektivo-Labs · Nashmod · Dec 5, 2023 · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/assets/css/global/social-icons.css b/src/assets/css/global/social-icons.css
@@ -1,7 +1,5 @@
 .social-icon .logo {
-  fill: #fff;
-
-  @apply transition-all;
+  @apply transition-all fill-primary-refi;
 }
 
 .dark .social-icon .logo {
@@ -15,7 +13,7 @@
 }
 
 .social-icon .bg {
-  fill: #0f172a; /* gray-900 */
+  fill: #fff;
 
   @apply transition-all;
 }

diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
@@ -88,13 +88,13 @@
   }
 
   .link {
-    @apply text-blue-600 hover:text-purple-600 focus:text-purple-600 dark:text-blue-400 dark:hover:text-yellow-500
-      dark:focus:text-yellow-500 hover:underline focus:underline transition-all;
+    @apply text-blue-600 hover:text-accent-refi focus:text-accent-refi dark:text-blue-400 dark:hover:text-yellow-500
+      dark:focus:text-yellow-500 transition-all;
   }
 
   .link-black {
-    @apply text-gray-900 hover:text-purple-600 focus:text-purple-600 dark:text-gray-100 dark:hover:text-yellow-500
-      dark:focus:text-yellow-500 hover:underline focus:underline transition-all;
+    @apply text-gray-900 hover:text-accent-refi focus:text-accent-refi dark:text-gray-100 dark:hover:text-yellow-500
+      dark:focus:text-yellow-500 transition-all;
   }
 
   .text-shadow {

diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue
@@ -3,28 +3,28 @@
 import BalLoadingIcon from '../BalLoadingIcon/BalLoadingIcon.vue';
 
 import {
-  hoverFrom,
-  hoverTo,
-  gradientFrom,
-  gradientTo,
-  loadingFrom,
-  loadingTo,
+  background,
   backgroundFlat,
+  border,
+  darkBackground,
   darkBackgroundFlat,
+  darkBorder,
+  darkFocusBorder,
+  darkHoverBackground,
   darkHoverBackgroundFlat,
-  hoverBackgroundFlat,
+  darkHoverBorder,
+  darkText,
+  gradientFrom,
+  gradientTo,
   hoverBackground,
+  hoverBackgroundFlat,
+  hoverFrom,
+  hoverTo,
   loadingBackground,
   loadingDarkBackground,
-  background,
-  darkHoverBackground,
-  darkBackground,
-  border,
-  darkBorder,
-  darkHoverBorder,
+  loadingFrom,
+  loadingTo,
   text,
-  darkText,
-  darkFocusBorder,
 } from 'button-options';
 
 type Props = {
@@ -137,7 +137,7 @@ const bgColorClasses = computed(() => {
   else if (props.outline) return 'bg-transparent';
   else if (props.flat) return bgFlatClasses.value;
   else if (props.color === 'white') {
-    return 'bg-gray-50 hover:bg-white dark:bg-gray-800';
+    return 'bg-white hover:bg-transparent dark:bg-gray-800';
   } else {
     if (props.disabled) {
       return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;

diff --git a/src/components/_global/BalRadio/BalRadio.vue b/src/components/_global/BalRadio/BalRadio.vue
@@ -125,22 +125,17 @@ export default defineComponent({
 }
 
 .bal-radio-input:focus {
-  @apply border-2 border-blue-500 dark:border-blue-400;
+  @apply border-2 border-refi-text dark:border-blue-400;
 }
 
 .bal-radio-input:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentcolor;
-  background-size: 100% 100%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.78905 0.207686C8.70347 0.240631 7.83282 1.2478 6.29239 3.09585L3.92711 5.93341L2.62331 4.63541C1.22416 3.24253 1.13839 3.17924 0.748289 3.25239C0.549318 3.28971 0.31239 3.47347 0.211318 3.66883C0.121694 3.84216 0.120827 4.16145 0.209585 4.3292C0.247397 4.40062 0.956351 5.13352 1.78509 5.95784C3.21036 7.37549 3.30605 7.46076 3.55322 7.5329C3.69692 7.57484 3.87207 7.60918 3.94245 7.60918C4.13608 7.60918 4.49299 7.48972 4.66493 7.36732C4.80954 7.26435 9.49868 1.68137 9.74378 1.32028C9.96594 0.992957 9.86655 0.546168 9.5133 0.284636C9.36369 0.173876 8.9822 0.133334 8.78905 0.207686Z' fill='%230468BE'/%3E%3C/svg%3E");
+  border-color: theme(colors.refi-text);
+  background-size: 40% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-.bal-radio-input:checked:focus {
-  @apply border-transparent;
-}
-
 .bal-radio-label {
   @apply ml-2 flex-1;
 }

diff --git a/src/components/_global/icons/brands/LinkedinIcon.vue b/src/components/_global/icons/brands/LinkedinIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    fill="#000000"
+    width="800px"
+    height="800px"
+    viewBox="-2 -2 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMinYMin"
+    class="jam jam-linkedin"
+  >
+    <path
+      d="M19.959 11.719v7.379h-4.278v-6.885c0-1.73-.619-2.91-2.167-2.91-1.182 0-1.886.796-2.195 1.565-.113.275-.142.658-.142 1.043v7.187h-4.28s.058-11.66 0-12.869h4.28v1.824l-.028.042h.028v-.042c.568-.875 1.583-2.126 3.856-2.126 2.815 0 4.926 1.84 4.926 5.792zM2.421.026C.958.026 0 .986 0 2.249c0 1.235.93 2.224 2.365 2.224h.028c1.493 0 2.42-.989 2.42-2.224C4.787.986 3.887.026 2.422.026zM.254 19.098h4.278V6.229H.254v12.869z"
+    />
+  </svg>
+</template>
diff --git a/src/components/_global/icons/brands/TelegramIcon.vue b/src/components/_global/icons/brands/TelegramIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    id="Layer_1"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 300 300"
+    style="enable-background: new 0 0 300 300"
+    xml:space="preserve"
+  >
+    <g id="XMLID_496_">
+      <path
+        id="XMLID_497_"
+        d="M5.299,144.645l69.126,25.8l26.756,86.047c1.712,5.511,8.451,7.548,12.924,3.891l38.532-31.412
+          c4.039-3.291,9.792-3.455,14.013-0.391l69.498,50.457c4.785,3.478,11.564,0.856,12.764-4.926L299.823,29.22
+          c1.31-6.316-4.896-11.585-10.91-9.259L5.218,129.402C-1.783,132.102-1.722,142.014,5.299,144.645z M96.869,156.711l135.098-83.207
+          c2.428-1.491,4.926,1.792,2.841,3.726L123.313,180.87c-3.919,3.648-6.447,8.53-7.163,13.829l-3.798,28.146
+          c-0.503,3.758-5.782,4.131-6.819,0.494l-14.607-51.325C89.253,166.16,91.691,159.907,96.869,156.711z"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/src/components/footer/Footer.vue b/src/components/footer/Footer.vue
@@ -1,21 +1,17 @@
 <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 IconTelegram from '@/components/icons/IconTelegram.vue';
 import IconTwitter from '@/components/icons/IconTwitter.vue';
-import IconYoutube from '@/components/icons/IconYoutube.vue';
 import { EXTERNAL_LINKS } from '@/constants/links';
 
 import useNetwork from '@/composables/useNetwork';
 
-import AppLogo from '../images/AppLogo.vue';
-import { useThirdPartyServices } from '@/composables/useThirdPartyServices';
 import { useAppzi } from '@/composables/useAppzi';
+import AppLogo from '../images/AppLogo.vue';
 
 const { networkSlug } = useNetwork();
-const { handleThirdPartyModalToggle } = useThirdPartyServices();
 const { openNpsModal } = useAppzi();
 </script>
 
@@ -32,7 +28,15 @@ const { openNpsModal } = useAppzi();
             class="font-medium link"
             :to="{ name: 'home', params: { networkSlug } }"
           >
-            <AppLogo class="mb-4" />
+            <AppLogo
+              class="mb-4"
+              fillColor="#ffffff"
+              hoverFillColor="#FA7369"
+              color="#ffffff"
+              hoverColor="#FA7369"
+              :text="true"
+              size="large"
+            />
           </router-link>
 
           <div class="flex md:hidden flex-col gap-2">
@@ -79,24 +83,13 @@ const { openNpsModal } = useAppzi();
           </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
@@ -105,48 +98,34 @@ const { openNpsModal } = useAppzi();
               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.Placeholder"
               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.Placeholder"
               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.Placeholder"
               external
               noStyle
               class="group link link--external"
             >
               {{ $t('analytics') }}
-              <BalIcon name="arrow-up-right" size="sm" class="arrow" />
             </BalLink>
           </div>
         </div>
@@ -161,26 +140,12 @@ const { openNpsModal } = useAppzi();
                 >
                   <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"
@@ -228,19 +193,6 @@ const { openNpsModal } = useAppzi();
                 {{ $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>
@@ -250,7 +202,7 @@ const { openNpsModal } = useAppzi();
 
 <style scoped>
 footer {
-  @apply bg-gray-50 dark:bg-gray-900;
+  @apply bg-primary-refi dark:bg-gray-900;
 }
 
 footer :deep(.logotype) {
@@ -260,7 +212,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-accent-refi;
 }
 
 .link--external {
@@ -269,22 +221,22 @@ footer :deep(.logotype) {
 
 .link:hover,
 .link:focus-visible {
-  @apply text-purple-600 dark:text-yellow-500 no-underline;
+  @apply text-accent-refi dark:text-yellow-500 no-underline;
 }
 
 .link:focus:not(:focus-visible) {
   outline: none;
 }
 
 .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-accent-refi dark:hover:text-yellow-500;
 }
 
 .arrow {
-  @apply text-gray-300 dark:text-gray-600 group-hover:text-purple-600 dark:group-hover:text-yellow-500;
+  @apply text-gray-300 dark:text-gray-600 group-hover:text-accent-refi dark:group-hover:text-yellow-500;
 }
 
 .router-link-active {
   @apply text-blue-600 dark:text-blue-400;
 }
-</style>
+</style>
diff --git a/src/components/icons/IconDiscord.vue b/src/components/icons/IconDiscord.vue
@@ -30,6 +30,6 @@ export default {};
 
 <style scoped>
 .social-icon:hover .bg {
-  fill: #7289da;
+  fill: theme('colors.accent-refi');
 }
 </style>
diff --git a/src/components/icons/IconGithub.vue b/src/components/icons/IconGithub.vue
@@ -30,6 +30,6 @@ export default {};
 
 <style scoped>
 .social-icon:hover .bg {
-  fill: #444;
+  fill: theme('colors.accent-refi');
 }
 </style>
diff --git a/src/components/icons/IconLinkedin.vue b/src/components/icons/IconLinkedin.vue
@@ -28,6 +28,6 @@ export default {};
 
 <style scoped>
 .social-icon:hover .bg {
-  fill: #0a66c2;
+  fill: theme('colors.accent-refi');
 }
 </style>