Setting toggles configured

stylesheets/_session.scss

@@ -51,7 +51,7 @@ $session-shade-13: #474646;
 $session-shade-14: #535865;
 $session-shade-15: #5b6c72;
 $session-shade-16: #979797;
-$session-shade-17: #d8d8d8;
+$session-shade-17: #180a0a;
 $session-shade-18: #141414;
 
 $session-opaque-dark-1: rgba(0, 0, 0, 0.25);
@@ -921,26 +921,28 @@ label {
     font-size: 15px;
     font-weight: bold;
     color: $session-color-white;
+    background-color: $session-shade-1;
 
-    height: 90px;
-    padding: 0px 15px;
+    padding: $session-margin-lg;
+    border-bottom: 2px solid $session-shade-5;
 
     display: flex;
     align-items: center;
     justify-content: space-between;
   
     &__info {
-      background-color: $session-shade-1;
+      padding-right: $session-margin-lg;
+    }
+    
+    &__title {
+      line-height: 1.7;
     }
     
     &__description {
       font-size: 13px;
+      font-weight: 100;
       @include session-color-subtle($session-color-white);
     }
-
-    &:not(:last-child){
-      border-bottom: 1px solid $session-shade-3;
-    }
   }
 
 }

ts/components/MainViewController.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { SessionSettingListItem } from './session/settings/SessionSettingListItem';
+import { SessionSettingListItem, SessionSettingType } from './session/settings/SessionSettingListItem';
 
 // interface State {
 // }
@@ -51,7 +51,36 @@ export class MainViewController {
     public static renderSettingsView() {
         const element = (
             <div className="session-settings-list">
-                <SessionSettingListItem />
+                <SessionSettingListItem
+                    title = "Typing Indicators"
+                    description = "See and share when messages are being typed. This setting is optional and applies to all conversations."
+                    type = { SessionSettingType.Toggle }
+                    value = { true }
+                />
+                <SessionSettingListItem
+                    title = "Screen Lock"
+                    description = "Unlock Loki Session using your password. Visit notification settings to customise."
+                    type = { SessionSettingType.Toggle }
+                    value = { false }
+                />
+                <SessionSettingListItem
+                    title = "Enable Screen Security"
+                    description = "Prevent Loki Session previews from appearing in the app switcher"
+                    type = { SessionSettingType.Toggle }
+                    value = { true }
+                />
+                <SessionSettingListItem
+                    title = "Send Link Previews"
+                    description = "Supported for imgur, Instagram, Pinterest, Reddit and YouTube."
+                    type = { SessionSettingType.Toggle }
+                    value = { true }
+                />
+                <SessionSettingListItem
+                    title = "Clear Conversation History"
+                    type = { SessionSettingType.Button }
+                    value = { false }
+                    onClick = { () => alert("Cleaaarred!") }
+                />
             </div>
         );
         

ts/components/session/settings/SessionSettingListItem.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { SessionToggle } from '../SessionToggle';
+import { SessionButton, SessionButtonColor } from '../SessionButton';
 
-interface Props {
+
+export enum SessionSettingType {
+  Toggle = 'toggle',
+  Options = 'options',
+  Button = 'button',
 }
 
-
-// export settings = {
-//   id
-//   category
-//   name
-//   description
-//   type (toggle, dropdown, etc)
-// }
-
+interface Props {
+  title: string;
+  description?: string;
+  type: SessionSettingType;
+  value: boolean | string;
+  onClick?: any;
+}
 
 export class SessionSettingListItem extends React.Component<Props> {
   public constructor(props: Props) {
@@ -24,21 +27,35 @@ export class SessionSettingListItem extends React.Component<Props> {
 
 
   public render(): JSX.Element {
+    const { title, description, type, value, onClick } = this.props
+
     return (
       <div className="session-settings-item">
         <div className="session-settings-item__info">
           <div className="session-settings-item__title">
-                Typing indicators
+            { title }
           </div>
 
-          <div className="session-settings-item__description">
-              This is the description of the super usper awesome setting item
-          </div>
+          { description && (
+            <div className="session-settings-item__description">
+              { description }
+            </div>
+          )}
         </div>
 
-        <div className="session-sessings-item__selection">
-          <SessionToggle active={true} />
-        </div>
+        { type === SessionSettingType.Toggle && (
+          <div className="session-sessings-item__selection">
+            <SessionToggle active={ Boolean(value) } />
+          </div>
+        )}
+
+        { type === SessionSettingType.Button && (
+          <SessionButton
+            text = "Clear"
+            buttonColor = {SessionButtonColor.Danger}
+            onClick = { onClick }
+          />
+        )}
         
       </div>
     );