Polishing settings styles (#2534)

* Polishing settings css

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing inputs border-radius

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing Box component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing unused import

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove content region style fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Revert theme colors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set new colors in theme files

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Change Cluster extectedText

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/preferences.tsx

@@ -125,9 +125,9 @@ export class Preferences extends React.Component {
               />
             </section>
 
-            <hr className="small"/>
+            <hr/>
 
-            <section id="shell" className="small">
+            <section id="shell">
               <SubTitle title="Terminal Shell Path"/>
               <Input
                 theme="round-black"

src/renderer/components/button/button.scss

@@ -4,7 +4,6 @@
   overflow: hidden; // required for transition effect on hover
   color: white;
   font-family: var(--font-main);
-  font-weight: var(--font-weight-bold);
   text-align: center;
   text-decoration: none;
   cursor: pointer;

src/renderer/components/input/input.scss

@@ -98,8 +98,9 @@
       label {
         background: var(--inputControlBackground);
         border: 1px solid var(--inputControlBorder);
-        border-radius: 4px;
+        border-radius: 5px;
         padding: $padding;
+        color: var(--textColorTertiary);
 
         &:hover {
           border-color: var(--inputControlHoverBorder);

src/renderer/components/layout/page-layout.scss

@@ -7,6 +7,7 @@
   width: 100%;
   height: 100%;
   display: grid !important;
+  color: var(--settingsColor);
 
   @include media("<1000px") {
     --width: 85%;
@@ -40,7 +41,7 @@
 
     .sidebar {
       width: 218px;
-      padding: 60px 10px 60px 20px;
+      padding: 60px 0 60px 20px;
 
       .Tabs {
         .header {
@@ -62,18 +63,18 @@
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-weight: 500;
           font-size: 15px;
           line-height: 20px;
           cursor: pointer;
-          color: var(--textColorSecondary);
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
 
           &::after {
             content: none;
           }
 
           &:hover {
-            background-color: var(--navHoverBackground);
+            background-color: var(--navSelectedBackground);
             color: var(--navHoverColor);
           }
 
@@ -194,5 +195,9 @@
         display: none;
       }
     }
+
+    .Checkbox .label {
+      color: var(--textColorTertiary);
+    }
   }
 }

src/renderer/components/select/select.scss

@@ -206,6 +206,11 @@ html {
         &__control {
           box-shadow: 0 0 0 1px var(--inputControlBorder);
           background: var(--inputControlBackground);
+          border-radius: 5px;
+        }
+
+        &__single-value {
+          color: var(--textColorTertiary);
         }
 
         &__menu {