From dd421d58f1826be1d3eba048797228da0ee767ed Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Thu, 9 Jan 2020 17:44:34 +1100
Subject: [PATCH] Theme switching. Need to update _session*_light

---
 background.html                               | 111 +--------
 js/background.js                              |  12 +
 js/views/app_view.js                          |   2 +-
 main.js                                       |   2 +
 stylesheets/_session.scss                     |  48 ++--
 .../_session_theme_dark_left_pane.scss        |   8 +-
 ts/components/LeftPane.tsx                    |   2 +
 ts/components/MainViewController.tsx          | 225 ++++++++++--------
 .../session/LeftPaneContactSection.tsx        |   2 +-
 .../session/LeftPaneMessageSection.tsx        |   1 -
 .../session/LeftPaneSettingSection.tsx        |  14 +-
 ts/components/session/SessionConfirm.tsx      |  26 +-
 ts/components/session/icon/Icons.tsx          |   3 +-
 .../settings/SessionSettingListItem.tsx       |  48 ++--
 ts/global.d.ts                                |   1 +
 15 files changed, 220 insertions(+), 285 deletions(-)

diff --git a/background.html b/background.html
index 10f34da26..d035f7b37 100644
--- a/background.html
+++ b/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,111 +180,7 @@
       </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">
         <h4>{{ title }}</h4>
diff --git a/js/background.js b/js/background.js
index 7c0dd6455..7ef705a45 100644
--- a/js/background.js
+++ b/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) => {
diff --git a/js/views/app_view.js b/js/views/app_view.js
index d984250d1..5b15b68db 100644
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -15,7 +15,7 @@
 
       this.applyTheme();
       this.applyHideMenu();
-      
+
       this.showSeedDialog = this.showSeedDialog.bind(this);
     },
     events: {
diff --git a/main.js b/main.js
index 0dd1780c0..55bb2a7d3 100644
--- a/main.js
+++ b/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) {
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index dd6472452..8d607535b 100644
--- a/stylesheets/_session.scss
+++ b/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);
-  padding: $session-margin-xs;
+  background-color: $color;
+  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,18 +708,24 @@ 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
+    .session-modal__body .session-modal__centered {
+      margin: $session-margin-lg;
     }
   }
 
