reafactor: trakt color var added + changed claasses naming

This commit is contained in:
kKaskak 2023-10-18 14:08:00 +03:00
parent 468fade219
commit aa07a8d415
3 changed files with 19 additions and 18 deletions

View file

@ -23,6 +23,7 @@
--color-facebook: #1877F1; --color-facebook: #1877F1;
--color-twitter: #1DA1F2; --color-twitter: #1DA1F2;
--color-imdb: #f5c518; --color-imdb: #f5c518;
--color-trakt: rgb(255, 0, 0);
--color-placeholder: #60606080; --color-placeholder: #60606080;
--color-placeholder-text: @color-surface-50; --color-placeholder-text: @color-surface-50;
--color-placeholder-background: @color-surface-dark5-20; --color-placeholder-background: @color-surface-dark5-20;

View file

@ -244,45 +244,45 @@ const Settings = () => {
} }
</div> </div>
<div className={styles['section-container']}> <div className={styles['section-container']}>
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_DATA_EXPORT')} tabIndex={-1} onClick={exportDataOnClick}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_DATA_EXPORT')} tabIndex={-1} onClick={exportDataOnClick}>
<div className={styles['label']}>{ t('SETTINGS_DATA_EXPORT') }</div> <div className={styles['label']}>{ t('SETTINGS_DATA_EXPORT') }</div>
</Button> </Button>
</div> </div>
{ {
profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string' ? profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string' ?
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_SUBSCRIBE_CALENDAR')} tabIndex={-1} onClick={subscribeCalendarOnClick}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_SUBSCRIBE_CALENDAR')} tabIndex={-1} onClick={subscribeCalendarOnClick}>
<div className={styles['label']}>{ t('SETTINGS_SUBSCRIBE_CALENDAR') }</div> <div className={styles['label']}>{ t('SETTINGS_SUBSCRIBE_CALENDAR') }</div>
</Button> </Button>
</div> </div>
: :
null null
} }
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_SUPPORT')} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us'}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_SUPPORT')} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us'}>
<div className={styles['label']}>{ t('SETTINGS_SUPPORT') }</div> <div className={styles['label']}>{ t('SETTINGS_SUPPORT') }</div>
</Button> </Button>
</div> </div>
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Source code'} target={'_blank'} href={`https://github.com/stremio/stremio-web/tree/${process.env.COMMIT_HASH}`}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={'Source code'} target={'_blank'} href={`https://github.com/stremio/stremio-web/tree/${process.env.COMMIT_HASH}`}>
<div className={styles['label']}>Source code</div> <div className={styles['label']}>Source code</div>
</Button> </Button>
</div> </div>
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('TERMS_OF_SERVICE')} target={'_blank'} href={'https://www.stremio.com/tos'}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('TERMS_OF_SERVICE')} target={'_blank'} href={'https://www.stremio.com/tos'}>
<div className={styles['label']}>{ t('TERMS_OF_SERVICE') }</div> <div className={styles['label']}>{ t('TERMS_OF_SERVICE') }</div>
</Button> </Button>
</div> </div>
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('PRIVACY_POLICY')} target={'_blank'} href={'https://www.stremio.com/privacy'}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('PRIVACY_POLICY')} target={'_blank'} href={'https://www.stremio.com/privacy'}>
<div className={styles['label']}>{ t('PRIVACY_POLICY') }</div> <div className={styles['label']}>{ t('PRIVACY_POLICY') }</div>
</Button> </Button>
</div> </div>
{ {
profile.auth !== null && profile.auth.user !== null ? profile.auth !== null && profile.auth.user !== null ?
<div className={classnames(styles['option-container'], styles['compact-margin'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_ACC_DELETE')} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us/articles/360021428911-How-to-delete-my-account'}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_ACC_DELETE')} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us/articles/360021428911-How-to-delete-my-account'}>
<div className={styles['label']}>{ t('SETTINGS_ACC_DELETE') }</div> <div className={styles['label']}>{ t('SETTINGS_ACC_DELETE') }</div>
</Button> </Button>
</div> </div>
@ -292,7 +292,7 @@ const Settings = () => {
{ {
profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user.email === 'string' ? profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user.email === 'string' ?
<div className={styles['option-container']}> <div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_CHANGE_PASSWORD')} target={'_blank'} href={`https://www.strem.io/reset-password/${profile.auth.user.email}`}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_CHANGE_PASSWORD')} target={'_blank'} href={`https://www.strem.io/reset-password/${profile.auth.user.email}`}>
<div className={styles['label']}>{ t('SETTINGS_CHANGE_PASSWORD') }</div> <div className={styles['label']}>{ t('SETTINGS_CHANGE_PASSWORD') }</div>
</Button> </Button>
</div> </div>

View file

@ -108,7 +108,7 @@
margin-bottom: 2rem; margin-bottom: 2rem;
overflow: visible; overflow: visible;
&.compact-margin { &.link-container {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
&:last-child { &:last-child {
@ -229,7 +229,7 @@
.icon { .icon {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
color: rgb(255, 0, 0); color: var(--color-trakt);
} }
} }
} }
@ -271,7 +271,7 @@
} }
} }
&.link-container { &.link-input-container {
flex: 0 1 auto; flex: 0 1 auto;
padding: 0; padding: 0;