Merge pull request #356 from ashik-75/work

update css
lifeparticle · Oct 18, 2023 · 003e260 · 003e260
2 parents 5788d89 + f498af4
commit 003e260
Show file tree

Hide file tree

Showing 44 changed files with 241 additions and 151 deletions.
diff --git a/ui/src/components/General/CodeEditor/CodeEditor.module.scss b/ui/src/components/General/CodeEditor/CodeEditor.module.scss
@@ -4,23 +4,23 @@
 		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);
 		}
 
 		&__failed {
 			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
@@ -1,3 +1,7 @@
+$cp-right: 10px;
+$cp-left: 1000px;
+$cp-bg-color: rgb(68, 68, 68);
+
 .cpwi {
 	&__color {
 		position: relative;
@@ -6,13 +10,13 @@
 		align-items: center;
 
 		&_dp {
-			background-color: rgb(68, 68, 68);
-			padding: 10px;
-			border-radius: 10px;
+			background-color: $cp-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: $cp-right;
+			left: $cp-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
@@ -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
@@ -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
@@ -1,9 +1,14 @@
+$notification-size-200: 200px;
+$notification-size-300: 300px;
+$notification-status-color: #c83939;
+$notification-size-minus-25: -25px;
+
 .notification {
-	height: 300px;
-	width: 200px;
+	height: $notification-size-300;
+	width: $notification-size-200;
 	overflow-y: auto;
 	overflow-x: hidden;
-	border-radius: 8px;
+	border-radius: var(--bt-size-8);
 
 	&__error {
 		text-align: center;
@@ -22,13 +27,13 @@
 		&__status {
 			width: var(--bt-size-7);
 			height: var(--bt-size-7);
-			background-color: #c83939;
+			background-color: $notification-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 +46,7 @@
 
 		&_features {
 			padding-top: var(--bt-size-8);
-			margin-left: var(--bt-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
@@ -1,6 +1,10 @@
+$popsearch-height: 200px;
+$popsearch-bg-dark: #646363;
+$popsearch-bg-color: #e0e0e0;
+
 .popsearch {
 	&__container {
-		max-height: 200px;
+		max-height: $popsearch-height;
 		overflow-y: auto;
 		margin-top: var(--bt-size-10);
 
@@ -14,17 +18,17 @@
 
 			&_light:hover,
 			&_light:first-child {
-				background-color: #e0e0e0;
+				background-color: $popsearch-bg-color;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:hover {
-				background-color: #646363;
+				background-color: $popsearch-bg-dark;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:first-child {
-				background-color: #646363;
+				background-color: $popsearch-bg-dark;
 				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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,26 +1,35 @@
+$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: $footer-vw-5;
+		border-right: var(--bt-size-1) solid $footer-color;
+		margin-right: $footer-vw-6;
 	}
 
 	&__right {
 		padding-top: var(--bt-size-20);
 	}
 
 	&__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 +39,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
@@ -1,23 +1,24 @@
 .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 {
 		list-style-type: inherit;
 	}
 
 	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
@@ -1,12 +1,16 @@
+$menu-height: calc(100dvh - 204px);
+$menu-mobile-height: calc(100dvh - 168px);
+$menu-collapsed-height: calc(100dvh - 202px);
+
 .menu {
-	height: calc(100dvh - 204px);
+	height: $menu-height;
 	overflow-y: auto;
 
 	&__collapsed {
-		height: calc(100dvh - 202px);
+		height: $menu-collapsed-height;
 	}
 
 	@media (max-width: 768px) {
-		height: calc(100dvh - 168px);
+		height: $menu-mobile-height;
 	}
 }
diff --git 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
@@ -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
@@ -1,8 +1,11 @@
+$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 +32,11 @@
 
 				background-blend-mode: color-dodge;
 				object-fit: cover;
-				background-color: #9c9c9c98;
+				background-color: $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
@@ -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
@@ -1,10 +1,12 @@
+$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 +20,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: $br-dvh-25;
 			}
 
 			&_text {