implements code review suggestions

app/javascript/packs/app/constants/colors.js

@@ -7,8 +7,6 @@ export const BORDER_LIGHT_COLOR = "#e3e3e3";
 export const WILD_SAND_COLOR = "#f5f5f5";
 export const MYSTIC_COLOR = "#eaeff2";
 export const ICON_GREEN_COLOR = "#8fd13f";
-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";

app/javascript/packs/shared/actions/UsersActions.js

@@ -83,12 +83,14 @@ export function changeAssignmentsNotification(status) {
     payload: status
   };
 }
+
 export function changeAssignmentsNotificationEmail(status) {
   return {
     type: CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL,
     payload: status
   };
 }
+
 export function changeRecentNotification(status) {
   return {
     type: CHANGE_RECENT_NOTIFICATION,

app/javascript/packs/src/settings/components/account/InputEnabled.jsx

@@ -4,11 +4,7 @@ import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
 
-import {
+import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
-  BORDER_LIGHT_COLOR,
-  PRIMARY_GREEN_COLOR,
-  PRIMARY_HOVER_COLOR
-} from "../../../../app/constants/colors";
 
 const StyledInputEnabled = styled.div`
   border: 1px solid ${BORDER_LIGHT_COLOR};
@@ -18,15 +14,6 @@ const StyledInputEnabled = styled.div`
   input {
     margin-bottom: 15px;
   }
-
-  .btn-primary {
-    background-color: ${PRIMARY_GREEN_COLOR};
-    border-color: ${PRIMARY_HOVER_COLOR};
-    margin-right: 7px;
-    &:hover {
-      background-color: ${PRIMARY_HOVER_COLOR};
-    }
-  }
 `;
 
 const ErrorMsg = styled.div`color: red;`;

app/javascript/packs/src/settings/components/account/SettingsLeftTab.jsx

@@ -47,12 +47,12 @@ const MyLinkContainer = styled(LinkContainer)`
 const SettingsLeftTab = () =>
   <Nav bsStyle="pills" stacked activeKey={1}>
     <MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
-      <NavItem eventKey={1}>
+      <NavItem>
         <FormattedMessage id="settings_page.profile" />
       </NavItem>
     </MyLinkContainer>
     <MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
-      <NavItem eventKey={2}>
+      <NavItem>
         <FormattedMessage id="settings_page.preferences" />
       </NavItem>
     </MyLinkContainer>

app/javascript/packs/src/settings/components/account/preferences/InputTimezone.jsx

@@ -6,11 +6,7 @@ import TimezonePicker from "react-bootstrap-timezone-picker";
 import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
 import { FormattedMessage } from "react-intl";
 
-import {
+import { BORDER_LIGHT_COLOR } from "../../../../../app/constants/colors";
-  BORDER_LIGHT_COLOR,
-  PRIMARY_GREEN_COLOR,
-  PRIMARY_HOVER_COLOR
-} from "../../../../../app/constants/colors";
 
 const Wrapper = styled.div`
   border: 1px solid ${BORDER_LIGHT_COLOR};
@@ -24,15 +20,6 @@ const Wrapper = styled.div`
   .settings-warning {
     margin-bottom: 15px;
   }
-
-  .btn-primary {
-    background-color: ${PRIMARY_GREEN_COLOR};
-    border-color: ${PRIMARY_HOVER_COLOR};
-    margin-right: 7px;
-    &:hover {
-      background-color: ${PRIMARY_HOVER_COLOR};
-    }
-  }
 `;
 
 class InputTimezone extends Component {

app/javascript/packs/styles/constants.scss

@@ -35,6 +35,7 @@ $color-candlelight: #ffda23;
 $color-orange: #ff900b;
 $color-saturated-green: #008600;
 $color-blue-yadcf: #337ab7;
+$primary-hover-color: #75b22b;
 
 // Red colors
 $color-mojo: #cf4b48;

app/javascript/packs/styles/main.scss

@@ -7,6 +7,15 @@ body {
   font-size: 13px;
 }
 
+.btn-primary {
+  background-color: $color-theme-secondary;
+  border-color: $primary-hover-color;
+  margin-right: 7px;
+  &:hover {
+    background-color: $primary-hover-color;
+  }
+}
+
 .time-zone-container {
   background: $color-white;
   position: relative;