-  &-main-message{
+  &-main-message {
     font-size: 15px;
   }
   &-sub-message {
@@ -913,8 +912,10 @@ label {
 }
 
 .session-settings {
-  &-list{
+  &-list {
     width: 100%;
+    height: 100vh;
+    overflow-y: scroll;
   }
 
   &-item {
@@ -928,26 +929,23 @@ label {
     display: flex;
     align-items: center;
     justify-content: space-between;
-  
+
     &__info {
       padding-right: $session-margin-lg;
     }
-    
+
     &__title {
       line-height: 1.7;
     }
-    
+
     &__description {
       font-size: 13px;
       font-weight: 100;
       @include session-color-subtle($session-color-white);
     }
   }
-
 }
 
-
-
 #qr svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index 140cbeb29..e10077b1b 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -394,22 +394,22 @@ $session-compose-margin: 20px;
     display: inline-flex;
   }
 
-  &-input-button .session-button.square{
+  &-input-button .session-button.square {
     display: flex;
     justify-content: center;
     align-items: center;
-    
+
     height: $session-search-input-height;
     width: $session-search-input-height;
 
     padding: 0px;
     margin: 0px;
-    
+
     svg {
       transition: $session-transition-duration;
     }
 
-    &:hover{
+    &:hover {
       svg {
         fill: $session-color-green;
       }
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index d163911f7..053de297a 100644
--- a/ts/components/LeftPane.tsx
+++ b/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;
     }
diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx
index 0a616d578..7dc14ee19 100644
--- a/ts/components/MainViewController.tsx
+++ b/ts/components/MainViewController.tsx
@@ -1,125 +1,144 @@
 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",
-        title: "Typing Indicators",
-        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",
-        title: "Screen Lock",
-        description: "Unlock Loki Session using your password. Visit notification settings to customise.",
-        type: SessionSettingType.Toggle,
-        category: SessionSettingCategory.Privacy,
-        value: true,
-    },
-    {
-        id: "screenSecurity",
-        title: "Screen Security",
-        description: "Prevent Loki Session previews from appearing in desktop notifications.",
-        type: SessionSettingType.Toggle,
-        category: SessionSettingCategory.Privacy,
-        value: false,
-    },
-    {
-        id: "linkPreviews",
-        title: "Send Link Previews",
-        description: "Supported for imgur, Instagram, Pinterest, Reddit and YouTube.",
-        type: SessionSettingType.Toggle,
-        category: SessionSettingCategory.Privacy,
-        value: true,
-    },
-    {
-        id: "screenSecurity",
-        title: "Screen Security",
-        description: "Prevent Loki Session previews from appearing in desktop notifications.",
-        category: SessionSettingCategory.Privacy,
-        type: SessionSettingType.Toggle,
-        value: false,
-    },
-    {
-        id: "clearConversationHistory",
-        title: "Clear Conversation History",
-        category: SessionSettingCategory.Privacy,
-        type: SessionSettingType.Button,
-        value: false,
-        buttonText: 'Clear',
-        buttonColor: SessionButtonColor.Danger,
-    },
+  {
+    id: 'typingIndicators',
+    title: 'Typing Indicators',
+    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',
+    title: 'Screen Lock',
+    description:
+      'Unlock Loki Session using your password. Visit notification settings to customise.',
+    type: SessionSettingType.Toggle,
+    category: SessionSettingCategory.Privacy,
+    value: true,
+  },
+  {
+    id: 'screenSecurity',
+    title: 'Screen Security',
+    description:
+      'Prevent Loki Session previews from appearing in desktop notifications.',
+    type: SessionSettingType.Toggle,
+    category: SessionSettingCategory.Privacy,
+    value: false,
+  },
+  {
+    id: 'linkPreviews',
+    title: 'Send Link Previews',
+    description:
+      'Supported for Imgur, Instagram, Pinterest, Reddit and YouTube.',
+    type: SessionSettingType.Toggle,
+    category: SessionSettingCategory.Privacy,
+    value: true,
+  },
+  {
+    id: 'clearConversationHistory',
+    title: 'Clear Conversation History',
+    category: SessionSettingCategory.Privacy,
+    type: SessionSettingType.Button,
+    value: false,
+    buttonText: 'Clear',
+    buttonColor: SessionButtonColor.Danger,
+  },
+  {
+    id: 'changePassword',
+    title: 'Change Password',
+    category: SessionSettingCategory.Account,
+    type: SessionSettingType.Button,
+    value: false,
+    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="container">
-                        <div className="content">
-                            <img src="images/session/brand.svg" className="session-filter-color-green session-logo-128"/>
-                            <p className="session-logo-text">SESSION</p>
-                        </div>
-                    </div>
-                </div>
+  public static renderMessageView() {
+    const element = (
+      <div className="conversation-stack">
+        <div className="conversation placeholder">
+          <div className="conversation-header" />
+          <div className="container">
+            <div className="content">
+              <img
+                src="images/session/brand.svg"
+                className="session-filter-color-green session-logo-128"
+              />
+              <p className="session-logo-text">SESSION</p>
             </div>
-        );
-        
-        ReactDOM.render(element, document.getElementById('main-view'));
-    }
+          </div>
+        </div>
+      </div>
+    );
+
+    ReactDOM.render(element, document.getElementById('main-view'));
+  }
 
-    public static renderSettingsView() {
-        const element = (
-            <div className="session-settings-list">
-                { localSettings.map(setting => {
-                    return (
-                        <SessionSettingListItem
-                            title = { setting.title }
-                            description = { setting.description }
-                            type = { setting.type }
-                            value = { setting.value }
-                            onClick = { () => {
-                                SettingsManager.updateSetting(setting);
-                            }}
-                            buttonText = { setting.buttonText || undefined }
-                            buttonColor = { setting.buttonColor || undefined }
-                        />
-                    );
-                }) }
+  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}
+                  type={setting.type}
+                  value={setting.value}
+                  onClick={() => {
+                    SettingsManager.updateSetting(setting);
+                  }}
+                  buttonText={setting.buttonText || undefined}
+                  buttonColor={setting.buttonColor || undefined}
+                />
+              )}
             </div>
-        );
-        
-        ReactDOM.render(element, document.getElementById('main-view'));
-    }
-}
+          );
+        })}
+      </div>
+    );
 
