2.4.16

athena/queues/mention-notification.js

@@ -50,21 +50,29 @@ export default async ({ data }: Job<MentionNotificationJobData>) => {
   // dont send any notification about the mention
   if (!thread || thread.deletedAt) return;
 
-  const { isPrivate } = await getChannelById(thread.channelId);
+  const { isPrivate: channelIsPrivate } = await getChannelById(
+    thread.channelId
+  );
+  const { isPrivate: communityIsPrivate } = await getCommunityById(
+    thread.communityId
+  );
   const {
     isBlocked: isBlockedInCommunity,
+    isMember: isMemberInCommunity,
   } = await getUserPermissionsInCommunity(thread.communityId, recipient.id);
   const {
     isMember: isMemberInChannel,
     isBlocked: isBlockedInChannel,
   } = await getUserPermissionsInChannel(recipient.id, thread.channelId);
-  // don't notify people where they are blocked, or where the channel is private and they aren't a member
+
   if (
     isBlockedInCommunity ||
     isBlockedInChannel ||
-    (isPrivate && !isMemberInChannel)
-  )
+    (channelIsPrivate && !isMemberInChannel) ||
+    (communityIsPrivate && !isMemberInCommunity)
+  ) {
     return;
+  }
 
   // see if a usersThreads record exists. If it does, and notifications are muted, we
   // should not send an email. If the record doesn't exist, it means the person being

cypress/integration/community/view/profile_spec.js

@@ -68,7 +68,10 @@ describe('public community signed out', () => {
         thread => !thread.deletedAt && thread.communityId === publicCommunity.id
       )
       .forEach(thread =>
-        cy.contains(thread.content.title).should('be.visible')
+        cy
+          .contains(thread.content.title)
+          .scrollIntoView()
+          .should('be.visible')
       );
   });
 
