From b29df328d921f885f8240b88258bbea2c7eb2517 Mon Sep 17 00:00:00 2001
From: Toni Dezman <tdezman@biosistemika.com>
Date: Fri, 18 Aug 2017 10:24:51 +0200
Subject: [PATCH] some additional styles

---
 app/javascript/packs/app/constants/colors.js  |  1 +
 .../src/settings/components/InputDisabled.jsx |  2 +-
 .../src/settings/components/InputEnabled.jsx  |  2 +-
 .../components/NotificationsGroup.jsx         | 34 ++++++------
 .../settings/components/SettingsLeftTab.jsx   | 54 +++++++++++--------
 5 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/app/javascript/packs/app/constants/colors.js b/app/javascript/packs/app/constants/colors.js
index b2538c7b3..dc17731be 100644
--- a/app/javascript/packs/app/constants/colors.js
+++ b/app/javascript/packs/app/constants/colors.js
@@ -11,3 +11,4 @@ export const PRIMARY_GREEN_COLOR = "#8fd13f";
 export const PRIMARY_HOVER_COLOR = "#75b22b";
 export const NOTIFICATION_YES = "#5a8921";
 export const NOTIFICATION_YES_BORDER = "#4d751c";
+export const SIDEBAR_HOVER_GRAY_COLOR = "#D2D2D2";
diff --git a/app/javascript/packs/src/settings/components/InputDisabled.jsx b/app/javascript/packs/src/settings/components/InputDisabled.jsx
index 49f20eab1..6e4b6ca90 100644
--- a/app/javascript/packs/src/settings/components/InputDisabled.jsx
+++ b/app/javascript/packs/src/settings/components/InputDisabled.jsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 const Wrapper = styled.div`margin-top: 19px;`;
 
 const MyFormControl = styled(FormControl)`
-  width: 150px;
+  width: 160px;
   display: inline;
 `;
 
diff --git a/app/javascript/packs/src/settings/components/InputEnabled.jsx b/app/javascript/packs/src/settings/components/InputEnabled.jsx
index f0cab552e..c01cae6c9 100644
--- a/app/javascript/packs/src/settings/components/InputEnabled.jsx
+++ b/app/javascript/packs/src/settings/components/InputEnabled.jsx
@@ -130,10 +130,10 @@ class InputEnabled extends Component {
       <StyledInputEnabled>
         <form onSubmit={this.handleSubmit}>
           <FormGroup>
-            {this.confirmationField()}
             <h4>
               Change {this.props.labelValue.toLowerCase()}
             </h4>
+            {this.confirmationField()}
             <ControlLabel>
               {this.props.labelValue}
             </ControlLabel>
diff --git a/app/javascript/packs/src/settings/components/NotificationsGroup.jsx b/app/javascript/packs/src/settings/components/NotificationsGroup.jsx
index a61795f61..e8b876877 100644
--- a/app/javascript/packs/src/settings/components/NotificationsGroup.jsx
+++ b/app/javascript/packs/src/settings/components/NotificationsGroup.jsx
@@ -5,6 +5,8 @@ import styled from "styled-components";
 import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
 import { WHITE_COLOR } from "../../../app/constants/colors";
 
+const Wrapper = styled.div`margin-bottom: 6px;`;
+
 const IconWrapper = styled.div`
   margin-top: 12px;
   margin-left: 7px;
@@ -57,24 +59,22 @@ class NotificationsGroup extends Component {
     }
 
     return (
-      <div>
-        <div className="row">
-          <IconWrapper className="col-sm-1">
-            {imgOrIcon}
-          </IconWrapper>
-          <div className="col-sm-10">
-            <h5>
-              <strong>
-                {this.props.title}
-              </strong>
-            </h5>
-            <p>
-              {this.props.subtitle}
-            </p>
-            <NotificationsSwitchGroup type={this.props.type} />
-          </div>
+      <Wrapper className="row">
+        <IconWrapper className="col-sm-1">
+          {imgOrIcon}
+        </IconWrapper>
+        <div className="col-sm-10">
+          <h5>
+            <strong>
+              {this.props.title}
+            </strong>
+          </h5>
+          <p>
+            {this.props.subtitle}
+          </p>
+          <NotificationsSwitchGroup type={this.props.type} />
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }
diff --git a/app/javascript/packs/src/settings/components/SettingsLeftTab.jsx b/app/javascript/packs/src/settings/components/SettingsLeftTab.jsx
index 5a5eae424..5b2df6e4c 100644
--- a/app/javascript/packs/src/settings/components/SettingsLeftTab.jsx
+++ b/app/javascript/packs/src/settings/components/SettingsLeftTab.jsx
@@ -9,38 +9,48 @@ import {
 } from "../../../app/routes";
 
 import {
-  MAIN_COLOR_BLUE,
+  SIDEBAR_HOVER_GRAY_COLOR,
   LIGHT_BLUE_COLOR
 } from "../../../app/constants/colors";
 
 const MyLinkContainer = styled(LinkContainer)`
+  a {
+    color: ${LIGHT_BLUE_COLOR};
+    padding-left: 0;
+  }
+  &.active > a:after {
+    content: '';
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    margin-top: -19px;
+    border-top: 19px solid transparent;
+    border-left: 13px solid ${LIGHT_BLUE_COLOR};
+    border-bottom: 19px solid transparent;
+  }
+
+  a:hover {
+    background-color: ${SIDEBAR_HOVER_GRAY_COLOR} !important;
+  }
+  
   &.active {
     a {
       background-color: ${LIGHT_BLUE_COLOR} !important;
+      border-radius: 3px 0 0 3px;
+      border-left: 13px solid ${LIGHT_BLUE_COLOR};
+      border-radius: 3px 0 0 3px;
     }
   }
 `;
 
-class SettingsAccountLeftTab extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-
-  handleSelect(selectedKey) {}
-
-  render() {
-    return (
-      <Nav bsStyle="pills" stacked activeKey={1} onSelect={this.handleSelect}>
-        <MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
-          <NavItem eventKey={1}>Profile</NavItem>
-        </MyLinkContainer>
-        <MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
-          <NavItem eventKey={2}>Preferences</NavItem>
-        </MyLinkContainer>
-      </Nav>
-    );
-  }
-}
+const SettingsAccountLeftTab = () =>
+  <Nav bsStyle="pills" stacked activeKey={1}>
+    <MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
+      <NavItem eventKey={1}>Profile</NavItem>
+    </MyLinkContainer>
+    <MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
+      <NavItem eventKey={2}>Preferences</NavItem>
+    </MyLinkContainer>
+  </Nav>;
 
 export default SettingsAccountLeftTab;