add icon component, work on styling

src/lib/components/AbstractContent.svelte

@@ -7,14 +7,21 @@
 		NavBrand,
 		NavHamburger,
 		NavLi,
-		NavUl,
-		Tooltip
+		NavUl
 	} from 'flowbite-svelte';
-	import { CaretLeftSolid, MoonSolid, SunSolid } from 'flowbite-svelte-icons';
+
+	import {
+		CaretLeftSolid,
+		CaretRightSolid,
+		LightbulbSolid,
+		MoonSolid,
+		SunSolid
+	} from 'flowbite-svelte-icons';
 	// logo
 	import logo_dark from '../assets/mondey_dark.svg';
 	import logo_light from '../assets/mondey_light.svg';
 	import BottomNavElement from './Navigation/BottomNavElement.svelte';
+	import FunctionalIcon from './Navigation/FunctionalIcon.svelte';
 
 	// variables for showing or hiding elements
 	export let showBottomNavbar = true;
@@ -24,8 +31,6 @@
 	export let lastpage = '/';
 	export let nextpage = '/';
 	export let infopage = '/';
-
-	export let userName = 'Registrieren';
 </script>
 
 <!-- Top element: basic navigation-->
@@ -36,28 +41,23 @@
 			<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
 		</NavBrand>
 		<NavHamburger />
-		<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium">
+		<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium ml-auto">
 			<NavLi href="/" active={true}>Home</NavLi>
 			<NavLi href="/">Aktuelles</NavLi>
 			<NavLi href="/">Downloads</NavLi>
 			<NavLi href="/">Kontakt</NavLi>
-			<DarkMode
-				class="rounded-lg p-2 text-xl text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-			>
-				<MoonSolid slot="darkIcon" />
-				<SunSolid slot="lightIcon" />
-			</DarkMode>
-			<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
+
+			<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
+				<DarkMode class="apply-icon-style">
+					<MoonSolid slot="darkIcon" />
+					<SunSolid slot="lightIcon" />
+				</DarkMode>
+			</FunctionalIcon>
+
+			<FunctionalIcon tooltip={'Registrieren oder einloggen'}>
+				<Avatar rounded border class="apply-icon-style" />
+			</FunctionalIcon>
 		</NavUl>
-		<div class="flex items-center space-x-4 rtl:space-x-reverse">
-			<Avatar
-				class="space-y-1 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-				rounded
-				border
-			/>
-			<div class="flex items-center space-x-4 rtl:space-x-reverse">{userName}</div>
-			<Tooltip>Registrieren oder einloggen</Tooltip>
-		</div>
 	</div>
 </Navbar>
 
@@ -67,30 +67,29 @@
 </div>
 
 {#if showBottomNavbar}
-	<!-- bottom element: back, info and next buttons-->
 	<BottomNav
 		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
 		<BottomNavElement
-			href="{lastpage},"
-			description="{'Zurück'},"
-			Icon="{CaretLeftSolid},"
+			href={lastpage}
+			description={'Zurück'}
+			Icon={CaretLeftSolid}
 			tooltip={'Zur letzten Seite'}
-		></BottomNavElement>
+		/>
 
-		<!-- <BottomNavElement
-			href="{infopage},"
-			description="{'Hilfe'},"
-			Icon="{LightbulbSolid},"
+		<BottomNavElement
+			href={infopage}
+			description={'Hilfe'}
+			Icon={LightbulbSolid}
 			tooltip={'Zusätzliche Informationen'}
-		></BottomNavElement>
+		/>
 
 		<BottomNavElement
-			href="{nextpage},"
-			description="{'Weiter'},"
-			Icon="{CaretLeftSolid},"
+			href={nextpage}
+			description={'Weiter'}
+			Icon={CaretRightSolid}
 			tooltip={'Zur nächsten Seite'}
-		></BottomNavElement> -->
+		/>
 	</BottomNav>
 {/if}

src/lib/components/Navigation/FunctionalIcon.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { Tooltip } from 'flowbite-svelte';
+	export let tooltip;
+</script>
+
+<div class="functional-icon-container">
+	<slot></slot>
+	<Tooltip arrow={false}>{tooltip}</Tooltip>
+</div>
+
+<style>
+	:global(.functional-icon-container) {
+		@apply flex items-center space-x-4 rtl:space-x-reverse;
+	}
+
+	:global(.apply-icon-style) {
+		@apply rounded-lg p-2 text-xl text-gray-500 transition-colors;
+	}
+
+	:global(.apply-icon-style:hover) {
+		@apply text-primary-800;
+	}
+
+	:global(.apply-icon-style.group-hover) {
+		@apply text-primary-800;
+	}
+
+	:global(.apply-icon-style.dark) {
+		@apply text-gray-400;
+	}
+
+	:global(.apply-icon-style.dark:hover) {
+		@apply text-primary-500;
+	}
+
+	:global(.apply-icon-style.dark.group-hover) {
+		@apply text-primary-500;
+	}
+</style>