#112 - Align app's design with the sponsor's branding (#121)

* feat: add theme switch * feat: add branding logo, preserve theme's state in a storage * fix: move `QuizLayout` to a `UserQuiz` folder * moved theme switch to the profile * fix: tests * fix: theme state is preseved between page hoops * fix: theme state is preseved between page hoops * Revert "fix: theme state is preseved between page hoops" This reverts commit 614da79. * Revert "fix: theme state is preseved between page hoops" This reverts commit 059e5eb. * Revert "fix: tests" This reverts commit 7421fec. * Revert "moved theme switch to the profile" This reverts commit 85fd5dc. * remove theme switch from footer * change logo color * change theme for favicon and blade files * change png icons * increase logo's resolution
blumilksoftware · Dec 2, 2024 · 20bc7de · 20bc7de
1 parent 5bb76a9
commit 20bc7de
Show file tree

Hide file tree

Showing 24 changed files with 119 additions and 116 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logo.png b/public/logo.png
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -7,6 +7,18 @@
   font-family: 'Poppins', sans-serif;
 }
 
+.theme-witelon {
+  --color-primary: 38 44 137;
+  --color-primary-bright: 37 43 174;
+  --color-primary-dark: 20 22 71;
+}
+
+.theme-tauron {
+  --color-primary: 228 0 125;
+  --color-primary-bright: 245 13 147;
+  --color-primary-dark: 176 4 96;
+}
+
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.3s ease;
@@ -27,15 +39,15 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #262c8926;
+  background: #E4007D26;
   border-radius: 1rem;
   border: 2px solid transparent;
   background-clip: content-box;
   position: fixed;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #262c894c;
+  background: #E4007D4c;
   border: 2px solid transparent;
   background-clip: content-box;
   position: fixed;

diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -13,6 +13,9 @@ dayjs.locale('pl')
 
 const appName = import.meta.env.VITE_APP_NAME
 
