Refactor SettingTile component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/setting-tile/SettingTile.jsx b/src/app/molecules/setting-tile/SettingTile.jsx
index 2792e02d29c82b9f5945ae5910ba0a5a92c5e900..15ab5384f9075165b8b1764b7e064619463f6276 100644 (file)
--- a/src/app/molecules/setting-tile/SettingTile.jsx
+++ b/src/app/molecules/setting-tile/SettingTile.jsx
@@ -7,13 +7,13 @@ import Text from '../../atoms/text/Text';
 function SettingTile({ title, options, content }) {
   return (
     <div className="setting-tile">
-      <div className="setting-tile__title__wrapper">
+      <div className="setting-tile__content">
         <div className="setting-tile__title">
           <Text variant="b1">{title}</Text>
         </div>
-        {options !== null && <div className="setting-tile__options">{options}</div>}
+        {content}
       </div>
-      {content !== null && <div className="setting-tile__content">{content}</div>}
+      {options !== null && <div className="setting-tile__options">{options}</div>}
     </div>
   );
 }

diff --git a/src/app/molecules/setting-tile/SettingTile.scss b/src/app/molecules/setting-tile/SettingTile.scss
index ab21fb6e2241e8dda2bcfe0d1861020e4a3561e9..322f0019c6863562f4c41af2eaa5b4e787c3df05 100644 (file)
--- a/src/app/molecules/setting-tile/SettingTile.scss
+++ b/src/app/molecules/setting-tile/SettingTile.scss
@@ -1,13 +1,15 @@
 @use '../../partials/dir';
 
 .setting-tile {
-  &__title__wrapper {
-    display: flex;
-    align-items: center;
-  }
-  &__title {
+  display: flex;
+  &__content {
     flex: 1;
     min-width: 0;
-    @include dir.side(margin, 0, var(--sp-normal));
+  }
+  &__title {
+    margin-bottom: var(--sp-ultra-tight);
+  }
+  &__options {
+    @include dir.side(margin, var(--sp-tight), 0);
   }
 }
\ No newline at end of file

diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index c3ec157c15b57ba8f1ca399e38951ce858488cc5..9b42c66ee706dc595f68a34df7ea39d050ed0f90 100644 (file)
--- a/src/app/organisms/settings/Settings.scss
+++ b/src/app/organisms/settings/Settings.scss
@@ -23,9 +23,6 @@
     margin-top: var(--sp-normal);
     border-bottom: 1px solid var(--bg-surface-border);
     padding-bottom: 16px;
-    &__title__wrapper {
-      margin-bottom: var(--sp-ultra-tight);
-    }
   }
 }