From f2f4b4be7034feaf83771fbe13d3e41002ccf585 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 24 Feb 2020 17:11:43 +1100
Subject: [PATCH] move pill divider in react and fix the bg

---
 stylesheets/_session_left_pane.scss              | 12 +++++++++---
 ts/components/EditProfileDialog.tsx              |  5 ++---
 ts/components/session/PillDivider.tsx            | 16 ++++++++++++++++
 ts/components/session/SessionClosableOverlay.tsx |  5 ++---
 4 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 ts/components/session/PillDivider.tsx

diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 4887ffad3..af3a5098a 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/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';
diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index 8cf9f333a..54abe0337 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/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',
diff --git a/ts/components/session/PillDivider.tsx b/ts/components/session/PillDivider.tsx
new file mode 100644
index 000000000..508e97719
--- /dev/null
+++ b/ts/components/session/PillDivider.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface ReceivedProps {
+  text: string;
+}
+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>
+  );
+};
diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx
index dc72290e3..de9119337 100644
--- a/ts/components/session/SessionClosableOverlay.tsx
+++ b/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 && (