ui-updates-162 (#10547)

* remove unused tray icon

* fix(gitignore normalize release directory entry in .git

* update regular app icons

* feat(ui): make tooltips less distracting in light mode

* feat(ui): update settings modal design

* fix ui (actions button): broken transition

Author: PavelLaptev

.gitignore

@@ -1,6 +1,6 @@
 # will have compiled rust files and executables
 /target/
-release/
+/release/
 generated-archives/
 generated-do-not-edit/
 

apps/desktop/src/components/ChromeHeader.svelte

@@ -330,10 +330,7 @@
 	.actions-icon__monitor {
 		transform-box: fill-box;
 		transform-origin: center;
-		transition:
-			fill 0.2s,
-			stroke 0.2s,
-			transform 0.3s;
+		transition: transform 0.3s;
 	}
 
 	.actions-icon__star {

apps/desktop/src/components/SettingsModalLayout.svelte

@@ -35,30 +35,32 @@
 </script>
 
 <div class="modal-settings-wrapper">
-	<div class="settings-sidebar" use:focusable>
-		<h3 class="settings-sidebar__title text-16 text-bold">{title}</h3>
-		<div class="settings-sidebar__links">
-			{#each pages.filter((p) => !p.adminOnly || isAdmin) as page}
-				{@const selected = page.id === currentSelectedId}
-				<button
-					type="button"
-					class="text-14 text-semibold settings-sidebar__links-item"
-					class:selected
-					onclick={() => selectPage(page.id)}
-				>
-					<div class="settings-sidebar__links-item__icon">
-						<Icon name={page.icon} />
-					</div>
-					<span>{page.label}</span>
-				</button>
-			{/each}
-		</div>
-
-		{#if footer}
-			<div class="settings-sidebar__footer">
-				{@render footer()}
+	<div class="settings-sidebar__wrapper">
+		<div class="settings-sidebar" use:focusable>
+			<h3 class="settings-sidebar__title text-16 text-bold">{title}</h3>
+			<div class="settings-sidebar__links">
+				{#each pages.filter((p) => !p.adminOnly || isAdmin) as page}
+					{@const selected = page.id === currentSelectedId}
+					<button
+						type="button"
+						class="text-14 text-semibold settings-sidebar__links-item"
+						class:selected
+						onclick={() => selectPage(page.id)}
+					>
+						<div class="settings-sidebar__links-item__icon">
+							<Icon name={page.icon} />
+						</div>
+						<span>{page.label}</span>
+					</button>
+				{/each}
 			</div>
-		{/if}
+
+			{#if footer}
+				<div class="settings-sidebar__footer">
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
 	</div>
 
 	<section class="page-view" use:focusable={{ vertical: true }}>
@@ -79,13 +81,22 @@
 		max-height: 1000px;
 	}
 
+	.settings-sidebar__wrapper {
+		flex: 0 0 230px;
+		padding: 8px;
+		padding-right: 0;
+		background-color: var(--clr-bg-2);
+	}
+
 	.settings-sidebar {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: 210px;
+		height: 100%;
 		padding: 16px 12px 12px 12px;
-		border-right: 1px solid var(--clr-border-2);
+		overflow: hidden;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
 		background-color: var(--clr-bg-1);
 	}