icons for dropdown

app/javascript/mastodon/components/dropdown_menu.js

@@ -128,11 +128,13 @@ class DropdownMenu extends React.PureComponent {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href = '#', target = '_blank', method } = option;
+    const { text, href = '#', target = '_blank', method, iconName } = option;
 
     return (
       <li className='dropdown-menu__item' key={`${text}-${i}`}>
         <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
+
+          <i className={'fa fa-'+iconName} />
           {text}
         </a>
       </li>

app/javascript/mastodon/components/icon_button.js

@@ -120,7 +120,7 @@ export default class IconButton extends React.PureComponent {
     });
 
     if (typeof counter !== 'undefined') {
-      style.width = 'auto';
+      style.width = '100%';
     }
 
     return (

app/javascript/mastodon/components/status_action_bar.js

@@ -6,7 +6,7 @@ import IconButton from './icon_button';
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me, isStaff } from '../initial_state';
+import { isStaff, me } from '../initial_state';
 import classNames from 'classnames';
 
 const messages = defineMessages({
@@ -86,7 +86,7 @@ class StatusActionBar extends ImmutablePureComponent {
     'status',
     'relationship',
     'withDismiss',
-  ]
+  ];
 
   handleReplyClick = () => {
     if (me) {
@@ -94,7 +94,7 @@ class StatusActionBar extends ImmutablePureComponent {
     } else {
       this._openInteractionDialog('reply');
     }
-  }
+  };
 
   handleShareClick = () => {
     navigator.share({
@@ -103,7 +103,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }).catch((e) => {
       if (e.name !== 'AbortError') console.error(e);
     });
-  }
+  };
 
   handleFavouriteClick = () => {
     if (me) {
@@ -111,7 +111,7 @@ class StatusActionBar extends ImmutablePureComponent {
     } else {
       this._openInteractionDialog('favourite');
     }
-  }
+  };
 
   handleReblogClick = e => {
     if (me) {
@@ -119,35 +119,35 @@ class StatusActionBar extends ImmutablePureComponent {
     } else {
       this._openInteractionDialog('reblog');
     }
-  }
+  };
 
   _openInteractionDialog = type => {
     window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
-  }
+  };
 
   handleBookmarkClick = () => {
     this.props.onBookmark(this.props.status);
-  }
+  };
 
   handleDeleteClick = () => {
     this.props.onDelete(this.props.status, this.context.router.history);
-  }
+  };
 
   handleRedraftClick = () => {
     this.props.onDelete(this.props.status, this.context.router.history, true);
-  }
+  };
 
   handlePinClick = () => {
     this.props.onPin(this.props.status);
-  }
+  };
 
   handleMentionClick = () => {
     this.props.onMention(this.props.status.get('account'), this.context.router.history);
-  }
+  };
 
   handleDirectClick = () => {
     this.props.onDirect(this.props.status.get('account'), this.context.router.history);
-  }
+  };
 
   handleMuteClick = () => {
     const { status, relationship, onMute, onUnmute } = this.props;
@@ -158,7 +158,7 @@ class StatusActionBar extends ImmutablePureComponent {
     } else {
       onMute(account);
     }
-  }
+  };
 
   handleBlockClick = () => {
     const { status, relationship, onBlock, onUnblock } = this.props;
@@ -169,37 +169,37 @@ class StatusActionBar extends ImmutablePureComponent {
     } else {
       onBlock(status);
     }
-  }
+  };
 
   handleBlockDomain = () => {
     const { status, onBlockDomain } = this.props;
     const account = status.get('account');
 
     onBlockDomain(account.get('acct').split('@')[1]);
-  }
+  };
 
   handleUnblockDomain = () => {
     const { status, onUnblockDomain } = this.props;
     const account = status.get('account');
 
     onUnblockDomain(account.get('acct').split('@')[1]);
-  }
+  };
 
   handleOpen = () => {
     this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
-  }
+  };
 
   handleEmbed = () => {
     this.props.onEmbed(this.props.status);
-  }
+  };
 
   handleReport = () => {
     this.props.onReport(this.props.status);
-  }
+  };
 
   handleConversationMuteClick = () => {
     this.props.onMuteConversation(this.props.status);
-  }
+  };
 
   handleCopy = () => {
     const url = this.props.status.get('url');
@@ -218,7 +218,7 @@ class StatusActionBar extends ImmutablePureComponent {
     } finally {
       document.body.removeChild(textarea);
     }
-  }
+  };
 
   render() {
     const { status, relationship, intl, withDismiss, scrollKey } = this.props;
@@ -230,46 +230,85 @@ class StatusActionBar extends ImmutablePureComponent {
 
     let menu = [];
 
-    menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
+    menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen , iconName: 'arrow-right' });
 
     if (publicStatus) {
-      menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
+      menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy, iconName: 'copy' });
-      menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
+      menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed, iconName: 'screen' });
     }
 
