Appview transforms are fixed and in place

stylesheets/_session.scss

@@ -83,6 +83,7 @@ $session-margin-md: 15px;
 $session-margin-lg: 20px;
 
 $session-search-input-height: 34px;
+$main-view-header-height: 85px;
 
 div.spacer-sm {
   height: $session-margin-sm;
@@ -924,13 +925,34 @@ label {
   }
 }
 
+
 .session-settings {
+  width: 100%;
+  height: 100vh;
+
   &-list {
-    width: 100%;
-    height: 100vh;
     overflow-y: scroll;
   }
 
+  &-header {
+    display: flex;
+    justify-content: center;
+    background-color: $session-shade-6;
+    height: $main-view-header-height;
+    line-height: $main-view-header-height;
+    font-weight: bold;
+    font-size: 18px;
+
+    .session-icon-button {
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      right: $session-margin-lg;
+      align-items: center;
+      height: $main-view-header-height;
+    }
+  }
+
   &-item {
     font-size: 15px;
     color: $session-color-white;

ts/components/MainViewController.tsx

@@ -8,6 +8,7 @@ import {
 
 import { SessionSettingCategory } from './session/LeftPaneSettingSection';
 import { SessionButtonColor } from './session/SessionButton';
+import { SessionIconButton, SessionIconType, SessionIconSize } from './session/icon';
 
 // Grab initial values from database on startup
 const localSettings = [
@@ -77,8 +78,75 @@ const localSettings = [
 ];
 
 export class MainViewController {
+
   public static renderMessageView() {
-    const element = (
+    ReactDOM.render(
+      <MessageView/>,
+      document.getElementById('main-view')
+    );
+  }
+
+  public static renderSettingsView(category: SessionSettingCategory) {
+    ReactDOM.render(
+        <SettingsView category={category}/>,
+      document.getElementById('main-view')
+    );
+  }
+}
+
+
+interface SettingsViewProps {
+  category: SessionSettingCategory
+}
+
+export class SettingsView extends React.Component<SettingsViewProps>{
+  public settingsViewRef: React.RefObject<HTMLDivElement>;
+
+  public constructor(props: any) {
+    super(props);
+    this.settingsViewRef = React.createRef();
+  }
+
+  render() {
+    const { category } = this.props;
+
+    return (
+      <div className="session-settings">
+        <SettingsHeader category={category}/>
+        <div
+          ref = {this.settingsViewRef}
+          className="session-settings-list"
+        >
+          
+          
+          {localSettings.map(setting => {
+            return (
+              <div key={setting.id}>
+                {setting.category === category && (
+                  <SessionSettingListItem
+                    title={setting.title}
+                    description={setting.description}
+                    type={setting.type}
+                    value={setting.value}
+                    onClick={() => {
+                      SettingsManager.updateSetting(setting);
+                    }}
+                    buttonText={setting.buttonText || undefined}
+                    buttonColor={setting.buttonColor || undefined}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+export class MessageView extends React.Component {
+  render() {
+    return (
       <div className="conversation-stack">
         <div className="conversation placeholder">
           <div className="conversation-header" />
@@ -94,39 +162,35 @@ export class MainViewController {
         </div>
       </div>
     );
+  }
+}
 
-    ReactDOM.render(element, document.getElementById('main-view'));
+export class SettingsHeader extends React.Component<SettingsViewProps>{
+  public constructor(props: any) {
+    super(props);
   }
 
-  public static renderSettingsView(category: SessionSettingCategory) {
-    const element = (
-      <div className="session-settings-list">
-        {localSettings.map(setting => {
-          return (
-            <div key={setting.id}>
-              {setting.category === category && (
-                <SessionSettingListItem
-                  title={setting.title}
-                  description={setting.description}
-                  type={setting.type}
-                  value={setting.value}
-                  onClick={() => {
-                    SettingsManager.updateSetting(setting);
-                  }}
-                  buttonText={setting.buttonText || undefined}
-                  buttonColor={setting.buttonColor || undefined}
-                />
-              )}
-            </div>
-          );
-        })}
+  public focusSearch(){
+    $('.left-pane-setting-section .session-search-input input').focus();
+  }
+
+  render() {
+    const category = String(this.props.category)
+
+    return (
+      <div className="session-settings-header">
+        {category[0].toUpperCase() + category.substr(1)} Settings
+        <SessionIconButton
+          iconType={SessionIconType.Search}
+          iconSize={SessionIconSize.Large}
+          onClick={this.focusSearch}
+        />
       </div>
     );
-
-    ReactDOM.render(element, document.getElementById('main-view'));
   }
 }
 
+
 export class SettingsManager {
   public static updateSetting({ id, type, value }) {
     if (type === SessionSettingType.Toggle) {

ts/components/session/LeftPaneSettingSection.tsx

@@ -15,6 +15,7 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
 
 export enum SessionSettingCategory {
+  General = 'general',
   Account = 'account',
   Privacy = 'privacy',
   Notifications = 'notifications',
@@ -33,7 +34,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      settingCategory: SessionSettingCategory.Account,
+      settingCategory: SessionSettingCategory.General,
       searchQuery: '',
     };