Progress

app/javascript/gabsocial/components/panel/panel.scss

@@ -1,130 +0,0 @@
-.panel {
-  display: flex;
-  border-radius: 10px;
-  flex-direction: column;
-  box-sizing: border-box;
-  background: $gab-background-container;
-
-  @include size(100%, auto);
-
-  body.theme-gabsocial-light & {
-    // @include light-theme-shadow();
-    background: $gab-background-container-light;
-  }
-
-  &:not(:last-of-type) {
-    margin-bottom: 10px;
-  }
-
-  &__content {
-    width: 100%;
-    padding-top: 8px;
-  }
-
-  &__list {
-    padding: 0 5px;
-  }
-
-  &__subtitle {
-    display: block;
-    padding: 0 15px;
-    color: $secondary-text-color;
-  }
-
-  &__form {
-    display: block;
-    padding: 15px;
-
-    &.button {
-      width: 100%;
-    }
-  }
-
-  .wtf-panel-list-item {
-    display: block;
-    padding-bottom: 10px;
-
-    &:not(:first-of-type) {
-      margin-top: 12px;
-    }
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: row;
-      min-height: 46px;
-      margin-left: 58px;
-    }
-
-    &__account-block {
-      display: flex;
-      position: relative;
-      align-items: baseline;
-      padding-right: 10px;
-
-      &__avatar {
-        background-color: red;
-        left: -58px;
-        position: absolute;
-
-        @include size(46px);
-      }
-
-      &__name {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        margin-top: 6px;
-
-        &__name {
-          color: $primary-text-color;
-          margin-bottom: 2px;
-          max-height: 32px; //2 lines of text
-          overflow: hidden;
-
-          @include text-sizing(14px, 700, 16px);
-        }
-
-        &__username {
-          color: $lighter-text-color;
-
-          @include text-sizing(12px, 400, 14px);
-        }
-      }
-    }
-
-    &__follow-block {
-      margin-left: auto;
-      padding-top: 6px;
-
-      &__button {
-        display: flex;
-      }
-
-      &__icon {
-        color: $primary-text-color;
-      }
-    }
-  }
-}
-
-.panel-header {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 10px;
-  padding: 15px 15px 0 15px;
-
-  &__icon {
-    margin-right: 10px;
-  }
-
-  &__title {
-    flex: 1 1;
-    color: $primary-text-color;
-
-    @include text-sizing(16px, 700, 19px);
-  }
-}

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -1,26 +1,34 @@
-import './panel.scss';
+import classNames from 'classnames/bind'
+import Icon from '../icon'
 
 export default class PanelLayout extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
+    subtitle: PropTypes.string,
     icon: PropTypes.string,
     children: PropTypes.node,
-  };
+    hasBackground: PropTypes.boolean,
+  }
 
   render() {
-    const {title, icon, children} = this.props;
+    const { title, subtitle, icon, hasBackground, children } = this.props
 
     return (
-      <div className='panel'>
-        <div className='panel-header'>
-          {icon && <Icon id={icon} className='panel-header__icon' />}
-          <span className='panel-header__title'>{title}</span>
-        </div>
-        <div className='panel__content'>
+      <aside className={[styles.default, styles.backgroundSubtle, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX].join(' ')}>
+        {
+          (title || subtitle) &&
+          <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderBottom1PX].join(' ')}>
+            <div className={[styles.default, styles.flexRow, styles.alignItemsCenter].join(' ')}>
+              {icon && <Icon id={icon} height='16px' width='16px' className={[styles.default, styles.marginRight10PX].join(' ')} />}
+              <span className={[styles.default, styles.text, styles.fontWeightExtraBold, styles.colorBlack, styles.fontSize19PX].join(' ')}>{title}</span>
+            </div>
+            {subtitle && <span className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.marginTop5PX].join(' ')}>{subtitle}</span>}
+          </div>
+        }
+        <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
           {children}
         </div>
