Progress

app/javascript/gabsocial/components/column/column.scss

@@ -3,7 +3,7 @@
   position: relative;
   box-sizing: border-box;
   flex-direction: column;
-  width: 350px;
+  // width: 350px;
   flex: 1 1 100%;
   overflow: hidden;
 

app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js

@@ -7,7 +7,7 @@ export default class ColumnSettingsHeading extends PureComponent {
   };
 
   render() {
-    const { heading } = this.props;
+    const { heading, id } = this.props;
 
     return (
       <span id={id} className='column-settings-heading'>{heading}</span>

app/javascript/gabsocial/components/columns_area/columns_area.js

@@ -1,44 +0,0 @@
-import './columns_area.scss';
-
-export default class ColumnsArea extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.node,
-    layout: PropTypes.object,
-  };
-
-  render () {
-    const { children } = this.props;
-    const layout = this.props.layout || {LEFT:null,RIGHT:null};
-
-    console.log("layout:", layout);
-
-    return (
-      <div className='page'>
-        <div className='page__columns'>
-          <div className='columns-area__panels'>
-
-            <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-              <div className='columns-area__panels__pane__inner'>
-                {layout.LEFT}
-              </div>
-            </div>
-
-            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
-                {children}
-              </div>
-            </div>
-
-            <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-              <div className='columns-area__panels__pane__inner'>
-                {layout.RIGHT}
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    )
-  }
-}

app/javascript/gabsocial/components/columns_area/columns_area.scss

@@ -1,181 +0,0 @@
-.page {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &__top {
-    display: flex;
-    z-index: 105;
-
-    @include size(100%, auto);
-
-    @media (min-width:895px) {
-      top: -290px;
-      position: sticky;
-    }
-  }
-
-  &__columns {
-    display: flex;
-    flex-direction: column;
-
-    @include size(100%);
-  }
-}
-
-.columns-area {
-  flex: 1 1 auto;
-  position: relative;
-
-  @include flex(center, stretch, row);
-
-  &__panels {
-    @include size(100%);
-    @include flex(center);
-
-    &__pane {
-      height: 100%;
-      pointer-events: none;
-      padding-top: 15px;
-
-      @include flex(flex-end);
-
-      &--start {
-        justify-content: flex-start;
-      }
-
-      &__inner {
-        pointer-events: auto;
-
-        @include size(265px, 100%);
-      }
-    }
-
-    &__main {
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      width: 100%;
-      max-width: 600px;
-      padding: 0 20px;
-
-      @media screen and (max-width: 375px) {
-        padding: 0 10px;
-      }
-
-      @media screen and (min-width: 895px) {
-        margin: 0 20px;
-        padding: 0;
-      }
-    }
-  }
-}
-
-
-@media screen and (min-width: 631px) {
-  .columns-area {
-    padding: 0;
-
-    >div {
-      .column,
-      .drawer {
-        @include horizontal-padding(5px);
-      }
-    }
-  }
-}
-
-.columns-area--mobile {
-  flex-direction: column;
-  width: 100%;
-
-  @include margin-center;
-
-  .column,
-  .drawer {
-    padding: 0;
-
-    @include size(100%);
-  }
-
-  .search__input {
-    padding: 15px 30px 15px 15px;
-
-    @include text-sizing(16px, 400, 18px);
-  }
-
-  .search__icon .fa {
-    top: 15px;
-  }
-
-  @media screen and (min-width: 360px) {
-    padding: 15px 0;
-  }
-
-  @media screen and (min-width: 630px) {
-    .detailed-status {
-      padding: 15px;
-
-      .media-gallery,
-      .video-player {
-        margin-top: 15px;
-      }
-    }
-
-    .account__header__bar {
-      padding: 5px 10px;
-    }
-
-    .navigation-bar,
-    .compose-form {
-      padding: 15px;
-    }
-
-    .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-      padding-top: 15px;
-    }
-
-    .account {
-      padding: 15px 10px;
-    }
-
-    .notification {
-      &__message {
-        margin-left: 48px + 15px * 2;
-        padding-top: 15px;
-      }
-
-      &__favourite-icon-wrapper {
-        left: -32px;
-      }
-
-      .status {
-        padding-top: 8px;
-      }
-
-      .account {
-        padding-top: 8px;
-      }
-
-      .account__avatar-wrapper {
-        @include horizontal-margin(17px, 15px);
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 895px) {
-  .columns-area__panels__pane--left {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .columns-area__panels__pane--right {
-    display: none;
-  }
-}
-
-.columns-area--mobile .column {
-  // @include gab-container-standards();
-}

app/javascript/gabsocial/components/columns_area/index.js

@@ -1 +0,0 @@
-export { default } from './columns_area';

app/javascript/gabsocial/components/display_name/display_name.scss

@@ -6,10 +6,11 @@
 
   &__html {
     font-weight: 600;
-    padding-right: 4px;
+    font-size: 15px;
   }
 
   &__account {
-    font-size: 14px;
+    margin-left: 5px;
+    font-size: 15px;
   }
 }

app/javascript/gabsocial/components/header/assets/tabs_bar_icon/group_icon.js

@@ -0,0 +1,29 @@
+const GroupIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
+      <path className='header-nav__item__icon__path' d="M 10 28 C 10 27 10 26 10 25 L 6 25 C 3 25 0 28 0 32 L 0 40 C 0 42 1 44 4 44 L 10 44 C 10 43 10 43 10 42 Z M 10 28"/>
+      <path className='header-nav__item__icon__path' d="M 28 22 L 19 22 C 15 22 12 25 12 28 L 12 42 C 12 43 13 44 14 44 L 33 44 C 34 44 35 43 35 42 L 35 28 C 35 25 32 22 28 22 Z M 28 22"/>
+      <circle className='header-nav__item__icon__path' cx="8" cy="15" r="6"/>
+      <circle className='header-nav__item__icon__path' cx="24" cy="11" r="9"/>
+      <circle className='header-nav__item__icon__path' cx="40" cy="15" r="6"/>
+    </g>
+  </svg>
+)
+
+export default GroupIcon

app/javascript/gabsocial/components/header/assets/tabs_bar_icon/home_icon.js

@@ -0,0 +1,24 @@
+const HomeIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
+    </g>
+  </svg>
+)
+
+export default HomeIcon

app/javascript/gabsocial/components/header/assets/tabs_bar_icon/notifications_icon.js

@@ -0,0 +1,26 @@
+const NotificationsIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
+      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
+      <path className='header-nav__item__icon__path' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
+    </g>
+  </svg>
+)
+
+export default NotificationsIcon

app/javascript/gabsocial/components/header/header.js

@@ -12,8 +12,14 @@ import { shortNumberFormat } from '../../utils/numbers';
 import { me } from '../../initial_state';
 import { makeGetAccount } from '../../selectors';
 import ProgressPanel from '../progress_panel';
