improve mobile style and initial blocked screen loading

static/app-strings.json

@@ -1589,5 +1589,9 @@
   "Interacting as %channelName%": "Interacting as %channelName%",
   "Page Not Found": "Page Not Found",
   "Transaction limit reached. Try reducing the Description length.": "Transaction limit reached. Try reducing the Description length.",
+  "You do not have any muted channels": "You do not have any muted channels",
+  "You do not have any blocked channels": "You do not have any blocked channels",
+  "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.": "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.",
+  "Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.": "Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.",
   "--end--": "--end--"
 }

ui/component/fileAuthor/view.jsx

@@ -10,7 +10,7 @@ function FileAuthor(props: Props) {
   const { channelUri } = props;
 
   return channelUri ? (
-    <ClaimPreview uri={channelUri} type="inline" properties={false} />
+    <ClaimPreview uri={channelUri} type="inline" properties={false} hideMenu />
   ) : (
     <div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
   );

ui/component/header/view.jsx

@@ -176,7 +176,7 @@ const Header = (props: Props) => {
           : __('Your Wallet')
       }
       navigate={`/$/${PAGES.WALLET}`}
-      className={balanceButtonProps.className}
+      className={classnames(balanceButtonProps.className, 'header__navigation-item--balance')}
       label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
       icon={ICONS.LBC}
       // @if TARGET='app'
@@ -212,7 +212,7 @@ const Header = (props: Props) => {
             />
             {backTitle && <h1 className="header__auth-title">{isMobile ? simpleBackTitle || backTitle : backTitle}</h1>}
             {authenticated || !IS_WEB ? (
-              <BalanceButton className="header__navigation-item menu__title header__navigation-item--balance" />
+              <BalanceButton className="header__navigation-item menu__title" />
             ) : (
               loginButtons
             )}
@@ -275,10 +275,6 @@ const Header = (props: Props) => {
                     history={history}
                     handleThemeToggle={handleThemeToggle}
                     currentTheme={currentTheme}
-                    activeChannelUrl={activeChannelUrl}
-                    openSignOutModal={openSignOutModal}
-                    email={email}
-                    signOut={signOut}
                   />
                 </div>
               )}
@@ -287,10 +283,77 @@ const Header = (props: Props) => {
             {!authHeader && !backout ? (
               <div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
                 {(!IS_WEB || authenticated) && (
-                  <BalanceButton className="header__navigation-item menu__title header__navigation-item--balance mobile-hidden" />
+                  <BalanceButton className="header__navigation-item menu__title mobile-hidden" />
                 )}
 
                 {IS_WEB && !authenticated && loginButtons}
+
+                {(authenticated || !IS_WEB) && (
+                  <Menu>
+                    <MenuButton
+                      aria-label={__('Your account')}
+                      title={__('Your account')}
+                      className={classnames('header__navigation-item', {
+                        'menu__title header__navigation-item--icon': !activeChannelUrl,
+                        'header__navigation-item--profile-pic': activeChannelUrl,
+                      })}
+                      // @if TARGET='app'
+                      onDoubleClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      // @endif
+                    >
+                      {activeChannelUrl ? (
+                        <ChannelThumbnail uri={activeChannelUrl} />
+                      ) : (
+                        <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
+                      )}
+                    </MenuButton>
+                    <MenuList className="menu__list--header">
+                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOADS}`)}>
+                        <Icon aria-hidden icon={ICONS.PUBLISH} />
+                        {__('Uploads')}
+                      </MenuItem>
+                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
+                        <Icon aria-hidden icon={ICONS.CHANNEL} />
+                        {__('Channels')}
+                      </MenuItem>
+                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
+                        <Icon aria-hidden icon={ICONS.ANALYTICS} />
+                        {__('Creator Analytics')}
+                      </MenuItem>
+                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
+                        <Icon aria-hidden icon={ICONS.REWARDS} />
+                        {__('Rewards')}
+                      </MenuItem>
+                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
+                        <Icon aria-hidden icon={ICONS.INVITE} />
+                        {__('Invites')}
+                      </MenuItem>
+
+                      {authenticated ? (
+                        <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
+                          <div className="menu__link">
+                            <Icon aria-hidden icon={ICONS.SIGN_OUT} />
+                            {__('Sign Out')}
+                          </div>
+                          <span className="menu__link-help">{email}</span>
+                        </MenuItem>
+                      ) : !IS_WEB ? (
+                        <>
+                          <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
+                            <Icon aria-hidden icon={ICONS.SIGN_UP} />
+                            {__('Sign Up')}
+                          </MenuItem>
+                          <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
+                            <Icon aria-hidden icon={ICONS.SIGN_IN} />
+                            {__('Sign In')}
+                          </MenuItem>
+                        </>
+                      ) : null}
+                    </MenuList>
+                  </Menu>
+                )}
               </div>
             ) : (
               !isVerifyPage &&
@@ -328,24 +391,10 @@ type HeaderMenuButtonProps = {
   history: { push: (string) => void },
   handleThemeToggle: (string) => void,
   currentTheme: string,
-  activeChannelUrl: ?string,
-  openSignOutModal: () => void,
-  email: ?string,
-  signOut: () => void,
 };
 
 function HeaderMenuButtons(props: HeaderMenuButtonProps) {
-  const {
+  const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme } = props;
-    authenticated,
-    notificationsEnabled,
-    history,
-    handleThemeToggle,
-    currentTheme,
-    activeChannelUrl,
-    openSignOutModal,
-    email,
-    signOut,
-  } = props;
 
   return (
     <div className="header__buttons">
@@ -407,73 +456,6 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
           </MenuItem>
         </MenuList>
       </Menu>
-
-      {(authenticated || !IS_WEB) && (
-        <Menu>
-          <MenuButton
-            aria-label={__('Your account')}
-            title={__('Your account')}
-            className={classnames('header__navigation-item mobile-hidden', {
-              'menu__title header__navigation-item--icon': !activeChannelUrl,
-              'header__navigation-item--profile-pic': activeChannelUrl,
-            })}
-            // @if TARGET='app'
-            onDoubleClick={(e) => {
-              e.stopPropagation();
-            }}
-            // @endif
-          >
-            {activeChannelUrl ? (
-              <ChannelThumbnail uri={activeChannelUrl} />
-            ) : (
-              <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
-            )}
-          </MenuButton>
-          <MenuList className="menu__list--header">
-            <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOADS}`)}>
-              <Icon aria-hidden icon={ICONS.PUBLISH} />
-              {__('Uploads')}
-            </MenuItem>
-            <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
-              <Icon aria-hidden icon={ICONS.CHANNEL} />
-              {__('Channels')}
-            </MenuItem>
-            <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
-              <Icon aria-hidden icon={ICONS.ANALYTICS} />
-              {__('Creator Analytics')}
-            </MenuItem>
-            <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
-              <Icon aria-hidden icon={ICONS.REWARDS} />
-              {__('Rewards')}
-            </MenuItem>
-            <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
-              <Icon aria-hidden icon={ICONS.INVITE} />
-              {__('Invites')}
-            </MenuItem>
-
-            {authenticated ? (
-              <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
-                <div className="menu__link">
-                  <Icon aria-hidden icon={ICONS.SIGN_OUT} />
-                  {__('Sign Out')}
-                </div>
-                <span className="menu__link-help">{email}</span>
-              </MenuItem>
-            ) : !IS_WEB ? (
-              <>
-                <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
-                  <Icon aria-hidden icon={ICONS.SIGN_UP} />
-                  {__('Sign Up')}
-                </MenuItem>
-                <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
-                  <Icon aria-hidden icon={ICONS.SIGN_IN} />
-                  {__('Sign In')}
-                </MenuItem>
-              </>
-            ) : null}
-          </MenuList>
-        </Menu>
-      )}
     </div>
   );
 }

