EPMRPP-96981 || adjusted styles to match the Figma mockup

reportportal · Nov 19, 2024 · 0217212 · 0217212
1 parent 01b64a9
commit 0217212
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 27 deletions.
diff --git a/...rSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx b/...rSettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.jsx
@@ -27,10 +27,9 @@ import { FormField } from 'components/fields/formField';
 import { ENABLED_KEY } from 'pages/admin/serverSettingsPage/common/constants';
 import { ssoUsersOnlySelector } from 'controllers/appInfo';
 import formStyles from 'pages/admin/serverSettingsPage/common/formController/formController.scss';
-import styles from './ssoUsersForm.scss';
+import './ssoUsersForm.scss';
 
 const formCx = classNames.bind(formStyles);
-const cx = classNames.bind(styles);
 
 const localMessages = defineMessages({
   switcherLabel: {
@@ -66,26 +65,32 @@ function SsoUsersFormComponent({ initialize, enabled }) {
   };
 
   return (
-    <div className={cx('sso-users-form')}>
-      <div className={formCx('form-controller')}>
-        <div className={formCx('heading-wrapper')}>
-          <SectionHeader text={formatMessage(localMessages.formHeader)} />
-        </div>
-        <div className={formCx('form')}>
-          <FormField
-            name={ENABLED_KEY}
-            label={formatMessage(localMessages.switcherLabel)}
-            labelClassName={formCx('label')}
-            format={Boolean}
-            parse={Boolean}
-            customBlock={{
-              wrapperClassName: 'custom-text-wrapper',
-              node: <span className="custom-span-class">{getCustomBlockText()}</span>,
-            }}
-          >
-            <Field name={ENABLED_KEY} component={renderToggle} />
-          </FormField>
-        </div>
+    <div className={formCx('form-controller')}>
+      <div className={formCx('heading-wrapper')}>
+        <SectionHeader text={formatMessage(localMessages.formHeader)} />
+      </div>
+      <div className={formCx('form')}>
+        <FormField
+          name={ENABLED_KEY}
+          label={formatMessage(localMessages.switcherLabel)}
+          labelClassName={formCx('label')}
+          format={Boolean}
+          parse={Boolean}
+          customBlock={{
+            wrapperClassName: 'custom-text-wrapper',
+            node: (
+              <span
+                className={`custom-span-class ${
+                  enabled ? 'enabled-description' : 'disabled-description'
+                }`}
+              >
+                {getCustomBlockText()}
+              </span>
+            ),
+          }}
+        >
+          <Field name={ENABLED_KEY} component={renderToggle} />
+        </FormField>
       </div>
     </div>
   );

diff --git a/...SettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss b/...SettingsPage/serverSettingsTabs/authConfigurationTab/forms/ssoUsersForm/ssoUsersForm.scss
@@ -14,24 +14,31 @@
  * limitations under the License.
  */
 
-.sso-users-form {
-  :global(.custom-text-wrapper) {
+:global {
+  .custom-text-wrapper {
     width: 100%;
     max-width: 700px;
     padding-left: 0;
   }
 
-  :global(.form-field) {
+  .form-field {
     align-items: flex-start;
   }
 
-  :global(.custom-span-class) {
+  .custom-span-class {
     display: block;
     font-size: 12px;
     line-height: 1.5;
     color: $COLOR--gray-60;
-    margin-top: 13px;
     margin-left: 9px;
     width: 300px;
   }
+
+  .enabled-description {
+    margin-top: 0;
+  }
+
+  .disabled-description {
+    margin-top: 13px;
+  }
 }