Remove iOS theme in favor of plain light/dark themes

_locales/en/messages.json

@@ -1143,9 +1143,13 @@
         }
       }
     },
-    "themeAndroidDark": {
+    "themeLight": {
-      "message": "Android (dark)",
+      "message": "Light",
-      "description": "Label text for dark Android theme"
+      "description": "Label text for light theme (normal)"
+    },
+    "themeDark": {
+      "message": "Dark",
+      "description": "Label text for dark theme"
     },
     "hideMenuBar": {
       "message": "Hide menu bar",

js/background.js

@@ -114,6 +114,17 @@
     }
   });
 
+  function mapOldThemeToNew(theme) {
+    switch (theme) {
+      case 'android-dark':
+        return 'dark';
+      case 'android':
+      case 'ios':
+      default:
+        return 'light';
+    }
+  }
+
   // We need this 'first' check because we don't want to start the app up any other time
   //   than the first time. And storage.fetch() will cause onready() to fire.
   let first = true;
@@ -171,6 +182,10 @@
       },
     };
 
+    const themeSetting = window.Events.getThemeSetting();
+    const newThemeSetting = mapOldThemeToNew(themeSetting);
+    window.Events.setThemeSetting(newThemeSetting);
+
     try {
       await ConversationController.load();
     } finally {

js/debug_log_start.js

@@ -5,7 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
-$body.addClass(window.theme);
+$body.addClass(`${window.theme}-theme`);
 
 // got.js appears to need this to successfully submit debug logs to the cloud
 window.setImmediate = window.nodeSetImmediate;

js/permissions_popup_start.js

@@ -5,7 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
-$body.addClass(window.theme);
+$body.addClass(`${window.theme}-theme`);
 
 window.view = new Whisper.ConfirmationDialogView({
   message: i18n('audioPermissionNeeded'),

js/settings_start.js

@@ -5,7 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
-$body.addClass(window.theme);
+$body.addClass(`${window.theme}-theme`);
 
 const getInitialData = async () => ({
   deviceName: await window.getDeviceName(),

js/views/app_view.js

@@ -16,12 +16,11 @@
       openInbox: 'openInbox',
     },
     applyTheme: function() {
-      var theme = storage.get('theme-setting') || 'android';
+      var theme = storage.get('theme-setting') || 'light';
       this.$el
-        .removeClass('ios')
+        .removeClass('light-theme')
-        .removeClass('android-dark')
+        .removeClass('dark-theme')
-        .removeClass('android')
+        .addClass(`${theme}-theme`);
-        .addClass(theme);
     },
     applyHideMenu: function() {
       var hideMenuBar = storage.get('hide-menu-bar', false);

js/views/settings_view.js

@@ -85,10 +85,9 @@
         value: window.initialData.themeSetting,
         setFn: theme => {
           $(document.body)
-            .removeClass('android')
+            .removeClass('dark-theme')
-            .removeClass('android-dark')
+            .removeClass('light-theme')
-            .removeClass('ios')
+            .addClass(`${theme}-theme`);
-            .addClass(theme);
           window.setThemeSetting(theme);
         },
       });
@@ -132,7 +131,8 @@
         nameOnly: i18n('nameOnly'),
         audioNotificationDescription: i18n('audioNotificationDescription'),
         isAudioNotificationSupported: Settings.isAudioNotificationSupported(),
-        themeAndroidDark: i18n('themeAndroidDark'),
+        themeLight: i18n('themeLight'),
+        themeDark: i18n('themeDark'),
         hideMenuBar: i18n('hideMenuBar'),
         clearDataHeader: i18n('clearDataHeader'),
         clearDataButton: i18n('clearDataButton'),

settings.html

@@ -45,16 +45,12 @@
     <div class='theme-settings'>
       <h3>{{ theme }}</h3>
       <div>
-        <input type='radio' name='theme' id='theme-setting-android' value='android'>
+        <input type='radio' name='theme' id='theme-setting-light' value='light'>
-        <label for='theme-setting-android'>Android</label>
+        <label for='theme-setting-light'>{{ themeLight }}</label>
       </div>
       <div>
-        <input type='radio' name='theme' id='theme-setting-android-dark' value='android-dark'>
+        <input type='radio' name='theme' id='theme-setting-dark' value='dark'>
-        <label for='theme-setting-android-dark'>{{ themeAndroidDark }}</label>
+        <label for='theme-setting-dark'>{{ themeDark }}</label>
-      </div>
-      <div>
-        <input type='radio' name='theme' id='theme-setting-ios'  value='ios'/>
-        <label for='theme-setting-ios'>iOS</label>
       </div>
     </div>
     <br />

stylesheets/_ios.scss

@@ -1,488 +0,0 @@
-$ios-header-border-color: rgba(0, 0, 0, 0.05);
-$ios-border-color: rgba(0, 0, 0, 0.1);
-
-.ios {
-  #header {
-    height: $header-height;
-    border-bottom: 1px solid $ios-header-border-color;
-    border-width: 0 1px 1px 0;
-    background-color: $grey_l;
-    color: $grey_d;
-    h1 {
-      display: none;
-    }
-  }
-  .gutter {
-    border-right: 1px solid $ios-border-color;
-    .content {
-      height: calc(100% - #{$header-height});
-      background: $ios-border-color;
-    }
-    .contact {
-      background: $grey_l;
-      margin-right: 0;
-
-      &.selected {
-        background: $blue;
-        color: white;
-        .last-timestamp {
-          color: white;
-        }
-      }
-    }
-  }
-  .banner {
-    top: 15px;
-  }
-
-  .tool-bar {
-    float: left;
-    padding: 15px;
-  }
-  input[type='text']:active,
-  input[type='text']:focus,
-  input[type='search']:active,
-  input[type='search']:focus,
-  input[type='search'].active,
-  form.active {
-    outline-offset: 0;
-    outline: -webkit-focus-ring-color auto 5px;
-  }
-  input.search {
-    border-radius: 5px;
-    width: 220px;
-    height: 34px;
-    padding-left: $search-padding-left-ios;
-    line-height: 34px;
-    background-color: #dddddd;
-    &.active.rtl {
-      background-position: left $search-padding-left-ios center;
-    }
-  }
-  .conversation-header {
-    background-color: $grey_l;
-    color: $grey_d;
-    border-color: $ios-header-border-color;
-    text-align: left;
-
-    // Without this, it interacts poorly with 100% height placeholder shown on startup
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-
-    .conversation-title {
-      line-height: $header-height;
-
-      .verified-icon {
-        @include color-svg('../images/verified-check.svg', #454545);
-      }
-    }
-
-    .avatar {
-      display: none;
-    }
-  }
-
-  .conversation .panel,
-  .conversation .react-wrapper {
-    position: absolute;
-    top: $header-height;
-    bottom: 0;
-    width: 100%;
-  }
-
-  .settings h3,
-  .menu-list li {
-    text-transform: capitalize;
-  }
-  .bottom-bar {
-    padding: 15px;
-    min-height: 30px;
-    border-top: 1px solid $ios-border-color;
-    form.send {
-      border-radius: 5px;
-      border: 1px solid $ios-border-color;
-    }
-  }
-
-  .error-message.content,
-  .control .content {
-    padding: 10px;
-  }
-
-  .message-container,
-  .message-list {
-    .bubble .content {
-      margin-top: 0px;
-    }
-  }
-
-  .embedded-contact {
-    margin: 0;
-    color: white;
-
-    .first-line {
-      margin: 0;
-      padding: 10px;
-
-      .text-container {
-        .contact-name {
-          color: white;
-        }
-      }
-    }
-
-    .send-message {
-      font-weight: normal;
-      border-bottom: none;
-      margin-top: 0;
-      color: white;
-
-      .bubble-icon {
-        @include color-svg('../images/chat-bubble-outline.svg', white);
-      }
-    }
-  }
-
-  .incoming .embedded-contact {
-    .first-line {
-      .text-container {
-        .contact-name {
-          color: $blue;
-        }
-      }
-    }
-
-    color: black;
-
-    .send-message {
-      color: $blue;
-
-      .bubble-icon {
-        @include color-svg('../images/chat-bubble-outline.svg', $blue);
-      }
-    }
-  }
-
-  .embedded-contact + .content {
-    border-bottom: 1px solid white;
-  }
-
-  .quoted-message {
-    // Not ideal, but necessary to override the specificity of the android theme color
-    //   classes used in conversations.scss
-    background-color: white !important;
-    border: none !important;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-
-    margin-top: 0px !important;
-    margin-bottom: 0px;
-    margin-left: 0px;
-    margin-right: 0px;
-
-    .primary {
-      padding: 10px;
-
-      .text,
-      .filename-label,
-      .type-label {
-        border-left: 2px solid $grey_l1;
-        padding: 5px;
-        padding-left: 7px;
-        // Without this smaller bottom padding, text beyond four lines still shows up!
-        padding-bottom: 2px;
-        color: black;
-        a {
-          color: $blue;
-        }
-      }
-
-      .author {
-        display: none;
-      }
-
-      .ios-label {
-        display: block;
-        color: $grey_l1;
-        font-size: smaller;
-        margin-bottom: 3px;
-      }
-    }
-
-    .icon-container {
-      height: 61px;
-      width: 61px;
-      min-width: 61px;
-
-      .circle-background {
-        left: 12px;
-        right: 12px;
-        top: 12px;
-        bottom: 12px;
-
-        background-color: $blue !important;
-      }
-
-      .icon {
-        left: 18px;
-        right: 18px;
-        top: 18px;
-        bottom: 18px;
-
-        background-color: white !important;
-      }
-
-      .inner {
-        padding: 12px;
-        height: 61px;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    .close-container {
-      flex: initial;
-      min-width: 32px;
-      width: 32px;
-      height: 50px;
-      position: relative;
-
-      top: auto;
-      right: auto;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      -webkit-mask: none;
-      background: none;
-
-      .close-button {
-        height: 20px;
-        width: 20px;
-
-        @include color-svg('../images/close-circle.svg', $grey_l4);
-      }
-    }
-
-    .from-me {
-      .primary {
-        .text,
-        .filename-label,
-        .type-label {
-          border-left: 2px solid $blue;
-        }
-      }
-    }
-  }
-
-  .incoming .quoted-message {
-    border-bottom: 1px solid lightgray !important;
-  }
-
-  .quoted-message.from-me .primary {
-    .text,
-    .filename-label,
-    .type-label {
-      border-left: 2px solid $blue;
-    }
-  }
-
-  .outgoing .quoted-message,
-  .private .incoming .quoted-message {
-    margin-top: 0px;
-  }
-
-  .outgoing .quoted-message .icon-container .circle-background {
-    background-color: lightgray !important;
-  }
-
-  .bottom-bar {
-    .quote-wrapper {
-      margin-right: 0px;
-      margin-bottom: 15px;
-    }
-
-    .quoted-message {
-      background: none !important;
-      border-radius: 0;
-
-      .primary {
-        padding: 0px;
-
-        .ios-label {
-          color: $grey_l4;
-        }
-      }
-
-      .icon-container {
-        height: 50px;
-        width: 50px;
-        min-width: 50px;
-
-        .circle-background {
-          left: 6px;
-          right: 6px;
-          top: 6px;
-          bottom: 6px;
-
-          background-color: $blue !important;
-        }
-
-        .icon {
-          left: 12px;
-          right: 12px;
-          top: 12px;
-          bottom: 12px;
-        }
-
-        .inner {
-          padding: 0px;
-          height: 50px;
-        }
-      }
-    }
-  }
-
-  .attachments .bubbled {
-    border-radius: 15px;
-
-    padding: 10px;
-    padding-top: 0px;
-    padding-bottom: 5px;
-
-    video,
-    audio {
-      margin-bottom: 5px;
-    }
-
-    position: relative;
-  }
-
-  .tail-wrapper {
-    margin-bottom: 5px;
-  }
-  .inner-bubble {
-    border-radius: 15px;
-    overflow: hidden;
-
-    .body {
-      margin-top: 0;
-      display: inline-block;
-      padding: 10px;
-      position: relative;
-      word-break: break-word;
-    }
-  }
-
-  .tail-wrapper.with-tail {
-    position: relative;
-
-    &:before,
-    &:after {
-      content: '';
-      display: block;
-      border-radius: 20px;
-      position: absolute;
-      width: 10px;
-    }
-    &:before {
-      right: -1px;
-      bottom: -3px;
-      height: 10px;
-      border-radius: 20px;
-      background: $blue;
-    }
-    &:after {
-      height: 11px;
-      right: -6px;
-      bottom: -3px;
-      background: #eee;
-    }
-  }
-
-  .meta {
-    clear: both;
-  }
-
-  .outgoing .tail-wrapper {
-    float: right;
-
-    .inner-bubble {
-      max-width: 100%;
-    }
-  }
-
-  .incoming .tail-wrapper {
-    float: left;
-
-    .inner-bubble {
-      max-width: 100%;
-    }
-  }
-
-  // The browser doesn't always clip the border-radius properly, so we can get a
-  //   partial-pixel halo effect. Sadly, it is still needed because a quote can force the
-  //   bubble wider than an attached image, and we need a background color on the bottom
-  //   section if the image doesn't cover it all.
-  .outgoing .tail-wrapper {
-    .inner-bubble {
-      background-color: $blue;
-    }
-
-    &,
-    .body,
-    a {
-      @include invert-text-color;
-    }
-  }
-
-  .incoming .tail-wrapper {
-    &.with-tail {
-      &:before {
-        left: -1px;
-        background-color: white;
-      }
-      &:after {
-        left: -6px;
-      }
-    }
-
-    .inner-bubble {
-      background-color: white;
-      color: black;
-    }
-  }
-
-  .outgoing .attachments .fileView .icon {
-    @include color-svg('../images/file.svg', white);
-    &.audio {
-      @include color-svg('../images/audio.svg', white);
-    }
-    &.video {
-      @include color-svg('../images/video.svg', white);
-    }
-    &.voice {
-      @include color-svg('../images/voice.svg', white);
-    }
-  }
-
-  .attachment {
-    a {
-      border-radius: 15px;
-    }
-    img {
-      margin-right: auto;
-      margin-left: auto;
-    }
-  }
-  .hourglass {
-    @include hourglass(#999);
-  }
-}

stylesheets/_theme_dark.scss

@@ -6,11 +6,11 @@ $button-dark: #ccc;
 $text-dark: #cccccc;
 $text-dark_l2: darken($text-dark, 30%);
 
-body.android-dark {
+body.dark-theme {
   background-color: $grey-dark;
 }
 
-.android-dark {
+.dark-theme {
   .app-loading-screen {
     background-color: $grey-dark;
   }

stylesheets/_theme_light.scss

@@ -1,4 +1,4 @@
-.android {
+.light-theme {
   #header {
     background-color: $blue;
     color: white;

stylesheets/manifest.scss

@@ -16,9 +16,8 @@
 // Build the main view
 @import 'index';
 @import 'conversation';
-@import 'ios';
+@import 'theme_light';
-@import 'android';
+@import 'theme_dark';
-@import 'android-dark';
 
 // Installer
 @import 'options';

test/fixtures_test.js

@@ -20,17 +20,12 @@ describe('Fixtures', function() {
       .then(function() {
         var view = new Whisper.InboxView({ window: window });
         view.onEmpty();
-        view.$el.prependTo($('#render-android'));
+        view.$el.prependTo($('#render-light-theme'));
 
         var view = new Whisper.InboxView({ window: window });
-        view.$el.removeClass('android').addClass('ios');
+        view.$el.removeClass('light-theme').addClass('dark-theme');
         view.onEmpty();
-        view.$el.prependTo($('#render-ios'));
+        view.$el.prependTo($('#render-dark-theme'));
-
-        var view = new Whisper.InboxView({ window: window });
-        view.$el.removeClass('android').addClass('android-dark');
-        view.onEmpty();
-        view.$el.prependTo($('#render-android-dark'));
       })
       .then(done, done);
   });

test/index.html

@@ -11,11 +11,10 @@
   </div>
   <div id="tests">
   </div>
-  <div id="render-android" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
+  <div id="render-light-theme" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
   </div>
-  <div id="render-android-dark" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
+  <div id="render-dark-theme" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
   </div>
-  <div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
   </div>
   <script type='text/x-tmpl-mustache' id='app-loading-screen'>
     <div class='content'>
@@ -449,97 +448,6 @@
       {{ learnMore }}
     </a>
   </script>
-  <script type='text/x-tmpl-mustache' id='debug-log'>
-    <div class='content'>
-      <div>
-        <a class='x close' alt='close debug log' href='#'></a>
-        <h1> {{ title }} </h1>
-        <p> {{ debugLogExplanation }}</p>
-      </div>
-      <textarea spellcheck='false' rows='5'></textarea>
-      <div class='buttons'>
-        <button class='grey submit'>{{ submit }}</button>
-      </div>
-      <div class='result'>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='debug-log-link'>
-    <div class='input-group clearfix'>
-      <input type='text' class='link' readonly value='{{ url }}' />
-      <a class='open' alt='open in a new browser tab' target='_blank' href='{{ url }}'></a>
-    </div>
-    <p>
-      <a class='report-link' target='_blank'
-          href='https://github.com/signalapp/Signal-Desktop/issues/new/'>
-          {{ reportIssue }}
-      </a>
-    </p>
-  </script>
-  <script type='text/x-tmpl-mustache' id='settings'>
-    <div class='content'>
-      <a class='x close' alt='close settings' href='#'></a>
-      <h2>{{ settings }}</h2>
-      <hr>
-      <div class='theme-settings'>
-        <h3>{{ theme }}</h3>
-        <div>
-          <input type='radio' name='theme' id='theme-setting-android' value='android'>
-          <label for='theme-setting-android'>Android</label>
-        </div>
-        <div>
-          <input type='radio' name='theme' id='theme-setting-android-dark' value='android-dark'>
-          <label for='theme-setting-android-dark'>{{ themeAndroidDark }}</label>
-        </div>
-        <div>
-          <input type='radio' name='theme' id='theme-setting-ios'  value='ios'/>
-          <label for='theme-setting-ios'>iOS</label>
-        </div>
-      </div>
-      <hr>
-      <div class='notification-settings'>
-        <h3>{{ notifications }}</h3>
-        <p>{{ notificationSettingsDialog }}</p>
-        <div>
-          <input type='radio' name='notifications' id='notification-setting-message' value='message'>
-          <label for='notification-setting-message'>{{ nameAndMessage }} </label>
-        </div>
-        <div>
-          <input type='radio' name='notifications' id='notification-setting-name'  value='name'/>
-          <label for='notification-setting-name'>{{ nameOnly }} </label>
-        </div>
-        <div>
-          <input type='radio' name='notifications' id='notification-setting-count' value='count'/>
-          <label for='notification-setting-count'>{{ noNameOrMessage }} </label>
-        </div>
-        <div>
-          <input type='radio' name='notifications' id='notification-setting-off' value='off'/>
-          <label for='notification-setting-off'>{{ disableNotifications }} </label>
-        </div>
-      </div>
-      <br />
-      <div class='audio-notification-setting'>
-        <input type='checkbox' name='audio-notification' id='audio-notification'/>
-        <label for='audio-notification'>{{ audioNotificationDescription }}</label>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='syncSettings'>
-      <hr>
-      <h3>{{ sync }}</h3>
-      <div>
-        <button class='grey sync'>{{ syncNow }}</button>
-        <p>
-          {{ syncExplanation }}
-          <div class='synced_at'>
-              {{ lastSynced }} {{ syncDate }} {{ syncTime }}
-          </div>
-          <div class='sync_failed'>{{ syncFailed }}</div>
-        </p>
-      </div>
-  </script>
-
-
   <script type='text/x-tmpl-mustache' id='networkStatus'>
     <div class='network-status-message'>
       <h3>{{ message }}</h3>

ts/styleguide/ConversationContext.tsx

@@ -5,7 +5,7 @@ interface Props {
   /**
    * Corresponds to the theme setting in the app, and the class added to the root element.
    */
-  theme: 'ios' | 'android' | 'android-dark';
+  theme: 'light-theme' | 'dark-theme';
   type: 'private' | 'group';
 }
 
@@ -18,7 +18,7 @@ export class ConversationContext extends React.Component<Props> {
     const { theme, type } = this.props;
 
     return (
-      <div className={theme || 'android'}>
+      <div className={theme || 'light-theme'}>
         <div className={classNames('conversation', type || 'private')}>
           <div className="discussion-container" style={{ padding: '0.5em' }}>
             <ul className="message-list">{this.props.children}</ul>

ts/styleguide/StyleGuideUtil.ts

@@ -91,7 +91,7 @@ const parent = window as any;
 
 const query = window.location.search.replace(/^\?/, '');
 const urlOptions = QueryString.parse(query);
-const theme = urlOptions.theme || 'android';
+const theme = urlOptions.theme || 'light-theme';
 const locale = urlOptions.locale || 'en';
 
 // @ts-ignore