Progress

app/javascript/gabsocial/components/layouts/default_layout.js

@@ -0,0 +1,55 @@
+import Search from '../search'
+import ColumnHeader from '../column_header'
+import Header from '../header'
+
+export default class DefaultLayout extends PureComponent {
+  static propTypes = {
+    layout: PropTypes.object,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.boolean,
+  }
+
+  render() {
+    const { children, title, showBackBtn, layout } = this.props
+
+    return (
+      <div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
+
+        <Header />
+
+        <main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
+
+          <div className={[styles.default, styles.height53PX, styles.borderBottom1PX, styles.borderColorSubtle2, styles.backgroundColorSubtle3, styles.z3, styles.top0, styles.positionFixed].join(' ')}>
+            <div className={[styles.default, styles.height53PX, styles.paddingLeft15PX, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
+              <div className={[styles.default, styles.width660PX].join(' ')}>
+                <ColumnHeader title={title} />
+              </div>
+              <div className={[styles.default, styles.width325PX].join(' ')}>
+                <Search />
+              </div>
+            </div>
+          </div>
+
+          <div className={[styles.default, styles.height53PX].join(' ')}></div>
+
+          <div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
+            <div className={[styles.default, styles.width660PX, styles.z1].join(' ')}>
+              <div className={styles.default}>
+                {children}
+              </div>
+            </div>
+
+            <div className={[styles.default, styles.width325PX].join(' ')}>
+              <div className={styles.default}>
+                {layout}
+              </div>
+            </div>
+          </div>
+
+        </main>
+
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/layouts/profile_layout.js

@@ -0,0 +1,40 @@
+import ColumnHeader from '../column_header'
+import Header from '../header'
+
+export default class ProfileLayout extends PureComponent {
+  static propTypes = {
+    layout: PropTypes.object,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.boolean,
+  }
+
+  render() {
+    const { children } = this.props
+
+    return (
+      <div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
+
+        <Header />
+
+        <main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
+
+          <div className={[styles.default, styles.height350PX, styles.width100PC].join(' ')}>
+            <img
+              className={[styles.default, styles.height350PX, styles.width100PC, styles.objectFitCover].join(' ')}
+              src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
+            />
+          </div>
+
+          <div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
+            <div className={[styles.default, styles.z1].join(' ')}>
+              {children}
+            </div>
+          </div>
+
+        </main>
+
+      </div>
+    )
+  }
+
+}