+import GabLogo from './assets/gab_logo';
+import {
+  GroupIcon,
+  HomeIcon,
+  NotificationsIcon,
+} from './assets/tabs_bar_icon';
 
-import './sidebar_menu.scss';
+console.log("header global - styles:", styles);
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -46,14 +52,14 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = (dispatch) => ({
-  onClose () {
+  onClose() {
     dispatch(closeSidebar());
   },
 });
 
 export default @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class SidebarMenu extends ImmutablePureComponent {
+class Header extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
@@ -66,7 +72,7 @@ class SidebarMenu extends ImmutablePureComponent {
     moreOpen: false,
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     if (!me) return;
 
     if (this.props.sidebarOpen) {
@@ -89,7 +95,7 @@ class SidebarMenu extends ImmutablePureComponent {
     });
   }
 
-  render () {
+  render() {
     const { sidebarOpen, intl, account } = this.props;
     const { moreOpen } = this.state;
 
@@ -105,6 +111,83 @@ class SidebarMenu extends ImmutablePureComponent {
     const moreIcon = moreOpen ? 'minus' : 'plus';
     const moreContainerStyle = { display: moreOpen ? 'block' : 'none' };
 
+    const sidebarItems = [
+      {
+        name: 'Home',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Notifications',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Groups',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Lists',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Chat',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Trends',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        name: 'Profile',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+    ];
+
+    return (
+      <header role='banner' className={[styles.header].join(' ')}>
+        <div className='header__container'>
+          <div className='header-scrollarea'>
+            <div className='header-scrollarea__container'>
+              <h1 className='header__heading'>
+                <a className='header__heading__btn'>
+                  <GabLogo />
+                </a>
+              </h1>
+              <nav className='header-nav'>
+
+                {
+                  sidebarItems.map((sidebarItem, i) => {
+                    return (
+                      <NavLink to={sidebarItem.to} className='header-nav__item' key={`header-nav__item-${i}`}>
+                        <div className='header-nav__item__block'>
+                          {sidebarItem.icon}
+                          <span className='header-nav__item__title'>{sidebarItem.name}</span>
+                        </div>
+                      </NavLink>
+                    )
+                  })
+                }
+
+                <a className='header-nav__item'>
+                  <div className='header-nav__item__block'>
+                    <NotificationsIcon />
+                    <span className='header-nav__item__title'>More</span>
+                  </div>
+                </a>
+
+              </nav>
+            </div>
+          </div>
+        </div>
+      </header>
+    )
+
     return (
       <div className={classes}>
         <div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
@@ -124,7 +207,7 @@ class SidebarMenu extends ImmutablePureComponent {
                 </Link>
               </div>
               <div className='sidebar-menu-profile__name'>
-                <DisplayName account={account}/>
+                <DisplayName account={account} />
               </div>
 
               <div className='sidebar-menu-profile__stats'>
@@ -212,7 +295,7 @@ class SidebarMenu extends ImmutablePureComponent {
             </div>
 
             <div className='sidebar-menu__section'>
-              <a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
+              <a  className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
               </a>
             </div>

app/javascript/gabsocial/components/header/header.scss

@@ -0,0 +1,285 @@
+.header {
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 1;
+  align-items: flex-end;
+  z-index: 3;
+
+  &__container {
+    display: flex;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 275px;
+  }
+
+  &__heading {
+    display: flex;
+    width: 100%;
+    margin-top: 4px;
+
+    &__btn {
+      display: flex;
+      max-width: 100%;
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.header-scrollarea {
+  position: fixed;
+  height: 100%;
+  top: 0;
+
+  &__container {
+    display: flex;
+    width: 275px;
+    height: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
+}
+
+.header-nav {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    flex-grow: 1;
+    height: 54px;
+    cursor: pointer;
+    text-decoration: none;
+
+    @include vertical-padding(4px);
+
+    &__block {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      padding: 10px;
+      border-radius: 27px;
+    }
+
+    &__icon {
+      @include size(26px);
+
+      &__path {
+        stroke: #fff;
+        fill: none;
+        stroke-width: 4px;
+        stroke-linecap: round;
+
+        &--fill {
+          stroke: none !important;
+          fill: #fff !important;
+        }
+      }
+    }
+
+    &__title {
+      overflow-wrap: break-word;
+      font-size: 19px;
+      color: #fff;
+
+      @include horizontal-margin(15px);
+    }
+
+    &:hover & {
+      &__block {
+        background-color: rgba($gab-brand-default, 0.25);
+      }
+
+      &__title {
+        color: $gab-brand-default;
+      }
+    }
+  }
+}
+
+// .sidebar-menu {
+//   display: flex;
+//   position: fixed;
+//   flex-direction: column;
+//   width: 275px;
+//   height: 100vh;
+//   top: 0;
+//   bottom: 0;
+//   left: 0;
+//   background: $gab-background-container;
+//   transform: translateX(-275px);
+//   transition: all 0.15s linear;
+//   z-index: 10001;
+
+// 	body.theme-gabsocial-light & {
+// 		background: $gab-background-container-light;
+// 	}
+
+//   &__root {
+//     display: none;
+//   }
+
+//   &__wrapper {
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     z-index: 10000;
+//     background-color: transparent;
+//     transition: background-color 0.2s linear;
+//     transition-delay: 0.1s;
+//   }
+
+//   &__content {
+//     display: flex;
+//     flex: 1 1;
+//     flex-direction: column;
+//     padding-bottom: 40px;
+//     overflow: hidden;
+//     overflow-y: scroll;
+//     -webkit-overflow-scrolling: touch;
+//   }
+
+//   &__section {
+//     display: block;
+//     margin: 4px 0;
+//     border-top: 1px solid lighten($ui-base-color, 4%);
+
+//     &--borderless {
+//       margin: 0;
+//       border-top: none;
+//     }
+//   }
+
+//   @media (max-width: 400px) {
+//     width: 90vw;
+//   }
+// }
+
+// .sidebar-menu__root--visible {
+//   display: block;
+
+//   .sidebar-menu {
+//     transform: translateX(0);
+//   }
+
+//   .sidebar-menu__wrapper {
+//     background-color: rgba(0,0,0,0.3);
+//   }
+// }
+
+// .sidebar-menu-header {
+//   display: flex;
+//   height: 46px;
+//   padding: 12px 14px;
+//   border-bottom: 1px solid lighten($ui-base-color, 4%);
+//   box-sizing: border-box;
+//   align-items: center;
+
+//   &__title {
+//     display: block;
+//     font-size: 18px;
+//     font-weight: 600;
+//     color: $primary-text-color;
+//   }
+
+//   &__btn {
+//     margin-left: auto;
+//   }
+// }
+
+// .sidebar-menu-profile {
+//   display: block;
+//   padding: 14px 18px;
+
+//   &__avatar {
+//     display: block;
+//     width: 56px;
+//     height: 56px;
+//   }
+
+//   &__name {
+//     display: block;
+//     margin-top: 10px;
+
+//     .display-name__account {
+//       display: block;
+//       margin-top: 2px;
+//     }
+//   }
+
+//   &__stats {
+//     display: flex;
+//     margin-top: 12px;
+//   }
+// }
+
+// .sidebar-menu-profile-stat {
+//   display: flex;
+//   font-size: 14px;
+//   text-decoration: none;
+
+//   &:not(:first-of-type) {
+//     margin-left: 18px;
+//   }
+
+//   &__value {
+//     display: flex;
+//     margin-right: 3px;
+//     font-weight: 700;
+//     color: $primary-text-color;
+//   }
+
+//   &__label {
+//     display: flex;
+//     color: $primary-text-color;
+//   }
+
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+
+// .sidebar-menu-item {
+//   display: flex;
+//   padding: 16px 18px;
+//   cursor: pointer;
+//   text-decoration: none;
+//   color: $primary-text-color;
+//   font-size: 15px;
+//   font-weight: 400;
+//   height: 50px;
+//   box-sizing: border-box;
+
+//   &:hover {
+//     background-color: rgba($gab-brand-default, 0.1);
+
+//     .fa {
+//       color: $primary-text-color;
+//     }
+//   }
+
+//   .fa {
+//     margin-right: 10px;
+//   }
+
+//   &:hover {
+//     &__title {
+//       color: $primary-text-color;
+//     }
+//   }
+// }

app/javascript/gabsocial/components/header/index.js

@@ -0,0 +1 @@
+export { default } from './header';

app/javascript/gabsocial/components/icon_button/icon_button.js

@@ -44,10 +44,10 @@ export default class IconButton extends PureComponent {
 
   render () {
     const style = {
-      fontSize: `${this.props.size}px`,
+      // fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
+      // width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size * 1.28571429}px`,
+      // height: `${this.props.size * 1.28571429}px`,
-      lineHeight: `${this.props.size}px`,
+      // lineHeight: `${this.props.size}px`,
       ...this.props.style,
     };
 

app/javascript/gabsocial/components/media_gallery/media_gallery.scss

@@ -4,7 +4,6 @@
   border: none;
   box-sizing: border-box;
   position: relative;
-  border-radius: 4px;
   overflow: hidden;
 
   &.standalone {
@@ -49,7 +48,6 @@
   box-sizing: border-box;
   margin-top: 8px;
   overflow: hidden;
-  border-radius: 4px;
   position: relative;
   width: 100%;
 

app/javascript/gabsocial/components/page_layout/index.js

@@ -0,0 +1 @@
+export { default } from './page_layout';

app/javascript/gabsocial/components/page_layout/page_layout.js

@@ -0,0 +1,36 @@
+import Header from '../header'
+
+console.log("in the page_layout - styles:", styles);
+
+export default class PageLayout extends PureComponent {
+  static propTypes = {
+    layout: PropTypes.object,
+  };
+
+  render() {
+    const { children, layout } = this.props;
+
+    const right = layout.RIGHT || null;
+
+    return (
+      <div className='page'>
+        {/*<Header />*/}
+        <main className='main' role='main'>
+          <div className='main__container'>
+            <div className='main-contents'>
+              <div className='main-contents__inner'>
+                { /* children */ }
+              </div>
+            </div>
+            <div className='main-sidebar'>
+              <div className='main-sidebar__inner'>
+                { /* right */ }
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/page_layout/page_layout.scss

@@ -0,0 +1,54 @@
+.page {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  &__top {
+    display: flex;
+    z-index: 105;
+
+    @include size(100%, auto);
+
+    @media (min-width:895px) {
+      top: -290px;
+      position: sticky;
+    }
+  }
+
+  .main {
+    display: flex;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-shrink: 1;
+    flex-grow: 1;
+    align-items: flex-start;
+
+    &__container {
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      flex-grow: 1;
+      flex-direction: row;
+      width: 990px;
+    }
+  }
+}
+
+.main-contents {
+  display: flex;
+  max-width: 600px;
+  z-index: 1;
+
+  &__inner {
+    
+  }
+}
+
+.main-sidebar {
+  display: flex;
+  width: 350px;
+
+  &__inner {
+    
+  }
+}

app/javascript/gabsocial/components/relative_timestamp/relative_timestamp.js

@@ -1,4 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl';
+import moment from 'moment';
 
 const messages = defineMessages({
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },

app/javascript/gabsocial/components/sidebar_menu/index.js

@@ -1 +0,0 @@
-export { default } from './sidebar_menu';

app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.scss

@@ -1,174 +0,0 @@
-.sidebar-menu {
-  display: flex;
-  position: fixed;
-  flex-direction: column;
-  width: 275px;
-  height: 100vh;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  background: $gab-background-container;
-  transform: translateX(-275px);
-  transition: all 0.15s linear;
-  z-index: 10001;
-
-	body.theme-gabsocial-light & {
-		background: $gab-background-container-light;
-	}
-
-  &__root {
-    display: none;
-  }
-
-  &__wrapper {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10000;
-    background-color: transparent;
-    transition: background-color 0.2s linear;
-    transition-delay: 0.1s;
-  }
-
-  &__content {
-    display: flex;
-    flex: 1 1;
-    flex-direction: column;
-    padding-bottom: 40px;
-    overflow: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  &__section {
-    display: block;
-    margin: 4px 0;
-    border-top: 1px solid lighten($ui-base-color, 4%);
-
-    &--borderless {
-      margin: 0;
-      border-top: none;
-    }
-  }
-
-  @media (max-width: 400px) {
-    width: 90vw;
-  }
-}
-
-.sidebar-menu__root--visible {
-  display: block;
-
-  .sidebar-menu {
-    transform: translateX(0);
-  }
-
-  .sidebar-menu__wrapper {
-    background-color: rgba(0,0,0,0.3);
-  }
-}
-
-.sidebar-menu-header {
-  display: flex;
-  height: 46px;
-  padding: 12px 14px;
-  border-bottom: 1px solid lighten($ui-base-color, 4%);
-  box-sizing: border-box;
-  align-items: center;
-
-  &__title {
-    display: block;
-    font-size: 18px;
-    font-weight: 600;
-    color: $primary-text-color;
-  }
-
-  &__btn {
-    margin-left: auto;
-  }
-}
-
-.sidebar-menu-profile {
-  display: block;
-  padding: 14px 18px;
-
-  &__avatar {
-    display: block;
-    width: 56px;
-    height: 56px;
-  }
-
-  &__name {
-    display: block;
-    margin-top: 10px;
-
-    .display-name__account {
-      display: block;
-      margin-top: 2px;
-    }
-  }
-
-  &__stats {
-    display: flex;
-    margin-top: 12px;
-  }
-}
-
-.sidebar-menu-profile-stat {
-  display: flex;
-  font-size: 14px;
-  text-decoration: none;
-
-  &:not(:first-of-type) {
-    margin-left: 18px;
-  }
-
-  &__value {
-    display: flex;
-    margin-right: 3px;
-    font-weight: 700;
-    color: $primary-text-color;
-  }
-
-  &__label {
-    display: flex;
-    color: $primary-text-color;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sidebar-menu-item {
-  display: flex;
-  padding: 16px 18px;
-  cursor: pointer;
-  text-decoration: none;
-  color: $primary-text-color;
-  font-size: 15px;
-  font-weight: 400;
-  height: 50px;
-  box-sizing: border-box;
-
-  &:hover {
-    background-color: rgba($gab-brand-default, 0.1);
-
-    .fa {
-      color: $primary-text-color;
-    }
-  }
-
-  .fa {
-    margin-right: 10px;
-  }
-
-  &:hover {
-    &__title {
-      color: $primary-text-color;
-    }
-  }
-}

app/javascript/gabsocial/components/status/status.js

@@ -403,7 +403,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={48} />;
+      statusAvatar = <Avatar account={status.get('account')} size={42} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -448,21 +448,24 @@ class Status extends ImmutablePureComponent {
             })}
             data-id={status.get('id')}
           >
-            <div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
             <div className='status__info'>
-              <NavLink to={statusUrl} className='status__relative-time'>
+              <div className='status__info__actions'>
-                <RelativeTimestamp timestamp={status.get('created_at')} />
+                <NavLink className='status__display-name' to={`/${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
-              </NavLink>
+                  <div className='status__avatar'>{statusAvatar}</div>
-
+                  <DisplayName account={status.get('account')} />
-              <NavLink
+                </NavLink>
-                to={`/${status.getIn(['account', 'acct'])}`}
+                <Icon id='ellipsis-h' className='status__info__actions__icon'/>
-                title={status.getIn(['account', 'acct'])}
+              </div>
-                className='status__display-name'
+              <div className='status__info__attributes'>
-              >
+                <NavLink to={statusUrl} className='status__relative-time'>
-                <div className='status__avatar'>{statusAvatar}</div>
+                  <RelativeTimestamp timestamp={status.get('created_at')} />
-
+                </NavLink>
-                <DisplayName account={status.get('account')} />
+                <span className='status__info__dot-seperator'>•</span>
-              </NavLink>
+                { /* <Icon id='globe' className='status__info__attributes__item'/> */ }
+                <span className='status__info__attributes__item status__info__attributes__item--link'>Memes Group</span>
+                <span className='status__info__dot-seperator'>•</span>
+                <span className='status__info__attributes__item'>Edited</span>
+              </div>
             </div>
 
             {((!group && status.get('group')) || status.get('revised_at') !== null) && (

app/javascript/gabsocial/components/status/status.scss

@@ -1,9 +1,9 @@
 .status {
-  padding: 8px 10px 8px 68px;
   position: relative;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
+  margin-bottom: 10px;
+  border: 1px solid #171717;
 
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
@@ -88,7 +88,7 @@
 
 @media screen and (min-width:630px) {
   .status {
-    padding: 15px 15px 15px 78px;
+    padding: 12px 15px 15px 78px;
     min-height: 50px;
 
     &__avatar {
@@ -136,24 +136,57 @@
 
 .status__relative-time {
   color: $dark-text-color;
-  float: right;
+  font-size: 12px;
-  font-size: 14px;
 }
 
 .status__display-name {
   color: $dark-text-color;
 }
 
-.status__info .status__display-name {
+.status__info {
-  display: block;
+  display: flex;
-  max-width: 100%;
+  flex-direction: column;
-  padding-right: 25px;
+  z-index: 4;
+  position: relative;
+  padding: 10px 10px 8px 62px;
+
+  &__dot-seperator {
+    font-size: 15px;
+    color: $dark-text-color;
+
+    @include horizontal-margin(5px);
+  }
+
+  &__attributes {
+    display: flex;
+    margin-top: 2px;
+    align-items: center;
+
+    &__item {
+      font-size: 12px;
+      color: $dark-text-color;
+
+      &--link {
+        cursor: pointer;
+        color: $primary-text-color;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+
+    &__icon {
+      margin-left: auto;
+      color: $dark-text-color;
+    }
+  }
 }
 
-.status__info {
-  font-size: 15px;
-  z-index: 4;
-}
 
 .status__prepend {
   margin-left: 68px;
@@ -181,18 +214,11 @@
 }
 
 .status__avatar {
-  @include size(48px);
+  overflow: hidden;
+  @include circle(42px);
   @include abs-position(10px, auto, auto, 10px);
 }
 
-.status__expand {
-  cursor: pointer;
-
-  @include size(68px, 100%);
-  @include abs-position(0, auto, auto, 0);
-}
-
-
 .media-spoiler-video {
   cursor: pointer;
   margin-top: 8px;

app/javascript/gabsocial/components/status_action_bar/status_action_bar.js

@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import { openModal } from '../../actions/modal';
 import { me, isStaff } from '../../initial_state';
 import DropdownMenuContainer from '../../containers/dropdown_menu_container';
+import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
 import IconButton from '../icon_button';
 
 import './status_action_bar.scss';
@@ -265,49 +266,67 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status-action-bar'>
-        <div className='status-action-bar-item'>
+        <div className='status-action-bar__items'>
-          <IconButton
+          <div className='status-action-bar-item'>
-            className='status-action-bar-item__btn'
+            <IconButton
-            title={replyTitle}
+              className='status-action-bar-item__btn star-icon'
-            icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
+              animate
-            onClick={this.handleReplyClick}
+              active={status.get('favourited')}
-          />
+              pressed={status.get('favourited')}
-          {
+              title={formatMessage(messages.favourite)}
-            replyCount !== 0 &&
+              icon='star'
-            <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='status-action-bar-item__link'>{replyCount}</Link>
+              onClick={this.handleFavouriteClick}
-          }
+              text='Like'
-        </div>
+            />
+            { /* favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span> */ }
+          </div>
 
-        <div className='status-action-bar-item'>
+          <div className='status-action-bar-item'>
-          <IconButton
+            <IconButton
-            className='status-action-bar-item__btn'
+              className='status-action-bar-item__btn'
-            disabled={!publicStatus}
+              title={replyTitle}
-            active={status.get('reblogged')}
+              icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
-            pressed={status.get('reblogged')}
+              onClick={this.handleReplyClick}
-            title={reblogTitle}
+              text='Comment'
-            icon={reblogIcon}
+            />
-            onClick={this.handleReblogClick}
+            { /*
-          />
+              replyCount !== 0 &&
-          {reblogCount !== 0 && <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='status-action-bar-item__link'>{reblogCount}</Link>}
+              <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='status-action-bar-item__link'>{replyCount}</Link>
-        </div>
+              */
+            }
+          </div>
 
-        <div className='status__action-bar__counter'>
+          <div className='status-action-bar-item'>
-          <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? formatMessage(messages.cannot_quote) : formatMessage(messages.quote)} icon='quote-left' onClick={this.handleQuoteClick} />
+            <IconButton
-        </div>
+              className='status-action-bar-item__btn'
-        <div className='status__action-bar__counter'>
+              disabled={!publicStatus}
-          <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+              active={status.get('reblogged')}
-          {favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
+              pressed={status.get('reblogged')}
-        </div>
+              title={reblogTitle}
+              icon={reblogIcon}
+              onClick={this.handleReblogClick}
+              text='Share'
+            />
+            { /* reblogCount !== 0 && <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='status-action-bar-item__link'>{reblogCount}</Link> */ }
+          </div>
 
-        <div className='status-action-bar__dropdown'>
+          {/*<div className='status__action-bar__counter'>
-          <DropdownMenuContainer
+            <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? formatMessage(messages.cannot_quote) : formatMessage(messages.quote)} icon='quote-left' onClick={this.handleQuoteClick} />
-            status={status}
+          </div>*/}
-            items={menu}
+
-            icon='ellipsis-h'
+          {/*<div className='status-action-bar__dropdown'>
-            size={18}
+            <DropdownMenuContainer
-            direction='right'
+              status={status}
-            title={formatMessage(messages.more)}
+              items={menu}
-          />
+              icon='ellipsis-h'
+              size={18}
+              direction='right'
+              title={formatMessage(messages.more)}
+            />
+          </div>*/}
+        </div>
+        <div className='status-action-bar__comment'>
+          {/*<ComposeFormContainer shouldCondense statusId={status.get('id')} />*/}
         </div>
       </div>
     );

app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss

@@ -1,21 +1,51 @@
 .status-action-bar {
-  display: flex;
+  display: block;
-  align-items: center;
+  margin-top: 10px;
-  margin-top: 25px;
   z-index: 4;
 
+  @include horizontal-padding(10px);
+
   &__dropdown {
     @include size(23px);
   }
+
+  &__items {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #161616;
+
+    @include size(100%, 42px);
+  }
+
+  &__comment {
+
+  }
 }
 
 .status-action-bar-item {
   display: inline-flex;
-  margin-right: 22px;
   align-items: center;
+  justify-content: center;
+  height: 42px;
+  width: 33%;
+  padding: 5px;
+  box-sizing: border-box;
 
   &__btn {
+    border-radius: 4px;
     margin-right: 4px;
+    font-size: 14px;
+    font-weight: 500;
+
+    @include size(100%);
+
+    &:hover {
+      background-color: #000;
+    }
+
+    i {
+      margin-right: 4px;
+    }
   }
 
   &__link {

app/javascript/gabsocial/components/status_content/status_content.js

@@ -167,7 +167,6 @@ export default class StatusContent extends ImmutablePureComponent {
     const readMoreButton = (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-        <Icon id='angle-right' fixedWidth />
       </button>
     );
 

app/javascript/gabsocial/components/status_content/status_content.scss

@@ -8,7 +8,8 @@
   color: $primary-text-color;
 
   @include text-overflow(normal, break-word);
-  @include text-sizing(15px, 400, 20px);
+  @include text-sizing(14px, 400, 20px);
+  @include horizontal-padding(10px);
 
   &:focus {
     outline: 0;
@@ -102,6 +103,7 @@
   border: 0;
   background: transparent;
   padding: 8px 0 0 0;
+  margin-left: 10px;
 
   @include text-sizing(15px, 400, 20px);
 

app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/group_icon.js

@@ -1,24 +0,0 @@
-const GroupIcon = ({
-  className = 'tabs-bar-icon',
-  width = '18px',
-  height = '18px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='tabs-bar-icon__path' d='M 29.011719 10.753906 C 31.234375 12.148438 32.792969 14.503906 33.078125 17.242188 C 33.984375 17.667969 34.992188 17.910156 36.058594 17.910156 C 39.953125 17.910156 43.109375 14.753906 43.109375 10.859375 C 43.109375 6.964844 39.953125 3.808594 36.058594 3.808594 C 32.199219 3.808594 29.070312 6.910156 29.011719 10.753906 Z M 24.394531 25.191406 C 28.289062 25.191406 31.445312 22.03125 31.445312 18.140625 C 31.445312 14.246094 28.289062 11.089844 24.394531 11.089844 C 20.5 11.089844 17.339844 14.246094 17.339844 18.140625 C 17.339844 22.035156 20.5 25.191406 24.394531 25.191406 Z M 27.382812 25.671875 L 21.402344 25.671875 C 16.421875 25.671875 12.375 29.722656 12.375 34.699219 L 12.375 42.015625 L 12.390625 42.132812 L 12.894531 42.289062 C 17.648438 43.773438 21.773438 44.269531 25.171875 44.269531 C 31.804688 44.269531 35.652344 42.375 35.890625 42.257812 L 36.359375 42.019531 L 36.410156 42.019531 L 36.410156 34.699219 C 36.414062 29.722656 32.363281 25.671875 27.382812 25.671875 Z M 39.050781 18.390625 L 33.113281 18.390625 C 33.050781 20.765625 32.035156 22.90625 30.429688 24.445312 C 34.855469 25.761719 38.09375 29.863281 38.09375 34.710938 L 38.09375 36.964844 C 43.957031 36.75 47.335938 35.089844 47.554688 34.976562 L 48.027344 34.738281 L 48.078125 34.738281 L 48.078125 27.417969 C 48.078125 22.441406 44.027344 18.390625 39.050781 18.390625 Z M 12.019531 17.910156 C 13.402344 17.910156 14.683594 17.507812 15.769531 16.824219 C 16.117188 14.570312 17.324219 12.597656 19.050781 11.257812 C 19.058594 11.125 19.070312 10.996094 19.070312 10.863281 C 19.070312 6.96875 15.914062 3.8125 12.019531 3.8125 C 8.125 3.8125 4.96875 6.96875 4.96875 10.863281 C 4.96875 14.753906 8.125 17.910156 12.019531 17.910156 Z M 18.351562 24.445312 C 16.757812 22.914062 15.746094 20.785156 15.671875 18.425781 C 15.453125 18.410156 15.234375 18.390625 15.011719 18.390625 L 9.027344 18.390625 C 4.050781 18.390625 0 22.441406 0 27.417969 L 0 34.738281 L 0.0195312 34.851562 L 0.523438 35.007812 C 4.332031 36.199219 7.734375 36.746094 10.691406 36.921875 L 10.691406 34.710938 C 10.691406 29.863281 13.925781 25.761719 18.351562 24.445312 Z M 18.351562 24.445312' />
-    </g>
-  </svg>
-)
-
-export default GroupIcon

app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/home_icon.js

@@ -1,24 +0,0 @@
-const HomeIcon = ({
-  className = 'tabs-bar-icon',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='tabs-bar-icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
-    </g>
-  </svg>
-)
-
-export default HomeIcon

app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/notifications_icon.js

@@ -1,26 +0,0 @@
-const NotificationsIcon = ({
-  className = 'tabs-bar-icon',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='tabs-bar-icon__path' d='M 17.363281 43.667969 C 18.488281 46.21875 21.039062 48 24 48 C 26.960938 48 29.511719 46.21875 30.636719 43.667969 Z M 17.363281 43.667969' />
-      <path className='tabs-bar-icon__path' d='M 24 4.585938 C 25.953125 4.585938 27.828125 4.929688 29.570312 5.5625 L 29.570312 5.347656 C 29.570312 2.398438 27.171875 0 24.222656 0 L 23.777344 0 C 20.828125 0 18.429688 2.398438 18.429688 5.347656 L 18.429688 5.558594 C 20.171875 4.929688 22.046875 4.585938 24 4.585938 Z M 24 4.585938' />
-      <path className='tabs-bar-icon__path' d='M 41.574219 40.851562 L 6.425781 40.851562 C 5.757812 40.851562 5.148438 40.402344 5.011719 39.753906 C 4.875 39.109375 5.167969 38.472656 5.761719 38.199219 C 5.90625 38.105469 6.96875 37.363281 8.035156 35.113281 C 9.988281 30.980469 10.398438 25.160156 10.398438 21.003906 C 10.398438 13.503906 16.5 7.402344 24 7.402344 C 31.480469 7.402344 37.570312 13.472656 37.597656 20.949219 C 37.597656 20.964844 37.601562 20.984375 37.601562 21.003906 C 37.601562 25.160156 38.011719 30.980469 39.964844 35.113281 C 41.03125 37.363281 42.09375 38.105469 42.238281 38.199219 C 42.832031 38.472656 43.125 39.109375 42.988281 39.753906 C 42.851562 40.402344 42.242188 40.851562 41.574219 40.851562 Z M 42.253906 38.207031 Z M 42.253906 38.207031' />
-    </g>
-  </svg>
-)
-
-export default NotificationsIcon

app/javascript/gabsocial/components/tabs_bar/index.js

@@ -1 +0,0 @@
-export { default } from './tabs_bar';

app/javascript/gabsocial/components/tabs_bar/tabs_bar.js

@@ -1,122 +0,0 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { NavLink, withRouter } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import { openModal } from '../../actions/modal';
-import { me } from '../../initial_state';
-import SearchContainer from '../../features/compose/containers/search_container';
-import ActionBar from '../../features/compose/components/action_bar';
-import Avatar from '../avatar';
-import NotificationsCounter from '../notification_counter';
-import GabLogo from './assets/gab_logo/gab_logo';
-import {
-  GroupIcon,
-  HomeIcon,
-  NotificationsIcon,
-  SearchIcon,
-} from './assets/tabs_bar_icon';
-
-import './tabs_bar.scss';
-
-const mapStateToProps = state => {
-  return {
-    account: state.getIn(['accounts', me]),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  onOpenCompose() {
-    dispatch(openModal('COMPOSE'));
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@withRouter
-class TabsBar extends ImmutablePureComponent {
-
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-    onOpenCompose: PropTypes.func.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-  };
-
-  render () {
-    const { account, onOpenCompose } = this.props;
-
-    if (!account) {
-      return (
-        <nav className='tabs-bar'>
-          <div className='tabs-bar__container'>
-            <div className='tabs-bar__split tabs-bar__split--left'>
-              <a className='tabs-bar-item--logo' href='/#' data-preview-title-id='column.home'>
-                <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
-                <GabLogo />
-              </a>
-              <a className='tabs-bar-item home' href='/home' data-preview-title-id='column.home'  >
-                <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
-              </a>
-              <NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
-                <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
-              </NavLink>
-            </div>
-            <div className='tabs-bar__split tabs-bar__split--right'>
-              <div className='tabs-bar__search-container'>
-                <SearchContainer openInRoute />
-              </div>
-              <div className='flex'>
-                <a className='tabs-bar__button button' href='/auth/sign_in'>
-                  <FormattedMessage id='account.login' defaultMessage='Log In' />
-                </a>
-                <a className='tabs-bar__button button button-alternative-2' href='/auth/sign_up'>
-                  <FormattedMessage id='account.register' defaultMessage='Sign up' />
-                </a>
-              </div>
-            </div>
-          </div>
-        </nav>
-      );
-    }
-
-    return (
-      <nav className='tabs-bar'>
-        <div className='tabs-bar__container'>
-          <div className='tabs-bar__split tabs-bar__split--left'>
-            <NavLink className='tabs-bar-item--logo' to='/home#' data-preview-title-id='column.home'>
-              <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
-              <GabLogo />
-            </NavLink>
-            <NavLink className='tabs-bar-item home' to='/home' data-preview-title-id='column.home'  >
-              <HomeIcon />
-              <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
-            </NavLink>
-            <NavLink className='tabs-bar-item notifications' to='/notifications' data-preview-title-id='column.notifications' >
-              <NotificationsIcon />
-              <NotificationsCounter />
-              <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
-            </NavLink>
-            <NavLink className='tabs-bar-item groups' to='/groups' data-preview-title-id='column.groups' >
-              <GroupIcon />
-              <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
-            </NavLink>
-            <NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
-              <SearchIcon />
-              <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
-            </NavLink>
-          </div>
-          <div className='tabs-bar__split tabs-bar__split--right'>
-            <div className='tabs-bar__search-container'>
-              <SearchContainer openInRoute />
-            </div>
-            <div className='flex'>
-              <div className='tabs-bar__profile'>
-                <Avatar account={account} />
-                <ActionBar account={account} size={34} />
-              </div>
-              <button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'>Gab</button>
-            </div>
-          </div>
-        </div>
-      </nav>
-    );
-  }
-}

app/javascript/gabsocial/components/tabs_bar/tabs_bar.scss

@@ -1,204 +0,0 @@
-.tabs-bar {
-  display: flex;
-  box-sizing: border-box;
-  background: #000;
-  flex: 0 0 auto;
-  overflow-y: auto;
-  height: 50px;
-  position: sticky;
-  top: 0;
-  z-index: 4;
-
-  &__container {
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 1200px;
-    padding: 0 15px;
-
-    @include margin-center;
-
-    // NOTE - might need to adjust this based on column sizing
-    @media screen and (max-width: $nav-breakpoint-4) {
-      padding: 0 20px;
-    }
-
-  }
-
-  &__split {
-    display: flex;
-    width: auto;
-
-    &--left {
-      margin-right: auto;
-    }
-
-    &--right {
-      margin-left: auto;
-      padding-top: 8px;
-
-      @media screen and (max-width: $nav-breakpoint-3) {
-        padding-top: 4px;
-      }
-    }
-  }
-
-  &__search-container {
-    display: block;
-    width: 251px;
-
-    @media screen and (max-width: $nav-breakpoint-2) {
-      display: none;
-    }
-
-    .search {
-      margin: 0;
-    }
-  }
-
-  &__profile {
-    position: relative;
-    overflow: hidden;
-    margin: 0 0 0 20px;
-
-    @include size(34px);
-
-    @media screen and (max-width: $nav-breakpoint-3) {
-      margin: 0;
-
-      @include size(42px);
-    }
-
-    .account__avatar {
-      background-size: 34px 34px;
-
-      @include size(34px);
-
-      @media screen and (max-width: $nav-breakpoint-3) {
-        background-size: 42px 42px;
-
-        @include size(42px);
-      }
-    }
-
-    .compose__action-bar {
-      display: block;
-
-      @include abs-position(0, 0, 0, -5px);
-
-      i {
-        display: none;
-      }
-    }
-  }
-
-  &__button-compose {
-    display: block;
-    margin-left: 20px;
-    border-radius: 17px;
-
-    @include size(70px, 34px);
-
-    @media screen and (max-width: $nav-breakpoint-3) {
-      display: none;
-    }
-
-    &:hover {
-      background-color: lighten($gab-brand-default, 5%);
-    }
-
-    span {
-      display: none;
-    }
-  }
-
-  &__button {
-    margin-left: 12px;
-    height: 34px;
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  @media screen and (max-width: 630px) and (max-height: 400px) {
-    will-change: margin-top;
-    transition: margin-top 400ms 100ms;
-  }
-}
-
-.tabs-bar-item {
-  display: flex;
-  position: relative;
-  flex: 1 1 auto;
-  margin: 0 25px 0 0;
-  color: white;
-  text-decoration: none;
-  padding-top: 14px;
-  box-sizing: border-box;
-
-  @media screen and (max-width: $nav-breakpoint-1) {
-    margin: 0;
-    padding-top: 12px !important;
-
-    @include size(46px, 50px);
-
-    &.active {
-      border-bottom: 2px solid $gab-brand-default;
-    }
-
-    &>span {
-      display: none;
-    }
-  }
-
-  &.optional {
-    display: none;
-
-    @media screen and (max-width: $nav-breakpoint-2) {
-      display: flex;
-    }
-  }
-
-  &.active {
-    color: $gab-text-highlight;
-
-    .tabs-bar-icon__path {
-      fill: $gab-text-highlight;
-    }
-  }
-
-  &--logo {
-    display: block;
-    margin-right: 35px;
-    padding-top: 10px;
-    border: none;
-    box-sizing: border-box;
-
-    @include size(50px);
-
-    @media (min-width: $nav-breakpoint-4) and (max-width: $nav-breakpoint-1) {
-      margin-right: 15px;
-    }
-
-    @media screen and (max-width: $nav-breakpoint-4) {
-      display: none;
-    }
-
-    & span {
-      display: none !important;
-    }
-  }
-
-  .tabs-bar-icon {
-    margin-right: 6px;
-
-    &__path {
-      fill: $white;
-    }
-
-    @media screen and (max-width: $nav-breakpoint-1) {
-      margin: 0 auto;
-    }
-  }
-}

app/javascript/gabsocial/components/verified_icon/verified_icon.scss

@@ -1,6 +1,7 @@
 .verified-icon {
   display: inline-block;
-  margin: 0 4px 0 1px;
+  margin-top: 1px;
+  margin-left: 4px;
   vertical-align: top;
   position: relative;
 

app/javascript/gabsocial/features/compose/components/upload_form/index.js

@@ -0,0 +1 @@
+export { default } from './upload_form';

app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js

@@ -203,9 +203,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
           {media}
 
-          {status.get('quote') && <StatusQuote
+          { /* status.get('quote') && <StatusQuote
             id={status.get('quote')}
-          />}
+          /> */ }
 
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>

app/javascript/gabsocial/features/ui/ui.js

@@ -20,12 +20,10 @@ import NotificationsContainer from '../../containers/notifications_container';
 import LoadingBarContainer from '../../containers/loading_bar_container';
 import ModalContainer from '../../containers/modal_container';
 import UploadArea from '../../components/upload_area';
-import TabsBar from '../../components/tabs_bar';
 import FooterBar from '../../components/footer_bar';
 // import TrendsPanel from './components/trends_panel';
 import { WhoToFollowPanel } from '../../components/panel';
 import LinkFooter from '../../components/link_footer';
-import SidebarMenu from '../../components/sidebar_menu';
 import ProfilePage from '../../pages/profile_page';
 // import GroupsPage from 'gabsocial/pages/groups_page';
 import GroupPage from '../../pages/group_page';
@@ -534,19 +532,19 @@ class UI extends PureComponent {
     return (
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
         <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
-          <TabsBar />
           <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
             {children}
           </SwitchingColumnsArea>
-          <FooterBar />
+          { /* <FooterBar /> */ }
 
-          {me && floatingActionButton}
+          { /* me && floatingActionButton */ }
 
+          { /*
           <NotificationsContainer />
           <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
-          {me && <SidebarMenu />}
+          */ }
         </div>
       </HotKeys>
     );

app/javascript/gabsocial/features/ui/util/wrapped_route.js

@@ -1,5 +1,5 @@
 import { Route } from 'react-router-dom';
-import ColumnsArea from '../../../components/columns_area';
+import PageLayout from '../../../components/page_layout';
 import BundleColumnError from '../../../components/bundle_column_error';
 import Bundle from './bundle';
 import { me } from '../../../initial_state';
@@ -42,11 +42,11 @@ export default class WrappedRoute extends Component {
       <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
         {Component =>
           (
-            <ColumnsArea layout={layout}>
+            <PageLayout layout={layout}>
               <Component params={match.params} {...componentParams}>
                 {content}
               </Component>
-            </ColumnsArea>
+            </PageLayout>
           )
         }
       </Bundle>

app/javascript/gabsocial/pages/group_page.js

@@ -5,7 +5,7 @@ import { fetchGroup } from '../actions/groups';
 import HeaderContainer from '../features/groups/timeline/containers/header_container';
 import GroupPanel from '../features/groups/timeline/components/panel';
 import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import ColumnsArea from '../components/columns_area';
+import PageLayout from '../components/page_layout';
 import { WhoToFollowPanel } from '../components/panel';
 import LinkFooter from '../components/link_footer';
 import PromoPanel from '../components/promo_panel';
@@ -35,7 +35,7 @@ class GroupPage extends ImmutablePureComponent {
 		const top = group ? <HeaderContainer groupId={group.get('id')} /> : null;
 
 		return (
-			<ColumnsArea
+			<PageLayout
 				layout={{
 					TOP: top,
 					RIGHT: (
@@ -58,7 +58,7 @@ class GroupPage extends ImmutablePureComponent {
 				}}
 			>
 				{children}
-			</ColumnsArea>
+			</PageLayout>
 		)
 	}
 }

app/javascript/gabsocial/pages/home_page.js

@@ -3,7 +3,7 @@ import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import LinkFooter from '../components/link_footer';
 import PromoPanel from '../components/promo_panel';
 import UserPanel from '../components/user_panel';
-import ColumnsArea from '../components/columns_area';
+import PageLayout from '../components/page_layout';
 import TimelineComposeBlock from '../components/timeline_compose_block';
 
 export default class HomePage extends PureComponent {
@@ -11,26 +11,20 @@ export default class HomePage extends PureComponent {
     const {children} = this.props;
 
     return (
-      <ColumnsArea
+      <PageLayout
         layout={{
-          TOP: null,
           RIGHT: (
             <Fragment>
               <GroupSidebarPanel />
-            </Fragment>
-          ),
-          LEFT: (
-            <Fragment>
-              <UserPanel />
               <PromoPanel />
               <LinkFooter />
             </Fragment>
-          )
+          ),
         }}
       >
         <TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />
         {children}
-      </ColumnsArea>
+      </PageLayout>
     )
   }
 }

app/javascript/gabsocial/pages/profile_page.js

@@ -5,7 +5,7 @@ import HeaderContainer from '../features/account_timeline/containers/header_cont
 import ProfileInfoPanel from '../features/account_timeline/components/profile_info_panel/profile_info_panel';
 import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
 import LinkFooter from '../components/link_footer';
-import ColumnsArea from '../components/columns_area';
+import PageLayout from '../components/page_layout';
 
 const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
   const accounts = state.getIn(['accounts']);
@@ -48,7 +48,7 @@ class ProfilePage extends ImmutablePureComponent {
     const { accountId, account, accountUsername } = this.props;
 
     return (
-      <ColumnsArea
+      <PageLayout
         layout={{
           TOP: <HeaderContainer accountId={accountId} username={accountUsername} />,
           RIGHT: (
@@ -62,7 +62,7 @@ class ProfilePage extends ImmutablePureComponent {
         }}
       >
         {this.props.children}
-      </ColumnsArea>
+      </PageLayout>
     )
   }
 }

app/javascript/gabsocial/pages/search_page.js

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import Header from '../features/search/components/header';
 import LinkFooter from '../components/link_footer';
 import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
-import ColumnsArea from '../components/columns_area';
+import PageLayout from '../components/page_layout';
 
 export default class SearchPage extends PureComponent {
 
@@ -12,7 +12,7 @@ export default class SearchPage extends PureComponent {
 
   render() {
     return (
-      <ColumnsArea
+      <PageLayout
         layout={{
           TOP: <Header/>,
           RIGHT: (
@@ -25,7 +25,7 @@ export default class SearchPage extends PureComponent {
         }}
       >
         {this.props.children}
-      </ColumnsArea>
+      </PageLayout>
     )
   }
 

app/javascript/styles/gabsocial/reset.scss

@@ -22,6 +22,7 @@ time, mark, audio, video {
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
+  box-sizing: border-box;
 }
 
 /* HTML5 display-role reset for older browsers */

app/javascript/styles/global.css

@@ -0,0 +1,184 @@
+html,body{
+  height: 100%;
+}
+
+body{
+  -ms-overflow-style:scrollbar;
+  overflow-y:scroll;
+  overscroll-behavior-y:none;
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  margin: 0;
+}
+
+.default {
+  align-items: stretch;
+  border: 0 solid black;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  min-height: 0px;
+  min-width: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  position: relative;
+  z-index: 0;
+}
+
+.text {
+  font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+}
+
+.color-black {
+  color: rgba(0, 0, 0, 1.00);
+}
+
+.inline {
+  display: inline;
+}
+
+.wrap {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.inherit {
+  color: inherit;
+  font: inherit;
+  white-space: inherit;
+}
+
+.r-13awgt0 {
+  -ms-flex-negative: 1;
+  -ms-flex-positive: 1;
+  -ms-flex-preferred-size: 0%;
+  -webkit-box-flex: 1;
+  -webkit-flex-basis: 0%;
+  -webkit-flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  flex-basis: 0%;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.r-4qtqp9 {
+  display: inline-block;
+}
+
+.r-ywje51 {
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+}
+
+.r-hvic4v {
+  display: none;
+}
+
+.r-1adg3ll {
+  display: block;
+}
+
+
+.r-12vffkv>* {
+  pointer-events: auto;
+}
+
+.r-12vffkv {
+  pointer-events: none !important;
+}
+
+.r-14lw9ot {
+  background-color: rgba(255, 255, 255, 1.00);
+}
+
+.r-1p0dtai {
+  bottom: 0px;
+}
+
+.r-1d2f490 {
+  left: 0px;
+}
+
+.r-1xcajam {
+  position: fixed;
+}
+
+.r-zchlnj {
+  right: 0px;
+}
+
+.r-ipm5af {
+  top: 0px;
+}
+
+.r-yyyyoo {
+  fill: currentcolor;
+}
+
+.r-1xvli5t {
+  height: 1.25em;
+}
+
+.r-dnmrzs {
+  max-width: 100%;
+}
+
+.r-bnwqim {
+  position: relative;
+}
+
+.r-1plcrui {
+  vertical-align: text-bottom;
+}
+
+.r-lrvibr {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.color-brand {
+  color: rgba(29, 161, 242, 1.00);
+}
+
+.height-72-px {
+  height: 72px;
+}
+
+.position-relative {
+  position: absolute;
+}
+
+.width-72-px {
+  width: 72px;
+}
+
+.top-60-pc {
+  top: 60%;
+}
+
+.line-height-2 {
+  line-height: 2em;
+}
+
+.text-align-center {
+  text-align: center;
+}

app/views/layouts/application.html.haml

@@ -40,7 +40,4 @@
     = yield :header_tags
 
   %body{ class: body_classes }
-    = content_for?(:content) ? yield(:content) : yield
+    = content_for?(:content) ? yield(:content) : yield
-
-    %div{ style: 'display: none'}
-      = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg')

config/webpack/rules/css.js

@@ -18,7 +18,7 @@ module.exports = {
       options: {
         sourceMap: true,
         importLoaders: 2,
-        // modules: true,
+        modules: true,
         // localIdentName: '[name]',
       },
     },

config/webpack/shared.js

@@ -9,7 +9,7 @@ const extname = require('path-complete-extname');
 const { env, settings, themes, output } = require('./configuration');
 const rules = require('./rules');
 const localePackPaths = [
-  '/Users/m3/Documents/dev/gab-social-2/tmp/packs/locale_en.js',
+  '/Users/m3/Documents/dev/gab-social/tmp/packs/locale_en.js',
 ];
 //require('./generateLocalePacks');
 
@@ -77,6 +77,7 @@ module.exports = {
       PureComponent: ['react', 'PureComponent'],
       connect: ['react-redux', 'connect'],
       PropTypes: 'prop-types',
+      styles: '/Users/m3/Documents/dev/gab-social/app/javascript/styles/global.css',
     }),
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new webpack.NormalModuleReplacementPlugin(