Refactor SettingTile component

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

View file

@ -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>
);
}

View file

@ -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);
}
}

View file

@ -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);
}
}
}