-    menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark), action: this.handleBookmarkClick });
+    menu.push({
+      text  : intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark),
+      action: this.handleBookmarkClick,
+      iconName: 'bookmark',
+    });
     menu.push(null);
 
     if (status.getIn(['account', 'id']) === me || withDismiss) {
-      menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
+      menu.push({
+        text  : intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
+        action: this.handleConversationMuteClick, iconName: 'hide',
+      });
       menu.push(null);
     }
 
     if (status.getIn(['account', 'id']) === me) {
       if (publicStatus) {
-        menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
+        menu.push({
+          text  : intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
+          action: this.handlePinClick,
+          iconName: 'gears',
+        });
       }
 
       menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
       menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
     } else {
-      menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.handleMentionClick });
+      menu.push({
-      menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.handleDirectClick });
+        text  : intl.formatMessage(messages.mention, { name: account.get('username') }),
+        action: this.handleMentionClick,
+        iconName: 'plane',
+      });
+      menu.push({
+        text  : intl.formatMessage(messages.direct, { name: account.get('username') }),
+        action: this.handleDirectClick,
+        iconName: 'enveloppe-o',
+      });
       menu.push(null);
 
       if (relationship && relationship.get('muting')) {
-        menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.handleMuteClick });
+        menu.push({
+          text  : intl.formatMessage(messages.unmute, { name: account.get('username') }),
+          action: this.handleMuteClick,
+          iconName: 'times',
+        });
       } else {
-        menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.handleMuteClick });
+        menu.push({
+          text  : intl.formatMessage(messages.mute, { name: account.get('username') }),
+          action: this.handleMuteClick,
+          iconName: 'times',
+        });
       }
 
       if (relationship && relationship.get('blocking')) {
-        menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.handleBlockClick });
+        menu.push({
+          text  : intl.formatMessage(messages.unblock, { name: account.get('username') }),
+          action: this.handleBlockClick,
+          iconName: 'plus',
+        });
       } else {
-        menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.handleBlockClick });
+        menu.push({
+          text  : intl.formatMessage(messages.block, { name: account.get('username') }),
+          action: this.handleBlockClick,
+          iconName: 'times',
+        });
       }
 
