Completed left panel for settings

_locales/en/messages.json

@@ -777,6 +777,10 @@
     "message": "Messages",
     "description": "Shown to separate the types of search results"
   },
+  "settingsHeader": {
+    "message": "Settings",
+    "description": "Shown to separate the types of search results"
+  },
   "welcomeToSignal": {
     "message": "Welcome to Session"
   },
@@ -1154,6 +1158,10 @@
     "description":
       "Confirmation dialog text that tells the user what will happen if they leave the public channel."
   },
+  "deleteAccount": {
+    "message": "Delete Account",
+    "description": "Text for button in settings view to delete account"
+  },
   "deleteContact": {
     "message": "Delete Contact",
     "description":

stylesheets/_session.scss

@@ -37,7 +37,7 @@ $session-color-green-alt-3: #00f782;
 
 $session-shade-1: #0c0c0c;
 $session-shade-2: #161616;
-$session-shade-3: #191818;
+$session-shade-3: #161616;
 $session-shade-4: #1b1b1b;
 $session-shade-5: #222325;
 $session-shade-6: #232323;
@@ -896,7 +896,6 @@ label {
   }
 }
 
-
 .messages li {
   transition: $session-transition-duration !important;
 }

stylesheets/_session_theme_dark_left_pane.scss

@@ -78,7 +78,7 @@ $session-compose-margin: 20px;
   border-right: none !important;
   width: 300px;
   height: -webkit-fill-available;
