Theme switching. Need to update _session*_light

background.html

@@ -56,6 +56,7 @@
             <div class='content'>
               <img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
               <p class='session-logo-text'>SESSION</p>
+              
             </div>
           </div>
         </div>
@@ -92,10 +93,6 @@
     </div>
   </script>
 
-  <script type='text/x-tmpl-mustache' id='toast'>
-    {{ toastMessage }}
-  </script>
-
   <script type='text/x-tmpl-mustache' id='conversation'>
     <div class='conversation-header'></div>
     <div class='main panel'>
@@ -183,110 +180,6 @@
       </div>
     </div>
   </script>
-  <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <div class='message'>{{ message }}</div>
-      <div class='buttons'>
-        {{ #showCancel }}
-          <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        {{ /showCancel }}
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='seed-dialog'>
-    <div class="content">
-      <!-- Password -->
-      <div class="passwordView">
-        <div class='title'>
-          {{ passwordViewTitle }}
-        </div>
-        <div class='fields'>
-            <input class='form-control' type='password' id='password' placeholder='Password' autocomplete='off' spellcheck='false'>
-            <span class='error'></span>
-        </div>
-        <div class='buttons'>
-          <button class='ok' tabindex='2'>{{ cancel }}</button>
-          <button class='confirm' tabindex='1'>{{ confirm }}</button>
-        </div>
-      </div>
-
-      <!-- Seed -->
-      <div class="seedView" style="display: none;">
-        <div class='title'>
-          {{ seedViewTitle }}
-        </div>
-        <div class='seed'></div>
-        <div class='buttons'>
-          <button class='copy-seed' tabindex='2'>{{ copyText }}</button>
-          <button class='ok' tabindex='1'>{{ ok }}</button>
-        </div>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='device-pairing-dialog'>
-    <div class="content">
-
-      <!-- Default view -->
-      <div class="defaultView">
-        <h4>{{ defaultTitle }}</h4>
-        <ul id="pairedPubKeys">
-        </ul>
-        <div class='buttons'>
-          <button id='close' tabindex='2'>{{ closeText }}</button>
-          <button id="startPairing" tabindex='1'>{{ startPairingText }}</button>
-        </div>
-      </div>
-
-      <!-- Waiting for request -->
-      <div class="waitingForRequestView" style="display: none;">
-        <h4>{{ waitingForRequestTitle }}</h4>
-        <div class="qr-dialog">
-          <div id="qr"></div>
-        </div>
-        <div class='buttons'>
-          <button class="cancel">{{ cancelText }}</button>
-        </div>
-      </div>
-
-      <!-- Request Received -->
-      <div class="requestReceivedView" style="display: none;">
-        <h4>{{ requestReceivedTitle }}</h4>
-        Please verify that the secret words shown below matches the ones on your other device!
-        <p class="secretWords"></p>
-        <div class='buttons'>
-          <button class="skip">{{ skipText }}</button>
-          <button id="allowPairing">{{ allowPairingText }}</button>
-        </div>
-      </div>
-
-      <!-- Request accepted -->
-      <div class="requestAcceptedView" style="display: none;">
-        <h4>{{ requestAcceptedTitle }}</h4>
-        <p class="secretWords"></p>
-        <p class="transmissionStatus">Please be patient...</p>
-        <div id="deviceAliasView" style="display: none;" >
-          <input id="deviceAlias" type="text" placeholder="Device Alias" required>
-        </div>
-        <div class='buttons'>
-          <button class="ok" style="display: none;">{{ okText }}</button>
-        </div>
-      </div>
-
-      <!--Prompt user to confirm unpairing -->
-      <div class="confirmUnpairView" style="display: none;">
-        <h4>{{ confirmUnpairViewTitle }}</h4>
-        <p id="pubkey"></p>
-        <div class='buttons'>
-            <button class='cancel' tabindex='2'>{{ cancelText }}</button>
-            <button class='unpairDevice' tabindex='1'>{{ unpairDevice }}</button>
-        </div>
-      </div>
-    </div>
-  </script>
   
   <script type='text/x-tmpl-mustache' id='device-pairing-words-dialog'>
     <div class="content">

js/background.js

@@ -877,6 +877,18 @@
       // TOOD. MAKE THIS PROCESS SECURED WITH rm-secure
       // https://www.npmjs.com/package/secure-rm
       alert('YOUR ACCOUNT HAS BEEN DELETED');
+    };
+
+    window.toggleTheme = () => {
+
+      const theme = window.Events.getThemeSetting();
+      const updatedTheme = (theme === 'dark') ? 'light' : 'dark';
+
+      $(document.body)
+            .removeClass('dark-theme')
+            .removeClass('light-theme')
+            .addClass(`${updatedTheme}-theme`);
+      window.Events.setThemeSetting(updatedTheme);
     }
 
     window.sendGroupInvitations = (serverInfo, pubkeys) => {

main.js

@@ -282,6 +282,8 @@ function createWindow() {
 
   // Create the browser window.
   mainWindow = new BrowserWindow(windowOptions);
+  // Disable system main menu
+  mainWindow.setMenu(null);
 
   function captureAndSaveWindowStats() {
     if (!mainWindow) {

stylesheets/_session.scss

@@ -37,7 +37,7 @@ $session-color-green-alt-3: #00f782;
 
 $session-shade-1: #0c0c0c;
 $session-shade-2: #161616;
-$session-shade-3: #161616;
+$session-shade-3: #191818;
 $session-shade-4: #1b1b1b;
 $session-shade-5: #222325;
 $session-shade-6: #232323;
@@ -84,7 +84,6 @@ $session-margin-lg: 20px;
 
 $session-search-input-height: 34px;
 
-
 div.spacer-sm {
   height: $session-margin-sm;
 }
@@ -116,17 +115,17 @@ div.spacer-lg {
   text-align: center;
 }
 
+.fullwidth {
+  width: 100%;
+}
+
 @mixin text-highlight($color) {
-  background-color: rgba($color, 0.4);
+  background-color: $color;
-  padding: $session-margin-xs;
+  padding: $session-margin-xs $session-margin-sm;
   border-radius: 3px;
   display: inline-block;
 }
 
-.fullwidth {
-  width: 100%;
-}
-
 @mixin session-dark-background {
   background-color: $session-background !important;
 }
@@ -192,7 +191,6 @@ $session_message-container-border-radius: 5px;
   z-index: 1;
 }
 
-
 #main-view {
   height: 100vh;
   display: flex;
@@ -204,16 +202,11 @@ $session_message-container-border-radius: 5px;
   }
 }
 
-
-
 .button-group > div {
   margin-left: 5px;
   margin-right: 5px;
 }
 
-
-
-
 .session-button {
   @mixin transparent-background($textAndBorderColor) {
     background-color: Transparent;
@@ -715,14 +708,20 @@ label {
   }
 
   &__text-highlight {
-    @include text-highlight($session-shade-15);
+    @include text-highlight($session-color-green);
+
+    color: black;
+    
+    font-family: monospace;
+    font-style: normal;
+    font-size: 11px;
   }
 }
 
 .session-confirm {
   &-wrapper {
     .session-modal__body .session-modal__centered {
-      margin: $session-margin-lg
+      margin: $session-margin-lg;
     }
   }
 
@@ -915,6 +914,8 @@ label {
 .session-settings {
   &-list {
     width: 100%;
+    height: 100vh;
+    overflow-y: scroll;
   }
 
   &-item {
@@ -943,11 +944,8 @@ label {
       @include session-color-subtle($session-color-white);
     }
   }
-
 }
 
-
-
 #qr svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;

ts/components/LeftPane.tsx

@@ -182,6 +182,8 @@ export class LeftPane extends React.Component<Props, State> {
         return this.renderContactSection();
       case SectionType.Settings:
         return this.renderSettingSection();
+      case SectionType.Moon:
+        return window.toggleTheme();
       default:
         return undefined;
     }

ts/components/MainViewController.tsx

@@ -1,76 +1,93 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { SessionSettingListItem, SessionSettingType } from './session/settings/SessionSettingListItem';
+import {
+  SessionSettingListItem,
+  SessionSettingType,
+} from './session/settings/SessionSettingListItem';
 
 import { SessionSettingCategory } from './session/LeftPaneSettingSection';
 import { SessionButtonColor } from './session/SessionButton';
 
-
-
 // Grab initial values from database on startup
 const localSettings = [
   {
-        id: "typingIndicators",
+    id: 'typingIndicators',
-        title: "Typing Indicators",
+    title: 'Typing Indicators',
-        description: "See and share when messages are being typed. This setting is optional and applies to all conversations.",
+    description:
+      'See and share when messages are being typed. This setting is optional and applies to all conversations.',
     type: SessionSettingType.Toggle,
     category: SessionSettingCategory.Privacy,
     value: false,
   },
   {
-        id: "screenLock",
+    id: 'screenLock',
-        title: "Screen Lock",
+    title: 'Screen Lock',
-        description: "Unlock Loki Session using your password. Visit notification settings to customise.",
+    description:
+      'Unlock Loki Session using your password. Visit notification settings to customise.',
     type: SessionSettingType.Toggle,
     category: SessionSettingCategory.Privacy,
     value: true,
   },
   {
-        id: "screenSecurity",
+    id: 'screenSecurity',
-        title: "Screen Security",
+    title: 'Screen Security',
-        description: "Prevent Loki Session previews from appearing in desktop notifications.",
+    description:
+      'Prevent Loki Session previews from appearing in desktop notifications.',
     type: SessionSettingType.Toggle,
     category: SessionSettingCategory.Privacy,
     value: false,
   },
   {
-        id: "linkPreviews",
+    id: 'linkPreviews',
-        title: "Send Link Previews",
+    title: 'Send Link Previews',
-        description: "Supported for imgur, Instagram, Pinterest, Reddit and YouTube.",
+    description:
+      'Supported for Imgur, Instagram, Pinterest, Reddit and YouTube.',
     type: SessionSettingType.Toggle,
     category: SessionSettingCategory.Privacy,
     value: true,
   },
   {
-        id: "screenSecurity",
+    id: 'clearConversationHistory',
-        title: "Screen Security",
+    title: 'Clear Conversation History',
-        description: "Prevent Loki Session previews from appearing in desktop notifications.",
     category: SessionSettingCategory.Privacy,
-        type: SessionSettingType.Toggle,
+    type: SessionSettingType.Button,
     value: false,
+    buttonText: 'Clear',
+    buttonColor: SessionButtonColor.Danger,
   },
   {
-        id: "clearConversationHistory",
+    id: 'changePassword',
-        title: "Clear Conversation History",
+    title: 'Change Password',
-        category: SessionSettingCategory.Privacy,
+    category: SessionSettingCategory.Account,
     type: SessionSettingType.Button,
     value: false,
-        buttonText: 'Clear',
+    buttonText: 'Change',
+    buttonColor: SessionButtonColor.Primary,
+  },
+  {
+    id: 'removePassword',
+    title: 'Remove Password',
+    category: SessionSettingCategory.Account,
+    type: SessionSettingType.Button,
+    value: false,
+    buttonText: 'Remove',
     buttonColor: SessionButtonColor.Danger,
   },
 ];
 
-
 export class MainViewController {
   public static renderMessageView() {
     const element = (
       <div className="conversation-stack">
         <div className="conversation placeholder">
-                    <div className="conversation-header"></div>
+          <div className="conversation-header" />
           <div className="container">
             <div className="content">
-                            <img src="images/session/brand.svg" className="session-filter-color-green session-logo-128"/>
+              <img
+                src="images/session/brand.svg"
+                className="session-filter-color-green session-logo-128"
+              />
               <p className="session-logo-text">SESSION</p>
             </div>
           </div>
@@ -81,11 +98,13 @@ export class MainViewController {
     ReactDOM.render(element, document.getElementById('main-view'));
   }
 
-    public static renderSettingsView() {
+  public static renderSettingsView(category: SessionSettingCategory) {
     const element = (
       <div className="session-settings-list">
         {localSettings.map(setting => {
           return (
+            <div key={setting.id}>
+              {setting.category === category && (
                 <SessionSettingListItem
                   title={setting.title}
                   description={setting.description}
@@ -97,6 +116,8 @@ export class MainViewController {
                   buttonText={setting.buttonText || undefined}
                   buttonColor={setting.buttonColor || undefined}
                 />
+              )}
+            </div>
           );
         })}
       </div>
@@ -106,7 +127,6 @@ export class MainViewController {
   }
 }
 
-
 export class SettingsManager {
   public static updateSetting({ id, type, value }) {
     if (type === SessionSettingType.Toggle) {
@@ -114,7 +134,6 @@ export class SettingsManager {
 
       // Manage toggle events
 
-
       return;
     }
 

ts/components/session/LeftPaneMessageSection.tsx

@@ -157,7 +157,6 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public render(): JSX.Element {
-
     MainViewController.renderMessageView();
 
     return (

ts/components/session/LeftPaneSettingSection.tsx

@@ -29,8 +29,6 @@ export interface State {
 }
 
 export class LeftPaneSettingSection extends React.Component<Props, State> {
-  //private readonly updateSearchBound: (searchedString: string) => void;
-
   public constructor(props: Props) {
     super(props);
 
@@ -46,7 +44,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    MainViewController.renderSettingsView();
+    MainViewController.renderSettingsView(this.state.settingCategory);
 
     return (
       <div className="left-pane-setting-section">
@@ -120,7 +118,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
           <SessionSearchInput
             searchString={this.state.searchQuery}
             onChange={() => null}
-            placeholder=''
+            placeholder=""
           />
           <div className="left-pane-setting-input-button">
             <SessionButton
@@ -130,7 +128,6 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
               <SessionIcon
                 iconType={SessionIconType.Caret}
                 iconSize={SessionIconSize.Large}
-
               />
             </SessionButton>
           </div>
@@ -164,7 +161,6 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
   }
 
   public onDeleteAccount() {
-
     const params = {
       title: window.i18n('deleteAccount'),
       message: window.i18n('deleteAccountWarning'),
@@ -174,7 +170,6 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
     };
 
     window.confirmationDialog(params);
-
   }
 
   public getCategories() {
@@ -236,5 +231,4 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
 
   //   this.debouncedSearch(cleanedTerm);
   // }
-
 }

ts/components/session/SessionConfirm.tsx

@@ -31,7 +31,16 @@ export class SessionConfirm extends React.Component<Props> {
   }
 
   public render() {
-    const { title, message, messageSub, okTheme, closeTheme, onClickOk, onClickClose, hideCancel } = this.props;
+    const {
+      title,
+      message,
+      messageSub,
+      okTheme,
+      closeTheme,
+      onClickOk,
+      onClickClose,
+      hideCancel,
+    } = this.props;
 
     const okText = this.props.okText || window.i18n('ok');
     const cancelText = this.props.cancelText || window.i18n('cancel');
@@ -48,9 +57,17 @@ export class SessionConfirm extends React.Component<Props> {
         {!showHeader && <div className="spacer-lg" />}
 
         <div className="session-modal__centered">
-          <span className={ messageSub ? "session-confirm-main-message" : "text-subtle" }>{message}</span>
+          <span
+            className={
+              messageSub ? 'session-confirm-main-message' : 'text-subtle'
+            }
+          >
+            {message}
+          </span>
           {messageSub && (
-            <span className="session-confirm-sub-message text-subtle">{messageSub}</span>
+            <span className="session-confirm-sub-message text-subtle">
+              {messageSub}
+            </span>
           )}
         </div>
 
@@ -74,5 +91,4 @@ export class SessionConfirm extends React.Component<Props> {
       </SessionModal>
     );
   }
-  
 }

ts/components/session/icon/Icons.tsx

@@ -49,8 +49,7 @@ export const icons = {
     viewBox: '0 -4 37 37',
   },
   [SessionIconType.Caret]: {
-    path:
+    path: 'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
-      'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
     viewBox: '-200 -200 640 640',
   },
   [SessionIconType.ChatBubble]: {

ts/components/session/settings/SessionSettingListItem.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { SessionToggle } from '../SessionToggle';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
+import {
-
+  SessionButton,
-
+  SessionButtonColor,
+  SessionButtonType,
+} from '../SessionButton';
 
 export enum SessionSettingType {
   Toggle = 'toggle',
@@ -23,21 +25,24 @@ interface Props {
 export class SessionSettingListItem extends React.Component<Props> {
   public constructor(props: Props) {
     super(props);
-    this.state = {
+    this.state = {};
-    };
   }
 
-
-
   public render(): JSX.Element {
-    const { title, description, type, value, onClick, buttonText, buttonColor } = this.props
+    const {
+      title,
+      description,
+      type,
+      value,
+      onClick,
+      buttonText,
+      buttonColor,
+    } = this.props;
 
     return (
       <div className="session-settings-item">
         <div className="session-settings-item__info">
-          <div className="session-settings-item__title">
+          <div className="session-settings-item__title">{title}</div>
-            { title }
-          </div>
 
           {description && (
             <div className="session-settings-item__description">
@@ -48,10 +53,7 @@ export class SessionSettingListItem extends React.Component<Props> {
 
         {type === SessionSettingType.Toggle && (
           <div className="session-sessings-item__selection">
-            <SessionToggle
+            <SessionToggle active={Boolean(value)} onClick={onClick} />
-              active={ Boolean(value) }
-              onClick = { onClick }
-            />
           </div>
         )}
 
@@ -62,9 +64,7 @@ export class SessionSettingListItem extends React.Component<Props> {
             onClick={onClick}
           />
         )}
-        
       </div>
     );
   }
-
 }

ts/global.d.ts

@@ -23,6 +23,7 @@ interface Window {
   pushToast: any;
   confirmationDialog: any;
   showSeedDialog: any;
+  toggleTheme: any;
 }
 
 interface Promise<T> {