make the leftpane header a bit more generic to handle tabs

stylesheets/_session_theme_dark.scss

@@ -67,30 +67,37 @@
 }
 
 @mixin session-h-title {
-  color: $session-color-white;
   font-weight: bold;
 }
 
 h1 {
   @include session-h-title;
+  color: $session-shade-16;
   font-size: 25px;
   margin: 0;
+
+  &.active {
+    color: $session-color-white;
+  }
 }
 
 h2 {
   @include session-h-title;
+  color: $session-color-white;
   font-size: 22px;
   text-align: center;
 }
 
 h3 {
   @include session-h-title;
+  color: $session-color-white;
   font-size: 18px;
   padding-top: 22px;
 }
 
 h4 {
   @include session-h-title;
+  color: $session-color-white;
   font-size: 17px;
   text-align: center;
 }

stylesheets/_session_theme_dark_left_pane.scss

@@ -107,6 +107,7 @@ $session-compose-margin: 20px;
 
   &__title {
     flex-grow: 1;
+    cursor: pointer;
   }
 
   &__list {
@@ -132,6 +133,10 @@ $session-compose-margin: 20px;
       padding-top: 22px;
     }
 
+    h4 {
+      text-transform: uppercase;
+    }
+
     &-border-container {
       width: -webkit-fill-available;
       position: relative;

ts/components/session/LeftPaneMessageSection.tsx

@@ -22,6 +22,7 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { SessionIdEditable } from './SessionIdEditable';
 import { UserSearchDropdown } from './UserSearchDropdown';
 import { validateNumber } from '../../types/PhoneNumber';
+import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 
 export interface Props {
   searchTerm: string;
@@ -166,16 +167,19 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public renderHeader(): JSX.Element {
+    const labels = [];
+    labels.push(window.i18n('messagesHeader'));
+
     return (
-      <div className="module-left-pane__header">
+      <LeftPaneSectionHeader
-        <h1 className="module-left-pane__title">
+        onTabSelected={() => {
-          {window.i18n('messagesHeader')}
+          console.log('tabselected');
-        </h1>
+        }}
-        <SessionButton
+        selectedTab={0}
-          text={window.i18n('compose')}
+        labels={labels}
-          onClick={this.handleComposeClick}
+        buttonLabel={window.i18n('compose')}
-        />
+        buttonClicked={this.handleComposeClick}
-      </div>
+      />
     );
   }
 

ts/components/session/LeftPaneSectionHeader.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SessionButton } from './SessionButton';
+
+const Tab = ({
+  isSelected,
+  label,
+  onSelect,
+  type,
+}: {
+  isSelected: boolean;
+  label: string;
+  onSelect?: (event: number) => void;
+  type: number;
+}) => {
+  const handleClick = onSelect
+    ? () => {
+        onSelect(type);
+      }
+    : undefined;
+
+  return (
+    <h1
+      className={classNames(
+        'module-left-pane__title',
+        isSelected ? 'active' : null
+      )}
+      onClick={handleClick}
+      role="button"
+    >
+      {label}
+    </h1>
+  );
+};
+
+interface Props {
+  onTabSelected: any;
+  selectedTab: number;
+  labels: Array<string>;
+  notificationCount?: number;
+  buttonLabel?: string;
+  buttonClicked?: any;
+}
+
+interface State {
+  selectedTab: number;
+}
+
+export class LeftPaneSectionHeader extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = { selectedTab: 0 };
+  }
+
+  public render() {
+    return this.renderTabs();
+  }
+
+  private renderTabs() {
+    const { selectedTab } = this.state;
+    const { labels, buttonLabel, buttonClicked } = this.props;
+
+    const children = [];
+    //loop to create children
+    for (let i = 0; i < labels.length; i++) {
+      children.push(
+        <Tab
+          label={labels[i]}
+          type={i}
+          isSelected={selectedTab === i}
+          onSelect={this.handleTabSelect}
+          key={i}
+        />
+      );
+    }
+
+    if (buttonLabel) {
+      children.push(
+        <SessionButton
+          text={window.i18n('compose')}
+          onClick={buttonClicked}
+          key={window.i18n('compose')}
+        />
+      );
+    }
+
+    //Create the parent and add the children
+    return <div className="module-left-pane__header">{children}</div>;
+  }
+
+  private readonly handleTabSelect = (tabType: number): void => {
+    this.setState({
+      selectedTab: tabType,
+    });
+  };
+}