Remove colors
This commit is contained in:
@@ -2,59 +2,66 @@
|
||||
import XIcon from '@/assets/icons/x.svg'
|
||||
import FacebookIcon from '@/assets/icons/facebook.svg'
|
||||
import InstagramIcon from '@/assets/icons/instagram.svg'
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
const brandingStore = useBrandingStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
|
||||
|
||||
<div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>
|
||||
<footer class="py-8 flex flex-col gap-8 bg-hBackground">
|
||||
|
||||
<div
|
||||
class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
|
||||
Hutopy
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center gap-10">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<facebook-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }" ></facebook-icon>
|
||||
<facebook-icon class="icon"></facebook-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
|
||||
<instagram-icon class="icon"></instagram-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://x.com/Hutopyinc/">
|
||||
<x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
|
||||
<x-icon class="icon"></x-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap justify-center gap-4 px-4 " >
|
||||
<router-link to="/documents/helpandcontact" :style="{color: brandingStore.colors.onBackground}">
|
||||
<div class="flex flex-row flex-wrap justify-center gap-4 px-4">
|
||||
<router-link to="/documents/helpandcontact"
|
||||
class="link">
|
||||
{{ $t('footer.helpandcontact') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/faq" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/faq"
|
||||
class="link">
|
||||
{{ $t('footer.faq') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/guideforcreators" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/guideforcreators"
|
||||
class="link">
|
||||
{{ $t('footer.creatorguide') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/termsandconditions" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/termsandconditions"
|
||||
class="link">
|
||||
{{ $t('footer.termsandconditions') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/contentpolicy" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/contentpolicy"
|
||||
class="link">
|
||||
{{ $t('footer.contentpolicy') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/about" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/about"
|
||||
class="link">
|
||||
{{ $t('footer.about') }}
|
||||
</router-link>
|
||||
<router-link to="/documents/pricing" :style="{color: brandingStore.colors.onBackground}">
|
||||
<router-link to="/documents/pricing"
|
||||
class="link">
|
||||
{{ $t('footer.pricing') }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center base-text mb-13" :style="{color: brandingStore.colors.onBackground}">
|
||||
<div class="flex justify-center base-text mb-13 link">
|
||||
Hutopy ©{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
@@ -62,12 +69,16 @@ const brandingStore = useBrandingStore()
|
||||
<style scoped>
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@apply fill-current w-8 h-8;
|
||||
fill: var(--h-on-background);
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-hOnBackground;
|
||||
}
|
||||
|
||||
.base-text {
|
||||
@apply text-gray-600 tracking-widest font-sans text-sm uppercase
|
||||
@apply text-hOnBackground tracking-widest font-sans text-sm uppercase
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -31,106 +31,68 @@ const authStore = useAuthStore();
|
||||
function toggleLanguage() {
|
||||
locale.value = locale.value === 'fr' ? 'en' : 'fr';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="fixed flex flex-col h-full bg-white border-r border-gray-300 max-w-64 px-4">
|
||||
|
||||
<!-- LOGO HUTOPY -->
|
||||
<nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4">
|
||||
<div class="mt-4 px-4">
|
||||
<router-link to="/@hutopy">
|
||||
<img src="/medias/hutopy.png"
|
||||
alt="hutopy logo"
|
||||
width="300"
|
||||
height="64">
|
||||
<img src="/medias/hutopy.png" alt="hutopy logo" width="300" height="64">
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border-b border-gray-300 my-4 mx-auto w-48"
|
||||
></div>
|
||||
<div class="border-b border-gray-300 my-4 mx-auto w-48"></div>
|
||||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
<!-- SECTION UTILISATEUR -->
|
||||
<div class="px-4">
|
||||
|
||||
<div class="flex items-center justify-start p-2 mb-4">
|
||||
<img
|
||||
:src="userProfileStore.portraitUrl"
|
||||
alt="Profile Image"
|
||||
referrerpolicy="no-referrer"
|
||||
class="rounded-full"
|
||||
width="42"
|
||||
height="42"
|
||||
style="max-height: 42px;">
|
||||
<span class="ml-2 text-sm font-sans capitalize">
|
||||
{{ userProfileStore.alias }}
|
||||
</span>
|
||||
<img :src="userProfileStore.portraitUrl" alt="Profile Image" referrerpolicy="no-referrer" class="rounded-full"
|
||||
width="42" height="42" style="max-height: 42px;">
|
||||
<span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 mb-4">
|
||||
|
||||
<div v-if="authStore.isAuthenticated">
|
||||
|
||||
<v-btn v-if="creatorProfileStore.hasCreator"
|
||||
:to="`/@${creatorProfileStore.creator.name}`"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-file-account-outline"
|
||||
variant="flat">
|
||||
{{ t.myPage }}
|
||||
</v-btn>
|
||||
|
||||
<v-btn v-else
|
||||
to="/create-creator"
|
||||
variant="flat"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-file-account-outline">
|
||||
{{ t.myPage }}
|
||||
</v-btn>
|
||||
|
||||
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
|
||||
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
|
||||
</button>
|
||||
</router-link>
|
||||
<router-link v-else to="/create-creator">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
|
||||
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div v-if="authStore.isAuthenticated">
|
||||
<v-btn to="/profile"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-account"
|
||||
variant="flat">
|
||||
{{ t.myProfile }}
|
||||
</v-btn>
|
||||
<router-link to="/profile">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
|
||||
<i class="mdi mdi-account"></i> {{ t.myProfile }}
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<v-btn variant="flat"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-translate-variant"
|
||||
@click="toggleLanguage">
|
||||
{{ locale }}
|
||||
</v-btn>
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"
|
||||
@click="toggleLanguage">
|
||||
<i class="mdi mdi-translate-variant"></i> {{ locale }}
|
||||
</button>
|
||||
|
||||
<div v-if="!authStore.isAuthenticated">
|
||||
<v-btn to="/login"
|
||||
variant="flat"
|
||||
class="justify-start"
|
||||
prepend-icon="mdi-login">
|
||||
{{ t.signIn }}
|
||||
</v-btn>
|
||||
<router-link to="/login">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
|
||||
<i class="mdi mdi-login"></i> {{ t.signIn }}
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-btn @click="authStore.logout"
|
||||
variant="flat"
|
||||
class="justify-start"
|
||||
prepend-icon="mdi-logout">
|
||||
{{ t.signOut }}
|
||||
</v-btn>
|
||||
<button @click="authStore.logout"
|
||||
class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
|
||||
<i class="mdi mdi-logout"></i> {{ t.signOut }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user