update styles

codebtech · Feb 18, 2024 · 86cf94b · 86cf94b
1 parent 37bea97
commit 86cf94b
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 30 deletions.
diff --git a/build/settings.asset.php b/build/settings.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => 'abdad22b82f87072690b');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => '1848ecc99e698c191ee9');
diff --git a/build/settings.css b/build/settings.css
diff --git a/build/settings.css.map b/build/settings.css.map
diff --git a/build/settings.js b/build/settings.js
@@ -143,29 +143,21 @@ const FlagRow = ({
         justify: 'flex-start',
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.TextControl, {
-            style: {
-              width: 180
-            },
+            className: "mr-feature-flags-input",
             ref: inputRef,
             value: item.name,
             onChange: value => handleFlagEdit(value, item.id)
           })
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
-          style: {
-            marginTop: 7,
-            marginLeft: 40,
-            minWidth: 150
-          },
+          className: "mr-feature-flags-toggle",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.ToggleControl, {
             checked: item.enabled,
             disabled: !!errorMessage,
             onChange: () => handleFlagToggle(item.id),
             label: `Flag ${item.enabled ? 'enabled' : 'disabled'}`
           })
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
-          style: {
-            marginLeft: 60
-          },
+          className: "mr-feature-flags-sdk",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
             variant: "secondary",
             label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Click to see SDK setting', 'mr-feature-flags'),
@@ -175,10 +167,7 @@ const FlagRow = ({
             children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('</> SDK', 'mr-feature-flags')
           })
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
-          style: {
-            marginBottom: 6,
-            marginLeft: 50
-          },
+          className: "mr-feature-flags-delete",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
             icon: 'trash',
             isDestructive: true,
@@ -353,7 +342,7 @@ __webpack_require__.r(__webpack_exports__);
       })
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
       style: {
-        marginLeft: 170
+        marginLeft: 160
       },
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h4", {
         children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('SDK Settings', 'mr-feature-flags')

diff --git a/build/settings.js.map b/build/settings.js.map
diff --git a/src/components/FlagRow.tsx b/src/components/FlagRow.tsx
@@ -112,19 +112,13 @@ const FlagRow = ({
 				<Flex justify={'flex-start'}>
 					<FlexItem>
 						<TextControl
-							style={{ width: 180 }}
+							className="mr-feature-flags-input"
 							ref={inputRef}
 							value={item.name}
 							onChange={(value) => handleFlagEdit(value, item.id)}
 						/>
 					</FlexItem>
-					<FlexItem
-						style={{
-							marginTop: 7,
-							marginLeft: 40,
-							minWidth: 150,
-						}}
-					>
+					<FlexItem className="mr-feature-flags-toggle">
 						<ToggleControl
 							checked={item.enabled}
 							disabled={!!errorMessage}
@@ -133,7 +127,7 @@ const FlagRow = ({
 						/>
 					</FlexItem>
 
-					<FlexItem style={{ marginLeft: 60 }}>
+					<FlexItem className="mr-feature-flags-sdk">
 						<Button
 							variant="secondary"
 							label={__(
@@ -147,7 +141,7 @@ const FlagRow = ({
 							{__('</> SDK', 'mr-feature-flags')}
 						</Button>
 					</FlexItem>
-					<FlexItem style={{ marginBottom: 6, marginLeft: 50 }}>
+					<FlexItem className="mr-feature-flags-delete">
 						<Button
 							icon={'trash'}
 							isDestructive

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -10,7 +10,7 @@ export default function (): JSX.Element {
 			<FlexItem style={{ marginLeft: 160 }}>
 				<h4>{__('Status', 'mr-feature-flags')}</h4>
 			</FlexItem>
-			<FlexItem style={{ marginLeft: 170 }}>
+			<FlexItem style={{ marginLeft: 160 }}>
 				<h4>{__('SDK Settings', 'mr-feature-flags')}</h4>
 			</FlexItem>
 			<FlexItem style={{ marginLeft: 30 }}>

diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -45,3 +45,22 @@
 	position: relative;
 	right: 40px;
 }
+
+.mr-feature-flags-input {
+	width: 180px;
+}
+
+.mr-feature-flags-toggle {
+	margin-top: 7px;
+	margin-left: 40px;
+	min-width: 150px;
+}
+
+.mr-feature-flags-sdk {
+	margin-left: 80px;
+}
+
+.mr-feature-flags-delete {
+	margin-bottom: 6px;
+	margin-left: 50px;
+}