From 5b954f465f53b080049001091d0668f10d783c78 Mon Sep 17 00:00:00 2001
From: John Angel <john.angel@lern-fair.de>
Date: Thu, 26 Sep 2024 17:50:51 +0200
Subject: [PATCH 1/3] fix: primary-light color

---
 src/web/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/index.css b/src/web/index.css
index 44d380325..8d7ed94a0 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -20,7 +20,7 @@
         --card-foreground: var(--foreground);
 
         --primary-lighter: 171 24% 94%;
-        --primary-light: 178.72 23.15% 60.2%;
+        --primary-light: 187.14 23.6% 65.1%;
         --primary: 189 31% 24%;
         --primary-dark: 189 28% 18%;
         --primary-foreground: 210 40% 98%;

From b35b1262a4a1476e06c43804a7bffee35a7f73a1 Mon Sep 17 00:00:00 2001
From: John Angel <john.angel@lern-fair.de>
Date: Thu, 26 Sep 2024 17:51:14 +0200
Subject: [PATCH 2/3] style: Add hover stylings to the top navigation items

---
 src/components/SettingsButton.tsx                  | 2 +-
 src/components/SwitchLanguageButton.tsx            | 7 ++++++-
 src/components/notifications/NotificationAlert.tsx | 4 ++--
 tailwind.config.js                                 | 8 ++++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/SettingsButton.tsx b/src/components/SettingsButton.tsx
index 06b942c6a..59f4b5994 100644
--- a/src/components/SettingsButton.tsx
+++ b/src/components/SettingsButton.tsx
@@ -7,7 +7,7 @@ type Props = {};
 const SettingsButton: React.FC<Props> = () => {
     const navigate = useNavigate();
     return (
-        <Button variant="none" onClick={() => navigate('/settings')} size="icon">
+        <Button className="rounded-full hover:bg-primary-light hover:brightness-105" variant="none" onClick={() => navigate('/settings')} size="icon">
             <IconMenu2 size={24} />
         </Button>
     );
diff --git a/src/components/SwitchLanguageButton.tsx b/src/components/SwitchLanguageButton.tsx
index 1ead5f244..2790a792e 100644
--- a/src/components/SwitchLanguageButton.tsx
+++ b/src/components/SwitchLanguageButton.tsx
@@ -12,7 +12,12 @@ const SwitchLanguageButton: React.FC = () => {
 
     return (
         <>
-            <Button onClick={() => setShowSwitchLanguage(true)} variant="none" size="icon">
+            <Button
+                className="group rounded-full hover:bg-primary-light hover:brightness-105"
+                onClick={() => setShowSwitchLanguage(true)}
+                variant="none"
+                size="icon"
+            >
                 <Icon />
             </Button>
             <SwitchLanguageModal isOpen={showSwitchLanguage} onIsOpenChange={setShowSwitchLanguage} />
diff --git a/src/components/notifications/NotificationAlert.tsx b/src/components/notifications/NotificationAlert.tsx
index 8dcf7933b..2219f855c 100644
--- a/src/components/notifications/NotificationAlert.tsx
+++ b/src/components/notifications/NotificationAlert.tsx
@@ -52,8 +52,8 @@ const NotificationAlert: React.FC = () => {
                                 {count}
                             </Badge>
                         )}
-                        <Button variant="none" size="icon">
-                            <IconBell size={24} />
+                        <Button className="group rounded-full hover:bg-primary-light hover:brightness-105" variant="none" size="icon">
+                            <IconBell className="group-hover:animate-bell-ring" size={24} />
                         </Button>
                     </div>
                 </PopoverTrigger>
diff --git a/tailwind.config.js b/tailwind.config.js
index 04a55c753..b23d631c3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -106,12 +106,20 @@ module.exports = {
                     '0%': { transform: 'translateY(0)', opacity: '0' },
                     '10%': { opacity: '1' },
                     '100%': { transform: 'translateY(-200px)', opacity: '0' },
+                },
+                'bell-ring': {
+                    '0%': { transform: 'scaleX(1)' },
+                    '10%, 5%': { transform: 'scale3d(.9,.9,.9) rotate(-5deg)' },
+                    '15%, 25%, 35%, 45%': { transform: 'scale3d(1.1,1.1,1.1) rotate(5deg)' },
+                    '20%, 30%, 40%': { transform: 'scale3d(1.1,1.1,1.1) rotate(-5deg)' },
+                    '50%': { transform: 'scale3d(1.1,1.1,1.1) rotate(-5deg)' },
                 }
             },
             animation: {
                 'accordion-down': 'accordion-down 0.2s ease-out',
                 'accordion-up': 'accordion-up 0.2s ease-out',
                 'shine': 'shine 2s infinite',
+                'bell-ring': 'bell-ring 2s infinite',
             },
             boxShadow: {
                 bottomNavigation: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1),0px 16px 56px rgba(17,17,26,0.1)',

From e2a07c4e8ff39285d7a34a4ee3e523f5c037d4ba Mon Sep 17 00:00:00 2001
From: John Angel <john.angel@lern-fair.de>
Date: Thu, 26 Sep 2024 17:56:57 +0200
Subject: [PATCH 3/3] style: Add custom hover on Welcome page

---
 src/components/SwitchLanguageButton.tsx | 11 ++++++++---
 src/pages/Welcome.tsx                   |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/SwitchLanguageButton.tsx b/src/components/SwitchLanguageButton.tsx
index 2790a792e..aad1519bb 100644
--- a/src/components/SwitchLanguageButton.tsx
+++ b/src/components/SwitchLanguageButton.tsx
@@ -1,9 +1,14 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { SwitchLanguageModal } from '../modals/SwitchLanguageModal';
 import { languageIcons } from '../I18n';
 import { Button } from './Button';
+import { cn } from '@/lib/Tailwind';
 
-const SwitchLanguageButton: React.FC = () => {
+interface SwitchLanguageButtonProps {
+    className?: string;
+}
+
+const SwitchLanguageButton = ({ className }: SwitchLanguageButtonProps) => {
     const [showSwitchLanguage, setShowSwitchLanguage] = useState(false);
 
     const storageLanguage = localStorage.getItem('lernfair-language');
@@ -13,7 +18,7 @@ const SwitchLanguageButton: React.FC = () => {
     return (
         <>
             <Button
-                className="group rounded-full hover:bg-primary-light hover:brightness-105"
+                className={cn('group rounded-full hover:bg-primary-light hover:brightness-105', className)}
                 onClick={() => setShowSwitchLanguage(true)}
                 variant="none"
                 size="icon"
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 441e46c44..1e665d119 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -58,7 +58,7 @@ const Welcome: React.FC = () => {
                             <Button onPress={() => window.open('/impressum', '_blank')} variant={'link'} _text={{ color: 'white' }}>
                                 {t('settings.legal.imprint')}
                             </Button>
-                            <SwitchLanguageButton />
+                            <SwitchLanguageButton className="hover:bg-primary" />
                         </Flex>
                     </Flex>
                 </>