Style: Navbar improvements (#673)

## What was done? Addressing some of the feedback we got after the recent release: - Fixed the primary-light color to match the landing page one - Added hover styles to the top navigation items (also included a small animation to the bell icon when hover) ## Preview https://github.com/user-attachments/assets/fc75d84e-90eb-48f1-9af5-6fc02290e5e7
corona-school · Sep 27, 2024 · 7a1b25b · 7a1b25b
1 parent 7ca3d37
commit 7a1b25b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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');
@@ -12,7 +17,12 @@ const SwitchLanguageButton: React.FC = () => {
 
     return (
         <>
-            <Button onClick={() => setShowSwitchLanguage(true)} variant="none" size="icon">
+            <Button
+                className={cn('group rounded-full hover:bg-primary-light hover:brightness-105', className)}
+                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
@@ -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/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>
                 </>

diff --git 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%;

diff --git 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)',