Polish

src/components/badges/style.js

@@ -9,7 +9,7 @@ export const Span = styled.span`
   background-color: ${theme.text.alt};
   text-transform: uppercase;
   padding: 3px 4px;
-  margin-left: 4px;
+  margin-right: 4px;
   font-size: 9px;
   font-weight: 800;
   border-radius: 4px;

src/components/message/style.js

@@ -16,16 +16,12 @@ export const Byline = styled.span`
   max-width: 100%;
   position: relative;
   flex-wrap: wrap;
+  align-items: center;
 
   a {
     display: flex;
     flex-wrap: wrap;
   }
-
-  @media (max-width: 400px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
 `;
 
 export const Name = styled.span`
@@ -405,6 +401,7 @@ export const QuoteWrapper = styled.div`
 
 export const BadgesContainer = styled.div`
   display: flex;
+  margin-left: 4px;
 
   @media (max-width: 400px) {
     margin-top: 4px;

src/components/rich-text-editor/style.js

@@ -13,10 +13,11 @@ const UsernameWrapper = styled.span`
     props.me ? props.theme.special.default : props.theme.space.default};
   background: ${props =>
     props.me ? props.theme.special.wash : props.theme.space.wash};
-  padding: 2px 4px;
+  padding: 0px 4px 1px;
   border-radius: 4px;
   position: relative;
   display: inline-block;
+  line-height: 1.4;
 
   &:hover {
     text-decoration: underline;

src/index.js

@@ -1,6 +1,4 @@
 // @flow
-// This needs to be imported before everything else
-import './helpers/consolidate-streamed-styles';
 import 'css.escape';
 import React from 'react';
 import ReactDOM from 'react-dom';

src/views/dashboard/components/inboxThread/header/threadHeader.js

@@ -36,35 +36,37 @@ class Header extends React.Component<HeaderProps> {
             {author.user.username ? (
               <UserHoverProfile username={author.user.username}>
                 <MetaTitle
-                  active={active}
+                  active={active ? 'true' : undefined}
                   to={`/users/${author.user.username}`}
                 >
                   {author.user.name}
                 </MetaTitle>
               </UserHoverProfile>
             ) : (
-              <MetaTitleText active={active}>{author.user.name}</MetaTitleText>
+              <MetaTitleText active={active ? 'true' : undefined}>
+                {author.user.name}
+              </MetaTitleText>
             )}
 
             <Divider>·</Divider>
             <Timestamp {...this.props} />
 
             {watercooler && (
-              <MetaSubtitleWatercooler active={active}>
+              <MetaSubtitleWatercooler active={active ? 'true' : undefined}>
                 <Divider>·</Divider>
                 Watercooler
               </MetaSubtitleWatercooler>
             )}
 
             {isLocked && (
-              <MetaSubtitleLocked active={active}>
+              <MetaSubtitleLocked active={active ? 'true' : undefined}>
                 <Divider>·</Divider>
                 Locked
               </MetaSubtitleLocked>
             )}
 
             {isPinned && (
-              <MetaSubtitlePinned active={active}>
+              <MetaSubtitlePinned active={active ? 'true' : undefined}>
                 <Divider>·</Divider>
                 Pinned
               </MetaSubtitlePinned>
@@ -77,7 +79,10 @@ class Header extends React.Component<HeaderProps> {
               viewContext !== 'communityProfile' &&
               viewContext !== 'communityInbox' && (
                 <CommunityHoverProfile id={community.id}>
-                  <MetaSubtitle active={active} to={`/${community.slug}`}>
+                  <MetaSubtitle
+                    active={active ? 'true' : undefined}
+                    to={`/${community.slug}`}
+                  >
                     {community.name}
                     <Divider>·</Divider>
                   </MetaSubtitle>
@@ -88,7 +93,7 @@ class Header extends React.Component<HeaderProps> {
               viewContext !== 'channelInbox' && (
                 <ChannelHoverProfile id={channel.id}>
                   <MetaSubtitle
-                    active={active}
+                    active={active ? 'true' : undefined}
                     to={`/${community.slug}/${channel.slug}`}
                   >
                     {channel.name}

src/views/navbar/index.js

@@ -164,7 +164,7 @@ class Navbar extends React.Component<Props, State> {
             to="/"
             aria-hidden
             tabIndex="-1"
-            isHidden={this.state.isSkipLinkFocused}
+            ishidden={this.state.isSkipLinkFocused || undefined}
             onClick={() => this.trackNavigationClick('logo')}
             data-cy="navbar-logo"
           >
@@ -257,7 +257,7 @@ class Navbar extends React.Component<Props, State> {
             to="/"
             aria-hidden
             tabIndex="-1"
-            isHidden={this.state.isSkipLinkFocused}
+            ishidden={this.state.isSkipLinkFocused || undefined}
             data-cy="navbar-logo"
           >
             <Icon glyph="logo" size={28} />

src/views/navbar/style.js

@@ -229,7 +229,7 @@ export const Logo = styled(Tab)`
   }
 
   ${props =>
-    props.isHidden &&
+    props.ishidden &&
     css`
       display: none;
     `};

src/views/notifications/components/browserNotificationRequest.js

@@ -9,7 +9,7 @@ const FirstRequest = ({ onSubscribe, onDismiss, loading }) => (
       <span role="img" aria-label="mailbox emoji">
         📬
       </span>{' '}
-      We need your permission to enable push notifications:
+      Enable push notifications
     </p>
     <FlexRow>
       <Button

src/views/notifications/components/newMessageNotification.js

@@ -33,7 +33,7 @@ export const NewMessageNotification = ({
   notification,
   currentUser,
 }: Props) => {
-  const actors = parseActors(notification.actors, currentUser, false);
+  const actors = parseActors(notification.actors, currentUser, true);
   const event = parseEvent(notification.event);
   const date = parseNotificationDate(notification.modifiedAt);
   const context = parseContext(notification.context, currentUser);

src/views/notifications/style.js

@@ -1,6 +1,5 @@
 // @flow
 import theme from 'shared/theme';
-// $FlowFixMe
 import styled from 'styled-components';
 import {
   FlexRow,
@@ -20,18 +19,28 @@ export const HzRule = styled(HorizontalRule)`
   margin: 0;
 `;
 
-export const NotificationCard = styled(Card)`
+export const NotificationCard = styled.div`
   padding: 16px;
   padding-bottom: 24px;
   overflow: hidden;
   transition: ${Transition.hover.off};
   border-radius: 8px;
+  background: ${props => props.theme.bg.default};
+  margin-top: 8px;
   box-shadow: ${Shadow.low} ${({ theme }) => hexa(theme.text.default, 0.1)};
+  position: relative;
 
   &:hover {
     transition: none;
     box-shadow: ${Shadow.high} ${({ theme }) => hexa(theme.text.default, 0.1)};
   }
+
+  @media (max-width: 768px) {
+    border-radius: 0;
+    border-bottom: 1px solid ${props => props.theme.bg.border};
+    box-shadow: none;
+    margin-top: 0;
+  }
 `;
 
 export const SegmentedNotificationCard = styled(Card)`
@@ -265,18 +274,27 @@ export const AttachmentsWash = styled(FlexCol)`
   flex: none;
 `;
 
-export const RequestCard = styled(Card)`
+export const RequestCard = styled.div`
+  display: flex;
+  position: relative;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 16px 16px 16px 24px;
   border-radius: 8px;
   box-shadow: ${Shadow.low} ${({ theme }) => hexa(theme.text.default, 0.1)};
+  background: ${props => props.theme.bg.default};
 
   > p {
     font-weight: 700;
     font-size: 16px;
   }
+
+  @media (max-width: 768px) {
+    border-radius: 0;
+    border-bottom: 1px solid ${props => props.theme.bg.border};
+    box-shadow: none;
+  }
 `;
 
 export const CloseRequest = styled(IconButton)`

src/views/thread/style.js

@@ -304,10 +304,7 @@ export const AuthorUsername = styled.span`
   align-items: center;
   font-weight: 400;
   margin-right: 4px;
-
-  @media (max-width: 768px) {
-    font-size: 12px;
-  }
+  align-self: flex-end;
 `;
 
 export const ReputationRow = styled.div``;
@@ -488,6 +485,7 @@ export const ThreadSubtitle = styled(CommunityHeaderSubtitle)`
   margin-top: 8px;
   display: flex;
   line-height: 1.5;
+  flex-wrap: wrap;
 
   a:hover {
     color: ${theme.text.default};
@@ -621,6 +619,7 @@ export const FollowButton = styled(Button)`
   border: 1px solid ${theme.bg.border};
   color: ${theme.text.alt};
   padding: 4px;
+  margin-left: 24px;
 
   &:hover {
     background: ${theme.bg.default};