From 30ecf2f805638311228f336b37ed8ca4c96403cd Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 4 Mar 2020 16:55:10 +0200
Subject: [PATCH] new color theme applied to settings

---
 src/common/ColorInput/styles.less |  8 ++--
 src/routes/Settings/Settings.js   | 30 +++++--------
 src/routes/Settings/styles.less   | 72 ++++++++++++++++++++-----------
 3 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less
index 9e85d9d8b..c969d2a61 100644
--- a/src/common/ColorInput/styles.less
+++ b/src/common/ColorInput/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .color-input-container {
     position: relative;
     z-index: 0;
@@ -13,13 +15,13 @@
         align-items: center;
         justify-content: center;
         padding: 0 0.5rem;
-        border: thin solid var(--color-surfacelighter20);
+        border: thin solid @color-surface-light5-20;
         pointer-events: none;
 
         .transparent-label {
             flex: 1;
             text-align: center;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
             white-space: nowrap;
             text-overflow: ellipsis;
         }
@@ -28,4 +30,4 @@
 
 .color-picker-container {
     margin: 1rem 0;
-}
+}
\ No newline at end of file
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 55de4a16d..2c55777f9 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -148,6 +148,9 @@ const Settings = () => {
                                         null
                                 }
                             </div>
+                            <Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
+                                <div className={styles['user-panel-label']}>User Panel</div>
+                            </Button>
                         </div>
                         {
                             profile.auth === null ?
@@ -157,18 +160,16 @@ const Settings = () => {
                                     </Button>
                                 </div>
                                 :
-                                <div className={styles['option-container']}>
-                                    <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
-                                        <Icon className={styles['icon']} icon={'ic_user'} />
-                                        <div className={styles['label']}>User panel</div>
-                                    </Button>
-                                </div>
+                                null
                         }
                         <div className={styles['option-container']}>
-                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'} href={'#/addons'}>
-                                <Icon className={styles['icon']} icon={'ic_addons'} />
-                                <div className={styles['label']}>Addons</div>
-                            </Button>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Interface language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...interfaceLanguageSelect}
+                            />
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
@@ -197,15 +198,6 @@ const Settings = () => {
                                 <div className={styles['label']}>Subscribe</div>
                             </Button>
                         </div>
-                        <div className={styles['option-container']}>
-                            <div className={styles['option-name-container']}>
-                                <div className={styles['label']}>Interface language</div>
-                            </div>
-                            <Multiselect
-                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
-                                {...interfaceLanguageSelect}
-                            />
-                        </div>
                         <div className={styles['option-container']}>
                             <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}>
                                 <div className={styles['label']}>Export user data</div>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index a51ab2d1a..c5efefb05 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Checkbox/styles.less') {
     checkbox-icon: icon;
 }
@@ -10,7 +12,7 @@
 .settings-container {
     width: 100%;
     height: 100%;
-    background-color: var(--color-background);
+    background-color: @color-background-dark2;
 
     .settings-content {
         width: 100%;
@@ -23,23 +25,23 @@
             align-self: stretch;
             display: flex;
             flex-direction: column;
-            width: 17rem;
-            padding: 1rem;
-            background-color: var(--color-backgroundlighter);
+            width: 20rem;
+            padding: 3rem;
 
             .side-menu-button {
                 flex: none;
                 align-self: stretch;
                 padding: 1rem;
                 font-size: 1.1rem;
-                color: var(--color-surfacelighter);
+                color: @color-secondaryvariant1;
 
                 &.selected {
-                    background-color: var(--color-background);
+                    background-color: @color-background;
+                    color: @color-surface-light5;
                 }
 
                 &:hover {
-                    background-color: var(--color-surface20);
+                    background-color: @color-background-light1;
                 }
             }
 
@@ -49,7 +51,7 @@
 
             .version-info-label {
                 margin: 0.5rem 0;
-                color: var(--color-surfacelight);
+                color: @color-secondaryvariant1;
             }
         }
 
@@ -62,15 +64,11 @@
             .section-container {
                 display: flex;
                 flex-direction: column;
-                padding: 2rem 0;
+                padding: 3rem 0;
                 overflow: visible;
 
-                &:first-child {
-                    padding-top: 1rem;
-                }
-
                 &:not(:last-child) {
-                    border-bottom: thin solid var(--color-primary40);
+                    border-bottom: thin solid @color-primary;
                 }
 
                 .section-title {
@@ -79,7 +77,7 @@
                     font-size: 1.8rem;
                     line-height: 3.4rem;
                     margin-bottom: 1rem;
-                    color: var(--color-surfacelighter);
+                    color: @color-surface-light5;
                 }
 
                 .option-container {
@@ -97,12 +95,12 @@
                     }
 
                     &.user-info-option-container {
-                        height: 7rem;
+                        height: 6rem;
 
                         .avatar-container {
                             flex: none;
                             align-self: stretch;
-                            width: 7rem;
+                            width: 6rem;
                             margin-right: 1rem;
                             border-radius: 50%;
                             background-size: cover;
@@ -130,9 +128,9 @@
 
                                 .email-label {
                                     flex: 1;
-                                    font-size: 1.4rem;
+                                    font-size: 1.1rem;
                                     max-height: 2.4em;
-                                    color: var(--color-surfacelighter);
+                                    color: @color-surface-light5;
                                 }
                             }
 
@@ -143,7 +141,7 @@
                                     outline: none;
 
                                     .logout-label {
-                                        color: var(--color-surfacelighter);
+                                        color: @color-surface-light5;
                                         text-decoration: underline;
                                     }
                                 }
@@ -151,10 +149,34 @@
                                 .logout-label {
                                     flex: 1;
                                     max-height: 1.2em;
-                                    color: var(--color-surface);
+                                    color: @color-surface;
                                 }
                             }
                         }
+
+                        .user-panel-container {
+                            flex: none;
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            width: 10rem;
+                            height: 3.5rem;
+                            margin-left: 1rem;
+                            background-color: @color-accent3;
+
+                            &:hover {
+                                background-color: @color-accent3-light1;
+                            }
+
+                            .user-panel-label {
+                                flex: 1;
+                                max-height: 2.4em;
+                                padding: 0 0.5rem;
+                                font-weight: 600;
+                                text-align: center;
+                                color: @color-surface-light5;
+                            }
+                        }
                     }
 
                     .option-name-container, .option-input-container {
@@ -168,7 +190,7 @@
                             width: 1.5rem;
                             height: 1.5rem;
                             margin-right: 0.5rem;
-                            fill: var(--color-surfacelighter);
+                            fill: @color-surface-light5;
                         }
 
                         .label {
@@ -176,7 +198,7 @@
                             flex-shrink: 1;
                             flex-basis: auto;
                             line-height: 1.5rem;
-                            color: var(--color-surfacelighter);
+                            color: @color-surface-light5;
                         }
                     }
 
@@ -191,10 +213,10 @@
 
                         &.button-container {
                             justify-content: center;
-                            background-color: var(--color-primary);
+                            background-color: @color-accent3;
 
                             &:hover {
-                                background-color: var(--color-primarylight);
+                                background-color: @color-accent3-light1;
                             }
                         }