hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor SettingTile component

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-10 20:33:40 +05:30
parent f8f77075ec
commit af61f4f1db
3 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/molecules/setting-tile/SettingTile.jsx
View file

@ -7,13 +7,13 @@ import Text from '../../atoms/text/Text';
function SettingTile({ title, options, content }) { function SettingTile({ title, options, content }) {
return ( return (
<div className="setting-tile"> <div className="setting-tile">
<div className="setting-tile__title__wrapper"> <div className="setting-tile__content">
<div className="setting-tile__title"> <div className="setting-tile__title">
<Text variant="b1">{title}</Text> <Text variant="b1">{title}</Text>
</div> </div>
{options !== null && <div className="setting-tile__options">{options}</div>} {content}
</div> </div>
{content !== null && <div className="setting-tile__content">{content}</div>} {options !== null && <div className="setting-tile__options">{options}</div>}
</div> </div>
); );
} }

14
src/app/molecules/setting-tile/SettingTile.scss
View file

@ -1,13 +1,15 @@
@use '../../partials/dir'; @use '../../partials/dir';
.setting-tile { .setting-tile {
&__title__wrapper { display: flex;
display: flex; &__content {
align-items: center;
}
&__title {
flex: 1; flex: 1;
min-width: 0; 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);
} }
} }

3
src/app/organisms/settings/Settings.scss
View file

@ -23,9 +23,6 @@
margin-top: var(--sp-normal); margin-top: var(--sp-normal);
border-bottom: 1px solid var(--bg-surface-border); border-bottom: 1px solid var(--bg-surface-border);
padding-bottom: 16px; padding-bottom: 16px;
&__title__wrapper {
margin-bottom: var(--sp-ultra-tight);
}
} }
} }