From bf981700d0ce51996808bf25b917654795ef4a4d Mon Sep 17 00:00:00 2001 From: Mykyta Mykulskyi Date: Sun, 24 Nov 2024 01:34:29 +0100 Subject: [PATCH 01/16] feat: add theme switch --- resources/css/app.css | 13 +++ .../js/components/Common/BackgroundEffect.vue | 2 +- .../js/components/Common/CustomInput.vue | 2 +- resources/js/components/Common/Footer.vue | 5 ++ resources/js/components/Common/Searchbar.vue | 2 +- .../js/components/Common/ThemeSwitch.vue | 35 ++++++++ tailwind.config.js | 81 ++++--------------- 7 files changed, 71 insertions(+), 69 deletions(-) create mode 100644 resources/js/components/Common/ThemeSwitch.vue diff --git a/resources/css/app.css b/resources/css/app.css index 0a3647ec..8b9789fa 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -7,6 +7,19 @@ 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: 247 2 121; + --color-primary-bright: 182 0 80; + --color-primary-dark: 94 0 37; +} + + .v-enter-active, .v-leave-active { transition: opacity 0.3s ease; diff --git a/resources/js/components/Common/BackgroundEffect.vue b/resources/js/components/Common/BackgroundEffect.vue index e3193403..13186a8d 100644 --- 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/CustomInput.vue b/resources/js/components/Common/CustomInput.vue index c9d5986e..acc84dcb 100644 --- a/resources/js/components/Common/CustomInput.vue +++ b/resources/js/components/Common/CustomInput.vue @@ -44,7 +44,7 @@ const model = defineModel() @blur="isFocused=false" > -
+
diff --git a/resources/js/components/Common/Footer.vue b/resources/js/components/Common/Footer.vue index 2d3b422a..c7b165db 100644 --- a/resources/js/components/Common/Footer.vue +++ b/resources/js/components/Common/Footer.vue @@ -1,3 +1,7 @@ + + diff --git a/resources/js/components/Common/Searchbar.vue b/resources/js/components/Common/Searchbar.vue index 2e15541a..c21cefc8 100644 --- 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 }" >
- +
diff --git a/resources/js/components/Common/ThemeSwitch.vue b/resources/js/components/Common/ThemeSwitch.vue new file mode 100644 index 00000000..a5472aaf --- /dev/null +++ b/resources/js/components/Common/ThemeSwitch.vue @@ -0,0 +1,35 @@ + + + diff --git a/tailwind.config.js b/tailwind.config.js index 9650311f..7c3c515b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,82 +49,31 @@ module.exports = { }, colors: { 'primary': { - 'DEFAULT': '#262c89', - '50': '#ecf3ff', - '100': '#dde8ff', - '200': '#c2d5ff', - '300': '#9db9ff', - '400': '#7691ff', - '500': '#556aff', - '600': '#373ff4', - '700': '#2a2fd8', - '800': '#252bae', - '900': '#262c89', - '950': '#141647', - }, - 'secondary': { - 'DEFAULT': '#c9cefc', - '50': '#eff0fe', - '100': '#e1e5fe', - '200': '#c9cefc', - '300': '#a8aef9', - '400': '#8585f4', - '500': '#7268ec', - '600': '#634cdf', - '700': '#563dc5', - '800': '#46349f', - '900': '#363765', - '950': '#241d49', - }, - 'accent': { - 'DEFAULT': '#6566C2', - '50': '#f2f5fb', - '100': '#e7ecf8', - '200': '#d3dbf2', - '300': '#b8c3e9', - '400': '#9aa6df', - '500': '#8189d3', - '600': '#6566c2', - '700': '#5757ab', - '800': '#48488b', - '900': '#40426f', - '950': '#252541', - }, - 'rose': { - 'DEFAULT': '#f70279', - '50': '#fff0f9', - '100': '#ffe3f5', - '200': '#ffc7eb', - '300': '#ff99d9', - '400': '#ff59be', - '500': '#ff29a2', - '600': '#f70279', - '700': '#dd0061', - '800': '#b60050', - '900': '#970445', - '950': '#5e0025', + 'DEFAULT': 'rgb(var(--color-primary))', + '800': 'var(--color-primary-bright)', + '950': 'var(--color-primary-dark)', }, 'red': { 'DEFAULT': '#ff0000', - '50': '#fff0f0', - '100': '#ffdddd', - '200': '#ffc0c0', - '300': '#ff9494', - '400': '#ff5757', '500': '#ff2323', - '600': '#ff0000', - '700': '#d70000', - '800': '#b10303', - '900': '#920a0a', - '950': '#500000', }, - "gradient":{"start":"#9198e5", "end":"#1f0843"}, + "gradient": { + "start":"#9198e5", + "end":"#1f0843" + }, } }, }, plugins: [ - plugin(function ({ addComponents, addVariant }) { + plugin(function ({ addComponents, addVariant, addBase }) { addVariant('hover-focus', ['&:hover', '&:focus']); + addBase({ + ':root': { + '--color-primary': '38 44 137', + '--color-primary-bright': '37 43 174', + '--color-primary-dark': '20 22 71', + }, + }); addComponents({ '.icon': { '@apply size-6 stroke-2 text-primary hover:text-primary-800 transition-colors duration-200':{}, From a69f7d50447dba021aa322c2053f2c92a82f96c4 Mon Sep 17 00:00:00 2001 From: Mykyta Mykulskyi Date: Sun, 24 Nov 2024 15:57:50 +0100 Subject: [PATCH 02/16] feat: add branding logo, preserve theme's state in a storage --- resources/css/app.css | 7 +++-- resources/js/app.ts | 3 +++ .../js/components/Common/ButtonFrame.vue | 4 +-- .../js/components/Common/CustomDatepicker.vue | 4 +-- resources/js/components/Common/Header.vue | 2 +- .../js/components/Common/ThemeSwitch.vue | 14 ++++++---- resources/js/components/Home/AuthBanner.vue | 2 +- .../js/components/Home/GeneralSection.vue | 26 ++++++++----------- .../js/components/Home/InformationButton.vue | 2 +- resources/js/components/Home/LoginForm.vue | 4 +-- resources/js/components/Home/RegisterForm.vue | 2 +- .../QuizzesPanel/QuestionComponent.vue | 2 +- .../js/components/QuizzesPanel/QuizNavbar.vue | 2 +- tailwind.config.js | 8 +++--- 14 files changed, 42 insertions(+), 40 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 8b9789fa..77274f23 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -14,12 +14,11 @@ } .theme-tauron { - --color-primary: 247 2 121; - --color-primary-bright: 182 0 80; - --color-primary-dark: 94 0 37; + --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; diff --git a/resources/js/app.ts b/resources/js/app.ts index 55845f72..5338dd53 100644 --- a/resources/js/app.ts +++ b/resources/js/app.ts @@ -14,6 +14,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/ButtonFrame.vue b/resources/js/components/Common/ButtonFrame.vue index 6050751d..4bb8956f 100644 --- a/resources/js/components/Common/ButtonFrame.vue +++ b/resources/js/components/Common/ButtonFrame.vue @@ -11,8 +11,8 @@ defineProps() 'rounded-lg text-xs xs:text-sm': small, 'rounded text-xs px-2': extraSmall, 'rounded-xl': !small && !extraSmall, - '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 index 121ffb5d..29197947 100644 --- a/resources/js/components/Common/CustomDatepicker.vue +++ b/resources/js/components/Common/CustomDatepicker.vue @@ -34,7 +34,7 @@ const datepickerRef = ref>()