-      menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.handleReport });
+      menu.push({
+        text  : intl.formatMessage(messages.report, { name: account.get('username') }),
+        action: this.handleReport,
+        iconName: 'flag',
+      });
 
       if (account.get('acct') !== account.get('username')) {
         const domain = account.get('acct').split('@')[1];
@@ -285,8 +324,18 @@ class StatusActionBar extends ImmutablePureComponent {
 
       if (isStaff) {
         menu.push(null);
-        menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
+        menu.push({
-        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
+          text: intl.formatMessage(messages.admin_account,
+            { name: account.get('username') }),
+          href: `/admin/accounts/${status.getIn(['account', 'id'])}`,
+          iconName: 'gears',
+
+        });
+        menu.push({
+          text: intl.formatMessage(messages.admin_status),
+          href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}`,
+          iconName: 'menu',
+        });
       }
     }
 
@@ -314,14 +363,42 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     const shareButton = ('share' in navigator) && publicStatus && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+      <IconButton
+        className='status__action-bar-button'
+        title={intl.formatMessage(messages.share)}
+        icon='share-alt'
+        onClick={this.handleShareClick}
+      />
     );
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
+        <IconButton
-        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} />
+          className='status__action-bar-button'
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+          title={replyTitle}
+          icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
+          onClick={this.handleReplyClick}
+          counter={status.get('replies_count')}
+          obfuscateCount
+        />
+        <IconButton
+          className={classNames('status__action-bar-button', { reblogPrivate })}
+          disabled={!publicStatus && !reblogPrivate}
+          active={status.get('reblogged')}
+          pressed={status.get('reblogged')}
+          title={reblogTitle}
+          icon='retweet'
+          onClick={this.handleReblogClick}
+        />
+        <IconButton
+          className='status__action-bar-button star-icon'
+          animate
+          active={status.get('favourited')}
+          pressed={status.get('favourited')}
+          title={intl.formatMessage(messages.favourite)}
+          icon='star'
+          onClick={this.handleFavouriteClick}
+        />
 
         {shareButton}
 

app/javascript/mastodon/components/status_content.js

@@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
 import Permalink from './permalink';
 import classnames from 'classnames';
 import PollContainer from 'mastodon/containers/poll_container';
-import Icon from 'mastodon/components/icon';
 import { autoPlayGif } from 'mastodon/initial_state';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
@@ -202,10 +201,13 @@ export default class StatusContent extends React.PureComponent {
         className='status__content__read-more-button'
         onClick={this.props.onClick}
       >
+        <i className='fa fa-arrow-right' />
+        <span className='see-more'>
           <FormattedMessage
             id='status.show_thread'
             defaultMessage='Show thread'
-        /> <i className='fa fa-comment' />
+          />
+        </span >
       </button >
     );
 
@@ -215,10 +217,14 @@ export default class StatusContent extends React.PureComponent {
         onClick={this.props.onClick}
         key='read-more'
       >
+        <i className='fa fa-comment' />
+        <span className='see-more'>
+
           <FormattedMessage
             id='status.read_more'
             defaultMessage='Read more'
-        /> <i className='fa fa-comment' />
+          />
+        </span >
       </button >
     );
 
@@ -226,19 +232,37 @@ export default class StatusContent extends React.PureComponent {
       let mentionsPlaceholder = '';
 
       const mentionLinks = status.get('mentions').map(item => (
-        <Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id')} className='mention'>
+        <Permalink
+          to={`/accounts/${item.get('id')}`}
+          href={item.get('url')}
+          key={item.get('id')}
+          className='mention'
+        >
           @<span >{item.get('username')}</span >
         </Permalink >
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
+      const toggleText = hidden ? (<FormattedMessage
+        id='status.show_more'
+        defaultMessage='Show more'
+      />) : (<FormattedMessage
+        id='status.show_less'
+        defaultMessage='Show less'
+      />);
 
       if (hidden) {
         mentionsPlaceholder = <div >{mentionLinks}</div >;
       }
 
       return (
-        <div className={classNames} ref={this.setRef} tabIndex='0' style={directionStyle} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <div
+          className={classNames}
+          ref={this.setRef}
+          tabIndex='0'
+          style={directionStyle}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+        >
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -21,6 +21,10 @@ import { length } from 'stringz';
 import { countableText } from '../util/counter';
 import Icon from 'mastodon/components/icon';
 
+// import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
+// import { mascot } from '../../initial_state';
+
+
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
 const messages = defineMessages({

app/javascript/mastodon/features/compose/index.js

@@ -4,16 +4,15 @@ import NavigationContainer from './containers/navigation_container';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { mountCompose, unmountCompose } from '../../actions/compose';
+import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
 import { Link } from 'react-router-dom';
-import { injectIntl, defineMessages } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import SearchContainer from './containers/search_container';
 import Motion from '../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import SearchResultsContainer from './containers/search_results_container';
-import { changeComposing } from '../../actions/compose';
 import { openModal } from 'mastodon/actions/modal';
-import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
+import cipherblissLogo from '../../../images/logo_cipherbliss.png';
 import { mascot } from '../../initial_state';
 import Icon from 'mastodon/components/icon';
 import { logOut } from 'mastodon/utils/log_out';
@@ -78,15 +77,15 @@ class Compose extends React.PureComponent {
     }));
 
     return false;
-  }
+  };
 
   onFocus = () => {
     this.props.dispatch(changeComposing(true));
-  }
+  };
 
   onBlur = () => {
     this.props.dispatch(changeComposing(false));
-  }
+  };
 
   render() {
     const { multiColumn, showSearch, isSearchPage, intl } = this.props;
@@ -97,45 +96,120 @@ class Compose extends React.PureComponent {
       const { columns } = this.props;
       header = (
         <nav className='drawer__header'>
-          <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><Icon id='bars' fixedWidth /></Link>
+          <Link
+            to='/getting-started'
+            className='drawer__tab'
+            title={intl.formatMessage(messages.start)}
+            aria-label={intl.formatMessage(messages.start)}
+          ><Icon
+            id='bars'
+            fixedWidth
+          /></Link >
           {!columns.some(column => column.get('id') === 'HOME') && (
-            <Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><Icon id='home' fixedWidth /></Link>
+            <Link
+              to='/timelines/home'
+              className='drawer__tab'
+              title={intl.formatMessage(messages.home_timeline)}
+              aria-label={intl.formatMessage(messages.home_timeline)}
+            ><Icon
+              id='home'
+              fixedWidth
+            /></Link >
           )}
           {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && (
-            <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><Icon id='bell' fixedWidth /></Link>
+            <Link
+              to='/notifications'
+              className='drawer__tab'
+              title={intl.formatMessage(messages.notifications)}
+              aria-label={intl.formatMessage(messages.notifications)}
+            ><Icon
+              id='bell'
+              fixedWidth
+            /></Link >
           )}
           {!columns.some(column => column.get('id') === 'COMMUNITY') && (
-            <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' fixedWidth /></Link>
+            <Link
+              to='/timelines/public/local'
+              className='drawer__tab'
+              title={intl.formatMessage(messages.community)}
+              aria-label={intl.formatMessage(messages.community)}
+            ><Icon
+              id='users'
+              fixedWidth
+            /></Link >
           )}
           {!columns.some(column => column.get('id') === 'PUBLIC') && (
-            <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe' fixedWidth /></Link>
+            <Link
+              to='/timelines/public'
+              className='drawer__tab'
+              title={intl.formatMessage(messages.public)}
+              aria-label={intl.formatMessage(messages.public)}
+            ><Icon
+              id='globe'
+              fixedWidth
+            /></Link >
           )}
-          <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><Icon id='cog' fixedWidth /></a>
+          <a
-          <a href='/auth/sign_out' className='drawer__tab' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)} onClick={this.handleLogoutClick}><Icon id='sign-out' fixedWidth /></a>
+            href='/settings/preferences'
+            className='drawer__tab'
+            title={intl.formatMessage(messages.preferences)}
+            aria-label={intl.formatMessage(messages.preferences)}
+          ><Icon
+            id='cog'
+            fixedWidth
+          /></a >
+          <a
+            href='/auth/sign_out'
+            className='drawer__tab'
+            title={intl.formatMessage(messages.logout)}
+            aria-label={intl.formatMessage(messages.logout)}
+            onClick={this.handleLogoutClick}
+          ><Icon
+            id='sign-out'
+            fixedWidth
+          /></a >
         </nav >
       );
     }
 
     return (
-      <div className='drawer' role='region' aria-label={intl.formatMessage(messages.compose)}>
+      <div
+        className='drawer'
+        role='region'
+        aria-label={intl.formatMessage(messages.compose)}
+      >
         {header}
 
         {(multiColumn || isSearchPage) && <SearchContainer />}
 
         <div className='drawer__pager'>
-          {!isSearchPage && <div className='drawer__inner' onFocus={this.onFocus}>
+          {!isSearchPage && <div
+            className='drawer__inner'
+            onFocus={this.onFocus}
+          >
             <NavigationContainer onClose={this.onBlur} />
 
             <ComposeFormContainer />
 
             <div className='drawer__inner__mastodon'>
-              <img alt='' draggable='false' src={mascot || elephantUIPlane} />
+              <img
+                className='cipherbliss_logo'
+                src={mascot || cipherblissLogo}
+                alt='logo'
+              />
+              {/*<img alt='' draggable='false' src={mascot || elephantUIPlane} />*/}
             </div >
           </div >}
 
-          <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
+          <Motion
+            defaultStyle={{ x: isSearchPage ? 0 : -100 }}
+            style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}
+          >
             {({ x }) => (
-              <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
+              <div
+                className='drawer__inner darker'
+                style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}
+              >
                 <SearchResultsContainer />
               </div >
             )}

app/javascript/mastodon/features/follow_requests/components/account_authorize.js

@@ -28,7 +28,6 @@ class AccountAuthorize extends ImmutablePureComponent {
     const { intl, account, onAuthorize, onReject } = this.props;
     const content = { __html: account.get('note_emojified') };
 
-
     const fields = account.get('fields');
     return (
       <div className='account-authorize__wrapper'>
@@ -85,7 +84,8 @@ class AccountAuthorize extends ImmutablePureComponent {
             to={`/accounts/${account.get('id')}/followers`}
             title={intl.formatNumber(account.get('followers_count'))}
           >
-            <strong >{(account.get('followers_count'))}</strong > <FormattedMessage
+            <strong >{(account.get('followers_count'))}</strong >
+            <FormattedMessage
               id='account.followers'
               defaultMessage='Followers'
             />
@@ -94,13 +94,18 @@ class AccountAuthorize extends ImmutablePureComponent {
         </span >
 
         <div className='account--panel'>
-          <div className='account--panel__button'><IconButton
+          <div className='account--panel__button text-center'>
+            <IconButton
               title={intl.formatMessage(messages.authorize)}
+              size='50'
               icon='check'
               onClick={onAuthorize}
-          /></div >
+            />
-          <div className='account--panel__button'><IconButton
+          </div >
+          <div className='account--panel__button text-center'>
+            <IconButton
               title={intl.formatMessage(messages.reject)}
+              size='50'
               icon='times'
               onClick={onReject}
             /></div >

app/javascript/styles/bliss/_general_overrides.scss

@@ -1,3 +1,8 @@
+.columns-area__panels {
+
+  background: url('../images/elephant_ui_plane.svg') no-repeat left bottom fixed, url('../images/logo_cipherbliss.png') no-repeat right bottom fixed;
+}
+
 .status__content {
   min-height: 5em;
 }
@@ -26,6 +31,7 @@
       color: $gold-star;
     }
   }
+
   a {
     display: inline-block;
     padding: .5em;
@@ -38,6 +44,7 @@
     &:visited {
       color: #528dc8;
     }
+
     &:hover {
       color: $gold-star;
     }
@@ -61,10 +68,14 @@
 
 .compose-form {
   .reply-indicator {
-    display: none;
+    display: block;
   }
 }
 
+.autosuggest-textarea__textarea{
+  color: #528dc8;
+}
+
 .account-authorize--more-data {
   padding: 1em;
   color: white;
@@ -83,12 +94,45 @@
     height: 3em;
   }
 }
+
 .account--panel {
   margin-top: 1em;
 }
 
 .account--panel__button {
+  padding: 1em;
+
   button {
     display: block;
   }
 }
+
+.status__content__read-more-button {
+  .fa{
+    float:left;
+  }
+  .see-more {
+    opacity: 0;
+    transition: opacity ease 0.2s;
+    float:left;
+    margin-left: 1em;
+  }
+  &:hover .see-more{
+    display: block;
+    opacity: 1;
+  }
+}
+
+.dropdown-menu__item{
+  .fa{
+    margin-right:1em;
+  }
+}
+
+@media all and (max-width: 600px) {
+  .columns-area__panels {
+
+    background: none;
+  }
+
+}