From b230f2976c372160573c0134ef0d04e8bf9a321d Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Tue, 17 Oct 2023 17:44:41 +0600
Subject: [PATCH 1/2] update css

---
 .../General/CodeEditor/CodeEditor.module.scss | 10 +++---
 .../ColorPickerWithInput.module.scss          | 18 ++++++----
 .../FallbackComponent.module.scss             |  2 +-
 .../ListItems/Resource/Resource.module.scss   |  6 ++--
 .../Notification/Notification.module.scss     | 23 +++++++-----
 .../General/PopupSearch/PopSearch.module.scss | 14 +++++---
 .../components/General/Spin/Spin.module.scss  |  2 +-
 .../components/General/Text/text.module.scss  |  2 +-
 .../General/Warning/Warning.module.scss       |  2 +-
 .../withPageTitle/withPageTitle.module.scss   |  2 +-
 .../FloatingBar/FloatingBar.module.scss       |  7 ++--
 .../Layouts/Footer/Footer.module.scss         | 35 ++++++++++++-------
 .../Layouts/Legal/Legal.module.scss           | 11 +++---
 .../components/Layouts/Menu/Menu.module.scss  | 12 +++++--
 .../Layouts/Sidebar/Sidebar.module.scss       |  2 +-
 .../ListSearchResults.module.scss             |  2 +-
 ui/src/pages/About/About.module.scss          | 13 ++++---
 .../GithubIssue/GithubIssue.module.scss       |  2 +-
 .../CSS/BorderRadius/BorderRadius.module.scss | 10 ++++--
 .../pages/CSS/BoxShadow/BoxShadow.module.scss |  4 +--
 .../ColorPicker/ColorPicker.module.scss       | 27 ++++++++++----
 .../pages/Converter/Image/Image.module.scss   |  0
 ui/src/pages/Converter/Image/index.tsx        |  8 -----
 .../JsonToTypescript.module.scss              |  6 ++--
 ui/src/pages/Converter/Svg/Svg.module.scss    |  6 +++-
 ui/src/pages/Feedback/Feedback.module.scss    | 23 +++++++-----
 .../pages/Generator/Avatar/Avatar.module.scss |  6 +++-
 .../DataGenerator/DataGenerator.module.scss   | 18 +++++-----
 .../ImageGeneratorFromColors.module.scss      |  8 +++--
 .../pages/Generator/QRcode/QRcode.module.scss |  8 +++--
 ui/src/pages/Home/Home.module.scss            | 28 +++++++++------
 .../Npmpackages/Npmpackages.module.scss       | 10 ++++--
 .../MarkdownEditor/MarkdownEditor.module.scss |  4 +--
 .../MdTableGenerator.module.scss              |  8 ++---
 .../TableOfContent/TableOfContent.module.scss |  6 +++-
 ui/src/pages/Newsfeed/Newsfeed.module.scss    |  2 +-
 .../PageNotFound/PageNotFound.module.scss     | 10 ++++--
 .../Text/TextEditor/TextEditor.module.scss    | 24 ++++++++-----
 .../CodeFormatter/CodeFormatter.module.scss   |  8 ++---
 .../Tools/Diagramming/Diagramming.module.scss |  6 +++-
 .../Tools/Diffchecker/Diffchecker.module.scss |  2 +-
 .../pages/Tools/Sorting/Sorting.module.scss   | 11 ++++--
 ui/src/styles/shadows.css                     |  1 +
 ui/src/styles/sizes.css                       | 23 ++++++++++--
 44 files changed, 281 insertions(+), 151 deletions(-)
 delete mode 100644 ui/src/pages/Converter/Image/Image.module.scss
 delete mode 100644 ui/src/pages/Converter/Image/index.tsx

diff --git a/ui/src/components/General/CodeEditor/CodeEditor.module.scss b/ui/src/components/General/CodeEditor/CodeEditor.module.scss
index 40db8f77..3d7d0e90 100644
--- a/ui/src/components/General/CodeEditor/CodeEditor.module.scss
+++ b/ui/src/components/General/CodeEditor/CodeEditor.module.scss
@@ -4,14 +4,14 @@
 		position: absolute;
 		top: var(--bt-size-16);
 		right: var(--bt-size-10);
-		z-index: 10;
+		z-index: var(--bt-z-index-dropdown);
 
 		&__success {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			padding: 2px 6px;
-			border: 1px solid green;
+			padding: var(--bt-size-2) var(--bt-size-6);
+			border: var(--bt-size-1) solid green;
 			border-radius: var(--bt-size-5);
 		}
 
@@ -19,8 +19,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			padding: 2px 6px;
-			border: 1px solid red;
+			padding: var(--bt-size-2) var(--bt-size-6);
+			border: var(--bt-size-1) solid red;
 			border-radius: var(--bt-size-5);
 		}
 