+const themeClass = localStorage.getItem('theme')
+themeClass && document.documentElement.classList.add(themeClass)
+
 createInertiaApp({
   title: (title) => `${title} - ${appName}`,
   resolve: async (name) => {

diff --git a/resources/js/components/Common/BackgroundEffect.vue b/resources/js/components/Common/BackgroundEffect.vue
@@ -19,7 +19,7 @@ onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
       size-full
       bg-gradient-to-r
       from-[#ff80b5]
-      to-primary-600
+      to-[#373ff4]
       opacity-30
     " style="
       clip-path: polygon(

diff --git a/resources/js/components/Common/ButtonFrame.vue b/resources/js/components/Common/ButtonFrame.vue
@@ -12,8 +12,8 @@ defineProps<ButtonFrameProps>()
       'rounded text-xs px-2': extraSmall,
       'rounded-xl': !small && !extraSmall,
       'py-3 max-w-96 w-full': large,
-      'focus:rounded-sm text-black hover:text-primary-800 p-0 font-semibold': text,
-      'px-4 bg-primary text-white hover:bg-primary-950 py-2.5 font-bold': !text,
+      'focus:rounded-sm text-black hover:text-primary-bright p-0 font-semibold': text,
+      'px-4 bg-primary text-white hover:bg-primary-dark py-2.5 font-bold': !text,
       'opacity-50 pointer-events-none': disabled,
     }"
   >

diff --git a/resources/js/components/Common/CustomDatepicker.vue b/resources/js/components/Common/CustomDatepicker.vue
@@ -34,7 +34,7 @@ const datepickerRef = ref<InstanceType<typeof Datepicker>>()
         <div class="flex gap-4">
           <button class="text-sm font-semibold rounded-md" @click="() => datepickerRef?.toggleMenu()">Anuluj</button>
           <button
-            class="bg-primary text-white text-sm font-bold py-2 px-3 rounded-md duration-200 hover:bg-primary-950"
+            class="bg-primary text-white text-sm font-bold py-2 px-3 rounded-md duration-200 hover:bg-primary-dark"
             @click="() => datepickerRef?.selectDate()"
           >
             Wybierz
@@ -83,7 +83,7 @@ const datepickerRef = ref<InstanceType<typeof Datepicker>>()
 }
 
 .dp__btn:hover {
-  @apply fill-primary-950 text-primary-950 stroke-primary-950
+  @apply fill-primary-dark text-primary-dark stroke-primary-dark
 }
 
 .dp__overlay {

diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
@@ -44,7 +44,7 @@ const model = defineModel<string>()
         @blur="isFocused=false"
       >
 
-      <div v-if="slots.default" class="flex flex-1 items-center justify-center stroke-primary/100">
+      <div v-if="slots.default" class="flex flex-1 items-center justify-center text-primary">
         <slot />
       </div>
     </div>

diff --git a/resources/js/components/Common/Header.vue b/resources/js/components/Common/Header.vue
@@ -3,6 +3,7 @@ import FormButton from '@/components/Common/FormButton.vue'
 import { TransitionRoot, Dialog, TransitionChild, DialogPanel, DialogTitle } from '@headlessui/vue'
 import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { ref } from 'vue'
+import LogoIcon from '@/components/Icons/LogoIcon.vue'
 
 defineProps<{ pages: Page[], user?: User, appName: string, title?: string }>()
 const open = ref<boolean>(false)
@@ -14,18 +15,15 @@ const isSelected = (page: Page) => page.href === window.location.pathname
     <nav class="flex w-full items-center justify-between p-4">
       <div class="flex gap-x-6 items-center">
         <a href="/">
-          <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#262C89" />
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#6566C2" />
-          </svg>
+          <LogoIcon />
         </a>
         <span v-if="pages.length <= 0" class="font-semibold leading-6 text-gray-900">{{ title }}</span>
         <div v-else class="flex gap-6">
           <a
             v-for="item in pages"
             :key="item.title"
             :href="item.href"
-            class="hidden sm:block font-semibold leading-6 text-gray-900 transition-colors duration-200 hover:text-primary-800"
+            class="hidden sm:block font-semibold leading-6 text-gray-900 transition-colors duration-200 hover:text-primary-bright"
             :class="{ 'text-primary': isSelected(item) }"
           >
             {{ item.title }}

diff --git a/resources/js/components/Common/Searchbar.vue b/resources/js/components/Common/Searchbar.vue
@@ -43,7 +43,7 @@ function onOptionClick(option:T) {
         :class="{ 'ring-inset ring-2 ring-[#7e76b8]' : isFocused, 'ring-red' : error }"
       >
         <div class="h-full items-center justify-center px-3">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 stroke-primary/30" :class="{'!stroke-primary/60': isFocused}">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-primary/30" :class="{'!text-primary/60': isFocused}">
             <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
           </svg>
         </div>

diff --git a/resources/js/components/Common/ThemeSwitch.vue b/resources/js/components/Common/ThemeSwitch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const isThemeTauron = computed(() => localStorage.getItem('theme') !== 'theme-witelon')
+
+function toggleTheme(checked?:boolean) {
+  document.documentElement.classList.remove(checked ? 'theme-witelon' : 'theme-tauron')
+  document.documentElement.classList.add(checked ? 'theme-tauron' : 'theme-witelon')
+  localStorage.setItem('theme', checked ? 'theme-tauron' : 'theme-witelon')
+}
+</script>
+
+<template>
+  <label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer" :checked="isThemeTauron" @click="(event: any) => toggleTheme(event.currentTarget.checked)">
+    <div class="
+      relative
+      w-11
+      h-6
+      bg-primary
+      peer-focus:outline-none
+      peer-focus:ring-2
+      rounded-full
+      
+      after:bg-white
+      after:content-['']
+      after:start-0.5
+      after:absolute after:top-0.5
+      after:border
+      after:rounded-full
+      after:size-5
+      peer-checked:after:translate-x-full
+      rtl:peer-checked:after:-translate-x-full
+      after:transition-all
+      "
+    />
+    <span class="ms-3 text-sm font-medium text-gray-500">Zmień skórkę</span>
+  </label>
+</template>
diff --git a/resources/js/components/Home/AuthBanner.vue b/resources/js/components/Home/AuthBanner.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import LogoIcon from '@/components/Icons/LogoIcon.vue'
 
 const isHidden = ref(false)
 const props = defineProps<{isLogin?:boolean}>()
@@ -31,7 +32,6 @@ function gotoLoginSection() {
   isLoginRef.value = true
   gotoAuthSection()
 }
-
 </script>
 
 <template>
@@ -42,14 +42,12 @@ function gotoLoginSection() {
     >
       <div class="justify-center flex-1 hidden lg:flex" />
       <div class="hidden lg:justify-center flex-1 xs:flex">
-        <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#262C89" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#6566C2" />
-        </svg>
+        <LogoIcon />
       </div>
       <div class="flex justify-end flex-1 gap-6 items-center">
         <b><button class="text-sm text-primary" @click="gotoLoginSection">Logowanie</button></b>
         <button
-          class="flex-none rounded-lg bg-primary px-3.5 py-3 text-sm font-bold text-white shadow-sm hover:bg-primary-950 duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+          class="flex-none rounded-lg bg-primary px-3.5 py-3 text-sm font-bold text-white shadow-sm hover:bg-primary-dark duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
           @click="gotoRegisterSection"
         >
           Rejestracja

diff --git a/resources/js/components/Home/GeneralSection.vue b/resources/js/components/Home/GeneralSection.vue
@@ -3,21 +3,17 @@ import InformationButton from '@/components/Home/InformationButton.vue'
 </script>
 
 <template>
-  <section class="w-full flex flex-col overflow-hidden">
-    <div data-name="left" class="flex flex-col justify-center w-full gap-10 p-10 pb-16">
-      <img class="h-40 object-contain" src="@/../assets/header-logo.png" alt="logo nagłówka">
-      <InformationButton />
-    </div>
+  <section class="w-full flex flex-col items-center gap-10 p-10">
+    <img class="h-40 object-contain" src="@/../assets/header-logo.png" alt="logo nagłówka">
 
-    <div data-name="right" class="p-16 flex flex-col size-full">
-      <h1 class="text-center text-[1.5rem] font-bold">SPONSORZY</h1>
-      <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:grid-cols-6">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg" alt="Reform" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg" alt="Tuple" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain sm:col-start-2" src="https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg" alt="SavvyCal" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto" src="https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg" alt="Statamic" width="158" height="48">
-      </div>
-    </div>
+    <InformationButton />
+
+    <h1 class="text-center text-[1.5rem] font-bold mt-20">SPONSOR</h1>
+
+    <img
+      class="w-fit rounded cursor-pointer duration-200 hover:scale-110 object-contain max-h-48"
+      src="https://www.tauron.pl/-/media/layout/logo_tlo.ashx"
+      alt="Tauron"
+    >
   </section>
 </template>
diff --git a/resources/js/components/Home/InformationButton.vue b/resources/js/components/Home/InformationButton.vue
@@ -7,7 +7,7 @@ const isInformationVisible = ref(false)
 
 <template>
   <div class="flex h-12 justify-center items-center">
-    <button class="text-primary text-2xl font-bold duration-200 hover:text-primary-800 hover:scale-105" @click="isInformationVisible = true">
+    <button class="text-primary text-2xl font-bold duration-200 hover:text-primary-bright hover:scale-105" @click="isInformationVisible = true">
       INFORMACJE O KONKURSIE
     </button>
   </div>

diff --git a/resources/js/components/Home/LoginForm.vue b/resources/js/components/Home/LoginForm.vue
@@ -20,15 +20,15 @@ function submit() {
 
     <div class="flex flex-col gap-2">
       <CustomInput v-model="form.password" label="Hasło" :error="errors.password" name="password" type="password" />
-      <a href="/auth/forgot-password" class="duration-200 font-semibold leading-6 text-primary hover:text-primary-950 text-sm">Nie pamiętam hasła</a>
+      <a href="/auth/forgot-password" class="duration-200 font-semibold leading-6 text-primary hover:text-primary-dark text-sm">Nie pamiętam hasła</a>
     </div>
 
     <div>
       <button
         :disabled="form.processing"
         type="submit"
         class="rounded-lg text-md flex w-full justify-center bg-primary p-3 font-bold text-white
-        transition hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
         disabled:opacity-70"
       >
         Zaloguj się

diff --git a/resources/js/components/Home/RegisterForm.vue b/resources/js/components/Home/RegisterForm.vue
@@ -61,7 +61,7 @@ function submit() {
         :disabled="form.processing"
         type="submit"
         class="rounded-lg text-md flex w-full justify-center bg-primary p-3 font-bold text-white
-        transition hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
         disabled:opacity-70"
       >
         Zarejestruj się

diff --git a/resources/js/components/Icons/LogoIcon.vue b/resources/js/components/Icons/LogoIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#E4007D" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#FF17A1" />
+    </svg>
+  </div>
+</template>
diff --git a/resources/js/components/QuizzesPanel/QuestionComponent.vue b/resources/js/components/QuizzesPanel/QuestionComponent.vue
@@ -59,7 +59,7 @@ function setCorrectAnswer(currentAnswer: Answer) {
 
     <button
       v-if="hasAnswers"
-      class="flex gap-1.5 font-bold text-primary hover:text-primary-800 items-center text-percentage-105"
+      class="flex gap-1.5 font-bold text-primary hover:text-primary-bright items-center text-percentage-105"
       @click="answersPaneExpanded = !answersPaneExpanded"
     >
       Odpowiedzi

diff --git a/resources/js/components/QuizzesPanel/QuizNavbar.vue b/resources/js/components/QuizzesPanel/QuizNavbar.vue
@@ -174,7 +174,7 @@ function sanitizeData() {
         class="w-7.5 h-7.5 text-primary stroke-2"
         :class="{
           'opacity-50': !publishValidation.validated,
-          'hover:text-primary-800 slide-up-animation': publishValidation.validated
+          'hover:text-primary-bright slide-up-animation': publishValidation.validated
         }"
       />
     </RequestWrapper>

diff --git a/resources/views/emails/auth/reset-password.blade.php b/resources/views/emails/auth/reset-password.blade.php
@@ -5,7 +5,7 @@
     a { text-decoration: none; }
     p { margin: 48px 0; line-height: 24px; }
     table { width: 100%; border-spacing: 0; }
-    .button { background-color: #262C89; color: white; padding: 16px 80px; border-radius: 12px; }
+    .button { background-color: #E4007D; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -22,7 +22,7 @@
             <b><a class="button" href="{{ $url }}">Zresetuj hasło</a></b>
         </td></tr></table>
 
-        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #262C89;">{{ config('app.name') }}</span></p>
+        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #E4007D;">{{ config('app.name') }}</span></p>
 
         <hr style="border: 1px solid #e8ebf1">
 

diff --git a/resources/views/emails/auth/verify.blade.php b/resources/views/emails/auth/verify.blade.php
@@ -5,7 +5,7 @@
     a { text-decoration: none; }
     p { margin: 48px 0; line-height: 24px; }
     table { width: 100%; border-spacing: 0; }
-    .button { background-color: #262C89; color: white; padding: 16px 80px; border-radius: 12px; }
+    .button { background-color: #E4007D; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -24,7 +24,7 @@
 
         <p>Jeśli prośba nie została zainicjonowana przez Ciebie, możesz zignorować tę wiadomość.</p>
 
-        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #262C89;">{{ config('app.name') }}</span></p>
+        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #E4007D;">{{ config('app.name') }}</span></p>
 
         <hr style="border: 1px solid #e8ebf1">
 

diff --git a/resources/views/errors/minimal.blade.php b/resources/views/errors/minimal.blade.php
@@ -16,10 +16,10 @@
     * { margin: 0; padding: 0; }
     html, body { height: 100%; }
     body { display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; color: #333; position: relative;  max-width: 48rem; margin:auto }
-    h1 { font-size: 3rem; margin-bottom: 1rem; color: #262c89; }
+    h1 { font-size: 3rem; margin-bottom: 1rem; color: #E4007D; }
     p { font-size: 1rem; margin-bottom: 2rem }
     b { font-size: 1.2rem; margin-bottom: 2rem; font-weight: bold }
-    a { text-decoration: none; background-color: #262c89; color: white; font-size: rem; font-weight: 600; padding: .6rem 1rem; border-radius: .8rem; }
+    a { text-decoration: none; background-color: #E4007D; color: white; font-size: rem; font-weight: 600; padding: .6rem 1rem; border-radius: .8rem; }
     .container { display: flex; flex-direction: column; align-items: center; text-align: center }
     .bg-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.6); z-index: -10 }
     .blur-background { position: fixed; width: 58.33%; height: 100%; opacity: 0.7; filter: blur(48px); z-index: -10 }