fix GUI, new skeleton version

Author: derGraph

src/routes/+layout.svelte

@@ -40,9 +40,9 @@
 	href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
 />
 	<div class="h-dvh flex flex-col">
-		<div class="md:container md:mx-auto justify-center items-center">
-			<AppBar class="rounded-b-3xl">
-				<AppBar.Toolbar class="flex flex-auto items-end">
+		<div class="md:container md:mx-auto">
+			<AppBar class="rounded-b-3xl p-2">
+				<AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
 					<AppBar.Lead class="flex items-end">
 						<a href="/" class="material-symbols-outlined" style="font-size: {navHeight}rem">map</a>
 						<a href="/" class="text-2xl">sailBlog</a>

src/routes/trips/[trip]/+page.svelte

@@ -104,12 +104,10 @@
 				<div class="flex items-center">
 					<h3 class="h5 align-middle mr-2">Skipper:</h3>
 					<a href="/user/{requestedTripData.skipper?.username}" class="btn btn-sm preset-tonal-secondary border border-secondary-500 mr-1 pl-1 flex items-center text-sm">
-						<Avatar name={requestedTripData.skipper?.firstName + " " + requestedTripData.skipper?.lastName}
-								src={getProfilePicture(requestedTripData.skipper)}
-								background="bg-primary-500"
-								classes="!ml-0 !size-6"
-								rounded="rounded-full"
-						/>
+						<Avatar class="!ml-0 !size-6">
+							<Avatar.Image src={getProfilePicture(requestedTripData.skipper)} class="!size-6"/>
+							<Avatar.Fallback>{requestedTripData.skipper?.firstName.charAt(0)+requestedTripData.skipper?.lastName.charAt(0)}</Avatar.Fallback>
+						</Avatar>
 						{requestedTripData.skipper?.username}
 					</a>
 				</div>
@@ -119,12 +117,10 @@
 					{#each requestedTripData?.crew as member, i}
 						{#if member.username != requestedTripData?.skipper?.username}
 							<a href="/user/{member.username}" class="btn btn-sm preset-tonal-secondary border border-secondary-500 mr-1 pl-2 flex items-center">
-								<Avatar name={member.firstName + " " + member.lastName}
-										src={getProfilePicture(member)}
-										background="bg-primary-500"
-										classes="!ml-0 !size-6"
-										rounded="rounded-full"
-								/>
+								<Avatar class="!ml-0 !size-6">
+									<Avatar.Image src={getProfilePicture(member)} class="!size-6"/>
+									<Avatar.Fallback>{member.firstName?.toUpperCase().charAt(0)}{member.firstName?.toUpperCase().charAt(1)}</Avatar.Fallback>
+								</Avatar>
 								{member.username}
 							</a>
 						{/if}

src/routes/trips/edit/[trip]/+page.svelte

@@ -209,12 +209,10 @@
 			<div class="flex flex-wrap items-center">
 				<h3 class="h5 align-middle mr-2">Skipper:</h3>
 				<button onclick={()=>{showSkipperSearch = true}} class="btn btn-sm preset-tonal-secondary border border-secondary-500 mr-1 pl-1 group hover:preset-filled-warning-500">
-					<Avatar name={requestedTripData.skipper?.firstName + " " + requestedTripData.skipper?.lastName}
-							src={getProfilePicture(requestedTripData?.skipper)}
-							background="bg-primary-500"
-							classes="!size-6 group-hover:hidden"
-							rounded="rounded-full"
-					/>
+					<Avatar class="!ml-0 !size-6 group-hover:hidden">
+						<Avatar.Image src={getProfilePicture(requestedTripData.skipper)} class="!size-6"/>
+						<Avatar.Fallback>{requestedTripData.skipper?.firstName.charAt(0)+requestedTripData.skipper?.lastName.charAt(0)}</Avatar.Fallback>
+					</Avatar>
 					<span class="h-6 !w-6 !text-md material-symbols-outlined hidden! group-hover:block!">autorenew</span>
 					{requestedTripData.skipper?.username}
 				</button>
@@ -225,20 +223,16 @@
 				<h3 class="h5 align-middle mr-2">Crew:</h3>
 				{#each requestedTripData?.crew as member, i}
 					<button onclick={()=>{deleteUser(member.username)}} class="btn btn-sm preset-tonal-secondary border border-secondary-500 mr-1 pl-1 group hover:preset-filled-error-500 text-sm">
-						<Avatar name={member.firstName + " " + member.lastName}
-								src={getProfilePicture(member)}
-								background="bg-primary-500"
-								classes="!ml-0 !size-6 group-hover:hidden"
-								rounded="rounded-full"
-						/>
+						<Avatar class="!ml-0 !size-6 group-hover:hidden">
+							<Avatar.Image src={getProfilePicture(member)} class="!size-6"/>
+							<Avatar.Fallback>{member.firstName?.charAt(0).toString()!+member.lastName?.charAt(0).toString()}</Avatar.Fallback>
+						</Avatar>
 						<span class="h-6 !w-6 !text-md material-symbols-outlined hidden! group-hover:block!">close</span>
 						{member.username}
 					</button>
 				{/each}
-				<button onclick={()=>{showCrewSearch = true}} class="btn btn-sm !p-1 preset-tonal-secondary border border-secondary-500 mr-1 group hover:preset-filled-primary-500 content-center">
-					<Avatar name="+" classes="!size-6" rounded="rounded-full" background="color-secondary-500">
-						<span class="material-symbols-outlined">add</span>
-					</Avatar>
+				<button onclick={()=>{showCrewSearch = true}} class="btn btn-sm !p-1 !size-8 preset-tonal-secondary border border-secondary-500 mr-1 group hover:preset-filled-primary-500 content-center">
+					+
 				</button>
 				<SearchBar bind:displayed={showCrewSearch} onSelected={addCrew} getList={search} inputClass="w-32"/>
 			</div>