update selects

Author: Ivan Semochkin

src/app.css

@@ -164,13 +164,13 @@ body {
 	--bg-wall-tool: var(--bg-wall);
 
 
-	--bg-select: hsl(0, 0%, 3%);
+	--bg-select: var(--bg-body);
 	--bg-tool-border: #F0E8F4;
-	--select-active: hsl(215, 80%, 35%);
+	--select-active: var(--bg-path);
 
-	--color-weight: hsl(218, 13%, 88%);
-	--color-player: hsl(210, 19%, 73%);
-	--color-nav: hsl(0, 19%, 95%);
+	--color-weight: #F0E8F4;
+	--color-player: #F0E8F4;
+	--color-nav: #F0E8F4;
 }
 
 body.dark {

src/lib/Components/AlgoSelect.svelte

@@ -20,15 +20,13 @@
 		player.reset();
 		grid.reset($layout.screen);
 	};
-
-	// <div class="current">
-	// 	{displayNames[$selectedAlgorithm]}
-	// </div>
 </script>
 
-<Border>
+<Border selected={isOpen}>
 	<div class="wrapper" on:pointerdown={setIsOpen}>
-		{displayNames[$selectedAlgorithm]}
+		<div class="name">
+			{displayNames[$selectedAlgorithm]}
+		</div>
 
 		{#if isOpen}
 			<ul use:pointerOutside={{ cb: setIsOpen }}>
@@ -60,20 +58,16 @@
 		font-weight: bold;
 	}
 
-	.current {
-		border-bottom: 2px solid var(--bg-tool-border);
-	}
-
 	ul {
 		z-index: 2;
 		position: absolute;
-		bottom: -1px;
-		left: -1px;
-		width: calc(100% + 2px);
+		bottom: 8px;
+		width: 100%;
 		display: flex;
 		flex-direction: column;
+		justify-content: center;
 		list-style: none;
-		background-color: var(--bg-select);
+		background-color: var(--bg-body);
 	}
 
 	li {
@@ -87,14 +81,17 @@
 	@media (min-width: 600px) {
 		.wrapper {
 			font-size: 28px;
-			min-width: 256px;
 		}
 	}
 
 	@media (min-width: 1024px) {
 		.wrapper {
 			font-size: 36px;
 		}
+
+		ul {
+			bottom: 14px;
+		}
 	}
 
 	@media (min-width: 1600px) {
@@ -108,8 +105,13 @@
 			background-color: var(--select-active);
 		}
 
-		.wrapper:hover {
+		.wrapper:hover .name {
 			background-color: var(--select-active);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 70%;
+			width: 60%;
 		}
 	}
 </style>

src/lib/Components/Border.svelte

@@ -1,11 +1,16 @@
+<script lang="ts">
+	export let selected: boolean;
+</script>
+
 <div class="wrapper">
 	<slot />
-	<div class="border"></div>
+	<div class="border" class:selected></div>
 </div>
 
 <style>
 	.wrapper {
 		position: relative;
+		height: 100%;
 	}
 
 	.border {
@@ -15,6 +20,20 @@
 		height: 2px;
 		left: 20%;
 		width: 60%;
-		bottom: 10px;
+		bottom: 6px;
+		opacity: 0.7;
+	}
+
+	.border.selected {
+		left: 0;
+		transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+		width: 100%;
+		opacity: 1;
+	}
+
+	@media (min-width: 1024px) {
+		.border {
+			bottom: 12px;
+		}
 	}
 </style>

src/lib/Components/Grid.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
 	import Node from '$lib/Components/Node.svelte';
 	import { gridSnapshot } from '$lib/stores/history';
-	import Player from './Player.svelte';
-	import Nav from '$lib/Components/Nav.svelte';
 	import { layout } from '$lib/stores/layout';
 	import { CELL_SIZE, GRID_GAP, grid } from '$lib/stores/grid';
 	import { tool } from '$lib/stores/tool';
 	import { onMount } from 'svelte';
 	import { queueAnimationByKey, removeFromAnimationQByKey } from '$lib/stores/animation';
 	import { selectedNodeKey, startNodeKey, endNodeKey, walls, weight } from '$lib/stores/nodes';
-	import Icon from './Icon.svelte';
 	import { player } from '$lib/stores/player';
 
 	onMount(() => {

src/lib/Components/Tools/Tool.svelte

@@ -2,21 +2,23 @@
 	import { selectedNodeKey } from '$lib/stores/nodes';
 	import { tool, setTool } from '$lib/stores/tool';
 	import type { Tool } from '$lib/types';
+	import Border from '../Border.svelte';
 
 	export let name: Tool;
 </script>
 
-<div
-	class="wrapper"
-	class:selected={name === $tool}
-	on:pointerdown={() => {
-		selectedNodeKey.set(null);
-		setTool(name);
-	}}
->
-	<slot />
-	<div class="border" class:selected={name === $tool}></div>
-</div>
+<Border selected={name === $tool}>
+	<div
+		class="wrapper"
+		class:selected={name === $tool}
+		on:pointerdown={() => {
+			selectedNodeKey.set(null);
+			setTool(name);
+		}}
+	>
+		<slot />
+	</div>
+</Border>
 
 <style>
 	.wrapper {
@@ -28,20 +30,6 @@
 		opacity: 0.7;
 	}
 
-	.border {
-		position: absolute;
-		transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-		background-color: var(--bg-tool-border);
-		height: 2px;
-		width: 30%;
-		bottom: 10px;
-	}
-
-	.border.selected {
-		transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-		width: 130%;
-	}
-
 	.wrapper.selected {
 		opacity: 1;
 	}

src/routes/+page.svelte

@@ -66,7 +66,6 @@
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		/* justify-content: center; */
 		align-items: center;
 		overflow: hidden;
 	}