update colors, update layout

Author: Ivan Semochkin

src/app.css

@@ -141,17 +141,24 @@ body {
 
 	--bg-start: #7084E9;
 
-    --bg-end: #E39B48;
+    /* --bg-end: #E39B48; */
+    --bg-end: #D39246;
 
-	--bg-visited: #4D368F;
+	/* --bg-visited: #4D368F; */
+	--bg-visited: #48368F;
 
-	--bg-path: #5568CD;
+	/* --bg-path: #5568CD; */
+	--bg-path: #5C71DA;
 
-    --bg-wall: #D0424B;
+    /* --bg-wall: #D0424B; */
+    --bg-wall: #8E3C41;
 
-    --bg-weight-1: #2A943B;
+    --bg-weight-1: #3B7945;
+    --bg-weight-2: #449743;
+    --bg-weight-3: #4DAC4B;
+    /* --bg-weight-1: #2A943B;
     --bg-weight-2: #56A73B;
-    --bg-weight-3: #74C358;
+    --bg-weight-3: #74C358; */
 
     --bg-weight-tool: var(--bg-weight-2);
 	--bg-wall-tool: var(--bg-wall);

src/lib/Components/AlgoSelect.svelte

@@ -6,6 +6,7 @@
 	import { layout } from '$lib/stores/layout';
 	import { player } from '$lib/stores/player';
 	import { grid } from '$lib/stores/grid';
+	import Border from './Border.svelte';
 
 	let isOpen = false;
 
@@ -19,23 +20,30 @@
 		player.reset();
 		grid.reset($layout.screen);
 	};
+
+	// <div class="current">
+	// 	{displayNames[$selectedAlgorithm]}
+	// </div>
 </script>
 
-<div class="wrapper" on:pointerdown={setIsOpen}>
-	<div class="current">
+<Border>
+	<div class="wrapper" on:pointerdown={setIsOpen}>
 		{displayNames[$selectedAlgorithm]}
-	</div>
 
-	{#if isOpen}
-		<ul use:pointerOutside={{ cb: setIsOpen }}>
-			{#each Object.entries(displayNames) as [key, displayName]}
-				<li class:selected={$selectedAlgorithm === key} on:pointerdown={() => selectAlgorithm(key)}>
-					{displayName}
-				</li>
-			{/each}
-		</ul>
-	{/if}
-</div>
+		{#if isOpen}
+			<ul use:pointerOutside={{ cb: setIsOpen }}>
+				{#each Object.entries(displayNames) as [key, displayName]}
+					<li
+						class:selected={$selectedAlgorithm === key}
+						on:pointerdown={() => selectAlgorithm(key)}
+					>
+						{displayName}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</Border>
 
 <style>
 	.wrapper {
@@ -49,10 +57,13 @@
 		font-size: 24px;
 		color: white;
 		position: relative;
-		border-bottom: 2px solid var(--bg-tool-border);
 		font-weight: bold;
 	}
 
+	.current {
+		border-bottom: 2px solid var(--bg-tool-border);
+	}
+
 	ul {
 		z-index: 2;
 		position: absolute;

src/lib/Components/Border.svelte

@@ -0,0 +1,20 @@
+<div class="wrapper">
+	<slot />
+	<div class="border"></div>
+</div>
+
+<style>
+	.wrapper {
+		position: relative;
+	}
+
+	.border {
+		position: absolute;
+		transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+		background-color: var(--bg-tool-border);
+		height: 2px;
+		left: 20%;
+		width: 60%;
+		bottom: 10px;
+	}
+</style>

src/lib/Components/Tools/Tool.svelte

@@ -25,16 +25,16 @@
 		align-items: center;
 		justify-content: center;
 		position: relative;
-		opacity: 0.5;
+		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: 3px;
-		width: 10px;
-		bottom: 0;
+		height: 2px;
+		width: 30%;
+		bottom: 10px;
 	}
 
 	.border.selected {