From 1084ddf5cc9b988b9296ab39fad2c537ffe920ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Quentin=20Guid=C3=A9e?= <quentin.guidee@gmail.com>
Date: Wed, 23 Mar 2022 16:53:24 +0100
Subject: [PATCH] Use large border-radius in AppNavigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Quentin Guidée <quentin.guidee@gmail.com>
---
 src/components/AppNavigation/AppNavigation.vue                 | 1 +
 src/components/AppNavigationItem/AppNavigationItem.vue         | 1 +
 src/components/AppNavigationSettings/AppNavigationSettings.vue | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 9ba52da73a..1cf3b667a1 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -146,6 +146,7 @@ export default {
 	position: -webkit-sticky;
 	top: $header-height;
 	left: 0;
+	padding: 4px;
 	// Above appcontent
 	z-index: 1800;
 	height: calc(100vh - #{$header-height});
diff --git a/src/components/AppNavigationItem/AppNavigationItem.vue b/src/components/AppNavigationItem/AppNavigationItem.vue
index 10cc0e16d5..55b044e270 100644
--- a/src/components/AppNavigationItem/AppNavigationItem.vue
+++ b/src/components/AppNavigationItem/AppNavigationItem.vue
@@ -495,6 +495,7 @@ export default {
 	width: 100%;
 	min-height: $clickable-area;
 	padding-right: 8px;
+	border-radius: var(--border-radius-large);
 
 	&-wrapper {
 		position: relative;
diff --git a/src/components/AppNavigationSettings/AppNavigationSettings.vue b/src/components/AppNavigationSettings/AppNavigationSettings.vue
index 78c6c548e5..c013f43f19 100644
--- a/src/components/AppNavigationSettings/AppNavigationSettings.vue
+++ b/src/components/AppNavigationSettings/AppNavigationSettings.vue
@@ -102,7 +102,7 @@ export default {
 			background-color: var(--color-main-background);
 			box-shadow: none;
 			border: 0;
-			border-radius: 0;
+			border-radius: var(--border-radius-large);
 			text-align: left;
 			font-weight: normal;
 			font-size: 100%;
@@ -113,6 +113,7 @@ export default {
 			&:hover,
 			&:focus {
 				background-color: var(--color-background-hover);
+				border-radius: var(--border-radius-large);
 			}
 
 			&__icon {