Progress

app/javascript/gabsocial/actions/compose.js

@@ -162,15 +162,14 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
     }
   };
 
-  if (response.data.visibility !== 'direct') {
+  if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
     insertIfOnline('home');
-  } else if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
     insertIfOnline('community');
     insertIfOnline('public');
   }
 }
 
-export function submitCompose(routerHistory, group) {
+export function submitCompose(group, replyToId=null) {
   return function (dispatch, getState) {
     if (!me) return;
 
@@ -189,6 +188,8 @@ export function submitCompose(routerHistory, group) {
     //   return hasProtocol ? match : `http://${match}`
     // })
 
+    const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId
+
     console.log("markdown:", markdown)
 
     dispatch(submitComposeRequest());
@@ -208,7 +209,7 @@ export function submitCompose(routerHistory, group) {
       status,
       markdown,
       scheduled_at,
-      in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
+      in_reply_to_id: inReplyToId,
       quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),
       media_ids: media.map(item => item.get('id')),
       sensitive: getState().getIn(['compose', 'sensitive']),
@@ -221,9 +222,6 @@ export function submitCompose(routerHistory, group) {
         'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
       },
     }).then(function (response) {
-      if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0 && routerHistory) {
-        routerHistory.push('/messages');
-      }
       handleComposeSubmit(dispatch, getState, response, status);
     }).catch(function (error) {
       dispatch(submitComposeFail(error));

app/javascript/gabsocial/assets/add_icon.js

@@ -1,8 +1,6 @@
 const AddIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/angle_right_icon.js

@@ -1,8 +1,6 @@
 const AngleRightIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AngleRightIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/apps_icon.js

@@ -1,8 +1,6 @@
 const AppsIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 80 80',
   title = 'Apps',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AppsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 80 80'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/audio_icon.js

@@ -1,8 +1,6 @@
 const AudioIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AudioIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/audio_mute_icon.js

@@ -1,9 +1,7 @@
 const AudioMuteIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
+  title = '',
-  viewBox = '0 0 24 24',
-  title = 'Error',
 }) => (
   <svg
     className={className}
@@ -11,9 +9,9 @@ const AudioMuteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/back_icon.js

@@ -1,8 +1,6 @@
 const BackIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 60 60',
   title = 'Back',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BackIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 60 60'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/blockquote_icon.js

@@ -1,8 +1,6 @@
 const BlockQuoteIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Block Quote',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BlockQuoteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/bold_icon.js

@@ -1,8 +1,6 @@
 const BoldIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Strikethrough',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BoldIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/calendar_icon.js

@@ -1,8 +1,6 @@
 const CalendarIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Calendar',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CalendarIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/chat_icon.js

@@ -1,8 +1,6 @@
 const ChatIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Chat',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ChatIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/circle_icon.js

@@ -1,8 +1,6 @@
 const CircleIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CircleIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/close_icon.js

@@ -1,8 +1,6 @@
 const CloseIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
   title = 'Close',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CloseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/code_icon.js

@@ -1,8 +1,6 @@
 const CodeIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Code',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CodeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/comment_icon.js

@@ -1,8 +1,6 @@
 const CommentIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Comment',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CommentIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/copy_icon.js

@@ -1,8 +1,6 @@
 const CopyIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Copy',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CopyIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/dissenter_icon.js

@@ -1,8 +1,6 @@
 const DissenterIcon = ({
   className = '',
-  width = '32px',
+  size = '32px',
-  height = '32px',
-  viewBox = '0 0 64 64',
   title = 'Dissenter',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const DissenterIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/donor_icon.js

@@ -1,8 +1,6 @@
 const DonorIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = 'Gab.com Donor',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const DonorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/ellipsis_icon.js

@@ -1,8 +1,6 @@
 const EllipsisIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
   title = 'Ellipsis',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const EllipsisIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/email_icon.js

@@ -1,8 +1,6 @@
 const EmailIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Email',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const EmailIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/error_icon.js

@@ -1,8 +1,6 @@
 const ErrorIcon = ({
   className = '',
-  width = '32px',
+  size = '32px',
-  height = '32px',
-  viewBox = '0 0 64 64',
   title = 'Error',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ErrorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/fullscreen_icon.js

@@ -1,8 +1,6 @@
 const FullscreenIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 32 32',
   title = 'Fullscreen',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const FullscreenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/gab_logo.js

@@ -1,8 +1,6 @@
 const GabLogo = ({
   className = _s.fillColorBrand,
-  width = '50px',
+  size = '50px',
-  height = '30px',
-  viewBox = '0 0 50 30'
 }) => (
   <svg
     className={className}
@@ -10,9 +8,9 @@ const GabLogo = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 50 30'
     xmlSpace='preserve'
   >
     <g>

app/javascript/gabsocial/assets/gif_icon.js

@@ -1,8 +1,6 @@
 const GifIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
   title = 'Gif',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GifIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/globe_icon.js

@@ -1,9 +1,7 @@
 // : todo : fill, stroke colors
 const GlobeIcon = ({
   className = '',
-  width = '12px',
+  size = '12px',
-  height = '12px',
-  viewBox = '0 0 28 28',
   title = 'Globe',
 }) => (
   <svg
@@ -12,9 +10,9 @@ const GlobeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 28 28'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/group_add_icon.js

@@ -1,8 +1,6 @@
 const GroupAddIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 64 64',
   title = 'Group Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GroupAddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/group_icon.js

@@ -1,8 +1,6 @@
 const GroupIcon = ({
-  className = 'header-nav__item__icon',
+  className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Group',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GroupIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/happy_icon.js

@@ -1,8 +1,6 @@
 const HappyIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HappyIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/hidden_icon.js

@@ -1,8 +1,6 @@
 const HiddenIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Hidden',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HiddenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/home_icon.js

@@ -1,8 +1,6 @@
 const HomeIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Home',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HomeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/investor_icon.js

@@ -1,8 +1,6 @@
 const InvestorIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = 'Gab.com Investor',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const InvestorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/italic_icon.js

@@ -1,8 +1,6 @@
 const ItalicIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Italic',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ItalicIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/like_icon.js

@@ -1,8 +1,6 @@
 const LikeIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Like',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LikeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/liked_icon.js

@@ -1,8 +1,6 @@
 const LikedIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Liked',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LikedIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/link_icon.js

@@ -1,8 +1,6 @@
 const LinkIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Link',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LinkIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/list_add_icon.js

@@ -1,8 +1,6 @@
 const ListAddIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = 'List Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ListAddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/list_icon.js

@@ -1,8 +1,6 @@
 const ListIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
   title = 'List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/loading_icon.js

@@ -1,16 +1,14 @@
 const LoadingIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 100 100',
 }) => (
   <svg
     className={className}
     xmlns='http://www.w3.org/2000/svg'
     style={{shapeRendering: 'auto'}}
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 100 100'
     preserveAspectRatio='xMidYMid'
   >
     <g transform='translate(82,50)'>

app/javascript/gabsocial/assets/lock_filled_icon.js

@@ -1,8 +1,6 @@
 const LockFilledIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Lock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LockFilledIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/lock_icon.js

@@ -1,8 +1,6 @@
 const LockIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Lock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LockIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/media_icon.js

@@ -1,8 +1,6 @@
 const MediaIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Media',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MediaIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/minimize_fullscreen_icon.js

@@ -1,8 +1,6 @@
 const MinimizeFullscreenIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 32 32',
   title = 'Minimize Fullscreen',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MinimizeFullscreenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/missing_icon.js

@@ -1,8 +1,6 @@
 const MissingIcon = ({
   className = '',
-  width = '32px',
+  size = '32px',
-  height = '32px',
-  viewBox = '0 0 84 84',
   title = 'Missing',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MissingIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 84 84'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/more_icon.js

@@ -1,8 +1,6 @@
 const MoreIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'More',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MoreIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/notifications_icon.js

@@ -1,8 +1,6 @@
 const NotificationsIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
   title = 'Notifications',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const NotificationsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/ol_list_icon.js

@@ -1,8 +1,6 @@
 const OLListIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Ordered List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const OLListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/pause_icon.js

@@ -1,8 +1,6 @@
 const PauseIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Pause',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PauseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/pencil_icon.js

@@ -1,8 +1,6 @@
 const PencilIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Pencil',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PencilIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/pin_icon.js

@@ -1,8 +1,6 @@
 const PinIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 32 32',
   title = 'Pin',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PinIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/play_icon.js

@@ -1,8 +1,6 @@
 const PlayIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Play',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PlayIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/poll_icon.js

@@ -1,8 +1,6 @@
 const PollIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Poll',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PollIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/pro_icon.js

@@ -1,8 +1,6 @@
 const ProIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = 'GabPRO Account',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ProIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/repost_icon.js

@@ -1,8 +1,6 @@
 const CloseIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Close',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CloseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/rich_text_icon.js

@@ -1,8 +1,6 @@
 const RichTextIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
   title = 'Rich Text',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const RichTextIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/search_alt_icon.js

@@ -1,7 +1,6 @@
 const SearchAltIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
   viewBox = '0 0 64 64',
   title = 'Search',
 }) => (
@@ -11,8 +10,8 @@ const SearchAltIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
     viewBox={viewBox}
     xmlSpace='preserve'
     aria-label={title}

app/javascript/gabsocial/assets/search_icon.js

@@ -1,8 +1,6 @@
 const SearchIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Search',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const SearchIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/select_icon.js

@@ -0,0 +1,25 @@
+const SelectIcon = ({
+  className = '',
+  size = '16px',
+  title = 'Select',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={size}
+    height={size}
+    viewBox='0 0 32 32'
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d="M 8.535156 14.222656 L 23.464844 14.222656 C 24.070312 14.222656 24.625 13.890625 24.90625 13.355469 C 25.1875 12.820312 25.148438 12.175781 24.808594 11.675781 L 17.25 0.632812 C 16.980469 0.238281 16.53125 0.00390625 16.054688 0 C 15.574219 0 15.125 0.234375 14.851562 0.625 L 7.195312 11.667969 C 6.851562 12.167969 6.8125 12.816406 7.09375 13.351562 C 7.375 13.886719 7.929688 14.222656 8.535156 14.222656 Z M 8.535156 14.222656" />
+      <path d="M 23.464844 17.777344 L 8.535156 17.777344 C 7.929688 17.777344 7.375 18.113281 7.09375 18.648438 C 6.8125 19.183594 6.851562 19.832031 7.195312 20.332031 L 14.851562 31.375 C 15.125 31.765625 15.574219 32 16.054688 32 C 16.53125 31.996094 16.980469 31.761719 17.25 31.367188 L 24.808594 20.324219 C 25.148438 19.824219 25.1875 19.179688 24.90625 18.644531 C 24.625 18.109375 24.070312 17.777344 23.464844 17.777344 Z M 23.464844 17.777344" />
+    </g>
+  </svg>
+)
+
+export default SelectIcon

app/javascript/gabsocial/assets/share_icon.js

@@ -1,8 +1,6 @@
 const ShareIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
   title = 'Share',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ShareIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/shop_icon.js

@@ -1,8 +1,6 @@
 const ShopIcon = ({
   className = '',
-  width = '26px',
+  size = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
   title = 'Shop',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ShopIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/strikethrough_icon.js

@@ -1,8 +1,6 @@
 const StrikethroughIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Strikethrough',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const StrikethroughIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/subtract_icon.js

@@ -1,8 +1,6 @@
 const SubtractIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
   title = 'Subtract',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const SubtractIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/text_size_icon.js

@@ -1,8 +1,6 @@
 const TextSizeIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Text Size',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const TextSizeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/trends_icon.js

@@ -1,8 +1,6 @@
 const TrendsIcon = ({
   className = '',
-  width = '32px',
+  size = '32px',
-  height = '32px',
-  viewBox = '0 0 80 80',
   title = 'Trends',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const TrendsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 80 80'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/ul_list_icon.js

@@ -1,8 +1,6 @@
 const ULListIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Unordered List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ULListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/underline_icon.js

@@ -1,8 +1,6 @@
 const UnderlineIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
   title = 'Underline',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const UnderlineIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/unlock_filled_icon.js

@@ -1,8 +1,6 @@
 const UnlockFilledIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
   title = 'Unlock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const UnlockFilledIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/verified_icon.js

@@ -1,8 +1,6 @@
 const VerifiedIcon = ({
   className = '',
-  width = '24px',
+  size = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
   title = 'Verified Account',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const VerifiedIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/warning_icon.js

@@ -1,8 +1,6 @@
 const WarningIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Warning',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const WarningIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/assets/website_icon.js

@@ -1,8 +1,6 @@
 const WebsiteIcon = ({
   className = '',
-  width = '16px',
+  size = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
   title = 'Website',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const WebsiteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
+    width={size}
-    height={height}
+    height={size}
-    viewBox={viewBox}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >

app/javascript/gabsocial/components/account.js

@@ -16,33 +16,16 @@ import { openModal } from '../actions/modal'
 import { initMuteModal } from '../actions/mutes'
 import { unfollowModal } from '../initial_state'
 import { makeGetAccount } from '../selectors'
+import AccountActionButton from './account_action_button'
 import Avatar from './avatar'
 import DisplayName from './display_name'
 import Button from './button'
-import Text from './text'
 
-const messages = defineMessages({
+const makeMapStateToProps = (state, props) => ({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
+  account: makeGetAccount()(state, props.id),
-  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'requested', defaultMessage: 'Requested' },
-  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
-  unmute: { id: 'unmute', defaultMessage: 'Unmute' },
-  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
-  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
 })
 
-const makeMapStateToProps = () => {
+const mapDispatchToProps = (dispatch) => ({
-  const getAccount = makeGetAccount()
-
-  const mapStateToProps = (state, props) => ({
-    account: getAccount(state, props.id),
-  })
-
-  return mapStateToProps
-}
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
@@ -102,25 +85,13 @@ class Account extends ImmutablePureComponent {
     dismissAction: PropTypes.func,
   }
 
-  handleFollow = () => {
+  updateOnProps = [
-    this.props.onFollow(this.props.account)
+    'account',
-  }
+    'isHidden',
-
+    'compact',
-  handleBlock = () => {
+    'expanded',
-    this.props.onBlock(this.props.account)
+    'showDismiss',
-  }
+  ]
-
-  handleMute = () => {
-    this.props.onMute(this.props.account)
-  }
-
-  handleMuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, true)
-  }
-
-  handleUnmuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, false)
-  }
 
   handleAction = () => {
     this.props.onActionClick(this.props.account)
@@ -155,64 +126,26 @@ class Account extends ImmutablePureComponent {
       )
     }
 
-    // : todo : cleanup
+    const actionButton = (onActionClick && actionIcon) ? (
-    let buttonOptions
+      <Button
-    let buttonText
+        onClick={this.handleAction}
-
+        isOutline={true}
-    if (onActionClick && actionIcon) {
+        color='brand'
-      buttonText = actionTitle
+        backgroundColor='none'
-      buttonOptions = {
+      >
-        onClick: this.handleAction,
+        {actionTitle}
-        outline: true,
-        color: 'brand',
-        backgroundColor: 'none',
-      }
-    } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
-      const following = account.getIn(['relationship', 'following'])
-      const requested = account.getIn(['relationship', 'requested'])
-      const blocking = account.getIn(['relationship', 'blocking'])
-
-      // : todo :
-      // unmute
-
-      if (requested || blocking) {
-        buttonText = intl.formatMessage(requested ? messages.requested : messages.unblock)
-        buttonOptions = {
-          narrow: true,
-          onClick: requested ? this.handleUnrequest : this.handleBlock,
-          color: 'primary',
-          backgroundColor: 'tertiary',
-          className: _s.mt5,
-        }
-      } else if (!account.get('moved') || following) {
-        buttonOptions = {
-          narrow: true,
-          outline: !following,
-          color: !following ? 'brand' : 'white',
-          backgroundColor: !following ? 'none' : 'brand',
-          className: _s.mt5,
-          onClick: this.handleFollow,
-        }
-        buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
-      }
-    }
-
-    const button = !buttonOptions ? null : (
-      <Button {...buttonOptions}>
-        <Text color='inherit'>{buttonText}</Text>
       </Button>
-    )
+    ) :  <AccountActionButton account={account} isSmall />
 
     const avatarSize = compact ? 42 : 52
-    const dismissBtn = (
+    const dismissBtn = !showDismiss ? null : (
       <Button
-        narrow
+        isNarrow
         backgroundColor='none'
         className={_s.px5}
         onClick={dismissAction}
         icon='close'
-        iconWidth='8px'
+        iconSize='8px'
-        iconHeight='8px'
         iconClassName={_s.fillColorSecondary}
       />
     )
@@ -235,12 +168,12 @@ class Account extends ImmutablePureComponent {
             className={[_s.default, _s.alignItemsStart, _s.px10, _s.flexGrow1].join(' ')}
           >
             <DisplayName account={account} multiline={compact} />
-            {!compact && button}
+            {!compact && actionButton}
           </NavLink>
 
           <div className={[_s.default].join(' ')}>
-            {showDismiss && dismissBtn}
+            {dismissBtn}
-            {compact && button}
+            {compact && actionButton}
           </div>
 
         </div>

app/javascript/gabsocial/components/account_action_button.js

@@ -1,54 +1,160 @@
-wimport classNames from 'classnames/bind'
+import ImmutablePropTypes from 'react-immutable-proptypes'
-
+import ImmutablePureComponent from 'react-immutable-pure-component'
-const cx = classNames.bind(_s)
+import { injectIntl, defineMessages } from 'react-intl'
+import {
+  followAccount,
+  unfollowAccount,
+  unblockAccount,
+} from '../actions/accounts'
+import { openModal } from '../actions/modal'
+import { me, unfollowModal } from '../initial_state'
+import Button from './button'
+import Text from './text'
 
 // : todo :
 
-export default class AccountActionButton extends PureComponent {
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+  following: { id: 'following', defaultMessage: 'Following' },
+  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
+  requested: { id: 'requested', defaultMessage: 'Requested' },
+  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
+  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+
+  onFollow(account) {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
+      if (unfollowModal) {
+        dispatch(openModal('UNFOLLOW', {
+          accountId: account.get('id'),
+        }));
+      } else {
+        dispatch(unfollowAccount(account.get('id')));
+      }
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  },
+
+  onBlock(account) {
+    if (account.getIn(['relationship', 'blocking'])) {
+      dispatch(unblockAccount(account.get('id')));
+    } else {
+      dispatch(openModal('BLOCK_ACCOUNT', {
+        accountId: account.get('id'),
+      }));
+    }
+  },
+
+});
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class AccountActionButton extends ImmutablePureComponent {
+
   static propTypes = {
-    children: PropTypes.any,
+    account: ImmutablePropTypes.map,
-    size: PropTypes.oneOf(Object.keys(SIZES)),
+    intl: PropTypes.object.isRequired,
-    center: PropTypes.bool,
+    isSmall: PropTypes.bool,
+    onBlock: PropTypes.func.isRequired,
+    onFollow: PropTypes.func.isRequired,
   }
 
-  static defaultProps = {
+  updateOnProps = [
-    size: SIZES.h1,
+    'account',
+  ]
+
+  handleFollow = () => {
+    this.props.onFollow(this.props.account)
+  }
+
+  handleBlock = () => {
+    this.props.onBlock(this.props.account)
   }
 
   render() {
-    const { children, size, center } = this.props
+    const {
+      account,
+      intl,
+      isSmall,
+    } = this.props
 
-    const classes = cx({
+    if (!account) return null
-      default: 1,
-      text: 1,
-      textAlignCenter: center,
 
-      colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
+    // Wait until the relationship is loaded
-      colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
+    if (!account.get('relationship')) return null
 
-      fontSize24PX: size === SIZES.h1,
+    // Don't show if is me
-      fontSize19PX: size === SIZES.h2,
+    if (account.get('id') === me) return null
-      fontSize16PX: size === SIZES.h3,
-      fontSize13PX: size === SIZES.h4,
-      fontSize12PX: size === SIZES.h5,
 
-      mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
+    const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
 
-      lineHeight2: size === SIZES.h5,
+    // Don't show
-      py2: size === SIZES.h5,
+    if (isBlockedBy) return null
 
-      // fontWeightNormal: weight === WEIGHTS.normal,
+    let buttonText = ''
-      fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
+    let buttonOptions = {}
-      fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
-    })
 
-    return React.createElement(
+    const isRequested = account.getIn(['relationship', 'requested'])
-      size,
+    const isBlocking = account.getIn(['relationship', 'blocking'])
-      {
+    const isFollowing = account.getIn(['relationship', 'following'])
-        className: classes,
+
-        role: 'heading',
+    if (isRequested) {
-      },
+      buttonText = intl.formatMessage(messages.requested)
-      children,
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'primary',
+        backgroundColor: 'tertiary',
+      }
+    } else if (isBlocking) {
+      buttonText = intl.formatMessage(messages.blocked)
+      buttonOptions = {
+        onClick: this.handleBlock,
+        color: 'white',
+        backgroundColor: 'danger',
+      }
+    } else if (isFollowing) {
+      buttonText = intl.formatMessage(messages.following)
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'white',
+        backgroundColor: 'brand',
+      }
+    } else {
+      buttonText = intl.formatMessage(messages.follow)
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'brand',
+        backgroundColor: 'none',
+        isOutline: true,
+      }
+    }
+
+    const textClassName = isSmall ? null : _s.px10
+    const textSize = isSmall ? 'normal' : 'medium'
+    const textWeight = isSmall ? 'normal' : 'bold'
+
+    return (
+      <Button
+        {...buttonOptions}
+        isNarrow
+        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+      >
+        <Text
+          color='inherit'
+          weight={textWeight}
+          size={textSize}
+          className={textClassName}
+        >
+          {buttonText}
+        </Text>
+      </Button>
     )
   }
+
 }

app/javascript/gabsocial/components/avatar.js

@@ -1,20 +1,21 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { Map as ImmutableMap } from 'immutable'
 import { autoPlayGif } from '../initial_state'
 import Image from './image'
 
-export default
+/**
-class Avatar extends ImmutablePureComponent {
+ * Renders an avatar component
+ * @param {map} [props.account] - the account for image
+ * @param {number} [props.size=40] - the size of the avatar
+ */
+export default class Avatar extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
-    size: PropTypes.number.isRequired,
+    size: PropTypes.number,
-    animate: PropTypes.bool,
   }
 
   static defaultProps = {
-    animate: autoPlayGif,
     size: 40,
   }
 
@@ -41,17 +42,17 @@ class Avatar extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, size, animate } = this.props
+    const { account, size } = this.props
     const { hovering, sameImg } = this.state
 
-    const shouldAnimate = animate || !sameImg
+    const shouldAnimate = autoPlayGif || !sameImg
 
     const options = {
       alt: !account ? 'Avatar' : account.get('display_name'),
       className: [_s.default, _s.circle, _s.overflowHidden].join(' '),
       onMouseEnter: shouldAnimate ? this.handleMouseEnter : undefined,
       onMouseLeave: shouldAnimate ? this.handleMouseLeave : undefined,
-      src: !account ? undefined : account.get((hovering || animate) ? 'avatar' : 'avatar_static'),
+      src: !account ? undefined : account.get((hovering || autoPlayGif) ? 'avatar' : 'avatar_static'),
       alt: !account ? undefined : account.get('display_name'),
       style: {
         width: `${size}px`,

app/javascript/gabsocial/components/block.js

@@ -1,7 +1,10 @@
+/**
+ * Renders a block component
+ */
 export default class Block extends PureComponent {
 
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.any,
   }
 
   render() {

app/javascript/gabsocial/components/button.js

@@ -3,8 +3,10 @@ import { NavLink } from 'react-router-dom'
 import classNames from 'classnames/bind'
 import Icon from './icon'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+// Define colors for enumeration for Button component `color`, `backgroundColor` props
 const COLORS = {
   primary: 'primary',
   secondary: 'secondary',
@@ -16,29 +18,60 @@ const COLORS = {
   none: 'none',
 }
 
+/**
+ * Renders a button component
+ * @param {string} [props.backgroundColor='brand'] - background color of the button
+ * @param {func|node} [props.buttonRef] - ref to send to button component
+ * @param {string} [props.className] - add custom className
+ * @param {string} [props.color='white'] - text color of the button
+ * @param {string} [props.href] - href to send to on click
+ * @param {string} [props.icon] - prepend icon id
+ * @param {string} [props.iconClassName] - add custom className to icon
+ * @param {string} [props.iconSize] - size of the icon
+ * @param {bool} [props.isBlock] - if button is width: 100%
+ * @param {bool} [props.isDisabled] - if the button is disabled
+ * @param {bool} [props.isNarrow] - if the button is narrow
+ * @param {bool} [props.isOutline] - if the button is outline design
+ * @param {bool} [props.noClasses] - if the button has no default classes
+ * @param {func} [props.onClick] - function to call on button click
+ * @param {func} [props.onMouseEnter] - function to call on button mouse enter
+ * @param {func} [props.onMouseLeave] - function to call on button mouse leave
+ * @param {bool} [props.radiusSmall] - if the button has small radius
+ * @param {bool} [props.text] - if the button is just text (i.e. link)
+ * @param {bool} [props.title] - `title` attribute for button
+ * @param {bool} [props.to] - `to` to send to on click
+ * @param {bool} [props.type] - `type` attribute for button
+ * @param {bool} [props.underlineOnHover] - if the button has underline on hover
+ */
 export default class Button extends PureComponent {
 
   static propTypes = {
-    children: PropTypes.node,
-    to: PropTypes.string,
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-    icon: PropTypes.string,
-    iconWidth: PropTypes.string,
-    iconHeight: PropTypes.string,
-    iconClassName: PropTypes.string,
-    color: PropTypes.string,
     backgroundColor: PropTypes.string,
-    block: PropTypes.bool,
+    buttonRef: PropTypes.oneOfType([
-    text: PropTypes.bool,
+      PropTypes.func,
-    disabled: PropTypes.bool,
+      PropTypes.node,
-    outline: PropTypes.bool,
+    ]),
-    narrow: PropTypes.bool,
+    children: PropTypes.node,
-    underlineOnHover: PropTypes.bool,
+    className: PropTypes.string,
-    radiusSmall: PropTypes.bool,
+    color: PropTypes.string,
+    href: PropTypes.string,
+    icon: PropTypes.string,
+    iconClassName: PropTypes.string,
+    iconSize: PropTypes.string,
+    isBlock: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isNarrow: PropTypes.bool,
+    isText: PropTypes.bool,
     noClasses: PropTypes.bool,
-    buttonRef: PropTypes.func,
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    isOutline: PropTypes.bool,
+    radiusSmall: PropTypes.bool,
+    title: PropTypes.string,
+    to: PropTypes.string,
+    type: PropTypes.string,
+    underlineOnHover: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -47,15 +80,18 @@ export default class Button extends PureComponent {
   }
 
   handleClick = (e) => {
-    if (!this.props.disabled && this.props.onClick) {
+    if (!this.props.isDisabled && this.props.onClick) {
       this.props.onClick(e)
     }
   }
 
   setRef = (c) => {
-    const { buttonRef } = this.props
+    try {
-    if (buttonRef) buttonRef(c)
+      this.node = c
-    this.node = c
+      this.props.buttonRef(c) 
+    } catch (error) {
+      //
+    }
   }
 
   focus() {
@@ -64,36 +100,31 @@ export default class Button extends PureComponent {
 
   render() {
     const {
-      block,
-      className,
-      disabled,
-      text,
-      to,
-      icon,
-      iconWidth,
-      iconHeight,
-      iconClassName,
-      children,
-      href,
-      outline,
-      color,
       backgroundColor,
-      underlineOnHover,
+      children,
-      narrow,
+      className,
-      radiusSmall,
+      color,
+      href,
+      icon,
+      iconClassName,
+      iconSize,
+      isBlock,
+      isDisabled,
+      isNarrow,
+      isOutline,
+      isText,
       noClasses,
-      ...otherProps
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      radiusSmall,
+      title,
+      to,
+      type,
+      underlineOnHover,
     } = this.props
 
-    const theIcon = !!icon ? (
+    // Style the component according to props
-      <Icon
-        id={icon}
-        width={iconWidth}
-        height={iconHeight}
-        className={iconClassName}
-      />
-    ) : undefined
-
     const classes = noClasses ? className : cx(className, {
       default: 1,
       noUnderline: 1,
@@ -102,8 +133,8 @@ export default class Button extends PureComponent {
       textAlignCenter: 1,
       outlineNone: 1,
       flexRow: !!children && !!icon,
-      cursorNotAllowed: disabled,
+      cursorNotAllowed: isDisabled,
-      opacity05: disabled,
+      opacity05: isDisabled,
 
       backgroundColorPrimary: backgroundColor === COLORS.white,
       backgroundColorBlack: backgroundColor === COLORS.black,
@@ -119,17 +150,17 @@ export default class Button extends PureComponent {
       colorWhite: !!children && color === COLORS.white,
       colorBrand: !!children && color === COLORS.brand,
 
-      borderColorBrand: color === COLORS.brand && outline,
+      borderColorBrand: color === COLORS.brand && isOutline,
-      border1PX: outline,
+      border1PX: isOutline,
 
-      circle: !text,
+      circle: !isText,
       radiusSmall: radiusSmall,
 
-      py5: narrow,
+      py5: isNarrow,
-      py10: !text && !narrow,
+      py10: !isText && !isNarrow,
-      px15: !text,
+      px15: !isText,
 
-      width100PC: block,
+      width100PC: isBlock,
 
       underline_onHover: underlineOnHover,
 
@@ -138,17 +169,25 @@ export default class Button extends PureComponent {
       backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
       backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,
 
-      backgroundColorBrand_onHover: color === COLORS.brand && outline,
+      backgroundColorBrand_onHover: color === COLORS.brand && isOutline,
-      colorWhite_onHover: !!children && color === COLORS.brand && outline,
+      colorWhite_onHover: !!children && color === COLORS.brand && isOutline,
 
       fillColorSecondary: !!icon && color === COLORS.secondary,
       fillColorWhite: !!icon && color === COLORS.white,
       fillColorBrand: !!icon && color === COLORS.brand,
-      fillColorWhite_onHover: !!icon && color === COLORS.brand && outline,
+      fillColorWhite_onHover: !!icon && color === COLORS.brand && isOutline,
     })
 
     const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
 
+    const theIcon = !!icon ? (
+      <Icon
+        id={icon}
+        size={iconSize}
+        className={iconClassName}
+      />
+    ) : undefined
+
     const theChildren = !!icon ? (
       <Fragment>
         {theIcon}
@@ -156,24 +195,36 @@ export default class Button extends PureComponent {
       </Fragment>
     ) : children
 
-    const options = {
+    const handlers = {
-      disabled,
+      onClick: !!onClick ? this.handleClick : undefined,
-      className: classes,
+      onMouseEnter: !!onMouseEnter ? onMouseEnter : undefined,
-      ref: this.setRef,
+      onMouseLeave: !!onMouseLeave ? onMouseLeave : undefined,
-      to: to || undefined,
-      href: href || undefined,
-      onClick: this.handleClick || undefined,
-      ...otherProps,
     }
 
     if (tagName === 'NavLink' && !!to) {
       return (
-        <NavLink {...options}>
+        <NavLink
+          title={title}
+          className={classes}
+          disabled={isDisabled}
+          to={to}
+          {...handlers}
+        >
           {theChildren}
         </NavLink>
       )
     }
 
+    const options = {
+      title,
+      type,
+      disabled: isDisabled,
+      className: classes,
+      href: href || undefined,
+      ref: this.setRef,
+      ...handlers,
+    }
+
     return React.createElement(tagName, options, theChildren)
   }
 

app/javascript/gabsocial/components/character_counter.js

@@ -1,5 +1,10 @@
 import { length } from 'stringz'
 
+/**
+ * Renders a character counter
+ * @param {string} props.text - text to use to measure
+ * @param {number} props.max - max text allowed
+ */
 export default class CharacterCounter extends PureComponent {
 
   static propTypes = {
@@ -9,6 +14,7 @@ export default class CharacterCounter extends PureComponent {
 
   render () {
     const { text, max } = this.props
+
     const actualRadius = '16'
     const radius = 12
     const circumference = 2 * Math.PI * radius
@@ -20,7 +26,6 @@ export default class CharacterCounter extends PureComponent {
         <svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
           <circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
           <circle style={{
-              // transform: 'rotate(-90deg)',
               strokeDashoffset: dashoffset,
               strokeDasharray: circumference,
             }}

app/javascript/gabsocial/components/column_header.js

@@ -1,6 +1,6 @@
-import TabBar from './tab_bar'
 import Button from './button'
 import Heading from './heading'
+import TabBar from './tab_bar'
 
 export default class ColumnHeader extends PureComponent {
 
@@ -44,8 +44,7 @@ export default class ColumnHeader extends PureComponent {
             backgroundColor='none'
             className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
             icon='back'
-            iconWidth='20px'
+            iconSize='20px'
-            iconHeight='20px'
             iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
             onClick={this.handleBackClick}
           />
@@ -57,10 +56,7 @@ export default class ColumnHeader extends PureComponent {
           </Heading>
         </div>
 
-        {
+        <TabBar tabs={tabs} />
-          !!tabs &&
-          <TabBar tabs={tabs} />
-        }
 
         {
           !!actions &&
@@ -75,8 +71,7 @@ export default class ColumnHeader extends PureComponent {
                   className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
                   icon={action.icon}
                   iconClassName={_s.inheritFill}
-                  iconWidth='15px'
+                  iconSize='15px'
-                  iconHeight='15px'
                 />
               ))
             }

app/javascript/gabsocial/components/column_indicator.js

@@ -31,7 +31,7 @@ class ColumnIndicator extends PureComponent {
 
     return (
       <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
-        <Icon id={type} width='44px' height='44px' />
+        <Icon id={type} size='44px' />
         {
           type !== 'loading' &&
           <Text

app/javascript/gabsocial/components/comment.js

@@ -17,19 +17,9 @@ const messages = defineMessages({
   follow: { id: 'follow', defaultMessage: 'Follow' },
 })
 
-const makeMapStateToProps = () => {
+const makeMapStateToProps = (state, props) => ({
-  const getStatus = makeGetStatus()
+  status: makeGetStatus()(state, props)
-
+})
-  const mapStateToProps = (state, props) => {
-    const status = getStatus(state, props)
-
-    return {
-      status,
-    }
-  }
-
-  return mapStateToProps
-}
 
 export default
 @injectIntl
@@ -81,7 +71,7 @@ class Comment extends ImmutablePureComponent {
               <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
@@ -93,7 +83,7 @@ class Comment extends ImmutablePureComponent {
                 </Button>
 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
@@ -105,7 +95,7 @@ class Comment extends ImmutablePureComponent {
                 </Button>
 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'

app/javascript/gabsocial/components/comment_header.js

@@ -42,7 +42,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
               <Button
-                text
+                isText
                 underlineOnHover
                 backgroundColor='none'
                 color='tertiary'
@@ -61,7 +61,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
@@ -81,7 +81,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
@@ -99,7 +99,7 @@ class CommentHeader extends ImmutablePureComponent {
           <DotTextSeperator />
 
           <Button
-            text
+            isText
             underlineOnHover
             backgroundColor='none'
             color='tertiary'

app/javascript/gabsocial/components/comment_list.js

@@ -36,7 +36,7 @@ export default class CommentList extends ImmutablePureComponent {
           size > 0 && size > max &&
           <div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
             <Button
-              text
+              isText
               backgroundColor='none'
               color='tertiary'
             >

app/javascript/gabsocial/components/display_name.js

@@ -1,6 +1,5 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import debounce from 'lodash.debounce'
 import classNames from 'classnames/bind'
 import { openPopover, closePopover } from '../actions/popover'
 import Icon from './icon'
@@ -12,7 +11,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openPopover('USER_INFO', props))
   },
   closeUserInfoPopover() {
-    dispatch(closePopover())
+    dispatch(closePopover('USER_INFO'))
   }
 })
 
@@ -31,20 +30,29 @@ class DisplayName extends ImmutablePureComponent {
     noUsername: PropTypes.bool,
   }
 
-  handleMouseEnter = debounce(() => {
+  mouseOverTimeout = null
-    this.props.openUserInfoPopover({
-      targetRef: this.node,
-      position: 'top',
-      account: this.props.account,
-    })
-  }, 1000, { leading: true })
 
-  handleMouseLeave = debounce(() => {
+  handleMouseEnter = () => {
-    this.props.closeUserInfoPopover()
+    if (this.mouseOverTimeout) return null
-  }, 1000, { leading: true })
+    this.mouseOverTimeout = setTimeout(() => {
+      this.props.openUserInfoPopover({
+        targetRef: this.node,
+        position: 'top',
+        account: this.props.account,
+      })
+    }, 650)
+  }
+
+  handleMouseLeave = () => {
+    if (this.mouseOverTimeout) {
+      clearTimeout(this.mouseOverTimeout)
+      this.mouseOverTimeout = null
+      this.props.closeUserInfoPopover()
+    }
+  }
 
   setRef = (n) => {
-    this.node = n;
+    this.node = n
   }
 
   render() {
@@ -105,12 +113,12 @@ class DisplayName extends ImmutablePureComponent {
       !!large ? '19px' :
       !!small ? '14px' : '16px'
 
-    const domain = account.get('acct').split('@')[1];
+    const domain = account.get('acct').split('@')[1]
     const isRemoteUser = !!domain
 
+    // : todo : remote
     console.log("domain, isRemoteUser:", domain, isRemoteUser)
-    
+
-    // : todo :
     return (
       <span {...containerOptions} ref={this.setRef}>
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
@@ -122,19 +130,19 @@ class DisplayName extends ImmutablePureComponent {
           </bdi>
           {
             account.get('is_verified') &&
-            <Icon id='verified' width={iconSize} height={iconSize} className={_s.default} />
+            <Icon id='verified' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_pro') &&
-            <Icon id='pro' width='16px' height='16px' className={_s.default} />
+            <Icon id='pro' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_donor') &&
-            <Icon id='donor' width='16px' height='16px' className={_s.default} />
+            <Icon id='donor' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_investor') &&
-            <Icon id='investor' width='16px' height='16px' className={_s.default} />
+            <Icon id='investor' size={iconSize} className={_s.default} />
           }
         </div>
         {

app/javascript/gabsocial/components/divider.js

@@ -1,27 +1,33 @@
 import classnames from 'classnames/bind'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classnames.bind(_s)
 
+/**
+ * Renders a divider component
+ * @param {bool} [props.isInvisible] - to style the tab bar larger
+ * @param {bool} [props.isSmall] - if item is active
+ */
 export default class Divider extends PureComponent {
+
   static propTypes = {
-    small: PropTypes.bool,
+    isInvisible: PropTypes.bool,
-    invisible: PropTypes.bool,
+    isSmall: PropTypes.bool,
   }
 
   render() {
-    const { small, invisible } = this.props
+    const { isSmall, isInvisible } = this.props
 
     const classes = cx({
       default: 1,
-      borderBottom1PX: !invisible,
+      borderBottom1PX: !isInvisible,
-      borderColorSecondary2: !invisible,
+      borderColorSecondary2: !isInvisible,
       width100PC: 1,
-      mb15: !small,
+      mb15: !isSmall,
-      my10: small || invisible,
+      my10: isSmall || isInvisible,
     })
 
-    return (
+    return <div className={classes} />
-      <div className={classes} />
-    )
   }
+
 }

app/javascript/gabsocial/components/file_input.js

@@ -65,7 +65,7 @@ export default class FileInput extends PureComponent {
           />
           {
             !file &&
-            <div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
+            <div className={[_s.posAbs, _s.cursorPointer].join(' ')}>
               <Text size='medium' color='secondary'>
                 Click Here to Upload
               </Text>

app/javascript/gabsocial/components/floating_action_button.js

@@ -1,9 +1,22 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { openModal } from '../actions/modal'
 import Button from './button'
 
-export default class FloatingActionButton extends PureComponent {
+const messages = defineMessages({
+  gab: { id: 'gab', defaultMessage: 'Gab' }, 
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenCompose: () => dispatch(openModal('COMPOSE')),
+})
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class FloatingActionButton extends PureComponent {
   static propTypes = {
-    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
-    message: PropTypes.string.isRequired,
+    onOpenCompose: PropTypes.func.isRequired,
   }
 
   shouldComponentUpdate(nextProps) {
@@ -11,14 +24,16 @@ export default class FloatingActionButton extends PureComponent {
   }
 
   render() {
-    const { onClick, message } = this.props
+    const { intl, onOpenCompose } = this.props
+
+    const message = intl.formatMessage(messages.gab)
 
     return (
       <Button
-        onClick={onClick}
+        onClick={onOpenCompose}
         color='white'
         backgroundColor='brand'
-        className={[_s.positionFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
+        className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
         title={message}
         aria-label={message}
         icon='pencil'

app/javascript/gabsocial/components/footer.js

@@ -2,6 +2,8 @@ import { NavLink, withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import NotificationCounter from '../notification_counter';
 
+// : todo :
+
 const links = [
   <NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
     <i className='tabs-bar__link__icon home' />

app/javascript/gabsocial/components/group_collection_item.js

@@ -91,11 +91,11 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
           {
             (isMember || isAdmin) &&
-            <div className={[_s.default, _s.flexRow, _s.positionAbsolute, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
               {
                 isMember &&
                 <Text
-                  badge
+                  isBadge
                   className={_s.backgroundColorWhite}
                   size='extraSmall'
                   color='brand'
@@ -106,7 +106,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
               {
                 isAdmin &&
                 <Text
-                  badge
+                  isBadge
                   className={[_s.backgroundColorBlack, _s.ml5].join(' ')}
                   size='extraSmall'
                   color='white'

app/javascript/gabsocial/components/hashtag_item.js

@@ -32,8 +32,8 @@ export default class HashtagItem extends ImmutablePureComponent {
       <NavLink
         to='/tags/test'
         className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
-        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseEnter={this.handleOnMouseEnter}
-        onMouseLeave={() => this.handleOnMouseLeave()}
+        onMouseLeave={this.handleOnMouseLeave}
       >
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
           <div>
@@ -42,13 +42,12 @@ export default class HashtagItem extends ImmutablePureComponent {
             </Text>
           </div>
           <Button
-            text
+            isText
             backgroundColor='none'
             color='none'
             title='Remove'
             icon='caret-down'
-            iconWidth='8px'
+            iconSize='8px'
-            iconHeight='8px'
             iconClassName={_s.fillColorSecondary}
             className={_s.marginLeftAuto}
           />

app/javascript/gabsocial/components/heading.js

@@ -1,7 +1,9 @@
 import classNames from 'classnames/bind'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+// Define sizes for enumeration for Heading component `size` prop
 const SIZES = {
   h1: 'h1',
   h2: 'h2',
@@ -11,11 +13,17 @@ const SIZES = {
   h6: 'h6',
 }
 
+/**
+ * Renders an H-tag
+ * @param {bool} [props.isCentered] - if text is centered within the element
+ * @param {string} [props.size='h1'] - the size of the heading
+ */
 export default class Heading extends PureComponent {
+
   static propTypes = {
     children: PropTypes.any,
+    isCentered: PropTypes.bool,
     size: PropTypes.oneOf(Object.keys(SIZES)),
-    center: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -25,6 +33,7 @@ export default class Heading extends PureComponent {
   render() {
     const { children, size, center } = this.props
 
+    // Each size has it's own custom style
     const classes = cx({
       default: 1,
       text: 1,
@@ -44,7 +53,6 @@ export default class Heading extends PureComponent {
       lineHeight2: size === SIZES.h5,
       py2: size === SIZES.h5,
 
-      // fontWeightNormal: weight === WEIGHTS.normal,
       fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
       fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
     })
@@ -58,4 +66,5 @@ export default class Heading extends PureComponent {
       children,
     )
   }
+
 }

app/javascript/gabsocial/components/icon.js

@@ -53,6 +53,7 @@ import RepostIcon from '../assets/repost_icon'
 import RichTextIcon from '../assets/rich_text_icon'
 import SearchIcon from '../assets/search_icon'
 import SearchAltIcon from '../assets/search_alt_icon'
+import SelectIcon from '../assets/select_icon'
 import ShareIcon from '../assets/share_icon'
 import ShopIcon from '../assets/shop_icon'
 import StrikethroughIcon from '../assets/strikethrough_icon'
@@ -121,6 +122,7 @@ const ICONS = {
   'rich-text': RichTextIcon,
   'search': SearchIcon,
   'search-alt': SearchAltIcon,
+  'select': SelectIcon,
   'share': ShareIcon,
   'shop': ShopIcon,
   'strikethrough': StrikethroughIcon,
@@ -141,17 +143,16 @@ export default class Icon extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
     className: PropTypes.string,
-    width: PropTypes.string,
+    size: PropTypes.string,
-    height: PropTypes.string,
   }
 
   render() {
-    const { id, ...options } = this.props
+    const { id, size, className } = this.props
 
     // : todo : add all required icons
     const Asset = ICONS[id] || CircleIcon
 
-    return <Asset {...options} />
+    return <Asset size={size} className={className} />
 
   }
 

app/javascript/gabsocial/components/image.js

@@ -8,8 +8,14 @@ export default class Image extends PureComponent {
     alt: PropTypes.string.isRequired,
     src: PropTypes.string,
     className: PropTypes.string,
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.oneOfType([
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    height: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
     nullable: PropTypes.bool,
     lazy: PropTypes.bool,

app/javascript/gabsocial/components/input.js

@@ -91,7 +91,7 @@ export default class Input extends PureComponent {
         <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
+            <Icon id={prependIcon} size='16px' className={[_s.ml15, _s.mr5].join(' ')} />
           }
 
           <input
@@ -117,8 +117,7 @@ export default class Input extends PureComponent {
               onClick={onClear}
               icon='close'
               iconClassName={_s.inheritFill}
-              iconHeight='10px'
+              iconSize='10px'
-              iconWidth='10px'
             />
           }
         </div>

app/javascript/gabsocial/components/intersection_observer_article.js

@@ -26,9 +26,18 @@ class IntersectionObserverArticle extends React.Component {
 
   static propTypes = {
     intersectionObserverWrapper: PropTypes.object.isRequired,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    id: PropTypes.oneOfType([
-    index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      PropTypes.string,
-    listLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      PropTypes.number,
+    ]),
+    index: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    listLength: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     saveHeightKey: PropTypes.string,
     cachedHeight: PropTypes.number,
     onHeightChange: PropTypes.func,

app/javascript/gabsocial/components/link_footer.js

@@ -104,7 +104,7 @@ class LinkFooter extends PureComponent {
 
               return (
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   color='none'
                   backgroundColor='none'

app/javascript/gabsocial/components/list.js

@@ -1,4 +1,5 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
@@ -8,7 +9,8 @@ export default class List extends ImmutablePureComponent {
   static propTypes = {
     items: PropTypes.oneOfType([
       PropTypes.array,
-      // immutatable...
+      ImmutablePropTypes.map,
+      ImmutablePropTypes.list,
     ]),
     scrollKey: PropTypes.string,
     emptyMessage: PropTypes.any,

app/javascript/gabsocial/components/list_item.js

@@ -72,8 +72,7 @@ export default class ListItem extends PureComponent {
           !!icon &&
           <Icon
             id={icon}
-            width={iconSize}
+            size={iconSize}
-            height={iconSize}
             className={iconClasses}
           />
         }
@@ -86,8 +85,7 @@ export default class ListItem extends PureComponent {
           !hideArrow &&
           <Icon
             id='angle-right'
-            width='10px'
+            size='10px'
-            height='10px'
             className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')}
           />
         }

app/javascript/gabsocial/components/load_more.js

@@ -35,7 +35,7 @@ class LoadMore extends PureComponent {
     return (
       <div className={[_s.default, _s.py10, _s.px10].join(' ')}>
         <Button
-          block
+          isBlock
           radiusSmall
           backgroundColor='tertiary'
           color='primary'
@@ -53,7 +53,7 @@ class LoadMore extends PureComponent {
           {
             gap &&
             <Text align='center'>
-              <Icon id='ellipsis' />
+              <Icon id='ellipsis' size='14px' />
             </Text>
           }
         </Button>

app/javascript/gabsocial/components/media_gallery.js

@@ -151,7 +151,7 @@ class Item extends ImmutablePureComponent {
 
     if (attachment.get('type') === 'unknown') {
       return (
-        <div className={[_s.default, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
+        <div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
           <a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
             <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
           </a>
@@ -216,7 +216,7 @@ class Item extends ImmutablePureComponent {
             playsInline
           />
 
-          <div className={[_s.default, _s.positionAbsolute, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
             <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
           </div>
         </div>
@@ -224,7 +224,7 @@ class Item extends ImmutablePureComponent {
     }
 
     return (
-      <div className={[_s.defeault, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         {
           !visible && !this.state.loaded &&
           <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
@@ -257,6 +257,7 @@ class MediaGallery extends PureComponent {
 
   static defaultProps = {
     standalone: false,
+    height: 110,
   };
 
   state = {
@@ -517,7 +518,7 @@ class MediaGallery extends PureComponent {
     //If reduced (i.e. like in a quoted post)
     //then we need to make media smaller
     if (reduced) {
-      style.height = width / 2
+      style.height = width / 2 || '50%'
     }
 
     if (!visible) {
@@ -568,7 +569,7 @@ class MediaGallery extends PureComponent {
 
         {
           visible && sensitive &&
-          <div className={[_s.positionAbsolute, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
+          <div className={[_s.posAbs, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
             <Button
               title={intl.formatMessage(messages.toggle_visible)}
               icon='hidden'

app/javascript/gabsocial/components/media_item.js

@@ -77,7 +77,7 @@ export default class MediaItem extends ImmutablePureComponent {
 
     const containerClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       top0: 1,
       height100PC: 1,
       width100PC: 1,
@@ -96,7 +96,7 @@ export default class MediaItem extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.width25PC, _s.paddingTop25PC].join(' ')}>
+      <div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}>
         <div className={containerClasses}>
           <NavLink
             to={status.get('url')} /* : todo : */
@@ -125,20 +125,19 @@ export default class MediaItem extends ImmutablePureComponent {
               />
             }
 
-            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.positionAbsolute].join(' ')}>
+            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}>
               {
                 !visible &&
                 <Icon
                   id='hidden'
-                  width='22px'
+                  size='22px'
-                  height='22px'
                   className={[_s.fillColorWhite].join('')}
                 />
               }
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
                   <Text size='extraSmall' color='white'>
                     {badge}
                   </Text>

app/javascript/gabsocial/components/modal/boost_modal.js

@@ -14,6 +14,8 @@ const messages = defineMessages({
   combo: { id: 'boost_modal.combo', defaultMessage: 'You can press {combo} to skip this next time' },
 });
 
+// : todo :
+
 export default
 @injectIntl
 class BoostModal extends ImmutablePureComponent {

app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js

@@ -74,7 +74,6 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}