From 3ed698d501aa83af2c0c169afa3288e454cea653 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 24 Nov 2022 17:50:46 +0000
Subject: [PATCH] improve bottom bar style

---
 .../src/components/Layout/bottomBar/index.less    | 15 ++++++++-------
 packages/app/src/theme/mobile.less                |  4 ++--
 packages/app/src/theme/vars.less                  |  5 +++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less
index a0e53753..03a7c550 100755
--- a/packages/app/src/components/Layout/bottomBar/index.less
+++ b/packages/app/src/components/Layout/bottomBar/index.less
@@ -1,5 +1,4 @@
-@bottomBar_height: 75px;
-@bottomBar_iconSize: 24px;
+@import "theme/vars.less";
 
 .bottomBar {
 	display: flex;
@@ -17,7 +16,7 @@
 	min-width: 100vw;
 	max-width: 100vw;
 
-	height: @bottomBar_height;
+	height: @app_bottomBar_height;
 
 	padding: 10px;
 	overflow: hidden;
@@ -45,13 +44,15 @@
 			transition: all 150ms ease-in;
 
 			width: 20vw;
+
 			min-width: 20vw;
 			max-width: 20vw;
 
 			.icon {
 				border-radius: 360px;
-				height: 100%;
-				width: fit-content;
+
+				height: @app_bottomBar_iconSize;
+				width: @app_bottomBar_iconSize;
 
 				display: flex;
 				flex-direction: column;
@@ -60,9 +61,9 @@
 				justify-content: center;
 
 				color: var(--background-color-contrast);
-				font-size: 2rem;
+				font-size: 1.5rem;
 
-				padding: 12px;
+				padding: 7px;
 				transition: all 70ms ease-in-out;
 
 				svg {
diff --git a/packages/app/src/theme/mobile.less b/packages/app/src/theme/mobile.less
index 4b10aa93..2bc68ef2 100644
--- a/packages/app/src/theme/mobile.less
+++ b/packages/app/src/theme/mobile.less
@@ -1,4 +1,4 @@
-@frameDecorator_height: 20px;
+@import "theme/vars.less";
 
 .app_layout {
 	&.mobile {
@@ -33,7 +33,7 @@
 			z-index: 8000;
 
 			width: 100vw;
-			height: @frameDecorator_height;
+			height: @app_frameDecorator_height;
 
 			background-color: rgba(var(--layoutBackgroundColor), 0.8);
 
diff --git a/packages/app/src/theme/vars.less b/packages/app/src/theme/vars.less
index 18bf2437..de38c100 100755
--- a/packages/app/src/theme/vars.less
+++ b/packages/app/src/theme/vars.less
@@ -1,5 +1,10 @@
 //* Now this only works as an fallback for unset dynamic theme values
 
+@app_frameDecorator_height: 20px;
+
+@app_bottomBar_height: 60px;
+@app_bottomBar_iconSize: 45px;
+
 @app_sidebar_collapsed_width: 80px;
 @app_sidebar_width: 230px;