laCour/slack-night-mode

Thread Replies and Hover unstyled

glehman3 opened this issue · 2 comments

When replying to a thread, both in a channel, in the thread sidebar, or within the All Threads - Reply portion of thread is unstyled.

The Hover mechanism in All Threads also appears to have no style, and highlights with a white overlay when hovering over a thread in All Threads.

I ran into this issue as well. Interestingly, after testing a different theme found here, I reverted back to this theme using a brand new ssb-interop.js file and the proper dark styling returned to all Reply fields, both in the main channel view and within the thread sidebar.

All Threads continues to display the white hover on mouseover for comments, but I can live with that for now.

Specifically, this is my current ssb-interop.js:

**
 * The preload script needs to stay in regular ole JavaScript, because it is
 * the point of entry for electron-compile.
 */

if (window.location.href !== 'about:blank') {
  const preloadStartTime = process.hrtime();
  const { ipcRenderer, remote } = require('electron');

  ipcRenderer.on('SLACK_SET_DESKTOP_INTEROP_METADATA', (_event, ...args) =>
    args.forEach(({ key, value }) => window[key] = value)
  );

  const { init } = require('electron-compile');
  const { assignIn } = require('lodash');
  const path = require('path');

  const { isPrebuilt } = require('../utils/process-helpers');
  const profiler = require('../utils/profiler.js');

  if (profiler.shouldProfile()) profiler.startProfiling();

  //tslint:disable-next-line:no-console
  process.on('uncaughtException', (e) => console.error(e));

  /**
   * Patch Node.js globals back in, refer to
   * https://electron.atom.io/docs/api/process/#event-loaded.
   */
  const processRef = window.process;
  process.once('loaded', () => {
    window.process = processRef;
  });

  /**
   * loadSettings are just the command-line arguments we're concerned with, in
   * this case developer vs production mode.
   *
   * Note: we are using one of property in loadSettings to call electron-compile init,
   * so can't get rid of calling remote synchronously here.
   */
  const loadSettings = window.loadSettings = assignIn({},
    remote.getGlobal('loadSettings'),
    { windowType: 'webapp' }
  );

  window.perfTimer = assignIn({}, remote.getGlobal('perfTimer'));
  window.perfTimer.PRELOAD_STARTED = preloadStartTime;

  if (!window.perfTimer.isInitialTeamBooted) {
    ipcRenderer.send('SLACK_PRQ_INITIAL_TEAM_BOOTED');
  }

  const resourcePath = path.join(__dirname, '..', '..');
  const mainModule = require.resolve('../ssb/main.ts');
  const isDevMode = loadSettings.devMode && isPrebuilt();

  init(resourcePath, mainModule, !isDevMode);
}

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     css += `
       div.c-virtual_list__scroll_container {
           background-color: #222222 !important;
       }
       .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider {
            z-index: 0;
       }
       div.c-message__content:hover {
           background-color: #222222 !important;
       }

       div.c-message:hover {
           background-color: #222222 !important;
       }
     `;
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

On further review, the above "fix" was nothing more than restarting Slack to push apparent changes made on Slack's end.

All Threads hover issue remains, but try restarting Slack before making any additional changes.