ui/component/recommendedContent/view.jsx

@@ -58,6 +58,7 @@ export default function RecommendedContent(props: Props) {
           type="small"
           loading={isSearching}
           uris={recommendedContent}
+          hideMenu={isMobile}
           injectedItem={
             SHOW_ADS && IS_WEB ? (
               SIMPLE_SITE ? (

ui/page/listBlocked/view.jsx

@@ -6,10 +6,10 @@ import ClaimList from 'component/claimList';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
 import Button from 'component/button';
-import usePrevious from 'effects/use-previous';
 import usePersistedState from 'effects/use-persisted-state';
 import ChannelBlockButton from 'component/channelBlockButton';
 import ChannelMuteButton from 'component/channelMuteButton';
+import Yrbl from 'component/yrbl';
 
 type Props = {
   mutedUris: ?Array<string>,
@@ -22,27 +22,19 @@ const VIEW_MUTED = 'muted';
 
 function ListBlocked(props: Props) {
   const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
-
   const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
-  const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
 
   // Keep a local list to allow for undoing actions in this component
   const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
   const [localMutedList, setLocalMutedList] = React.useState(undefined);
 
-  const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
   const hasLocalMuteList = localMutedList && localMutedList.length > 0;
   const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
   const stringifiedMutedChannels = JSON.stringify(mutedUris);
   const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
   const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
   const stringifiedBlockedChannels = JSON.stringify(blockedUris);
-
+  const showUris = (viewMode === VIEW_MUTED && hasLocalMuteList) || (viewMode === VIEW_BLOCKED && hasLocalBlockList);
-  React.useEffect(() => {
-    if (previousFetchingModBlockList && !fetchingModerationBlockList) {
-      setLoading(false);
-    }
-  }, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
 
   React.useEffect(() => {
     const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
@@ -70,15 +62,22 @@ function ListBlocked(props: Props) {
     }
   }, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);
 
+  const mutedHelpText = __(
+    'Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.'
+  );
+  const blockedHelpText = __(
+    "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content."
+  );
+
   return (
     <Page>
-      {loading && (
+      {fetchingModerationBlockList && (
         <div className="main--empty">
           <Spinner />
         </div>
       )}
 
-      {!loading && (
+      {!fetchingModerationBlockList && (
         <>
           <div className="section__header--actions">
             <div className="section__actions--inline">
@@ -102,38 +101,50 @@ function ListBlocked(props: Props) {
               />
             </div>
           </div>
-          <div className="help--notice">
+
-            {viewMode === VIEW_MUTED
+          {showUris && <div className="help--notice">{viewMode === VIEW_MUTED ? mutedHelpText : blockedHelpText}</div>}
-              ? __(
+
-                  'Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.'
+          {showUris ? (
-                )
+            <ClaimList
-              : __(
+              uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
-                  "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content."
+              showUnresolvedClaims
-                )}
+              showHiddenByUser
-          </div>
+              hideMenu
-          <ClaimList
+              renderActions={(claim) => {
-            uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
+                return (
-            showUnresolvedClaims
+                  <div className="section__actions">
-            showHiddenByUser
+                    {viewMode === VIEW_MUTED ? (
-            hideMenu
+                      <>
-            renderActions={(claim) => {
+                        <ChannelMuteButton uri={claim.permanent_url} />
-              return (
+                        <ChannelBlockButton uri={claim.permanent_url} />
-                <div className="section__actions">
+                      </>
-                  {viewMode === VIEW_MUTED ? (
+                    ) : (
-                    <>
+                      <>
-                      <ChannelMuteButton uri={claim.permanent_url} />
+                        <ChannelBlockButton uri={claim.permanent_url} />
-                      <ChannelBlockButton uri={claim.permanent_url} />
+                        <ChannelMuteButton uri={claim.permanent_url} />
-                    </>
+                      </>
-                  ) : (
+                    )}
-                    <>
+                  </div>
-                      <ChannelBlockButton uri={claim.permanent_url} />
+                );
-                      <ChannelMuteButton uri={claim.permanent_url} />
+              }}
-                    </>
+            />
-                  )}
+          ) : (
-                </div>
+            <div className="main--empty">
-              );
+              <Yrbl
-            }}
+                title={
-          />
+                  viewMode === VIEW_MUTED
+                    ? __('You do not have any muted channels')
+                    : __('You do not have any blocked channels')
+                }
+                subtitle={viewMode === VIEW_MUTED ? mutedHelpText : blockedHelpText}
+                actions={
+                  <div className="section__actions">
+                    <Button button="primary" label={__('Go Home')} navigate="/" />
+                  </div>
+                }
+              />
+            </div>
+          )}
         </>
       )}
     </Page>

ui/redux/actions/comments.js

@@ -561,9 +561,12 @@ export function doFetchModBlockedList() {
         dispatch({
           type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,
           data: {
-            blockList: globalBlockList
+            blockList:
-              .sort((a, b) => new Date(a.blockedAt) - new Date(b.blockedAt))
+              globalBlockList.length > 0
-              .map((blockedChannel) => blockedChannel.channelUri),
+                ? globalBlockList
+                    .sort((a, b) => new Date(a.blockedAt) - new Date(b.blockedAt))
+                    .map((blockedChannel) => blockedChannel.channelUri)
+                : null,
           },
         });
       })

ui/scss/component/_claim-list.scss

@@ -456,9 +456,8 @@
 
 .claim-tile__title {
   position: relative;
-
   padding: var(--spacing-s);
-  padding-right: var(--spacing-m);
+  padding-right: var(--spacing-l);
   padding-bottom: 0;
   margin-bottom: var(--spacing-s);
 
@@ -474,6 +473,7 @@
 
   @media (min-width: $breakpoint-small) {
     min-height: 2.5rem;
+    padding-right: var(--spacing-m);
   }
 }
 
@@ -601,8 +601,10 @@
     stroke: var(--color-text);
   }
 
-  &:not([aria-expanded='true']) {
+  @media (min-width: $breakpoint-small) {
-    display: none;
+    &:not([aria-expanded='true']) {
+      display: none;
+    }
   }
 }
 

ui/scss/component/_header.scss

@@ -101,35 +101,27 @@
 }
 
 .header__navigation-item--profile-pic {
+  margin-left: var(--spacing-m);
+
   .channel-thumbnail {
     height: var(--height-button);
     width: var(--height-button);
     margin-right: 0;
-    transition: border-radius var(--animation-duration);
-    border-radius: calc(var(--height-button) / 2);
-
-    img {
-      transition: border-radius var(--animation-duration);
-      border-radius: calc(var(--height-button) / 2);
-    }
   }
 
   &:hover {
     opacity: 0.7;
-
-    .channel-thumbnail {
-      border-radius: var(--border-radius);
-
-      img {
-        border-radius: var(--border-radius);
-      }
-    }
   }
 }
 
 .header__navigation-item--balance {
-  @extend .button--link;
+  @extend .button--file-action;
-  margin-left: var(--spacing-m);
+  margin: 0 var(--spacing-s);
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-text);
+  }
 }
 
 .header__navigation-item--forward {

ui/scss/init/_color.scss

@@ -49,7 +49,7 @@
   --color-input-color: #111111;
   --color-input-label: var(--color-gray-5);
   --color-input-placeholder: #212529;
-  --color-input-bg: #f4f4f4;
+  --color-input-bg: var(--color-gray-1);
   --color-input-bg-copyable: #434b53;
   --color-input-border: var(--color-border);
   --color-input-border-active: var(--color-secondary);