@@ -130,7 +133,10 @@ describe('public community signed in without permission', () => {
         thread => !thread.deletedAt && thread.communityId === publicCommunity.id
       )
       .forEach(thread =>
-        cy.contains(thread.content.title).should('be.visible')
+        cy
+          .contains(thread.content.title)
+          .scrollIntoView()
+          .should('be.visible')
       );
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Spectrum",
-  "version": "2.4.15",
+  "version": "2.4.16",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "babel-cli": "^6.24.1",

src/components/avatar/style.js

@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from 'styled-components';
 import { zIndex } from '../globals';
 import Link from 'src/components/link';
@@ -21,7 +22,7 @@ export const Status = styled.div`
   display: inline-block;
   width: ${props => (props.size ? `${props.size}px` : '32px')};
   height: ${props => (props.size ? `${props.size}px` : '32px')};
-  border-radius: ${props => (props.community ? '25%' : '100%')};
+  border-radius: ${props => (props.community ? `${props.size / 8}px` : '100%')};
   border: none;
   background-color: ${({ theme }) => theme.bg.default};
 
@@ -86,7 +87,7 @@ export const Img = styled.img`
   display: inline-block;
   width: ${props => (props.size ? `${props.size}px` : '32px')};
   height: ${props => (props.size ? `${props.size}px` : '32px')};
-  border-radius: ${props => (props.community ? '25%' : '100%')};
+  border-radius: ${props => (props.community ? `${props.size / 8}px` : '100%')};
   object-fit: cover;
 
   ${props =>
@@ -104,7 +105,7 @@ export const ImgPlaceholder = styled.div`
   background-color: ${props => props.theme.bg.border};
   width: ${props => (props.size ? `${props.size}px` : '32px')};
   height: ${props => (props.size ? `${props.size}px` : '32px')};
-  border-radius: ${props => (props.community ? '25%' : '100%')};
+  border-radius: ${props => (props.community ? `${props.size / 8}px` : '100%')};
   object-fit: cover;
 
   ${props =>

src/components/message/style.js

@@ -243,7 +243,7 @@ export const Time = styled.div`
 
 export const Text = styled(Bubble)`
   padding: 8px 16px;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   background-color: ${props =>
     props.me ? props.theme.brand.default : props.theme.generic.default};
@@ -332,7 +332,7 @@ export const Image = styled.img`
 
 export const Code = styled(Bubble)`
   padding: 12px 16px;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 500;
   background-color: ${props => props.theme.bg.reverse};
   color: ${props => props.theme.text.reverse};

src/components/profile/style.js

@@ -70,7 +70,7 @@ export const Title = styled.h3`
 
 export const FullTitle = styled(Title)`
   font-size: 24px;
-  margin-top: 8px;
+  margin-top: 16px;
 `;
 
 export const FullProfile = styled.div`

src/components/threadComposer/style.js

@@ -88,8 +88,8 @@ export const Placeholder = styled.div`
 
 export const PlaceholderLabel = styled.h3`
   font-size: 20px;
-  font-weight: 800;
-  margin-left: 8px;
+  font-weight: 500;
+  margin-left: 16px;
 `;
 
 export const ContentContainer = styled.div`
@@ -169,7 +169,7 @@ export const ComposerUpsell = styled.div`
 
   p {
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
   }
 `;
 
@@ -245,7 +245,7 @@ export const ThreadTitle = {
   outline: 'none',
   border: '0',
   lineHeight: '1.4',
-  fontWeight: '800',
+  fontWeight: '600',
   boxShadow: 'none',
   width: '100%',
   color: '#171A21',

src/components/threadFeed/index.js

@@ -142,7 +142,12 @@ type Props = {
   hasThreads: Function,
   hasNoThreads: Function,
   currentUser: ?Object,
-  viewContext: 'community' | 'channel',
+  viewContext?:
+    | ?'communityInbox'
+    | 'communityProfile'
+    | 'channelInbox'
+    | 'channelProfile'
+    | 'userProfile',
   slug: string,
   pinnedThreadId: ?string,
   isNewAndOwned: ?boolean,
@@ -286,9 +291,6 @@ class ThreadFeedPure extends React.Component<Props, State> {
                   data={this.props.data.community.pinnedThread}
                   viewContext={viewContext}
                   pinnedThreadId={this.props.data.community.pinnedThread.id}
-                  hasActiveCommunity={
-                    viewContext === 'community' && this.props.data.community
-                  }
                 />
               </ErrorBoundary>
             )}
@@ -300,9 +302,6 @@ class ThreadFeedPure extends React.Component<Props, State> {
                 <InboxThread
                   data={this.props.data.community.watercooler}
                   viewContext={viewContext}
-                  hasActiveCommunity={
-                    viewContext === 'community' && this.props.data.community
-                  }
                 />
               </ErrorBoundary>
             )}
@@ -322,16 +321,7 @@ class ThreadFeedPure extends React.Component<Props, State> {
             {uniqueThreads.map(thread => {
               return (
                 <ErrorBoundary fallbackComponent={null} key={thread.id}>
-                  <InboxThread
-                    data={thread}
-                    viewContext={viewContext}
-                    hasActiveCommunity={
-                      viewContext === 'community' && this.props.data.community
-                    }
-                    hasActiveChannel={
-                      viewContext === 'channel' && this.props.data.channel
-                    }
-                  />
+                  <InboxThread data={thread} viewContext={viewContext} />
                 </ErrorBoundary>
               );
             })}

src/components/threadLikes/index.js

@@ -17,6 +17,7 @@ type LikeButtonProps = {
   addThreadReaction: Function,
   removeThreadReaction: Function,
   currentUser: ?Object,
+  tipLocation?: string,
   dispatch: Dispatch<Object>,
 };
 
@@ -45,15 +46,15 @@ class LikeButtonPure extends React.Component<LikeButtonProps> {
   };
 
   render() {
-    const { thread } = this.props;
+    const { thread, tipLocation = 'bottom-left' } = this.props;
     const { hasReacted, count } = thread.reactions;
 
     return (
       <LikeButtonWrapper hasReacted={hasReacted}>
         <IconButton
-          glyph={hasReacted ? 'thumbsup-fill' : 'thumbsup'}
+          glyph={'thumbsup'}
           tipText={hasReacted ? 'Unlike thread' : 'Like thread'}
-          tipLocation={'bottom-left'}
+          tipLocation={tipLocation}
           onClick={this.handleClick}
         />
         <CurrentCount>{count}</CurrentCount>
@@ -80,20 +81,15 @@ type LikeCountProps = {
 export const LikeCount = (props: LikeCountProps) => {
   const { active, thread } = props;
   const { count } = thread.reactions;
-
-  if (count > 0) {
-    return (
-      <LikeCountWrapper active={active}>
-        <Icon
-          glyph={'thumbsup-fill'}
-          size={24}
-          tipText={`${count} likes`}
-          tipLocation={'top-right'}
-        />
-        <CurrentCount>{count}</CurrentCount>
-      </LikeCountWrapper>
-    );
-  } else {
-    return null;
-  }
+  return (
+    <LikeCountWrapper active={active}>
+      <Icon
+        glyph={'thumbsup'}
+        size={24}
+        tipText={`${count} likes`}
+        tipLocation={'top-right'}
+      />
+      <CurrentCount>{count || '0'}</CurrentCount>
+    </LikeCountWrapper>
+  );
 };

src/components/threadLikes/style.js

@@ -16,6 +16,7 @@ export const LikeButtonWrapper = styled(LikeWrapper)`
   display: flex;
   justify-content: center;
   align-items: center;
+
   > button {
     color: ${props =>
       props.hasReacted ? props.theme.brand.alt : props.theme.text.alt};
@@ -30,14 +31,19 @@ export const LikeButtonWrapper = styled(LikeWrapper)`
 
   ${CurrentCount} {
     margin-right: 8px;
-    font-weight: 500;
-    color: ${props =>
-      props.hasReacted ? props.theme.text.default : props.theme.text.alt};
+    margin-left: 4px;
+    font-weight: 600;
+    color: ${props => props.theme.text.alt};
   }
 `;
 
 export const LikeCountWrapper = styled(LikeWrapper)`
-  margin-right: 8px;
+  margin-right: 12px;
   color: ${props =>
     props.active ? props.theme.text.reverse : props.theme.text.alt};
+
+  span {
+    margin-left: 4px;
+    font-weight: 600;
+  }
 `;

src/views/channel/components/search.js

@@ -73,7 +73,7 @@ class Search extends React.Component<Props, State> {
           sendStringToServer && (
             <SearchThreadFeed
               search
-              viewContext="channel"
+              viewContext="channelProfile"
               channelId={channel.id}
               queryString={sendStringToServer}
               filter={{ channelId: channel.id }}

src/views/channel/index.js

@@ -434,7 +434,7 @@ class ChannelView extends React.Component<Props, State> {
               {// thread list
               selectedView === 'threads' && (
                 <ThreadFeedWithData
-                  viewContext="channel"
+                  viewContext="channelProfile"
                   id={channel.id}
                   currentUser={isLoggedIn}
                   channelId={channel.id}

src/views/channel/style.js

@@ -48,7 +48,7 @@ export const Meta = styled(Column)`
 
   @media (max-width: 768px) {
     > ${FullProfile} {
-      margin-top: 8px;
+      margin-top: 0;
       margin-bottom: 8px;
     }
 
@@ -89,7 +89,7 @@ export const Meta = styled(Column)`
   }
 
   @media (max-width: 768px) {
-    padding: 0 32px;
+    padding: 0 16px;
 
     > div {
       margin-left: 0;

src/views/community/components/search.js

@@ -71,7 +71,7 @@ class Search extends React.Component<Props, State> {
           sendStringToServer && (
             <SearchThreadFeed
               search
-              viewContext="community"
+              viewContext="communityProfile"
               communityId={community.id}
               queryString={sendStringToServer}
               filter={{ communityId: community.id }}

src/views/community/index.js

@@ -372,7 +372,7 @@ class CommunityView extends React.Component<Props, State> {
               {// thread list
               selectedView === 'threads' && (
                 <CommunityThreadFeed
-                  viewContext="community"
+                  viewContext="communityProfile"
                   slug={communitySlug}
                   id={community.id}
                   currentUser={isLoggedIn}

src/views/community/style.js

@@ -158,7 +158,7 @@ export const Meta = styled(Column)`
   }
 
   @media (max-width: 768px) {
-    padding: 0 32px;
+    padding: 0 16px;
 
     > div {
       margin-left: 0;