-  background: none !important;
+  background: $session-shade-4 !important;
 
   &-session {
     display: flex;
@@ -104,6 +104,8 @@ $session-compose-margin: 20px;
     flex-direction: row;
     margin: 28px 7px 28px 0px;
 
+    background-color: $session-shade-3;
+
     .session-button {
       margin-left: auto;
     }
@@ -111,7 +113,8 @@ $session-compose-margin: 20px;
 
   &__title {
     cursor: pointer;
-    padding-right: 10px;
+    padding-right: $session-margin-sm;
+    padding-left: $session-margin-sm;
   }
 
   &__list {
@@ -255,6 +258,22 @@ $session-compose-margin: 20px;
   @include session-dark-background;
 }
 
+@mixin bottom-buttons() {
+  display: flex;
+  flex-direction: row;
+  background-color: $session-shade-2;
+
+  .session-button.square-outline.square.green,
+  .session-button.square-outline.square.white,
+  .session-button.square-outline.square.danger
+  {
+    flex-grow: 1;
+    border: 1px solid $session-shade-7;
+    height: 50px;
+    line-height: 50px;
+  }
+}
+
 .contacts-dropdown {
   width: -webkit-fill-available;
 
@@ -319,19 +338,63 @@ $session-compose-margin: 20px;
   }
 
   &-bottom-buttons {
+    @include bottom-buttons();
+  }
+}
+
+
+.left-pane-setting {
+  &-bottom-buttons {
+    @include bottom-buttons();
+  }
+
+  &-content, &-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-category-list-item {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 74px;
+    line-height: 1.4;
+
+    padding: 0px 12px;
+
+    cursor: pointer;
+    transition: $session-transition-duration !important;   
+
+    &>div {
+      display: block;
+    }
+
+    &.active{
+      background-color: $session-shade-9;
+    }
+
+    &:hover{
+      background-color: $session-shade-7;
+    }
+
 
-    .session-button.square-outline.square.green,
-    .session-button.square-outline.square.white {
-      flex-grow: 1;
-      border: 1px solid $session-shade-8;
-      height: 50px;
-      line-height: 50px;
+
+    &__buttons {
+      display: flex;
+
+      .session-button {
+        font-size: 11px;
+        padding: 6px;
+        height: auto;
+        margin: 0px;
+        line-height: 14px;
+      }
     }
   }
 }
 
+
 .panel-text-divider {
   width: 100%;
   text-align: center;

ts/components/LeftPane.tsx

@@ -21,6 +21,7 @@ import {
 } from './session/SessionButton';
 import { ConversationType } from '../state/ducks/conversations';
 import { LeftPaneContactSection } from './session/LeftPaneContactSection';
+import { LeftPaneSettingSection } from './session/LeftPaneSettingSection';
 
 // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
 export type RowRendererParamsType = {
@@ -177,6 +178,8 @@ export class LeftPane extends React.Component<Props, State> {
         return this.renderMessageSection();
       case SectionType.Contact:
         return this.renderContactSection();
+      case SectionType.Settings:
+        return this.renderSettingSection();
       default:
         return undefined;
     }
@@ -235,4 +238,14 @@ export class LeftPane extends React.Component<Props, State> {
       />
     );
   }
+
+  private renderSettingSection() {
+    const {
+    } = this.props;
+
+    return (
+      <LeftPaneSettingSection
+      />
+    );
+  }
 }

ts/components/session/LeftPaneSettingSection.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { LeftPane } from '../LeftPane';
+
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './SessionButton';
+
+import {
+  SessionIcon,
+  SessionIconSize,
+  SessionIconType,
+} from './icon';
+
+
+export enum SessionSettingCategory {
+  Privacy = 'privacy',
+  Notifications = 'notifications',
+  Devices = 'devices',
+}
+
+export interface Props {
+  
+}
+
+export interface State {
+  settingCategory: SessionSettingCategory;
+}
+
+export class LeftPaneSettingSection extends React.Component<Props, State> {
+  
+  public constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      settingCategory: SessionSettingCategory.Privacy,
+    };
+
+    this.setCategory = this.setCategory.bind(this);
+    this.renderRows = this.renderRows.bind(this);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="left-pane-setting-section">
+          {this.renderHeader()}
+          
+          {this.renderSettings()}
+      </div>
+    );
+  }
+
+  public renderHeader(): JSX.Element | undefined {
+    const labels = [window.i18n('settingsHeader')];
+
+    return LeftPane.RENDER_HEADER(
+      labels,
+      null,
+      undefined,
+      undefined,
+      undefined,
+    );
+  }
+
+  public renderRows () {
+
+    const categories = this.getCategories();
+
+    return (
+      <>
+        {categories.map((item) => (
+            <div
+              key={item.id}
+              className={classNames('left-pane-setting-category-list-item', item.id === this.state.settingCategory ? 'active' : '')}
+              onClick={() => this.setCategory(item.id)}
+            >
+              <div>
+                <strong>{ item.title }</strong>
+                <br/>
+                <span className="text-subtle">
+                  {item.description }
+                </span>
+              </div>
+
+              <div>
+                { item.id === this.state.settingCategory &&
+                  <SessionIcon
+                    iconSize={SessionIconSize.Medium}
+                    iconType={SessionIconType.Chevron}
+                    iconRotation={270}
+                  />
+                }
+              </div>
+            </div>
+          ))}
+
+      </>
+    );
+  }
+
+  public renderCategories() {
+
+    return (
+      <div className="module-left-pane__list" key={0}>
+          <div className="left-pane-setting-category-list">
+            {this.renderRows()}
+          </div>
+      </div>
+    )
+  }
+
+  public renderSettings(): JSX.Element {
+    return (
+      <div className="left-pane-setting-content">
+        {this.renderCategories()}
+        {this.renderBottomButtons()}
+      </div>
+    );
+  }
+
+
+  public renderBottomButtons(): JSX.Element {
+    const deleteAccount = window.i18n('deleteAccount');
+    const showSeed = window.i18n('showSeed');
+
+    return (
+      <div className="left-pane-setting-bottom-buttons">
+        <SessionButton
+          text={deleteAccount}
+          buttonType={SessionButtonType.SquareOutline}
+          buttonColor={SessionButtonColor.Danger}
+        />
+        <SessionButton
+          text={showSeed}
+          buttonType={SessionButtonType.SquareOutline}
+          buttonColor={SessionButtonColor.White}
+        />
+      </div>
+    );
+  }
+
+  public getCategories(){
+    return [
+      {
+        id: SessionSettingCategory.Privacy,
+        title: 'Privacy',
+        description: 'Privacy description',
+      },
+      {
+        id: SessionSettingCategory.Notifications,
+        title: 'Notifications',
+        description: "Choose what you're notified about."
+      },
+      {
+        id: SessionSettingCategory.Devices,
+        title: 'Linked Devices',
+        description: "Managed linked devices."
+      }
+    ];
+  }
+
+  public setCategory(category: SessionSettingCategory) {
+    this.setState({
+      settingCategory: category,
+    });
+  }
+}