link style cleanup + tile mode on channels

ui/component/channelContent/index.js

@@ -28,6 +28,7 @@ const select = (state, props) => {
     claim: props.uri && makeSelectClaimForUri(props.uri)(state),
     isAuthenticated: selectUserVerifiedEmail(state),
     showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
+    tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
   };
 };
 

ui/component/channelContent/view.jsx

@@ -29,6 +29,7 @@ type Props = {
   claim: ?Claim,
   isAuthenticated: boolean,
   showMature: boolean,
+  tileLayout: boolean,
 };
 
 function ChannelContent(props: Props) {
@@ -43,6 +44,7 @@ function ChannelContent(props: Props) {
     defaultPageSize = CS.PAGE_SIZE,
     defaultInfiniteScroll = true,
     showMature,
+    tileLayout,
   } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -122,6 +124,7 @@ function ChannelContent(props: Props) {
 
       {claim && claimsInChannel > 0 ? (
         <ClaimListDiscover
+          tileLayout={tileLayout}
           uris={searchResults}
           channelIds={[claim.claim_id]}
           defaultOrderBy={CS.ORDER_BY_NEW}

ui/scss/component/_claim-list.scss

@@ -302,25 +302,38 @@
 }
 
 .claim-grid__header {
-  @extend .button--link;
+  margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
   display: inline-block;
 
+  .button {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
   .icon__wrapper {
-    height: 1.5rem;
-    width: 1.5rem;
+    width: 0.5rem;
+    height: 0.5rem;
     background-color: var(--color-primary-alt);
     margin-right: var(--spacing-m);
 
     .icon {
       stroke: var(--color-primary);
     }
+
+    @media (min-width: $breakpoint-small) {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+
+  @media (min-width: $breakpoint-small) {
+    margin-top: var(--spacing-m);
   }
 }
 
 .claim-grid__title {
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
   font-weight: 300;
   font-size: var(--font-large);
 }