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

app/Http/Controllers/ProfileUserController.php

@@ -5,6 +5,7 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\Auth\ProfileUserPasswordResetRequest;
+use App\Http\Requests\Auth\ThemeChangeRequest;
 use App\Http\Resources\UserResource;
 use Illuminate\Contracts\Hashing\Hasher;
 use Illuminate\Http\RedirectResponse;
@@ -37,4 +38,16 @@ public function update(ProfileUserPasswordResetRequest $request, Hasher $hasher)
         return redirect()->back()
             ->with("status", "Zaktualizowano hasło");
     }
+
+    public function updateTheme(ThemeChangeRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        $user = $request->user();
+        $user->theme = $validated["theme"];
+        $user->save();
+
+        return redirect()->back()
+            ->with("status", "Zaktualizowano motyw");
+    }
 }

app/Http/Requests/Auth/ThemeChangeRequest.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\Auth;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ThemeChangeRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            "theme" => "required|string|max:255",
+        ];
+    }
+}

app/Http/Requests/UserRequest.php

@@ -20,6 +20,7 @@ public function rules(): array
             "name" => ["required", "string", "max:255"],
             "surname" => ["required", "string", "max:255"],
             "school_id" => ["required", "integer", "exists:schools,id"],
+            "theme" => "nullable|string|max:255",
         ];
     }
 }

app/Http/Resources/UserResource.php

@@ -23,6 +23,7 @@ public function toArray(Request $request): array
             "isAnonymized" => $this->is_anonymized,
             "isAdmin" => $this->hasRole("admin"),
             "isSuperAdmin" => $this->hasRole("super_admin"),
+            "theme" => $this->theme,
         ];
     }
 }

database/migrations/2024_11_25_214101_add_theme_to_users_table.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::table("users", function (Blueprint $table): void {
+            $table->string("theme")->default("theme-witelon")->after("email");
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table("users", function (Blueprint $table): void {
+            $table->dropColumn("theme");
+        });
+    }
+};

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;

resources/js/Layouts/BaseLayout.vue

@@ -3,12 +3,19 @@ import Header from '@/components/Common/Header.vue'
 import Footer from '@/components/Common/Footer.vue'
 import BackgroundEffect from '@/components/Common/BackgroundEffect.vue'
 import Banner from '@/components/Common/Banner.vue'
-import {ref, watch} from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import {type PageProps} from '@/Types/PageProps'
 
 const props = defineProps<{ pages: Page[] } & PageProps>()
 const status = ref<string | undefined>(props.flash.status)
 
+onMounted(()=>{
+  const themeClass = props.user?.theme
+  if (themeClass) {
+    document.documentElement.classList.add(themeClass)
+  }
+})
+
 watch(() => props.flash, flash => {
   status.value = flash.status
 }, { immediate: true })
@@ -20,7 +27,7 @@ watch(() => props.flash, flash => {
 
   <div class="flex flex-col items-center h-full min-h-screen">
     <Banner v-model="status" />
-    <Header :pages :user="props.user" :app-name="props.appName" />
+    <Header :pages="props.pages" :user="props.user" :app-name="props.appName" />
     <slot />
     <Footer />
   </div>

resources/js/Pages/Admin/QuizDemo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import QuizLayout from '@/Layouts/QuizLayout.vue'
+import QuizLayout from '@/components/UserQuiz/QuizLayout.vue'
 import { converter } from '@/Helpers/Converter'
 
 const props = defineProps<{ quiz: Quiz }>()

resources/js/Pages/Guest/VerifyEmail.vue

@@ -10,7 +10,7 @@ onMounted(()=>{
     titleRef.value = 'Zweryfikuj e-mail'
 })
 
-function sent() {
+function send() {
   form.post('/email/verification-notification')
 }
 
@@ -26,7 +26,7 @@ function sent() {
       <p>Kliknij w link aktywacyjny, aby dokończyć proces rejestracji.</p>
     </div>
     <div class="p-6 gap-6 flex flex-col size-full sm:max-w-lg sm:h-fit">
-      <button :disabled="form.processing" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70" @click="sent">
+      <button :disabled="form.processing" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70" @click="send">
         Wyślij ponownie link weryfikacyjny
       </button>
     </div>

resources/js/Pages/User/Quiz.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import QuizLayout from '@/Layouts/QuizLayout.vue'
+import QuizLayout from '@/components/UserQuiz/QuizLayout.vue'
 import axios from 'axios'
 import { ref } from 'vue'
 import Button from '@/components/Common/Button.vue'

resources/js/Types/PageProps.d.ts

@@ -1,4 +1,6 @@
-export interface PageProps {
+import { type PageProps as InertiaPageProps } from '@inertiajs/core'
+
+export interface PageProps extends InertiaPageProps {
   appName: string
   flash: {
     status?: string

resources/js/Types/User.d.ts

@@ -7,4 +7,5 @@ interface User {
   isAnonymized: boolean
   isAdmin: boolean
   isSuperAdmin: boolean
+  theme?: 'theme-witelon' | 'theme-tauron'
 }

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(

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,
     }"
   >

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 {

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>

resources/js/components/Common/Header.vue

@@ -25,7 +25,7 @@ const isSelected = (page: Page) => page.href === window.location.pathname
             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 }}

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>

resources/js/components/Common/ThemeSwitch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { router } from '@inertiajs/vue3'
+
+const props = defineProps<{ theme: 'theme-witelon' | 'theme-tauron' }>()
+const isThemeTauron = computed(() => props.theme === 'theme-tauron')
+
+function toggleTheme(checked?:boolean) {
+  document.documentElement.classList.remove(checked ? 'theme-witelon' : 'theme-tauron')
+  document.documentElement.classList.add(checked ? 'theme-tauron' : 'theme-witelon')
+  router.patch('/profile/theme', { 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>

resources/js/components/Home/AuthBanner.vue

@@ -49,7 +49,7 @@ function gotoLoginSection() {
       <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

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>

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>

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ę

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ę

resources/js/components/Profile/UserDataSection.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ThemeSwitch from '@/components/Common/ThemeSwitch.vue'
+
 defineProps<{ user: User }>()
 </script>
 
@@ -23,5 +25,6 @@ defineProps<{ user: User }>()
         <p class="p-4 text-[1.1rem] border-2 border-t-0 h-full rounded-b-lg border-primary/30">{{ user.school.name }}</p>
       </div>
     </div>
+    <ThemeSwitch class="mt-4 mx-2" :theme="user.theme" />
   </div>
 </template>

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

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>