diff --git a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
index ae37b344..9a1c02fa 100644
--- a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
+++ b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
@@ -1,3 +1,9 @@
+:root {
+	--right: 10px;
+	--left: 1000px;
+	--bg-color: rgb(68, 68, 68);
+}
+
 .cpwi {
 	&__color {
 		position: relative;
@@ -6,13 +12,13 @@
 		align-items: center;
 
 		&_dp {
-			background-color: rgb(68, 68, 68);
-			padding: 10px;
-			border-radius: 10px;
+			background-color: var(--bg-color);
+			padding: var(--bt-size-10);
+			border-radius: var(--bt-size-10);
 			position: absolute;
-			top: 100%;
-			right: 10;
-			left: 1000;
+			top: var(--bt-size-percent-100);
+			right: var(--right);
+			left: var(--left);
 			z-index: var(--bt-z-index-dropdown);
 			display: none;
 		}
diff --git a/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
index e4867cb2..58c557e7 100644
--- a/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
+++ b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
@@ -1,3 +1,3 @@
 .fallback {
-	width: 500px;
+	width: var(--bt-list-card-container);
 }
diff --git a/ui/src/components/General/ListItems/Resource/Resource.module.scss b/ui/src/components/General/ListItems/Resource/Resource.module.scss
index 01603ce2..14d53b1e 100644
--- a/ui/src/components/General/ListItems/Resource/Resource.module.scss
+++ b/ui/src/components/General/ListItems/Resource/Resource.module.scss
@@ -3,7 +3,9 @@
 
 	&_space {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr auto;
+		grid-template-columns: var(--bt-grid-template-1) var(
+				--bt-grid-template-1
+			) var(--bt-grid-template-1) auto;
 	}
 
 	&__avatar {
@@ -21,6 +23,6 @@
 	}
 
 	@media screen and (max-width: 550px) {
-		width: 100%;
+		width: var(--bt-size-percent-100);
 	}
 }
diff --git a/ui/src/components/General/Notification/Notification.module.scss b/ui/src/components/General/Notification/Notification.module.scss
index 55af5543..86d63928 100644
--- a/ui/src/components/General/Notification/Notification.module.scss
+++ b/ui/src/components/General/Notification/Notification.module.scss
@@ -1,9 +1,16 @@
+:root {
+	--nt-size-200: 200px;
+	--nt-size-300: 300px;
+	--status-color: #c83939;
+	--nt-size-minus-25: -25px;
+}
+
 .notification {
-	height: 300px;
-	width: 200px;
+	height: var(--nt-size-300);
+	width: var(--nt-size-200);
 	overflow-y: auto;
 	overflow-x: hidden;
-	border-radius: 8px;
+	border-radius: var(--bt-size-8);
 
 	&__error {
 		text-align: center;
@@ -22,13 +29,13 @@
 		&__status {
 			width: var(--bt-size-7);
 			height: var(--bt-size-7);
-			background-color: #c83939;
+			background-color: var(--status-color);
 			position: absolute;
-			border-radius: 100%;
+			border-radius: var(--bt-size-percent-100);
 			top: var(--bt-size-5);
-			right: 17px;
+			right: var(--bt-size-17);
 			border-color: white;
-			border-width: 1px;
+			border-width: var(--bt-size-1);
 			border-style: solid;
 		}
 	}
@@ -41,7 +48,7 @@
 
 		&_features {
 			padding-top: var(--bt-size-8);
-			margin-left: var(--bt-size-minus-25);
+			margin-left: var(--nt-size-minus-25);
 			padding-bottom: var(--bt-size-8);
 			list-style-type: square;
 
diff --git a/ui/src/components/General/PopupSearch/PopSearch.module.scss b/ui/src/components/General/PopupSearch/PopSearch.module.scss
index caed2733..ab6119d4 100644
--- a/ui/src/components/General/PopupSearch/PopSearch.module.scss
+++ b/ui/src/components/General/PopupSearch/PopSearch.module.scss
@@ -1,6 +1,12 @@
+:root {
+	--popsearch-height: 200px;
+	--popsearch-dark-bg-color: #646363;
+	--popsearch-bg-color: #e0e0e0;
+}
+
 .popsearch {
 	&__container {
-		max-height: 200px;
+		max-height: var(--popsearch-height);
 		overflow-y: auto;
 		margin-top: var(--bt-size-10);
 
@@ -14,17 +20,17 @@
 
 			&_light:hover,
 			&_light:first-child {
-				background-color: #e0e0e0;
+				background-color: var(--popsearch-bg-color);
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:hover {
-				background-color: #646363;
+				background-color: var(--popsearch-dark-bg-color);
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:first-child {
-				background-color: #646363;
+				background-color: var(--popsearch-dark-bg-color);
 				border-radius: var(--bt-size-5);
 			}
 		}
diff --git a/ui/src/components/General/Spin/Spin.module.scss b/ui/src/components/General/Spin/Spin.module.scss
index 7b889f72..e2e23375 100644
--- a/ui/src/components/General/Spin/Spin.module.scss
+++ b/ui/src/components/General/Spin/Spin.module.scss
@@ -1,5 +1,5 @@
 .spin {
 	display: flex;
 	justify-content: center;
-	translate: 0px 100px;
+	translate: var(--bt-size-0) var(--bt-size-100);
 }
diff --git a/ui/src/components/General/Text/text.module.scss b/ui/src/components/General/Text/text.module.scss
index 647a6cd0..7d152ecc 100644
--- a/ui/src/components/General/Text/text.module.scss
+++ b/ui/src/components/General/Text/text.module.scss
@@ -1,6 +1,6 @@
 .title {
 	&__pageHeader {
 		max-width: var(--bt-list-card-container);
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 	}
 }
diff --git a/ui/src/components/General/Warning/Warning.module.scss b/ui/src/components/General/Warning/Warning.module.scss
index 07758dea..3c2c52dc 100644
--- a/ui/src/components/General/Warning/Warning.module.scss
+++ b/ui/src/components/General/Warning/Warning.module.scss
@@ -3,5 +3,5 @@
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	height: 100%;
+	height: var(--bt-size-percent-100);
 }
diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
index e0b659fd..05eba770 100644
--- a/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
+++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
@@ -1,6 +1,6 @@
 .withpagetitle {
 	padding: 0 var(--bt-size-10) 0 var(--bt-size-10);
 	&__header_title {
-		height: 64px;
+		height: var(--bt-size-64);
 	}
 }
diff --git a/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
index 1870bcd5..d077f6b9 100644
--- a/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
+++ b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
@@ -1,13 +1,12 @@
 .fb {
 	z-index: var(--bt-z-index-dropdown);
 	display: flex;
-	height: 64px;
+	height: var(--bt-size-64);
 	align-items: center;
 	justify-content: flex-end;
 	flex-direction: row;
-	// background-color: transparent;
 	position: absolute;
-	right: 18px;
+	right: var(--bt-size-18);
 
 	&__container {
 		right: var(--bt-size-10);
@@ -16,6 +15,6 @@
 		align-items: center;
 		justify-content: flex-end;
 		flex-direction: row;
-		gap: 10px;
+		gap: var(--bt-size-10);
 	}
 }
diff --git a/ui/src/components/Layouts/Footer/Footer.module.scss b/ui/src/components/Layouts/Footer/Footer.module.scss
index 53268465..00496183 100644
--- a/ui/src/components/Layouts/Footer/Footer.module.scss
+++ b/ui/src/components/Layouts/Footer/Footer.module.scss
@@ -1,15 +1,26 @@
+:root {
+	--footer-vw-6: 6vw;
+	--footer-vw-5: 5vw;
+	--footer-color: #e8e8e8;
+}
+
 .footer {
-	padding: 30px 10% 30px 10%;
+	padding: var(--bt-size-30) var(--bt-size-percent-10) var(--bt-size-30)
+		var(--bt-size-percent-10);
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	box-shadow: inset 0px 1px 0px #e8e8e8;
+	grid-template-columns:
+		var(--bt-grid-template-1) var(--bt-grid-template-1) var(
+			--bt-grid-template-1
+		)
+		var(--bt-grid-template-1) var(--bt-grid-template-1);
+	box-shadow: var(--bt-footer-box-shadow);
 	position: sticky;
-	width: 100%;
+	width: var(--bt-size-percent-100);
 
 	&__left {
-		padding-right: 5vw;
-		border-right: 1px solid #e8e8e8;
-		margin-right: 6vw;
+		padding-right: var(--footer-vw-5);
+		border-right: var(--bt-size-1) solid var(--footer-color);
+		margin-right: var(--footer-vw-6);
 	}
 
 	&__right {
@@ -17,10 +28,10 @@
 	}
 
 	&__list {
-		padding: 0px;
+		padding: var(--bt-size-0);
 		list-style-type: none;
 		li {
-			margin: var(--bt-size-10) 0px;
+			margin: var(--bt-size-10) var(--bt-size-0);
 		}
 	}
 }
@@ -30,9 +41,9 @@
 		text-align: center;
 		&__left {
 			border-right: none;
-			padding-right: 0px;
-			margin-right: 0px;
+			padding-right: var(--bt-size-0);
+			margin-right: var(--bt-size-0);
 		}
-		grid-template-columns: 1fr;
+		grid-template-columns: var(--bt-grid-template-1);
 	}
 }
diff --git a/ui/src/components/Layouts/Legal/Legal.module.scss b/ui/src/components/Layouts/Legal/Legal.module.scss
index e21a74a9..ec9300ad 100644
--- a/ui/src/components/Layouts/Legal/Legal.module.scss
+++ b/ui/src/components/Layouts/Legal/Legal.module.scss
@@ -1,5 +1,6 @@
 .legal {
-	padding: 64px 10% 64px 10%;
+	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
 	display: flex;
 
 	ul {
@@ -7,17 +8,17 @@
 	}
 
 	ul li {
-		padding: 5px;
+		padding: var(--bt-size-5);
 	}
 
 	h1 {
 		background-color: #c0c0c0;
-		border-radius: 10px;
+		border-radius: var(--bt-size-10);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 10%;
+		padding: var(--bt-size-percent-10);
 		/* can we do better */
-		margin-bottom: 64px !important;
+		margin-bottom: var(--bt-size-64) !important;
 	}
 }
diff --git a/ui/src/components/Layouts/Menu/Menu.module.scss b/ui/src/components/Layouts/Menu/Menu.module.scss
index 384d0599..9ad3b623 100644
--- a/ui/src/components/Layouts/Menu/Menu.module.scss
+++ b/ui/src/components/Layouts/Menu/Menu.module.scss
@@ -1,12 +1,18 @@
+:root {
+	--height: calc(100dvh - 204px);
+	--mobile-height: calc(100dvh - 168px);
+	--collapsed-height: calc(100dvh - 202px);
+}
+
 .menu {
-	height: calc(100dvh - 204px);
+	height: var(--height);
 	overflow-y: auto;
 
 	&__collapsed {
-		height: calc(100dvh - 202px);
+		height: var(--collapsed-height);
 	}
 
 	@media (max-width: 768px) {
-		height: calc(100dvh - 168px);
+		height: var(--mobile-height);
 	}
 }
diff --git a/ui/src/components/Layouts/Sidebar/Sidebar.module.scss b/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
index cfa438ae..d51eca75 100644
--- a/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
+++ b/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
@@ -1,4 +1,4 @@
 .sidebar {
-	height: 100dvh;
+	height: var(--bt-dvh-100);
 	overflow: hidden;
 }
diff --git a/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss b/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
index e89049da..8585adfa 100644
--- a/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
+++ b/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	max-width: var(--bt-list-card-container);
 	gap: var(--bt-size-16);
-	margin: 0 auto;
+	margin: var(--bt-size-0) auto;
 	overflow-x: hidden;
 
 	&__tag {
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
index 7020ae4e..c94efe51 100644
--- a/ui/src/pages/About/About.module.scss
+++ b/ui/src/pages/About/About.module.scss
@@ -1,8 +1,13 @@
+:root {
+	--about-bg-color: #9c9c9c98;
+}
+
 .about {
-	padding: 64px 10% 64px 10%;
+	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
 
 	&__card {
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 		max-width: var(--bt-converter-width);
 
 		&__container {
@@ -29,11 +34,11 @@
 
 				background-blend-mode: color-dodge;
 				object-fit: cover;
-				background-color: #9c9c9c98;
+				background-color: var(--about-bg-color);
 				display: flex;
 				justify-content: center;
 				flex-direction: column;
-				padding: 50px;
+				padding: var(--bt-size-50);
 
 				p {
 					text-align: right;
diff --git a/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
index 5145f737..64f30868 100644
--- a/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
+++ b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
@@ -1,3 +1,3 @@
 .gi {
-	height: 100%;
+	height: var(--bt-size-percent-100);
 }
diff --git a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
index 7e995f5f..55ec40b8 100644
--- a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
+++ b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
@@ -1,10 +1,14 @@
+:root {
+	--br-dvh-25: 25dvh;
+}
+
 .br {
 	display: flex;
 	flex-direction: column;
 	gap: var(--bt-size-20);
 	&__input,
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 
 	&__output {
@@ -18,11 +22,11 @@
 			gap: var(--bt-size-20);
 
 			&_text {
-				aspect-ratio: 1 / 1;
+				aspect-ratio: var(--bt-number-1) / var(--bt-number-1);
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				height: 25dvh;
+				height: var(--br-dvh-25);
 			}
 
 			&_text {
diff --git a/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss b/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
index 8925095f..3c8fddc4 100644
--- a/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
+++ b/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
@@ -3,10 +3,10 @@
 	flex-direction: column;
 	gap: var(--bt-size-20);
 	&__input {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
index 2df2fb72..63fc9d86 100644
--- a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
+++ b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
@@ -1,6 +1,15 @@
+:root {
+	--cp-size-435: 435px;
+	--cp-size-380: 380px;
+	--cp-size-360: 360px;
+	--cp-size-minus-10: -10px;
+}
+
 .cp {
 	display: grid;
-	grid-template-columns: 380px 360px 435px 435px;
+	grid-template-columns:
+		var(--cp-size-380) var(--cp-size-360) var(--cp-size-435)
+		var(--cp-size-435);
 	gap: var(--bt-size-16);
 	justify-content: center;
 
@@ -24,21 +33,23 @@
 	}
 
 	@media (max-width: 1900px) {
-		grid-template-columns: 435px 360px 435px;
+		grid-template-columns: var(--cp-size-435) var(--cp-size-360) var(
+				--cp-size-435
+			);
 	}
 
 	@media (max-width: 1800px) {
-		grid-template-columns: 435px 435px;
+		grid-template-columns: var(--cp-size-435) var(--cp-size-435);
 	}
 
 	@media (max-width: 1200px) {
-		grid-template-columns: 435px;
+		grid-template-columns: var(--cp-size-435);
 	}
 }
 
 .cd {
 	padding: var(--bt-size-5);
-	border-radius: 10px;
+	border-radius: var(--bt-size-10);
 	&__container {
 		display: flex;
 		gap: var(--bt-size-16);
@@ -57,8 +68,10 @@
 				linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 25%, transparent 25%),
 				linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.6) 75%),
 				linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.6) 70%);
-			background-size: 20px 20px;
-			background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+			background-size: var(--bt-size-20) var(--bt-size-20);
+			background-position: 0 0, 0 var(--bt-size-10),
+				var(--bt-size-10) var(--cp-size-minus-10),
+				var(--cp-size-minus-10) var(--bt-size-0);
 		}
 	}
 }
diff --git a/ui/src/pages/Converter/Image/Image.module.scss b/ui/src/pages/Converter/Image/Image.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/src/pages/Converter/Image/index.tsx b/ui/src/pages/Converter/Image/index.tsx
deleted file mode 100644
index e28c0129..00000000
--- a/ui/src/pages/Converter/Image/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import styles from "./Image.module.scss";
-
-const Image: React.FC = () => {
-	return <div className={styles.root}></div>;
-};
-
-export default Image;
diff --git a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
index 7a4141c1..99389657 100644
--- a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
+++ b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
@@ -5,10 +5,10 @@
 	}
 
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 
 		&_warning {
-			min-height: 500px;
+			min-height: var(--bt-size-500);
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
@@ -17,7 +17,7 @@
 		// xl(1280px)
 		@media screen and (min-width: 1280px) {
 			&_warning {
-				min-height: 600px;
+				min-height: var(--bt-size-600);
 			}
 		}
 	}
diff --git a/ui/src/pages/Converter/Svg/Svg.module.scss b/ui/src/pages/Converter/Svg/Svg.module.scss
index 76d69a37..7944f41e 100644
--- a/ui/src/pages/Converter/Svg/Svg.module.scss
+++ b/ui/src/pages/Converter/Svg/Svg.module.scss
@@ -1,3 +1,7 @@
+:root {
+	--svg-size-335: 335px;
+}
+
 .svgformatter {
 	&__left,
 	&__right {
@@ -6,7 +10,7 @@
 		gap: var(--bt-size-20);
 
 		&__code {
-			min-height: 335px;
+			min-height: var(--svg-size-335);
 			display: grid;
 		}
 	}
diff --git a/ui/src/pages/Feedback/Feedback.module.scss b/ui/src/pages/Feedback/Feedback.module.scss
index bd08d29d..e97c941e 100644
--- a/ui/src/pages/Feedback/Feedback.module.scss
+++ b/ui/src/pages/Feedback/Feedback.module.scss
@@ -1,5 +1,12 @@
+:root {
+	--feedback-size-1400: 1400px;
+	--feedback-size-1949: 1949.375px;
+	--feedback-border-color: #ccc;
+}
+
 .feedback {
-	padding: 64px 0 64px 0;
+	padding: var(--bt-size-64) var(--bt-size-0) var(--bt-size-64)
+		var(--bt-size-0);
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
@@ -7,14 +14,14 @@
 
 	.iframe,
 	&__skeletons {
-		width: 55%;
-		max-width: 1400px;
+		width: var(--bt-size-percent-55);
+		max-width: var(--feedback-size-1400);
 	}
 
 	&__skeletons {
 		padding: var(--bt-size-50);
-		height: 1949.375px;
-		border: 1px solid #ccc;
+		height: var(--feedback-size-1949);
+		border: var(--bt-size-1) solid var(--feedback-border-color);
 		background: white;
 		display: flex;
 		flex-direction: column;
@@ -22,7 +29,7 @@
 	}
 
 	.iframe {
-		border: 1px solid #ccc;
+		border: var(--bt-size-1) solid var(--feedback-border-color);
 		display: block;
 		background: transparent;
 	}
@@ -30,14 +37,14 @@
 	@media (max-width: 1300px) {
 		.iframe,
 		&__skeletons {
-			width: 70%;
+			width: var(--bt-size-percent-70);
 		}
 	}
 
 	@media (max-width: 1000px) {
 		.iframe,
 		&__skeletons {
-			width: 95%;
+			width: var(--bt-size-percent-90);
 		}
 	}
 }
diff --git a/ui/src/pages/Generator/Avatar/Avatar.module.scss b/ui/src/pages/Generator/Avatar/Avatar.module.scss
index a5070b29..8b9f0ec7 100644
--- a/ui/src/pages/Generator/Avatar/Avatar.module.scss
+++ b/ui/src/pages/Generator/Avatar/Avatar.module.scss
@@ -1,6 +1,10 @@
+:root {
+	--avatar-size-424: 424px;
+}
+
 .avatar {
 	&__output {
-		min-height: 424px;
+		min-height: var(--avatar-size-424);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss b/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
index ecd6ca9e..612c8643 100644
--- a/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
+++ b/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
@@ -3,29 +3,29 @@
 		&__bottom {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
-			grid-gap: 20px 10px;
+			grid-gap: var(--bt-size-20) var(--bt-size-10);
 
 			&__select {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 
 			&__input {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 
 			&__autocomplete {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 		}
 	}
 
 	&__right {
 		display: grid;
-		row-gap: 10px;
-		grid-template-columns: 1fr;
+		row-gap: var(--bt-size-10);
+		grid-template-columns: var(--bt-grid-template-1);
 		overflow-x: auto;
 	}
 }
diff --git a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index aeebe73e..6e1e5473 100644
--- a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
@@ -1,13 +1,17 @@
+:root {
+	--igfc-bg-color: rgba(255, 255, 255, 0.2);
+}
+
 .igfc {
 	&__card {
 		min-height: var(--bt-card-height);
 	}
 
 	&__colors {
-		grid-column: 1 / -1;
+		grid-column: var(--bt-number-1) / var(--bt-size-minus-1);
 		margin-top: var(--bt-size-16);
 		position: relative;
-		background: rgba(255, 255, 255, 0.2);
+		background: var(---igfc-bg-color);
 	}
 
 	&__images {
diff --git a/ui/src/pages/Generator/QRcode/QRcode.module.scss b/ui/src/pages/Generator/QRcode/QRcode.module.scss
index eb2de098..2e7cdcb2 100644
--- a/ui/src/pages/Generator/QRcode/QRcode.module.scss
+++ b/ui/src/pages/Generator/QRcode/QRcode.module.scss
@@ -1,12 +1,16 @@
+:root {
+	--qrcode-size-623: 623px;
+}
+
 .qrcode {
 	&__label {
 		display: flex;
-		width: 100vw;
+		width: var(--bt-vw-100);
 		justify-content: space-between;
 	}
 
 	&__output {
-		height: 623px;
+		height: var(--qrcode-size-623);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 563e8cbb..6bfde707 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -1,6 +1,14 @@
+:root {
+	--home-height: calc(100dvh - 272px);
+	--home-number-2: 2;
+	--home-hero-paragraph-width: 700px;
+	--home-z-index-100: 100;
+}
+
 .home {
-	padding: 100px 10% 64px 10%;
-	min-height: calc(100dvh - 272px);
+	padding: var(--bt-size-100) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
+	min-height: var(--home-height);
 	animation: var(--bt-animation-moveBackground);
 
 	&__container {
@@ -16,7 +24,7 @@
 		gap: var(--bt-size-100);
 		&_text {
 			display: flex;
-			flex: 2;
+			flex: var(--home-number-2);
 			flex-direction: column;
 			justify-content: center;
 			text-align: center;
@@ -26,23 +34,23 @@
 			}
 			&_paragraph {
 				text-align: left;
-				max-width: 700px;
+				max-width: var(--home-hero-paragraph-width);
 			}
 		}
 
 		&_image {
-			flex: 1;
+			flex: var(--bt-number-1);
 		}
 	}
 
 	&__features {
 		display: flex;
 		align-items: center;
-		border-radius: 8px;
-		z-index: 100;
+		border-radius: var(--bt-size-8);
+		z-index: var(--home-z-index-100);
 
 		&_card {
-			height: 100%;
+			height: var(--bt-size-percent-100);
 		}
 	}
 
@@ -54,10 +62,10 @@
 	}
 
 	@media screen and (max-width: 768px) {
-		padding-top: 64px;
+		padding-top: var(--bt-size-64);
 		&__hero {
 			flex-direction: column;
-			gap: 16px;
+			gap: var(--bt-size-16);
 		}
 	}
 }
diff --git a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
index 6a19b037..60f5a134 100644
--- a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
+++ b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
@@ -1,13 +1,17 @@
+:root {
+	--npm-size-minus-7: 7.5px;
+}
+
 .npm {
 	max-width: var(--bt-converter-width);
-	margin: 0 auto;
+	margin: var(--bt-size-0) auto;
 
 	&__card {
 		position: relative;
 		&_tag {
 			position: absolute;
-			top: 0;
-			right: -7.5px;
+			top: var(--bt-size-0);
+			right: var(--npm-size-minus-7);
 		}
 	}
 }
diff --git a/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss b/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
index 0e10bd87..194f7131 100644
--- a/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
+++ b/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
@@ -5,8 +5,8 @@
 	flex-direction: column;
 
 	&__editor {
-		flex: 1;
-		margin-top: 20px;
+		flex: var(--bt-number-1);
+		margin-top: var(--bt-size-20);
 		overflow: auto;
 	}
 }
diff --git a/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss b/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
index fb5ba013..4a7b48c0 100644
--- a/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
+++ b/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
@@ -6,15 +6,15 @@
 	gap: var(--bt-size-16);
 
 	&__editor {
-		flex: 1;
+		flex: var(--bt-number-1);
 		overflow: auto;
 		position: relative;
 
 		&__spinner {
 			position: absolute;
-			top: 5%;
-			left: 1%;
-			z-index: 10;
+			top: var(--bt-size-percent-5);
+			left: var(--bt-size-percent-1);
+			z-index: var(--bt-z-index-dropdown);
 		}
 	}
 }
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
index 034be762..4a70d059 100644
--- a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
+++ b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -1,3 +1,7 @@
+:root {
+	--toc-height: calc(100dvh - 290px);
+}
+
 .toc {
 	overflow: hidden;
 
@@ -16,6 +20,6 @@
 	}
 
 	&__textarea {
-		height: calc(100dvh - 290px) !important;
+		height: var(--toc-height) !important;
 	}
 }
diff --git a/ui/src/pages/Newsfeed/Newsfeed.module.scss b/ui/src/pages/Newsfeed/Newsfeed.module.scss
index 5ef49e38..68fbeac3 100644
--- a/ui/src/pages/Newsfeed/Newsfeed.module.scss
+++ b/ui/src/pages/Newsfeed/Newsfeed.module.scss
@@ -1,7 +1,7 @@
 .newsfeed {
 	&_tabs {
 		max-width: var(--bt-list-card-container);
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 		flex-wrap: wrap;
 	}
 }
diff --git a/ui/src/pages/PageNotFound/PageNotFound.module.scss b/ui/src/pages/PageNotFound/PageNotFound.module.scss
index 1494721e..3f72d66c 100644
--- a/ui/src/pages/PageNotFound/PageNotFound.module.scss
+++ b/ui/src/pages/PageNotFound/PageNotFound.module.scss
@@ -1,12 +1,16 @@
+:root {
+	--pnf-height: calc(100vh - 70px);
+}
+
 .pnf {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: calc(100vh - 70px);
+	height: var(--pnf-height);
 	img {
-		width: 100%;
-		height: 100%;
+		width: var(--bt-size-percent-100);
+		height: var(--bt-size-percent-100);
 		object-fit: cover;
 	}
 }
diff --git a/ui/src/pages/Text/TextEditor/TextEditor.module.scss b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
index 5fc61d51..76c3cede 100644
--- a/ui/src/pages/Text/TextEditor/TextEditor.module.scss
+++ b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
@@ -1,3 +1,8 @@
+:root {
+	--te-footer-color: rgba(34, 47, 62, 0.7);
+	--te-border-color: #eee;
+}
+
 .te {
 	display: flex;
 	flex-direction: column;
@@ -7,24 +12,25 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 		background-color: white;
-		padding: 5px;
-		color: rgba(34, 47, 62, 0.7);
-		border-radius: 0px 0px 10px 10px;
-		border-left: 2px solid #eee;
-		border-bottom: 2px solid #eee;
-		border-right: 2px solid #eee;
+		padding: var(--bt-size-5);
+		color: var(--te-footer-color);
+		border-radius: var(--bt-size-0) var(--bt-size-0) var(--bt-size-10)
+			var(--bt-size-10);
+		border-left: var(--bt-size-2) solid var(--te-border-color);
+		border-bottom: var(--bt-size-2) solid var(--te-border-color);
+		border-right: var(--bt-size-2) solid var(--te-border-color);
 
 		&_dark {
-			background-color: rgba(34, 47, 62, 0.7);
+			background-color: var(--te-footer-color);
 			color: white;
-			border-color: rgba(34, 47, 62, 0.7);
+			border-color: var(--te-footer-color);
 		}
 	}
 
 	@media (max-width: 768px) {
 		&__footer span {
 			flex-basis: calc(33.333% - 10px);
-			margin-bottom: 5px;
+			margin-bottom: var(--bt-size-5);
 			text-align: center;
 		}
 	}
diff --git a/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss b/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
index c5a29c5b..d408356b 100644
--- a/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
+++ b/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
@@ -2,14 +2,14 @@
 	&__input {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 
 		&_warning {
-			min-height: 500px;
+			min-height: var(--bt-size-500);
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
@@ -18,7 +18,7 @@
 		// xl(1280px)
 		@media screen and (min-width: 1280px) {
 			&_warning {
-				min-height: 600px;
+				min-height: var(--bt-size-600);
 			}
 		}
 	}
diff --git a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
index e5b5daab..92e0723c 100644
--- a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
+++ b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
@@ -1,3 +1,7 @@
+:root {
+	--height: calc(100dvh - 90px);
+}
+
 .diagramming {
-	height: calc(100dvh - 90px);
+	height: var(--height);
 }
diff --git a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
index 1981be3c..a37ffbb6 100644
--- a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
+++ b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
@@ -2,7 +2,7 @@
 	&__button {
 		display: flex;
 		justify-content: center;
-		padding: var(--bt-size-20) 0;
+		padding: var(--bt-size-20) var(--bt-size-0);
 	}
 
 	&__part {
diff --git a/ui/src/pages/Tools/Sorting/Sorting.module.scss b/ui/src/pages/Tools/Sorting/Sorting.module.scss
index e3999299..a371bdd5 100644
--- a/ui/src/pages/Tools/Sorting/Sorting.module.scss
+++ b/ui/src/pages/Tools/Sorting/Sorting.module.scss
@@ -1,3 +1,8 @@
+:root {
+	--input-height: calc(100dvh - 210px);
+	--output-height: calc(100dvh - 300px);
+}
+
 .sort {
 	overflow: hidden;
 
@@ -13,16 +18,16 @@
 	&__input {
 		&_label {
 			display: flex;
-			width: 100vw;
+			width: var(--bt-vw-100);
 			justify-content: space-between;
 		}
 	}
 
 	&__input_textarea {
-		height: calc(100dvh - 210px);
+		height: var(--input-height);
 	}
 
 	&__output_textarea {
-		height: calc(100dvh - 300px) !important;
+		height: var(--output-height) !important;
 	}
 }
diff --git a/ui/src/styles/shadows.css b/ui/src/styles/shadows.css
index 5c295d07..ea9bdd5a 100644
--- a/ui/src/styles/shadows.css
+++ b/ui/src/styles/shadows.css
@@ -1,3 +1,4 @@
 :where(html) {
 	--bt-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+	--bt-footer-box-shadow: inset 0px 1px 0px #e8e8e8;
 }
diff --git a/ui/src/styles/sizes.css b/ui/src/styles/sizes.css
index 1cf6da20..47314882 100644
--- a/ui/src/styles/sizes.css
+++ b/ui/src/styles/sizes.css
@@ -5,19 +5,36 @@
 
 	--bt-full-page-height: calc(100dvh - 110px);
 
-	--bt-size-minus-1: -1px;
-	--bt-size-minus-25: -25px;
+	--bt-number-1: 1;
+
+	--bt-grid-template-1: 1fr;
+
+	--bt-size-percent-1: 1%;
+	--bt-size-percent-5: 5%;
+	--bt-size-percent-10: 10%;
+	--bt-size-percent-55: 55%;
+	--bt-size-percent-70: 70%;
+	--bt-size-percent-95: 95%;
+	--bt-size-percent-100: 100%;
 
+	--bt-vw-100: 100vw;
+	--bt-dvh-100: 100dvh;
+
+	--bt-size-minus-1: -1px;
+	--bt-size-0: 0px;
+	--bt-size-1: 1px;
 	--bt-size-2: 2px;
 	--bt-size-3: 3px;
 	--bt-size-4: 4px;
 	--bt-size-5: 5px;
+	--bt-size-6: 6px;
 	--bt-size-7: 7px;
 	--bt-size-8: 8px;
 	--bt-size-10: 10px;
 	--bt-size-11: 11px;
 	--bt-size-15: 15px;
 	--bt-size-16: 16px;
+	--bt-size-17: 17px;
 	--bt-size-18: 18px;
 	--bt-size-20: 20px;
 	--bt-size-24: 24px;
@@ -29,4 +46,6 @@
 	--bt-size-64: 64px;
 	--bt-size-100: 100px;
 	--bt-size-135: 135px;
+	--bt-size-500: 500px;
+	--bt-size-600: 600px;
 }

From f498af4c8665f9799230d2a0b3921559cf3d80b7 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Wed, 18 Oct 2023 13:18:54 +0600
Subject: [PATCH 2/2] add updated css with sass variable

---
 .../ColorPickerWithInput.module.scss          | 14 ++++------
 .../Notification/Notification.module.scss     | 18 ++++++------
 .../General/PopupSearch/PopSearch.module.scss | 16 +++++------
 .../Layouts/Footer/Footer.module.scss         | 14 ++++------
 .../components/Layouts/Menu/Menu.module.scss  | 14 ++++------
 ui/src/pages/About/About.module.scss          |  6 ++--
 .../CSS/BorderRadius/BorderRadius.module.scss |  6 ++--
 .../ColorPicker/ColorPicker.module.scss       | 28 +++++++++----------
 ui/src/pages/Converter/Svg/Svg.module.scss    |  6 ++--
 ui/src/pages/Feedback/Feedback.module.scss    | 16 +++++------
 .../pages/Generator/Avatar/Avatar.module.scss |  6 ++--
 .../ImageGeneratorFromColors.module.scss      |  6 ++--
 .../pages/Generator/QRcode/QRcode.module.scss |  6 ++--
 ui/src/pages/Home/Home.module.scss            | 18 ++++++------
 .../Npmpackages/Npmpackages.module.scss       |  6 ++--
 .../TableOfContent/TableOfContent.module.scss |  6 ++--
 .../PageNotFound/PageNotFound.module.scss     |  6 ++--
 .../Text/TextEditor/TextEditor.module.scss    | 18 ++++++------
 .../Tools/Diagramming/Diagramming.module.scss |  6 ++--
 .../pages/Tools/Sorting/Sorting.module.scss   | 10 +++----
 20 files changed, 93 insertions(+), 133 deletions(-)

diff --git a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
index 9a1c02fa..1b948e11 100644
--- a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
+++ b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
@@ -1,8 +1,6 @@
-:root {
-	--right: 10px;
-	--left: 1000px;
-	--bg-color: rgb(68, 68, 68);
-}
+$cp-right: 10px;
+$cp-left: 1000px;
+$cp-bg-color: rgb(68, 68, 68);
 
 .cpwi {
 	&__color {
@@ -12,13 +10,13 @@
 		align-items: center;
 
 		&_dp {
-			background-color: var(--bg-color);
+			background-color: $cp-bg-color;
 			padding: var(--bt-size-10);
 			border-radius: var(--bt-size-10);
 			position: absolute;
 			top: var(--bt-size-percent-100);
-			right: var(--right);
-			left: var(--left);
+			right: $cp-right;
+			left: $cp-left;
 			z-index: var(--bt-z-index-dropdown);
 			display: none;
 		}
diff --git a/ui/src/components/General/Notification/Notification.module.scss b/ui/src/components/General/Notification/Notification.module.scss
index 86d63928..87ef6df7 100644
--- a/ui/src/components/General/Notification/Notification.module.scss
+++ b/ui/src/components/General/Notification/Notification.module.scss
@@ -1,13 +1,11 @@
-:root {
-	--nt-size-200: 200px;
-	--nt-size-300: 300px;
-	--status-color: #c83939;
-	--nt-size-minus-25: -25px;
-}
+$notification-size-200: 200px;
+$notification-size-300: 300px;
+$notification-status-color: #c83939;
+$notification-size-minus-25: -25px;
 
 .notification {
-	height: var(--nt-size-300);
-	width: var(--nt-size-200);
+	height: $notification-size-300;
+	width: $notification-size-200;
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-radius: var(--bt-size-8);
@@ -29,7 +27,7 @@
 		&__status {
 			width: var(--bt-size-7);
 			height: var(--bt-size-7);
-			background-color: var(--status-color);
+			background-color: $notification-status-color;
 			position: absolute;
 			border-radius: var(--bt-size-percent-100);
 			top: var(--bt-size-5);
@@ -48,7 +46,7 @@
 
 		&_features {
 			padding-top: var(--bt-size-8);
-			margin-left: var(--nt-size-minus-25);
+			margin-left: $notification-size-minus-25;
 			padding-bottom: var(--bt-size-8);
 			list-style-type: square;
 
diff --git a/ui/src/components/General/PopupSearch/PopSearch.module.scss b/ui/src/components/General/PopupSearch/PopSearch.module.scss
index ab6119d4..4e660ddc 100644
--- a/ui/src/components/General/PopupSearch/PopSearch.module.scss
+++ b/ui/src/components/General/PopupSearch/PopSearch.module.scss
@@ -1,12 +1,10 @@
-:root {
-	--popsearch-height: 200px;
-	--popsearch-dark-bg-color: #646363;
-	--popsearch-bg-color: #e0e0e0;
-}
+$popsearch-height: 200px;
+$popsearch-bg-dark: #646363;
+$popsearch-bg-color: #e0e0e0;
 
 .popsearch {
 	&__container {
-		max-height: var(--popsearch-height);
+		max-height: $popsearch-height;
 		overflow-y: auto;
 		margin-top: var(--bt-size-10);
 
@@ -20,17 +18,17 @@
 
 			&_light:hover,
 			&_light:first-child {
-				background-color: var(--popsearch-bg-color);
+				background-color: $popsearch-bg-color;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:hover {
-				background-color: var(--popsearch-dark-bg-color);
+				background-color: $popsearch-bg-dark;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:first-child {
-				background-color: var(--popsearch-dark-bg-color);
+				background-color: $popsearch-bg-dark;
 				border-radius: var(--bt-size-5);
 			}
 		}
diff --git a/ui/src/components/Layouts/Footer/Footer.module.scss b/ui/src/components/Layouts/Footer/Footer.module.scss
index 00496183..b40c61f2 100644
--- a/ui/src/components/Layouts/Footer/Footer.module.scss
+++ b/ui/src/components/Layouts/Footer/Footer.module.scss
@@ -1,8 +1,6 @@
-:root {
-	--footer-vw-6: 6vw;
-	--footer-vw-5: 5vw;
-	--footer-color: #e8e8e8;
-}
+$footer-vw-6: 6vw;
+$footer-vw-5: 5vw;
+$footer-color: #e8e8e8;
 
 .footer {
 	padding: var(--bt-size-30) var(--bt-size-percent-10) var(--bt-size-30)
@@ -18,9 +16,9 @@
 	width: var(--bt-size-percent-100);
 
 	&__left {
-		padding-right: var(--footer-vw-5);
-		border-right: var(--bt-size-1) solid var(--footer-color);
-		margin-right: var(--footer-vw-6);
+		padding-right: $footer-vw-5;
+		border-right: var(--bt-size-1) solid $footer-color;
+		margin-right: $footer-vw-6;
 	}
 
 	&__right {
diff --git a/ui/src/components/Layouts/Menu/Menu.module.scss b/ui/src/components/Layouts/Menu/Menu.module.scss
index 9ad3b623..0ff0d615 100644
--- a/ui/src/components/Layouts/Menu/Menu.module.scss
+++ b/ui/src/components/Layouts/Menu/Menu.module.scss
@@ -1,18 +1,16 @@
-:root {
-	--height: calc(100dvh - 204px);
-	--mobile-height: calc(100dvh - 168px);
-	--collapsed-height: calc(100dvh - 202px);
-}
+$menu-height: calc(100dvh - 204px);
+$menu-mobile-height: calc(100dvh - 168px);
+$menu-collapsed-height: calc(100dvh - 202px);
 
 .menu {
-	height: var(--height);
+	height: $menu-height;
 	overflow-y: auto;
 
 	&__collapsed {
-		height: var(--collapsed-height);
+		height: $menu-collapsed-height;
 	}
 
 	@media (max-width: 768px) {
-		height: var(--mobile-height);
+		height: $menu-mobile-height;
 	}
 }
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
index c94efe51..2242efe2 100644
--- a/ui/src/pages/About/About.module.scss
+++ b/ui/src/pages/About/About.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--about-bg-color: #9c9c9c98;
-}
+$about-bg-color: #9c9c9c98;
 
 .about {
 	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
@@ -34,7 +32,7 @@
 
 				background-blend-mode: color-dodge;
 				object-fit: cover;
-				background-color: var(--about-bg-color);
+				background-color: $about-bg-color;
 				display: flex;
 				justify-content: center;
 				flex-direction: column;
diff --git a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
index 55ec40b8..77311288 100644
--- a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
+++ b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--br-dvh-25: 25dvh;
-}
+$br-dvh-25: 25dvh;
 
 .br {
 	display: flex;
@@ -26,7 +24,7 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				height: var(--br-dvh-25);
+				height: $br-dvh-25;
 			}
 
 			&_text {
diff --git a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
index 63fc9d86..0a08bc94 100644
--- a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
+++ b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
@@ -1,15 +1,13 @@
-:root {
-	--cp-size-435: 435px;
-	--cp-size-380: 380px;
-	--cp-size-360: 360px;
-	--cp-size-minus-10: -10px;
-}
+$cp-size-435: 435px;
+$cp-size-380: 380px;
+$cp-size-360: 360px;
+$cp-size-minus-10: -10px;
 
 .cp {
 	display: grid;
 	grid-template-columns:
-		var(--cp-size-380) var(--cp-size-360) var(--cp-size-435)
-		var(--cp-size-435);
+		$cp-size-380 $cp-size-360 $cp-size-435
+		$cp-size-435;
 	gap: var(--bt-size-16);
 	justify-content: center;
 
@@ -33,17 +31,17 @@
 	}
 
 	@media (max-width: 1900px) {
-		grid-template-columns: var(--cp-size-435) var(--cp-size-360) var(
-				--cp-size-435
-			);
+		grid-template-columns:
+			$cp-size-435 $cp-size-360
+			$cp-size-435;
 	}
 
 	@media (max-width: 1800px) {
-		grid-template-columns: var(--cp-size-435) var(--cp-size-435);
+		grid-template-columns: $cp-size-435 $cp-size-435;
 	}
 
 	@media (max-width: 1200px) {
-		grid-template-columns: var(--cp-size-435);
+		grid-template-columns: $cp-size-435;
 	}
 }
 
@@ -70,8 +68,8 @@
 				linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.6) 70%);
 			background-size: var(--bt-size-20) var(--bt-size-20);
 			background-position: 0 0, 0 var(--bt-size-10),
-				var(--bt-size-10) var(--cp-size-minus-10),
-				var(--cp-size-minus-10) var(--bt-size-0);
+				var(--bt-size-10) $cp-size-minus-10,
+				$cp-size-minus-10 var(--bt-size-0);
 		}
 	}
 }
diff --git a/ui/src/pages/Converter/Svg/Svg.module.scss b/ui/src/pages/Converter/Svg/Svg.module.scss
index 7944f41e..42af62a6 100644
--- a/ui/src/pages/Converter/Svg/Svg.module.scss
+++ b/ui/src/pages/Converter/Svg/Svg.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--svg-size-335: 335px;
-}
+$svg-size-335: 335px;
 
 .svgformatter {
 	&__left,
@@ -10,7 +8,7 @@
 		gap: var(--bt-size-20);
 
 		&__code {
-			min-height: var(--svg-size-335);
+			min-height: $svg-size-335;
 			display: grid;
 		}
 	}
diff --git a/ui/src/pages/Feedback/Feedback.module.scss b/ui/src/pages/Feedback/Feedback.module.scss
index e97c941e..458a45b7 100644
--- a/ui/src/pages/Feedback/Feedback.module.scss
+++ b/ui/src/pages/Feedback/Feedback.module.scss
@@ -1,8 +1,6 @@
-:root {
-	--feedback-size-1400: 1400px;
-	--feedback-size-1949: 1949.375px;
-	--feedback-border-color: #ccc;
-}
+$feedback-size-1400: 1400px;
+$feedback-size-1949: 1949.375px;
+$feedback-border-color: #ccc;
 
 .feedback {
 	padding: var(--bt-size-64) var(--bt-size-0) var(--bt-size-64)
@@ -15,13 +13,13 @@
 	.iframe,
 	&__skeletons {
 		width: var(--bt-size-percent-55);
-		max-width: var(--feedback-size-1400);
+		max-width: $feedback-size-1400;
 	}
 
 	&__skeletons {
 		padding: var(--bt-size-50);
-		height: var(--feedback-size-1949);
-		border: var(--bt-size-1) solid var(--feedback-border-color);
+		height: $feedback-size-1949;
+		border: var(--bt-size-1) solid $feedback-border-color;
 		background: white;
 		display: flex;
 		flex-direction: column;
@@ -29,7 +27,7 @@
 	}
 
 	.iframe {
-		border: var(--bt-size-1) solid var(--feedback-border-color);
+		border: var(--bt-size-1) solid $feedback-border-color;
 		display: block;
 		background: transparent;
 	}
diff --git a/ui/src/pages/Generator/Avatar/Avatar.module.scss b/ui/src/pages/Generator/Avatar/Avatar.module.scss
index 8b9f0ec7..b4879818 100644
--- a/ui/src/pages/Generator/Avatar/Avatar.module.scss
+++ b/ui/src/pages/Generator/Avatar/Avatar.module.scss
@@ -1,10 +1,8 @@
-:root {
-	--avatar-size-424: 424px;
-}
+$avatar-size-424: 424px;
 
 .avatar {
 	&__output {
-		min-height: var(--avatar-size-424);
+		min-height: $avatar-size-424;
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index 6e1e5473..00857be3 100644
--- a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--igfc-bg-color: rgba(255, 255, 255, 0.2);
-}
+$igfc-bg-color: rgba(255, 255, 255, 0.2);
 
 .igfc {
 	&__card {
@@ -11,7 +9,7 @@
 		grid-column: var(--bt-number-1) / var(--bt-size-minus-1);
 		margin-top: var(--bt-size-16);
 		position: relative;
-		background: var(---igfc-bg-color);
+		background: $igfc-bg-color;
 	}
 
 	&__images {
diff --git a/ui/src/pages/Generator/QRcode/QRcode.module.scss b/ui/src/pages/Generator/QRcode/QRcode.module.scss
index 2e7cdcb2..884537d4 100644
--- a/ui/src/pages/Generator/QRcode/QRcode.module.scss
+++ b/ui/src/pages/Generator/QRcode/QRcode.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--qrcode-size-623: 623px;
-}
+$qrcode-size-623: 623px;
 
 .qrcode {
 	&__label {
@@ -10,7 +8,7 @@
 	}
 
 	&__output {
-		height: var(--qrcode-size-623);
+		height: $qrcode-size-623;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 6bfde707..5a21cfd9 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -1,14 +1,12 @@
-:root {
-	--home-height: calc(100dvh - 272px);
-	--home-number-2: 2;
-	--home-hero-paragraph-width: 700px;
-	--home-z-index-100: 100;
-}
+$home-height: calc(100dvh - 272px);
+$home-number-2: 2;
+$home-hero-paragraph-width: 700px;
+$home-z-index-100: 100;
 
 .home {
 	padding: var(--bt-size-100) var(--bt-size-percent-10) var(--bt-size-64)
 		var(--bt-size-percent-10);
-	min-height: var(--home-height);
+	min-height: $home-height;
 	animation: var(--bt-animation-moveBackground);
 
 	&__container {
@@ -24,7 +22,7 @@
 		gap: var(--bt-size-100);
 		&_text {
 			display: flex;
-			flex: var(--home-number-2);
+			flex: $home-number-2;
 			flex-direction: column;
 			justify-content: center;
 			text-align: center;
@@ -34,7 +32,7 @@
 			}
 			&_paragraph {
 				text-align: left;
-				max-width: var(--home-hero-paragraph-width);
+				max-width: $home-hero-paragraph-width;
 			}
 		}
 
@@ -47,7 +45,7 @@
 		display: flex;
 		align-items: center;
 		border-radius: var(--bt-size-8);
-		z-index: var(--home-z-index-100);
+		z-index: $home-z-index-100;
 
 		&_card {
 			height: var(--bt-size-percent-100);
diff --git a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
index 60f5a134..212fff3e 100644
--- a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
+++ b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--npm-size-minus-7: 7.5px;
-}
+$npm-size-minus-7: 7.5px;
 
 .npm {
 	max-width: var(--bt-converter-width);
@@ -11,7 +9,7 @@
 		&_tag {
 			position: absolute;
 			top: var(--bt-size-0);
-			right: var(--npm-size-minus-7);
+			right: $npm-size-minus-7;
 		}
 	}
 }
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
index 4a70d059..59ea4750 100644
--- a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
+++ b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -1,6 +1,4 @@
-:root {
-	--toc-height: calc(100dvh - 290px);
-}
+$toc-height: calc(100dvh - 290px);
 
 .toc {
 	overflow: hidden;
@@ -20,6 +18,6 @@
 	}
 
 	&__textarea {
-		height: var(--toc-height) !important;
+		height: $toc-height !important;
 	}
 }
diff --git a/ui/src/pages/PageNotFound/PageNotFound.module.scss b/ui/src/pages/PageNotFound/PageNotFound.module.scss
index 3f72d66c..412e530e 100644
--- a/ui/src/pages/PageNotFound/PageNotFound.module.scss
+++ b/ui/src/pages/PageNotFound/PageNotFound.module.scss
@@ -1,13 +1,11 @@
-:root {
-	--pnf-height: calc(100vh - 70px);
-}
+$pnf-height: calc(100vh - 70px);
 
 .pnf {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: var(--pnf-height);
+	height: $pnf-height;
 	img {
 		width: var(--bt-size-percent-100);
 		height: var(--bt-size-percent-100);
diff --git a/ui/src/pages/Text/TextEditor/TextEditor.module.scss b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
index 76c3cede..f3495914 100644
--- a/ui/src/pages/Text/TextEditor/TextEditor.module.scss
+++ b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
@@ -1,7 +1,5 @@
-:root {
-	--te-footer-color: rgba(34, 47, 62, 0.7);
-	--te-border-color: #eee;
-}
+$te-footer-color: rgba(34, 47, 62, 0.7);
+$te-border-color: #eee;
 
 .te {
 	display: flex;
@@ -13,17 +11,17 @@
 		justify-content: space-between;
 		background-color: white;
 		padding: var(--bt-size-5);
-		color: var(--te-footer-color);
+		color: $te-footer-color;
 		border-radius: var(--bt-size-0) var(--bt-size-0) var(--bt-size-10)
 			var(--bt-size-10);
-		border-left: var(--bt-size-2) solid var(--te-border-color);
-		border-bottom: var(--bt-size-2) solid var(--te-border-color);
-		border-right: var(--bt-size-2) solid var(--te-border-color);
+		border-left: var(--bt-size-2) solid $te-border-color;
+		border-bottom: var(--bt-size-2) solid $te-border-color;
+		border-right: var(--bt-size-2) solid $te-border-color;
 
 		&_dark {
-			background-color: var(--te-footer-color);
+			background-color: $te-footer-color;
 			color: white;
-			border-color: var(--te-footer-color);
+			border-color: $te-footer-color;
 		}
 	}
 
diff --git a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
index 92e0723c..4ad1347a 100644
--- a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
+++ b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
@@ -1,7 +1,5 @@
-:root {
-	--height: calc(100dvh - 90px);
-}
+$diagramm-height: calc(100dvh - 90px);
 
 .diagramming {
-	height: var(--height);
+	height: $diagramm-height;
 }
diff --git a/ui/src/pages/Tools/Sorting/Sorting.module.scss b/ui/src/pages/Tools/Sorting/Sorting.module.scss
index a371bdd5..e41416af 100644
--- a/ui/src/pages/Tools/Sorting/Sorting.module.scss
+++ b/ui/src/pages/Tools/Sorting/Sorting.module.scss
@@ -1,7 +1,5 @@
-:root {
-	--input-height: calc(100dvh - 210px);
-	--output-height: calc(100dvh - 300px);
-}
+$input-height: calc(100dvh - 210px);
+$output-height: calc(100dvh - 300px);
 
 .sort {
 	overflow: hidden;
@@ -24,10 +22,10 @@
 	}
 
 	&__input_textarea {
-		height: var(--input-height);
+		height: $input-height;
 	}
 
 	&__output_textarea {
-		height: var(--output-height) !important;
+		height: $output-height !important;
 	}
 }