-      </div>
-    );
-  };
-
-};
+      </aside>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/progress_panel.js

@@ -0,0 +1,20 @@
+import { me, monthlyExpensesComplete } from '../../initial_state'
+import PanelLayout from './panel_layout';
+import ProgressBar from '../progress_bar'
+
+export default class ProgressPanel extends PureComponent {
+  render() {
+    if (!monthlyExpensesComplete || !me) return null
+
+    return (
+      <PanelLayout
+        title="Gab's Operational Expenses"
+        subtitle="We are 100% funded by you"
+        icon="comments"
+        hasBackground
+      >
+        <ProgressBar progress={monthlyExpensesComplete}/>
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/promo_panel.js

@@ -0,0 +1,85 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import classNames from 'classnames/bind'
+import { me } from '../../initial_state';
+import Icon from '../icon'
+import PanelLayout from './panel_layout'
+
+const messages = defineMessages({
+  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
+  store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
+  apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isPro: state.getIn(['accounts', me, 'is_pro']),
+  };
+};
+
+export default
+@injectIntl
+@connect(mapStateToProps)
+class PromoPanel extends PureComponent {
+
+  static propTypes = {
+    isPro: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { isPro, intl } = this.props
+
+    const cx = classNames.bind(styles)
+
+    const items = [
+      {
+        text: intl.formatMessage(messages.pro),
+        href: 'https://pro.gab.com',
+        icon: 'arrow-up',
+        conditions: isPro,
+        highlighted: true,
+      },
+      {
+        text: intl.formatMessage(messages.donation),
+        href: 'https://shop.dissenter.com/category/donations',
+        icon: 'heart',
+      },
+      {
+        text: intl.formatMessage(messages.store),
+        href: 'https://shop.dissenter.com',
+        icon: 'shopping-cart',
+      },
+      {
+        text: intl.formatMessage(messages.apps),
+        href: 'https://apps.gab.com',
+        icon: 'th',
+      }
+    ]
+
+    return (
+      <PanelLayout>
+        {
+          items.map((item, i) => {
+            if (item.conditions === false) return null
+
+            const classes = cx({
+              default: true,
+              borderColorSubtle: i !== items.length - 1,
+              borderBottom1PX: i !== items.length - 1,
+            })
+
+            return (
+              <div key={`promo-panel-item-${i}`} className={classes}>
+                <a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
+                  <Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
+                  {item.text}
+                </a>
+              </div>
+            )
+          })
+        }
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/sign_up_panel.js

@@ -1,12 +1,13 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import { me } from '../../initial_state';
-import PanelLayout from './panel_layout';
+import { injectIntl, defineMessages } from 'react-intl'
+import { me } from '../../initial_state'
+import Button from '../button'
+import PanelLayout from './panel_layout'
 
 const messages = defineMessages({
   title: { id: 'signup_panel.title', defaultMessage: 'New to Gab?' },
   subtitle: { id: 'signup_panel.subtitle', defaultMessage: 'Sign up now to speak freely.' },
-  register: { id: 'account.register', defaultMessage: 'Sign up?' },
-});
+  register: { id: 'account.register', defaultMessage: 'Sign up' },
+})
 
 export default @injectIntl
 class SignUpPanel extends PureComponent {
@@ -15,16 +16,17 @@ class SignUpPanel extends PureComponent {
   }
 
   render() {
-    if (me) return null;
+    // : TESTING :
+    if (!me) return null
 
-    const { intl } = this.props;
+    const { intl } = this.props
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
-        <span className='panel__subtitle'>{intl.formatMessage(messages.subtitle)}</span>
-        <div className='panel__form'>
-          <a className='button' href="/auth/sign_up">{intl.formateMessage(messages.register)}</a>
-        </div>
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        subtitle={intl.formatMessage(messages.subtitle)}
+      >
+        <Button href="/auth/sign_up">{intl.formatMessage(messages.register)}</Button>
       </PanelLayout>
     )
   }