Make the UI flatter

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -325,7 +325,7 @@ const node_click = (index) => {
 			{/each}
 		</div>
 	</div>
-	<div id="footer" class="status_bar highlight_1">
+	<div id="footer">
 		{statusBar}
 	</div>
 </div>
@@ -382,6 +382,8 @@ const node_click = (index) => {
 #footer {
 	flex-shrink: 0;
 	text-align: left;
+	background-color: var(--layer_1_color);
+	padding: 4px;
 }
 
 .node {

svelte/src/user_file_manager/FileManager.svelte

@@ -256,8 +256,16 @@ onMount(() => {
 
 <svelte:window on:keydown={keydown} on:hashchange={hashChange} />
 
+<svetle:head>
+	<style>
+		#footer {
+			border-top-left-radius: 16px;
+		}
+	</style>
+</svetle:head>
+
 <div id="file_manager" class="file_manager">
-	<div id="nav_bar" class="nav_bar highlight_1">
+	<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
 		<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
 		<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
 			<i class="icon">select_all</i> Select
@@ -271,7 +279,7 @@ onMount(() => {
 		</button>
 	</div>
 	{#if selecting}
-		<div class="nav_bar highlight_3">
+		<div class="nav_bar">
 			<!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) -->
 			{#if contentType === "files"}
 				<button on:click={createList}><i class="icon">list</i> Make list</button>
@@ -337,7 +345,6 @@ is collapsed */
 #file_manager {
 	position:         absolute;
 	padding:          0;
-	background-color: var(--layer_2_color);
 	width:            100%;
 	height:           100%;
 	display:          flex;
@@ -347,6 +354,12 @@ is collapsed */
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
+	border-bottom-left-radius: 16px;
+	background-color: var(--layer_1_color);
+	padding: 4px;
+}
+.nav_bar.expanded {
+	border-bottom-left-radius: 0;
 }
 .nav_bar > button {
 	flex-shrink: 0;