Merge pull request #919 from Bilb/fix-background-pill-divider

move pill divider in react and fix the bg

stylesheets/_session_left_pane.scss

@@ -642,14 +642,20 @@ $session-compose-margin: 20px;
 .panel-text-divider {
   width: 100%;
   text-align: center;
-  border-bottom: 1px solid $session-color-dark-grey;
-  line-height: 0.1em;
+  display: flex;
   margin: 50px 0 50px;
 
+  .panel-text-divider-line {
+    border-bottom: 1px solid $session-color-dark-grey;
+    line-height: 0.1em;
+    flex-grow: 1;
+    height: 1px;
+    align-self: center;
+  }
+
   span {
     padding: 5px 10px;
     border-radius: 50px;
-    background-color: $session-background;
     color: $session-color-light-grey;
     border: 1px solid $session-color-dark-grey;
     font-family: 'SF Pro Text';

ts/components/EditProfileDialog.tsx

@@ -16,6 +16,7 @@ import {
   SessionIconType,
 } from './session/icon';
 import { SessionModal } from './session/SessionModal';
+import { PillDivider } from './session/PillDivider';
 
 declare global {
   interface Window {
@@ -107,9 +108,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
         {viewEdit && this.renderEditView()}
 
         <div className="session-id-section">
-          <div className="panel-text-divider">
-            <span>{window.i18n('yourSessionID')}</span>
-          </div>
+          <PillDivider text={window.i18n('yourSessionID')} />
           <p
             className={classNames(
               'text-selectable',

ts/components/session/PillDivider.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface ReceivedProps {
+  text: string;
+}
+
+// Needed because of https://github.com/microsoft/tslint-microsoft-contrib/issues/339
+type Props = ReceivedProps;
+
+export const PillDivider: React.SFC<Props> = props => {
+  return (
+    <div className="panel-text-divider">
+      <div className="panel-text-divider-line" />
+      <span>{props.text}</span>
+      <div className="panel-text-divider-line" />
+    </div>
+  );
+};

ts/components/session/SessionClosableOverlay.tsx

@@ -12,6 +12,7 @@ import {
 } from './SessionButton';
 import { SessionSpinner } from './SessionSpinner';
 import { SessionGroupType } from './LeftPaneChannelSection';
+import { PillDivider } from './PillDivider';
 
 interface Props {
   overlayMode: 'message' | 'contact' | SessionGroupType;
@@ -223,9 +224,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
         )}
 
         {isAddContactView && (
-          <div className="panel-text-divider">
-            <span>{window.i18n('yourPublicKey')}</span>
-          </div>
+          <PillDivider text={window.i18n('yourPublicKey')} />
         )}
 
         {isAddContactView && (

ts/components/session/SessionHTMLRenderer.tsx

@@ -7,6 +7,7 @@ interface ReceivedProps {
   key?: any;
 }
 
+// Needed because of https://github.com/microsoft/tslint-microsoft-contrib/issues/339
 type Props = ReceivedProps;
 
 export const SessionHtmlRenderer: React.SFC<Props> = ({