From aa07a8d415f4d0aa2af34bd922928c1a67fa61cd Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 18 Oct 2023 14:08:00 +0300
Subject: [PATCH] reafactor: trakt color var added + changed claasses naming

---
 src/App/styles.less             |  1 +
 src/routes/Settings/Settings.js | 30 +++++++++++++++---------------
 src/routes/Settings/styles.less |  6 +++---
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 829c2923a..1da857ca1 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -23,6 +23,7 @@
     --color-facebook: #1877F1;
     --color-twitter: #1DA1F2;
     --color-imdb: #f5c518;
+    --color-trakt: rgb(255, 0, 0);
     --color-placeholder: #60606080;
     --color-placeholder-text: @color-surface-50;
     --color-placeholder-background: @color-surface-dark5-20;
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index efd2acf99..c82dc59e1 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -244,45 +244,45 @@ const Settings = () => {
                         }
                     </div>
                     <div className={styles['section-container']}>
-                        <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_DATA_EXPORT')} tabIndex={-1} onClick={exportDataOnClick}>
+                        <div className={classnames(styles['option-container'], styles['link-container'])}>
+                            <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>
                             </Button>
                         </div>
                         {
                             profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string' ?
-                                <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                                    <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_SUBSCRIBE_CALENDAR')} tabIndex={-1} onClick={subscribeCalendarOnClick}>
+                                <div className={classnames(styles['option-container'], styles['link-container'])}>
+                                    <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>
                                     </Button>
                                 </div>
                                 :
                                 null
                         }
-                        <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('SETTINGS_SUPPORT')} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us'}>
+                        <div className={classnames(styles['option-container'], styles['link-container'])}>
+                            <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>
                             </Button>
                         </div>
-                        <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                            <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}`}>
+                        <div className={classnames(styles['option-container'], styles['link-container'])}>
+                            <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>
                             </Button>
                         </div>
-                        <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('TERMS_OF_SERVICE')} target={'_blank'} href={'https://www.stremio.com/tos'}>
+                        <div className={classnames(styles['option-container'], styles['link-container'])}>
+                            <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>
                             </Button>
                         </div>
-                        <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                            <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={t('PRIVACY_POLICY')} target={'_blank'} href={'https://www.stremio.com/privacy'}>
+                        <div className={classnames(styles['option-container'], styles['link-container'])}>
+                            <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>
                             </Button>
                         </div>
                         {
                             profile.auth !== null && profile.auth.user !== null ?
-                                <div className={classnames(styles['option-container'], styles['compact-margin'])}>
-                                    <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'}>
+                                <div className={classnames(styles['option-container'], styles['link-container'])}>
+                                    <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>
                                     </Button>
                                 </div>
@@ -292,7 +292,7 @@ const Settings = () => {
                         {
                             profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user.email === 'string' ?
                                 <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>
                                     </Button>
                                 </div>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 9a777c000..cba9c5447 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -108,7 +108,7 @@
                     margin-bottom: 2rem;
                     overflow: visible;
 
-                    &.compact-margin {
+                    &.link-container {
                         margin-bottom: 0.5rem;
                     }
                     &:last-child {
@@ -229,7 +229,7 @@
                             .icon {
                                 width: 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;
                             padding: 0;