a lot of styles for Settings page

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

@@ -1,6 +1,13 @@
 export const MAIN_COLOR_BLUE = "#37a0d9";
+export const LIGHT_BLUE_COLOR = "#37a0d9";
 export const WHITE_COLOR = "#fff";
 export const BORDER_GRAY_COLOR = "#d2d2d2";
+export const DARK_GRAY_COLOR = "#7a7a7a";
+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";

app/javascript/packs/src/settings/components/Avatar.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes, { string } from "prop-types";
 import styled from "styled-components";
 
+import { WHITE_COLOR, DARK_GRAY_COLOR } from "../../../app/constants/colors";
+
 const AvatarWrapper = styled.div`
   width: 100px;
   height: 100px;
@@ -9,17 +11,22 @@ const AvatarWrapper = styled.div`
   cursor: pointer;
 `;
 const EditAvatar = styled.span`
+  color: ${WHITE_COLOR};
+  background-color: ${DARK_GRAY_COLOR};
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: silver;
+  opacity: 0.7;
+  padding: 5px;
 `;
 
 const Avatar = props =>
   <AvatarWrapper onClick={props.enableEdit}>
     <img src={props.imgSource} alt="default avatar" />
-    <EditAvatar>Edit Avatar</EditAvatar>
+    <EditAvatar className="text-center">
+      <span className="glyphicon glyphicon-pencil" /> Edit Avatar
+    </EditAvatar>
   </AvatarWrapper>;
 
 Avatar.propTypes = {

app/javascript/packs/src/settings/components/InputDisabled.jsx

@@ -1,19 +1,41 @@
 import React from "react";
 import { string, func } from "prop-types";
 import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
+import styled from "styled-components";
+
+const Wrapper = styled.div`margin-top: 19px;`;
+
+const MyFormControl = styled(FormControl)`
+  width: 150px;
+  display: inline;
+`;
+
+const MyButton = styled(Button)`
+  border-radius: 0 50px 50px 0;
+  margin-top: -3px;
+  margin-left: -3px;
+`;
 
 const InputDisabled = props =>
-  <form>
-    <FormGroup>
-      <ControlLabel>
-        {props.labelValue}
-      </ControlLabel>
-      <FormControl type={props.inputType} value={props.inputValue} disabled />
-      <Button bsStyle="default" onClick={props.enableEdit}>
-        Edit
-      </Button>
-    </FormGroup>
-  </form>;
+  <Wrapper>
+    <form>
+      <FormGroup>
+        <ControlLabel>
+          {props.labelValue}
+        </ControlLabel>
+        <FormGroup>
+          <MyFormControl
+            type={props.inputType}
+            value={props.inputValue}
+            disabled
+          />
+          <MyButton bsStyle="default" onClick={props.enableEdit}>
+            Edit
+          </MyButton>
+        </FormGroup>
+      </FormGroup>
+    </form>
+  </Wrapper>;
 
 InputDisabled.propTypes = {
   labelValue: string.isRequired,

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

@@ -3,9 +3,29 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
 
+import {
+  BORDER_LIGHT_COLOR,
+  PRIMARY_GREEN_COLOR,
+  PRIMARY_HOVER_COLOR
+} from "../../../app/constants/colors";
+
 const StyledInputEnabled = styled.div`
