From a31178318a2e69df59247ea0342218202e3e2ca2 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 3 Jan 2020 11:36:15 -0500
Subject: [PATCH] fix channel page style

---
 ui/component/channelAbout/view.jsx      |   2 +-
 ui/component/channelDiscussion/view.jsx |   2 +-
 ui/page/channel/view.jsx                | 194 ++++++++++++------------
 ui/scss/component/_channel.scss         |   5 +-
 ui/scss/component/tabs.scss             |   5 +-
 5 files changed, 102 insertions(+), 106 deletions(-)

diff --git a/ui/component/channelAbout/view.jsx b/ui/component/channelAbout/view.jsx
index a73eec2db..b8f2cc07c 100644
--- a/ui/component/channelAbout/view.jsx
+++ b/ui/component/channelAbout/view.jsx
@@ -22,7 +22,7 @@ function ChannelContent(props: Props) {
   const showAbout = description || email || website;
 
   return (
-    <section className="card--section">
+    <section className="section">
       {!showAbout && <h2 className="main--empty empty">{__('Nothing here yet')}</h2>}
       {showAbout && (
         <Fragment>
diff --git a/ui/component/channelDiscussion/view.jsx b/ui/component/channelDiscussion/view.jsx
index 6db8ec2f7..0613f88db 100644
--- a/ui/component/channelDiscussion/view.jsx
+++ b/ui/component/channelDiscussion/view.jsx
@@ -10,7 +10,7 @@ type Props = {
 function ChannelDiscussion(props: Props) {
   const uri = props.uri;
   return (
-    <div className="card--section">
+    <div className="">
       <section className="section">
         <CommentCreate uri={uri} />
       </section>
diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index 08dea0382..e1eb73c83 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -165,110 +165,104 @@ function ChannelPage(props: Props) {
     <Page>
       <ClaimUri uri={uri} />
 
-      <div className="card">
-        <header className="channel-cover">
-          <div className="channel__quick-actions">
-            {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
-            {!channelIsMine && (
-              <Button
-                button="alt"
-                icon={ICONS.TIP}
-                label={__('Tip')}
-                title={__('Send a tip to this creator')}
-                onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
-              />
-            )}
-            {(channelIsMine || (!channelIsMine && supportOption)) && (
-              <Button
-                button="alt"
-                icon={ICONS.SUPPORT}
-                label={__('Support')}
-                title={__('Support this creator')}
-                onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
-              />
-            )}
-            {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
-            {!isSubscribed && <BlockButton uri={permanentUrl} />}
-          </div>
-          {!editing && cover && (
-            <img
-              className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
-              src={cover}
+      <header className="channel-cover">
+        <div className="channel__quick-actions">
+          {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
+          {!channelIsMine && (
+            <Button
+              button="alt"
+              icon={ICONS.TIP}
+              label={__('Tip')}
+              title={__('Send a tip to this creator')}
+              onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
             />
           )}
-          {editing && <img className="channel-cover__custom" src={coverPreview} />}
-          {/* component that offers select/upload */}
-          <div className="channel__primary-info">
-            {!editing && (
-              <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
-            )}
-            {editing && (
-              <ChannelThumbnail
-                className="channel__thumbnail--channel-page"
-                uri={uri}
-                thumbnailPreview={thumbPreview}
-              />
-            )}
-            <h1 className="channel__title">{title || '@' + channelName}</h1>
-            {channelIsMine && !editing && (
-              <Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} />
-            )}
-            <div className="channel__meta">
-              <span>
-                {subCount} {subCount !== 1 ? __('Followers') : __('Follower')}
-                <HelpLink href="https://lbry.com/faq/views" />
-              </span>
-            </div>
+          {(channelIsMine || (!channelIsMine && supportOption)) && (
+            <Button
+              button="alt"
+              icon={ICONS.SUPPORT}
+              label={__('Support')}
+              title={__('Support this creator')}
+              onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
+            />
+          )}
+          {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
+          {!isSubscribed && <BlockButton uri={permanentUrl} />}
+        </div>
+        {!editing && cover && (
+          <img
+            className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
+            src={cover}
+          />
+        )}
+        {editing && <img className="channel-cover__custom" src={coverPreview} />}
+        {/* component that offers select/upload */}
+        <div className="channel__primary-info">
+          {!editing && (
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
+          )}
+          {editing && (
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} thumbnailPreview={thumbPreview} />
+          )}
+          <h1 className="channel__title">{title || '@' + channelName}</h1>
+          {channelIsMine && !editing && (
+            <Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} />
+          )}
+          <div className="channel__meta">
+            <span>
+              {subCount} {subCount !== 1 ? __('Followers') : __('Follower')}
+              <HelpLink href="https://lbry.com/faq/views" />
+            </span>
           </div>
-        </header>
-        <Tabs onChange={onTabChange} index={tabIndex}>
-          <TabList className="tabs__list--channel-page">
-            <Tab disabled={editing}>{__('Content')}</Tab>
-            <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
-            <Tab disabled={editing}>{__('Comments')}</Tab>
-            {/* only render searchbar on content page (tab index 0 === content page) */}
-            {tabIndex === 0 ? (
-              <Form onSubmit={handleSearch} className="wunderbar--inline">
-                <Icon icon={ICONS.SEARCH} />
-                <FormField
-                  className="wunderbar__input"
-                  value={searchQuery}
-                  onChange={handleInputChange}
-                  type="text"
-                  placeholder={__('Search')}
-                />
-              </Form>
-            ) : (
-              <div />
-            )}
-          </TabList>
+        </div>
+      </header>
+      <Tabs onChange={onTabChange} index={tabIndex}>
+        <TabList className="tabs__list--channel-page">
+          <Tab disabled={editing}>{__('Content')}</Tab>
+          <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
+          <Tab disabled={editing}>{__('Comments')}</Tab>
+          {/* only render searchbar on content page (tab index 0 === content page) */}
+          {tabIndex === 0 ? (
+            <Form onSubmit={handleSearch} className="wunderbar--inline">
+              <Icon icon={ICONS.SEARCH} />
+              <FormField
+                className="wunderbar__input"
+                value={searchQuery}
+                onChange={handleInputChange}
+                type="text"
+                placeholder={__('Search')}
+              />
+            </Form>
+          ) : (
+            <div />
+          )}
+        </TabList>
 
-          <TabPanels>
-            <TabPanel>
-              {searchResults ? (
-                searchResults.map(url => <ClaimPreview key={url} uri={url} />)
-              ) : (
-                <ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
-              )}
-            </TabPanel>
-            <TabPanel>
-              {editing ? (
-                <ChannelEdit
-                  uri={uri}
-                  setEditing={setEditing}
-                  updateThumb={v => setThumbPreview(v)}
-                  updateCover={v => setCoverPreview(v)}
-                />
-              ) : (
-                <ChannelAbout uri={uri} />
-              )}
-            </TabPanel>
-            <TabPanel>
-              <ChannelDiscussion uri={uri} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </div>
+        <TabPanels>
+          <TabPanel>
+            {searchResults ? (
+              searchResults.map(url => <ClaimPreview key={url} uri={url} />)
+            ) : (
+              <ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
+            )}
+          </TabPanel>
+          <TabPanel>
+            {editing ? (
+              <ChannelEdit
+                uri={uri}
+                setEditing={setEditing}
+                updateThumb={v => setThumbPreview(v)}
+                updateCover={v => setCoverPreview(v)}
+              />
+            ) : (
+              <ChannelAbout uri={uri} />
+            )}
+          </TabPanel>
+          <TabPanel>
+            <ChannelDiscussion uri={uri} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </Page>
   );
 }
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 1c004135f..086935fce 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -8,8 +8,6 @@ $metadata-z-index: 1;
   align-items: flex-end;
   box-sizing: content-box;
   color: #fff;
-  border-top-left-radius: var(--card-radius);
-  border-top-right-radius: var(--card-radius);
 
   .button {
     color: #fff;
@@ -28,6 +26,8 @@ $metadata-z-index: 1;
 .channel-cover__custom {
   height: var(--cover-photo-height);
   width: 100%;
+  border-top-left-radius: var(--card-radius);
+  border-top-right-radius: var(--card-radius);
 }
 
 .channel-thumbnail {
@@ -47,7 +47,6 @@ $metadata-z-index: 1;
   position: absolute;
   height: var(--channel-thumbnail-width);
   width: var(--channel-thumbnail-width);
-  box-shadow: 0px 8px 40px -3px #000;
   left: var(--spacing-medium);
   top: 4rem;
 
diff --git a/ui/scss/component/tabs.scss b/ui/scss/component/tabs.scss
index 61f17dc8a..c6bfcf28f 100644
--- a/ui/scss/component/tabs.scss
+++ b/ui/scss/component/tabs.scss
@@ -17,7 +17,10 @@
 .tabs__list--channel-page {
   padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
   padding-right: var(--spacing-medium);
+  margin-bottom: var(--spacing-large);
   height: 4rem;
+  border-bottom-left-radius: var(--card-radius);
+  border-bottom-right-radius: var(--card-radius);
 
   @media (max-width: $breakpoint-small) {
     padding-left: var(--spacing-medium);
@@ -47,7 +50,7 @@
 
 .tab__divider {
   position: absolute;
-  margin-top: calc(var(--tab-indicator-size) * -1);
+  margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
 }
 
 .tab::after,