Skip to content

Commit

Permalink
chore: add new logo
Browse files Browse the repository at this point in the history
  • Loading branch information
Nashmod committed Nov 27, 2023
1 parent c9491ed commit d1b9235
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 25 deletions.
6 changes: 2 additions & 4 deletions src/assets/css/global/social-icons.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.social-icon .logo {
fill: #fff;

@apply transition-all;
@apply transition-all fill-primary-refi;
}

.dark .social-icon .logo {
Expand All @@ -15,7 +13,7 @@
}

.social-icon .bg {
fill: #0f172a; /* gray-900 */
fill: #fff;

@apply transition-all;
}
Expand Down
71 changes: 50 additions & 21 deletions src/components/images/AppLogo.vue
Original file line number Diff line number Diff line change
@@ -1,58 +1,87 @@
<script lang="ts" setup>
import useDarkMode from '@/composables/useDarkMode';
import useTailwind from '@/composables/useTailwind';
/**
* TYPES
*/
type Props = {
forceDark?: boolean;
color?: string;
text?: boolean;
size?: string;
};
/**
* PROPS & EMITS
*/
const props = withDefaults(defineProps<Props>(), {
forceDark: false,
color: '',
text: false,
size: 'small',
});
/**
* 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 logoText = computed(() => {
if (props.text) return 'regenerative<br>finance';
return 'regenerative';
});
</script>

<template>
<div class="flex items-center sm:mr-4 app-logo">
<div class="flex items-center sm:mr-4 font-bold capitalize app-logo">
<svg
id="logo"
class="logo-svg"
width="106"
height="20"
class="mr-2 logo-svg"
:width="props.size == 'large' ? 44 : 22"
:height="props.size == 'large' ? 40 : 20"
viewBox="0 0 22 20"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby="logoTitle logoDesc"
role="img"
>
<title id="logoTitle">Balancer logo homepage link</title>
<desc id="logoDesc">Balancer Logotype homepage link</desc>
<g :fill="fillColor" fill-rule="nonzero" class="svg-path">
<path
d="M17.654 12.217c3.777.697 6.346 2.069 6.346 3.648C24 18.15 18.627 20 12 20S0 18.149 0 15.865c0-1.579 2.57-2.951 6.346-3.648 1.641.426 3.579.671 5.654.671 2.075 0 4.013-.245 5.654-.67zM16.208 5.52c3.208.534 5.418 1.657 5.418 2.958 0 1.815-4.31 3.287-9.626 3.287s-9.626-1.472-9.626-3.287c0-1.3 2.21-2.424 5.418-2.958 1.233.313 2.671.492 4.208.492 1.537 0 2.975-.18 4.208-.492zM12.044 0c3.981 0 7.209 1.114 7.209 2.489 0 1.374-3.228 2.488-7.209 2.488-3.981 0-7.209-1.114-7.209-2.488C4.835 1.114 8.063 0 12.044 0zM39.299 16.49c1.001 0 1.832-.155 2.493-.466.66-.31 1.155-.736 1.483-1.275a3.44 3.44 0 00.492-1.825c0-.665-.136-1.231-.409-1.7a3.006 3.006 0 00-1.052-1.09 2.875 2.875 0 00-1.339-.425V9.58a3.49 3.49 0 001.157-.505c.345-.234.62-.54.825-.917.204-.377.307-.832.307-1.365 0-.648-.157-1.227-.47-1.738-.313-.512-.784-.916-1.413-1.212-.628-.296-1.416-.444-2.362-.444H34v13.09h5.299zm-.582-7.523h-2.346V5.356h2.397c.7 0 1.227.164 1.582.492.356.328.534.746.534 1.253 0 .384-.095.715-.284.994-.19.28-.449.494-.777.646a2.611 2.611 0 01-1.106.226zm.205 5.542h-2.55v-3.835h2.614c.49 0 .912.09 1.265.272.354.18.627.428.819.741.191.313.287.664.287 1.052 0 .52-.19.945-.572 1.275-.381.33-1.002.495-1.863.495zm9.133 2.18c.511 0 .957-.071 1.339-.214.381-.143.699-.332.952-.569.254-.236.45-.491.592-.764h.076v1.349h2.225V9.92c0-.652-.119-1.195-.355-1.63a2.813 2.813 0 00-.937-1.032 4.015 4.015 0 00-1.284-.547 6.122 6.122 0 00-1.413-.166c-.686 0-1.313.101-1.88.304a3.72 3.72 0 00-1.437.907 3.474 3.474 0 00-.844 1.5l2.16.306c.115-.337.338-.629.668-.876s.779-.37 1.346-.37c.537 0 .948.132 1.233.396.286.264.429.637.429 1.118v.039c0 .221-.082.384-.246.489-.164.104-.425.18-.783.23-.358.049-.825.103-1.4.163a9.925 9.925 0 00-1.384.246 4.286 4.286 0 00-1.199.495 2.374 2.374 0 00-.837.87c-.205.362-.307.82-.307 1.374 0 .643.144 1.185.432 1.624.287.438.68.77 1.176.993.496.224 1.056.336 1.678.336zm.6-1.7c-.481 0-.877-.109-1.188-.326-.311-.218-.467-.54-.467-.965 0-.299.079-.543.237-.732.157-.19.372-.338.645-.445a4.04 4.04 0 01.927-.23l.543-.076c.21-.03.42-.064.633-.103.213-.038.406-.083.579-.134.172-.051.295-.106.367-.166v1.157c0 .362-.093.697-.278 1.003a2.033 2.033 0 01-.79.739c-.34.185-.743.278-1.207.278zm8.73 1.502V3.4h-2.313v13.09h2.314zm4.704.198c.511 0 .958-.071 1.339-.214.381-.143.699-.332.952-.569.254-.236.451-.491.592-.764h.076v1.349h2.225V9.92c0-.652-.119-1.195-.355-1.63a2.813 2.813 0 00-.936-1.032 4.015 4.015 0 00-1.285-.547 6.122 6.122 0 00-1.413-.166c-.686 0-1.312.101-1.88.304a3.72 3.72 0 00-1.437.907 3.474 3.474 0 00-.844 1.5l2.16.306c.115-.337.338-.629.668-.876s.78-.37 1.346-.37c.537 0 .948.132 1.234.396.285.264.428.637.428 1.118v.039c0 .221-.082.384-.246.489-.164.104-.425.18-.783.23-.358.049-.825.103-1.4.163a9.925 9.925 0 00-1.384.246 4.286 4.286 0 00-1.199.495 2.374 2.374 0 00-.837.87c-.204.362-.307.82-.307 1.374 0 .643.144 1.185.432 1.624.287.438.68.77 1.176.993.496.224 1.056.336 1.678.336zm.6-1.7c-.48 0-.877-.109-1.188-.326-.311-.218-.467-.54-.467-.965 0-.299.079-.543.237-.732.157-.19.372-.338.645-.445a4.04 4.04 0 01.927-.23l.543-.076c.21-.03.42-.064.633-.103.213-.038.406-.083.579-.134.172-.051.295-.106.367-.166v1.157c0 .362-.092.697-.278 1.003a2.033 2.033 0 01-.79.739c-.34.185-.743.278-1.207.278zm8.73 1.502v-5.753c0-.473.09-.876.266-1.208.177-.332.422-.587.735-.764a2.152 2.152 0 011.077-.265c.597 0 1.064.185 1.403.556.339.37.508.884.508 1.54v5.894h2.314v-6.252c.005-.784-.133-1.45-.412-2-.28-.55-.671-.97-1.176-1.26-.505-.29-1.096-.434-1.774-.434-.733 0-1.348.162-1.844.486a2.8 2.8 0 00-1.083 1.31h-.116V6.673h-2.211v9.818h2.314zm12.445.192c.822 0 1.538-.15 2.147-.451a3.6 3.6 0 001.445-1.253c.354-.535.558-1.15.614-1.844h-2.212a2.185 2.185 0 01-.377.901c-.183.248-.41.436-.68.566-.272.13-.577.195-.918.195-.482 0-.9-.129-1.256-.387s-.632-.626-.828-1.106c-.196-.479-.294-1.053-.294-1.722 0-.66.099-1.227.297-1.7.198-.473.476-.837.834-1.09.358-.254.774-.38 1.247-.38.558 0 1.004.158 1.339.476.334.317.546.712.636 1.185h2.212c-.052-.707-.26-1.326-.627-1.857a3.652 3.652 0 00-1.473-1.233c-.616-.292-1.322-.438-2.12-.438-.958 0-1.788.214-2.489.642a4.312 4.312 0 00-1.627 1.79c-.383.765-.575 1.646-.575 2.643 0 .993.189 1.87.566 2.63.377.761.916 1.357 1.617 1.787.701.43 1.542.646 2.522.646zm9.957 0c.763 0 1.44-.116 2.033-.349.592-.232 1.079-.56 1.46-.984.382-.424.64-.922.777-1.493l-2.16-.243c-.103.277-.254.51-.454.697-.2.188-.437.33-.71.425a2.743 2.743 0 01-.914.144c-.503 0-.942-.107-1.317-.323a2.21 2.21 0 01-.875-.933c-.21-.407-.314-.896-.314-1.467l.001.058h6.839v-.71c0-.86-.12-1.603-.358-2.228-.239-.624-.566-1.138-.981-1.543a3.943 3.943 0 00-1.432-.898 5.032 5.032 0 00-1.716-.291c-.938 0-1.754.214-2.449.642a4.355 4.355 0 00-1.62 1.79c-.386.765-.578 1.652-.578 2.662 0 1.027.191 1.919.575 2.675.383.757.932 1.34 1.646 1.752.714.411 1.563.617 2.547.617zm-2.463-6.104c.03-.356.128-.688.293-.995.198-.368.476-.667.834-.895a2.27 2.27 0 011.247-.342c.443 0 .832.1 1.166.3.335.201.596.475.783.822.188.348.283.743.288 1.186h-4.616l.005-.076zm10.599 5.912v-5.772c0-.418.096-.786.287-1.106.192-.32.455-.57.79-.751a2.344 2.344 0 011.134-.272c.196 0 .4.014.61.042.212.028.366.058.464.093V6.596a3.163 3.163 0 00-.4-.048 6.547 6.547 0 00-.43-.016c-.563 0-1.063.155-1.5.464-.437.308-.744.746-.923 1.313h-.103V6.673h-2.243v9.818h2.314z"
/>
</g>
<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="color"
/>
<defs>
<linearGradient
id="paint0_linear_564_1779"
x1="10.9655"
y1="-6.9738"
x2="10.9655"
y2="14.7155"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#05DBF3" />
<stop offset="1" stop-color="#0468BE" />
</linearGradient>
</defs>
</svg>
<div v-html="logoText"></div>
</div>
</template>

Expand All @@ -74,4 +103,4 @@ const fillColor = computed(() => {
.dark .logo-svg:hover .svg-path {
fill: theme('colors.yellow.500');
}
</style>
</style>

0 comments on commit d1b9235

Please sign in to comment.