From e82f4c5f8842dbcd3ff194fef32f5caa9f3a3b0a Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 21 Jan 2025 18:21:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Clean-up=20and=20simplify?=
 =?UTF-8?q?=20component=20SCSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_settings-block.scss  |  4 -
 .../css/components/screens/_settings.scss     |  2 +-
 .../screens/settings/_connection-status.scss  | 78 -------------------
 .../screens/settings/_setting-rows.scss       | 28 +++++++
 4 files changed, 29 insertions(+), 83 deletions(-)
 delete mode 100644 modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss
 create mode 100644 modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
index 8888bf2c0..551770bb1 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
@@ -133,10 +133,6 @@
 		.ppcp-r-settings-block__content {
 			margin-top: 24px;
 		}
-
-		.ppcp-r-connection-status__data {
-			margin-bottom: 20px;
-		}
 	}
 
 	&--connect-sandbox {
diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index 0b8802138..d55496843 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -1,5 +1,5 @@
 @import './settings/input';
-@import './settings/connection-status';
+@import './settings/setting-rows';
 @import './settings/tab-styling';
 @import './settings/tab-paylater-configurator';
 
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss
deleted file mode 100644
index 2bf1417e6..000000000
--- a/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-// Connection Status
-.ppcp-r-connection-status {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 12px;
-
-	&__status-status {
-		margin: 0 0 8px 0;
-
-		strong {
-			@include font(14, 24, 700);
-			color: $color-black;
-		}
-	}
-
-	&__status-label {
-		@include font(11, 22, 600);
-		color: $color-gray-900;
-		display: block;
-		text-transform: uppercase;
-	}
-
-	&__status-value {
-		@include font(13, 26, 400);
-		color: $color-text-tertiary;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__data {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		width: 100%;
-	}
-
-	&__status-toggle--toggled {
-		.ppcp-r-connection-status__show-all-data {
-			transform: rotate(180deg);
-		}
-	}
-
-	&__status-row {
-		display: flex;
-		flex-direction: column;
-
-		strong {
-			@include font(14, 24, 600);
-			color: $color-gray-800;
-			margin-right: 12px;
-			white-space: nowrap;
-		}
-
-		.ppcp-r-connection-status__status-toggle {
-			line-height: 0;
-		}
-	}
-
-	@media screen and (max-width: 767px) {
-		flex-wrap: wrap;
-		&__status {
-			width: 100%;
-		}
-		&__status-row {
-			flex-wrap: wrap;
-
-			strong {
-				width: 100%;
-			}
-
-			span {
-				word-break: break-all;
-			}
-		}
-	}
-}
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss
new file mode 100644
index 000000000..57981c459
--- /dev/null
+++ b/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss
@@ -0,0 +1,28 @@
+.ppcp-r-setting-value-rows {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	width: 100%;
+}
+
+.ppcp-r-setting-value-row {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	.ppcp-r-setting-label {
+		@include font(11, 22, 600);
+		color: $color-gray-900;
+		display: block;
+		text-transform: uppercase;
+	}
+
+	.ppcp-r-setting-value {
+		@include font(13, 26, 400);
+		color: $color-text-tertiary;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}