-  border: 1px solid black;
-  padding: 10px;
+  border: 1px solid ${BORDER_LIGHT_COLOR};
+  padding: 19px;
+  margin: 20px 0;
+
+  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;`;
@@ -111,6 +131,9 @@ class InputEnabled extends Component {
         <form onSubmit={this.handleSubmit}>
           <FormGroup>
             {this.confirmationField()}
+            <h4>
+              Change {this.props.labelValue.toLowerCase()}
+            </h4>
             <ControlLabel>
               {this.props.labelValue}
             </ControlLabel>

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

@@ -1,9 +1,39 @@
 import React, { Component } from "react";
 import PropType from "prop-types";
 import { Button } from "react-bootstrap";
+import styled from "styled-components";
 import TimezonePicker from "react-bootstrap-timezone-picker";
 import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
 
+import {
+  BORDER_LIGHT_COLOR,
+  PRIMARY_GREEN_COLOR,
+  PRIMARY_HOVER_COLOR
+} from "../../../app/constants/colors";
+
+const Wrapper = styled.div`
+  border: 1px solid ${BORDER_LIGHT_COLOR};
+  padding: 19px;
+  margin: 20px 0;
+
+  input {
+    margin-bottom: 3px;
+  }
+
+  .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 {
   constructor(props) {
     super(props);
@@ -28,7 +58,7 @@ class InputTimezone extends Component {
   }
   render() {
     return (
-      <div>
+      <Wrapper>
         <h4>
           {this.props.labelValue}
         </h4>
@@ -40,13 +70,19 @@ class InputTimezone extends Component {
           onChange={this.handleChange}
           className="time-zone-container"
         />
+        <div className="settings-warning">
+          <small>
+            Time zone setting affects all time & date fields throughout
+            application.
+          </small>
+        </div>
         <Button bsStyle="primary" onClick={this.props.disableEdit}>
           Cancel
         </Button>
         <Button bsStyle="default" onClick={this.handleUpdate}>
           Update
         </Button>
-      </div>
+      </Wrapper>
     );
   }
 }

app/javascript/packs/src/settings/components/MyProfile.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 
 import Avatar from "./Avatar";
 import InputDisabled from "./InputDisabled";
@@ -14,6 +15,12 @@ import {
   changeAvatar
 } from "../../../shared/actions/UsersActions";
 
+const AvatarLabel = styled.h4`
+  margin-top: 15px;
+  font-size: 13px;
+  font-weight: 700;
+`;
+
 class MyProfile extends Component {
   constructor(props) {
     super(props);
@@ -152,7 +159,7 @@ class MyProfile extends Component {
     return (
       <div>
         <h2>My Profile</h2>
-        <h4>Avatar</h4>
+        <AvatarLabel>Avatar</AvatarLabel>
         {avatarField}
         {fullNameField}
         {initialsField}

app/javascript/packs/src/settings/components/MyStatistics.jsx

@@ -1,9 +1,15 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 
 import MyStatisticsBox from "./MyStatisticsBox";
 
+const Wrapper = styled.div`
+  margin-left: -15px;
+  width: 260px;
+`;
+
 class MyStatistics extends Component {
   render() {
     const stats = this.props.statistics;
@@ -12,7 +18,7 @@ class MyStatistics extends Component {
       let boxes = <div>Loading...</div>;
       if (stats) {
         boxes = (
-          <div>
+          <Wrapper>
             <MyStatisticsBox
               typeLength={stats.number_of_teams}
               typeText="Teams"
@@ -29,7 +35,7 @@ class MyStatistics extends Component {
               typeLength={stats.number_of_protocols}
               typeText="Protocols"
             />
-          </div>
+          </Wrapper>
         );
       }
 

app/javascript/packs/src/settings/components/MyStatisticsBox.jsx

@@ -2,14 +2,17 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 
+import { MAIN_COLOR_BLUE } from "../../../app/constants/colors";
+
 const Box = styled.div`
   width: 100px;
   height: 100px;
   color: #fff;
-  background-color: silver;
+  background-color: ${MAIN_COLOR_BLUE};
   display: inline-block;
   margin: 15px;
   text-align: center;
+  border-radius: 0.25em;
 `;
 
 const MyStatisticsBox = props =>

app/javascript/packs/src/settings/components/NotificationsGroup.jsx

@@ -5,6 +5,11 @@ import styled from "styled-components";
 import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
 import { WHITE_COLOR } from "../../../app/constants/colors";
 
+const IconWrapper = styled.div`
+  margin-top: 12px;
+  margin-left: 7px;
+`;
+
 const Icon = styled.span`
   border-radius: 50%;
   color: ${WHITE_COLOR};
@@ -54,12 +59,14 @@ class NotificationsGroup extends Component {
     return (
       <div>
         <div className="row">
-          <div className="col-sm-2">
+          <IconWrapper className="col-sm-1">
             {imgOrIcon}
-          </div>
+          </IconWrapper>
           <div className="col-sm-10">
             <h5>
-              {this.props.title}
+              <strong>
+                {this.props.title}
+              </strong>
             </h5>
             <p>
               {this.props.subtitle}

app/javascript/packs/src/settings/components/NotificationsSwitch.jsx

@@ -1,5 +1,27 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import {
+  WHITE_COLOR,
+  NOTIFICATION_YES,
+  NOTIFICATION_YES_BORDER
+} from "../../../app/constants/colors";
+
+const Wrapper = styled.div`margin-top: 13px;`;
+
+const LeftButton = styled.button`border-radius: 50px 0 0 50px;`;
+const RightButton = styled.button`
+  border-radius: 0 50px 50px 0;
+  &.btn-primary {
+    color: ${WHITE_COLOR};
+    border-color: ${NOTIFICATION_YES_BORDER};
+    background-color: ${NOTIFICATION_YES};
+    &:hover {
+      background-color: ${NOTIFICATION_YES_BORDER};
+    }
+  }
+`;
 
 class NotificationsSwitch extends Component {
   constructor(props) {
@@ -20,52 +42,52 @@ class NotificationsSwitch extends Component {
     if (this.props.isSwitchOn) {
       switchBtn = (
         <div className="btn-group">
-          <button
+          <LeftButton
             className="btn btn-default"
             disabled={this.props.isDisabled}
             onClick={this.handleClick}
           >
             No
-          </button>
-          <button
+          </LeftButton>
+          <RightButton
             className="btn btn-primary"
             disabled={this.props.isDisabled}
             onClick={this.handleClick}
           >
             Yes
-          </button>
+          </RightButton>
         </div>
       );
     } else {
       switchBtn = (
         <div className="btn-group">
-          <button
+          <LeftButton
             className="btn btn-danger"
             disabled={this.props.isDisabled}
             onClick={this.handleClick}
           >
             No
-          </button>
-          <button
+          </LeftButton>
+          <RightButton
             className="btn btn-default"
             disabled={this.props.isDisabled}
             onClick={this.handleClick}
           >
             Yes
-          </button>
+          </RightButton>
         </div>
       );
     }
 
     return (
-      <div className="row">
-        <div className="col-sm-4">
+      <Wrapper className="row">
+        <div className="col-sm-4 col-sm-offset-1">
           {this.props.title}
         </div>
-        <div className="col-sm-8">
+        <div className="col-sm-7">
           {switchBtn}
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

app/javascript/packs/src/settings/components/SettingsAccount.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import { Route, Switch } from "react-router-dom";
+import styled from "styled-components";
+
+import SettingsLeftTab from "./SettingsLeftTab";
+import SettingsProfile from "./SettingsProfile";
+import SettingsPreferences from "./SettingsPreferences";
+
+import { BORDER_LIGHT_COLOR } from "../../../app/constants/colors";
+
+const Wrapper = styled.div`
+  background: white;
+  box-sizing: border-box;
+  border: 1px solid ${BORDER_LIGHT_COLOR};
+  border-top: none;
+  margin: 0;
+  padding: 16px 0 50px 0;
+`;
+
+class SettingsAccount extends Component {
+  render() {
+    return (
+      <Wrapper className="row">
+        <div className="col-xs-12 col-sm-3">
+          <SettingsLeftTab />
+        </div>
+        <Switch>
+          <Route path="/settings/account/profile" component={SettingsProfile} />
+          <Route
+            path="/settings/account/preferences"
+            component={SettingsPreferences}
+          />
+        </Switch>
+      </Wrapper>
+    );
+  }
+}
+
+export default SettingsAccount;

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

@@ -1,12 +1,26 @@
 import React, { Component } from "react";
 import { Nav, NavItem } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
+import styled from "styled-components";
 
 import {
   SETTINGS_ACCOUNT_PROFILE,
   SETTINGS_ACCOUNT_PREFERENCES
 } from "../../../app/routes";
 
+import {
+  MAIN_COLOR_BLUE,
+  LIGHT_BLUE_COLOR
+} from "../../../app/constants/colors";
+
+const MyLinkContainer = styled(LinkContainer)`
+  &.active {
+    a {
+      background-color: ${LIGHT_BLUE_COLOR} !important;
+    }
+  }
+`;
+
 class SettingsAccountLeftTab extends Component {
   constructor(props) {
     super(props);
@@ -18,12 +32,12 @@ class SettingsAccountLeftTab extends Component {
   render() {
     return (
       <Nav bsStyle="pills" stacked activeKey={1} onSelect={this.handleSelect}>
-        <LinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
+        <MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
           <NavItem eventKey={1}>Profile</NavItem>
-        </LinkContainer>
-        <LinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
+        </MyLinkContainer>
+        <MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
           <NavItem eventKey={2}>Preferences</NavItem>
-        </LinkContainer>
+        </MyLinkContainer>
       </Nav>
     );
   }

app/javascript/packs/src/settings/components/SettingsPreferences.jsx

@@ -1,21 +1,35 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 
 import InputDisabled from "./InputDisabled";
 import InputTimezone from "./InputTimezone";
 import { changeTimezone } from "../../../shared/actions/UsersActions";
 import NotificationsGroup from "./NotificationsGroup";
+
 import {
   ASSIGNMENT_NOTIFICATION,
   RECENT_NOTIFICATION,
   SYSTEM_NOTIFICATION
 } from "./constants";
+
 import {
   MAIN_COLOR_BLUE,
-  ICON_GREEN_COLOR
+  ICON_GREEN_COLOR,
+  BORDER_LIGHT_COLOR
 } from "../../../app/constants/colors";
 
+const WrapperInputDisabled = styled.div`
+  margin: 20px 0;
+  padding-bottom: 15px;
+  border-bottom: 1px solid ${BORDER_LIGHT_COLOR};
+
+  .settings-warning {
+    margin-top: -5px;
+  }
+`;
+
 class SettingsPreferences extends Component {
   constructor(props) {
     super(props);
@@ -45,22 +59,26 @@ class SettingsPreferences extends Component {
       );
     } else {
       timezoneField = (
-        <InputDisabled
-          labelValue="Time zone"
-          inputValue={this.props.timezone}
-          inputType="text"
-          enableEdit={() => this.toggleIsEditable(isTimeZoneEditable)}
-        />
+        <WrapperInputDisabled>
+          <InputDisabled
+            labelValue="Time zone"
+            inputValue={this.props.timezone}
+            inputType="text"
+            enableEdit={() => this.toggleIsEditable(isTimeZoneEditable)}
+          />
+          <div className="settings-warning">
+            <small>
+              Time zone setting affects all time & date fields throughout
+              application.
+            </small>
+          </div>
+        </WrapperInputDisabled>
       );
     }
 
     return (
-      <div className="col-xs-12 col-sm-7">
+      <div className="col-xs-12 col-sm-9">
         {timezoneField}
-        <small>
-          Time zone setting affects all time & date fields throughout
-          application.
-        </small>
 
         <h3>Notifications</h3>
         <NotificationsGroup

app/javascript/packs/src/settings/components/SettingsTeams.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components";
+
+import { BORDER_LIGHT_COLOR } from "../../../app/constants/colors";
+
+const Wrapper = styled.div`
+  background: white;
+  box-sizing: border-box;
+  border: 1px solid ${BORDER_LIGHT_COLOR};
+  border-top: none;
+  margin: 0;
+  padding: 16px 0 50px 0;
+`;
+
+const SettingsTeams = () =>
+  <Wrapper>
+    <h1 className="text-center">Settings Teams</h1>
+  </Wrapper>;
+
+export default SettingsTeams;