Fixed styling

stylesheets/_session.scss

@@ -22,19 +22,16 @@
   font-style: italic;
 }
 
-
-
 // Session Colors
 $session-color-green: #00f782;
 $session-color-white: #fff;
 $session-color-black: #000;
 
-$session-color-dark-1: #1B1B1B;
+$session-color-dark-1: #1b1b1b;
 $session-color-dark-2: #151515;
 $session-color-dark-3: #404146;
-$session-color-dark-4: #5C5D5F;
-$session-color-dark-5: #A5A6A8;
-
+$session-color-dark-4: #5c5d5f;
+$session-color-dark-5: #a5a6a8;
 
 $session-font-family: 'SpaceMono';
 $session-transition-duration: 0.25s;
@@ -43,11 +40,8 @@ $session-icon-size-sm: 15px;
 $session-icon-size-md: 20px;
 $session-icon-size-lg: 30px;
 
-
-
 $session_message-container-border-radius: 5px;
 
-
 .session-button {
   min-width: 165px;
   width: auto;
@@ -81,13 +75,11 @@ $session_message-container-border-radius: 5px;
   }
 }
 
-
-
 @mixin set-icon-margin($size) {
   margin: $size / 3;
 }
-.session-icon{
-  &.padded-left{
+.session-icon {
+  &.padded-left {
     @include set-icon-margin($session-icon-size-md);
   }
 }
@@ -99,7 +91,6 @@ $session_message-container-border-radius: 5px;
   &:hover {
     opacity: 1;
   }
-  
 
   &.small.padded {
     @include set-icon-margin($session-icon-size-sm);
@@ -118,19 +109,18 @@ $session_message-container-border-radius: 5px;
   fill: $session-color-white;
 }
 
-
-
 /* CONVERSATION AND MESSAGES */
 
-.module-conversation-header__title-flex, .module-conversation-header__title{
+.module-conversation-header__title-flex,
+.module-conversation-header__title {
   width: 100%;
 
   .module-contact-name {
-      width: 100%;
+    width: 100%;
   }
 
-  .module-contact-name__profile-number{
-      text-align: center;
+  .module-contact-name__profile-number {
+    text-align: center;
   }
 }
 
@@ -138,12 +128,10 @@ $session_message-container-border-radius: 5px;
   border-bottom: none;
 }
 
-
 .module-message__author__profile-name {
   font-style: normal;
 }
 
-
 .module-message__author-avatar {
   flex-direction: column;
   display: inline-flex;
@@ -151,7 +139,6 @@ $session_message-container-border-radius: 5px;
   padding-top: 5px;
 }
 
-
 .module-message__container {
   border-radius: $session_message-container-border-radius;
-}
+}

stylesheets/_session_theme_dark.scss

@@ -1,41 +1,35 @@
-
-
-
-// Messages 
+// Messages
 .dark-theme {
-    .module-conversation-header {
-        background-color: $session-color-dark-1;
-    }
-    .discussion-container {
-        background-color: $session-color-dark-2;
-    }
+  .module-conversation-header {
+    background-color: $session-color-dark-1;
+  }
+  .discussion-container {
+    background-color: $session-color-dark-2;
+  }
 
-    .module-message__author {
-        color: $session-color-dark-5;       
-    }
+  .module-message__author {
+    color: $session-color-dark-5;
+  }
 
-    .module-message__metadata__badge {
-        color: $session-color-dark-4;
-    }
-    .module-message__metadata__date--incoming {
-        color: $session-color-dark-4;
-    }
-    .module-message__metadata__date--outgoing {
-        color: $session-color-dark-5;
-    }
+  .module-message__metadata__badge {
+    color: $session-color-dark-4;
+  }
+  .module-message__metadata__date--incoming {
+    color: $session-color-dark-4;
+  }
+  .module-message__metadata__date--outgoing {
+    color: $session-color-dark-5;
+  }
 
-    .module-message__container--incoming {
-        background-color: $session-color-dark-1;
-    }
-
-    .module-message__container--outgoing {
-        background-color: $session-color-dark-3;
-    }
+  .module-message__container--incoming {
+    background-color: $session-color-dark-1;
+  }
 
+  .module-message__container--outgoing {
+    background-color: $session-color-dark-3;
+  }
 }
 
-
 .message-read-receipt-container {
-    margin-left: 5px;
-  }
-  
+  margin-left: 5px;
+}

ts/components/conversation/ConversationHeader.tsx

@@ -10,8 +10,8 @@ import {
   SubMenu,
 } from 'react-contextmenu';
 
-import { SessionIconTypes, SessionIconSizes } from '../session/SessionIcon';
 import { SessionIconButton } from '../session/SessionIconButton';
+import { SessionIconSizes, SessionIconTypes } from '../session/SessionIcon';
 
 interface TimerOption {
   name: string;
@@ -215,9 +215,9 @@ export class ConversationHeader extends React.Component<Props> {
     return (
       <div>
         <SessionIconButton
-          iconType = {SessionIconTypes.Search}
-          iconSize = {SessionIconSizes.Large}
-          iconPadded = {true}
+          iconType={SessionIconTypes.Search}
+          iconSize={SessionIconSizes.Large}
+          iconPadded={true}
         />
       </div>
     );
@@ -232,16 +232,15 @@ export class ConversationHeader extends React.Component<Props> {
 
     return (
       <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
-          <SessionIconButton 
-            iconType={SessionIconTypes.Ellipses}
-            iconSize={SessionIconSizes.Large}
-            onClick={this.showMenuBound}
-          />
+        <SessionIconButton
+          iconType={SessionIconTypes.Ellipses}
+          iconSize={SessionIconSizes.Large}
+          onClick={this.showMenuBound}
+        />
       </ContextMenuTrigger>
     );
   }
 
-
   public renderMenu(triggerId: string) {
     const {
       i18n,

ts/components/conversation/Message.tsx

@@ -31,7 +31,11 @@ import { getIncrement } from '../../util/timer';
 import { isFileDangerous } from '../../util/isFileDangerous';
 import { ColorType, LocalizerType } from '../../types/Util';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
-import { SessionIcon, SessionIconTypes, SessionIconSizes } from '../session/SessionIcon';
+import {
+  SessionIcon,
+  SessionIconSizes,
+  SessionIconTypes,
+} from '../session/SessionIcon';
 
 declare global {
   interface Window {
@@ -316,8 +320,8 @@ export class Message extends React.PureComponent<Props, State> {
         {!textPending && direction === 'outgoing' && status !== 'error' ? (
           <div className="message-read-receipt-container">
             <SessionIcon
-              iconType = {SessionIconTypes.Check}
-              iconSize = {SessionIconSizes.Small}
+              iconType={SessionIconTypes.Check}
+              iconSize={SessionIconSizes.Small}
             />
           </div>
         ) : null}

ts/components/session/SessionIcon.tsx

@@ -144,7 +144,13 @@ export class SessionIcon extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { iconType, iconSize, iconColor, iconRotation, iconPadded } = this.props;
+    const {
+      iconType,
+      iconSize,
+      iconColor,
+      iconRotation,
+      iconPadded,
+    } = this.props;
 
     let iconDimensions;
     switch (iconSize) {
@@ -228,7 +234,12 @@ export class SessionIcon extends React.PureComponent<Props> {
 
     return (
       <svg
-        className={classNames('session-icon', iconType, iconRotation, iconPadded ? 'padded' : '')}
+        className={classNames(
+          'session-icon',
+          iconType,
+          iconRotation,
+          iconPadded ? 'padded' : ''
+        )}
         version="1.1"
         preserveAspectRatio="xMidYMid meet"
         viewBox={iconDef.viewBox}

ts/components/session/SessionIconButton.tsx

@@ -4,15 +4,14 @@ import classNames from 'classnames';
 import { Props, SessionIcon } from './SessionIcon';
 
 export class SessionIconButton extends React.PureComponent<Props> {
+  public static defaultProps = SessionIcon.defaultProps;
+
   constructor(props: any) {
     super(props);
     this.clickHandler = this.clickHandler.bind(this);
   }
 
-  public static defaultProps = SessionIcon.defaultProps;
-
   public render() {
-    
     return (
       <div
         className={classNames(