+    ReactDOM.render(element, document.getElementById('main-view'));
+  }
+}
 
 export class SettingsManager {
-    public static updateSetting({ id, type, value } ) {
-        if (type === SessionSettingType.Toggle){
-            alert(`You clicked a toggle with ID: ${id}`);
-
-            // Manage toggle events 
+  public static updateSetting({ id, type, value }) {
+    if (type === SessionSettingType.Toggle) {
+      alert(`You clicked a toggle with ID: ${id}`);
 
+      // Manage toggle events
 
-            return;
-        }
+      return;
+    }
 
-        alert('you clicked something else');
+    alert('you clicked something else');
 
-        return;
-    }
-}
\ No newline at end of file
+    return;
+  }
+}
diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx
index a265c04b0..58fe03c70 100644
--- a/ts/components/session/LeftPaneContactSection.tsx
+++ b/ts/components/session/LeftPaneContactSection.tsx
@@ -148,7 +148,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
 
       return;
     }
-    
+
     this.setState({ pubKeyPasted: '' }, () => {
       window.Session.emptyContentEditableDivs();
     });
diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx
index 0f82c73bf..12ad0edea 100644
--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@@ -157,7 +157,6 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public render(): JSX.Element {
-
     MainViewController.renderMessageView();
 
     return (
diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx
index 839646ad4..340f498bd 100644
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/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,17 +118,16 @@ 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
               buttonType={SessionButtonType.Square}
               buttonColor={SessionButtonColor.Green}
             >
-              <SessionIcon 
+              <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'),
@@ -172,9 +168,8 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
       resolve: window.deleteAccount,
       okTheme: 'danger',
     };
-    
-    window.confirmationDialog(params);
 
+    window.confirmationDialog(params);
   }
 
   public getCategories() {
@@ -236,5 +231,4 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
 
   //   this.debouncedSearch(cleanedTerm);
   // }
-
 }
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx
index d1d798144..8b6dc2f85 100644
--- a/ts/components/session/SessionConfirm.tsx
+++ b/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>
-          { messageSub && (
-            <span className="session-confirm-sub-message text-subtle">{messageSub}</span>
+          <span
+            className={
+              messageSub ? 'session-confirm-main-message' : 'text-subtle'
+            }
+          >
+            {message}
+          </span>
+          {messageSub && (
+            <span className="session-confirm-sub-message text-subtle">
+              {messageSub}
+            </span>
           )}
         </div>
 
@@ -74,5 +91,4 @@ export class SessionConfirm extends React.Component<Props> {
       </SessionModal>
     );
   }
-  
 }
diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx
index b38b387ac..d3801bbe6 100644
--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
@@ -49,8 +49,7 @@ export const icons = {
     viewBox: '0 -4 37 37',
   },
   [SessionIconType.Caret]: {
-    path:
-      'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
+    path: 'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
     viewBox: '-200 -200 640 640',
   },
   [SessionIconType.ChatBubble]: {
diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx
index 08f32be65..f0995f268 100644
--- a/ts/components/session/settings/SessionSettingListItem.tsx
+++ b/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,48 +25,46 @@ 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">
-            { title }
-          </div>
+          <div className="session-settings-item__title">{title}</div>
 
-          { description && (
+          {description && (
             <div className="session-settings-item__description">
-              { description }
+              {description}
             </div>
           )}
         </div>
 
-        { type === SessionSettingType.Toggle && (
+        {type === SessionSettingType.Toggle && (
           <div className="session-sessings-item__selection">
-            <SessionToggle
-              active={ Boolean(value) }
-              onClick = { onClick }
-            />
+            <SessionToggle active={Boolean(value)} onClick={onClick} />
           </div>
         )}
 
-        { type === SessionSettingType.Button && (
+        {type === SessionSettingType.Button && (
           <SessionButton
-            text = { buttonText }
-            buttonColor = { buttonColor }
-            onClick = { onClick }
+            text={buttonText}
+            buttonColor={buttonColor}
+            onClick={onClick}
           />
         )}
-        
       </div>
     );
   }
-
 }
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 3f0a3aa9e..9507486e5 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -23,6 +23,7 @@ interface Window {
   pushToast: any;
   confirmationDialog: any;
   showSeedDialog: any;
+  toggleTheme: any;
 }
 
 interface Promise<T> {