MAKE ODYSEE EVEN MORE BEAUTIFUL (#539)

WE LOVE YOU RAPHAEL FOR MAKING THIS HAPPEN!

package.json

@@ -68,6 +68,7 @@
     "proxy-polyfill": "0.1.6",
     "re-reselect": "^4.0.0",
     "react-beautiful-dnd": "^13.1.0",
+    "react-color": "^2.19.3",
     "react-datetime-picker": "^3.4.3",
     "react-plastic": "^1.1.1",
     "react-top-loading-bar": "^2.0.1",
@@ -99,7 +100,7 @@
     "@hot-loader/react-dom": "^16.13",
     "@reach/auto-id": "^0.13.0",
     "@reach/combobox": "^0.12.1",
-    "@reach/menu-button": "0.7.4",
+    "@reach/menu-button": "0.8.6",
     "@reach/rect": "^0.16.0",
     "@reach/tabs": "^0.1.5",
     "@reach/tooltip": "^0.12.1",

static/index-web.html

@@ -17,7 +17,7 @@
     </script>
 
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     <meta http-equiv="Expires" content="0" />

ui/component/blockList/view.jsx

@@ -118,7 +118,7 @@ export default function BlockList(props: Props) {
   return (
     <>
       <div className="help--notice">{help}</div>
-      <div className="section">
+      <div className="section" style={{ zIndex: '4' }}>
         <SearchList
           list={localList}
           placeholder={__('e.g. odysee')}

ui/component/channelEdit/view.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import TagsSearch from 'component/tagsSearch';
+import ColorPicker from 'component/colorPicker';
 import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
 import ErrorText from 'component/common/error-text';
 import ChannelThumbnail from 'component/channelThumbnail';
@@ -25,6 +26,8 @@ import { sortLanguageMap } from 'util/default-languages';
 import ThumbnailBrokenImage from 'component/selectThumbnail/thumbnail-broken.png';
 import Gerbil from 'component/channelThumbnail/gerbil.png';
 
+const NEKODEV = false; // Temporary flag to hide unfinished progress
+
 const LANG_NONE = 'none';
 
 const MAX_TAG_SELECT = 5;
@@ -121,6 +124,9 @@ function ChannelForm(props: Props) {
     );
   }, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, bidError, isNewChannel, params.name]);
 
+  // const channelColor = 'ff0000';
+  const [overrideColor, toggleColorOverride] = React.useState(false);
+
   function getChannelParams() {
     // fill this in with sdk data
     const channelParams: {
@@ -213,6 +219,7 @@ function ChannelForm(props: Props) {
 
   function handleSubmit() {
     if (uri) {
+      console.log('Params A: ', params);
       updateChannel(params).then((success) => {
         if (success) {
           onDone();
@@ -270,9 +277,10 @@ function ChannelForm(props: Props) {
   }
 
   // TODO clear and bail after submit
+  // <div className={classnames('main--contained', { 'card--disabled': disabled })}></div>
   return (
     <>
-      <div className={classnames('main--contained', { 'card--disabled': disabled })}>
+      <div className={classnames({ 'card--disabled': disabled })}>
         <header className="channel-cover">
           <div className="channel__quick-actions">
             <Button
@@ -336,7 +344,7 @@ function ChannelForm(props: Props) {
           <div className="channel-cover__gradient" />
         </header>
 
-        <Tabs>
+        <Tabs className="channelPage-wrapper">
           <TabList className="tabs__list--channel-page">
             <Tab>{__('General')}</Tab>
             <Tab>{__('Credit Details')}</Tab>
@@ -445,6 +453,19 @@ function ChannelForm(props: Props) {
               <Card
                 body={
                   <>
+                    {NEKODEV && (
+                      <fieldset-section class>
+                        <label htmlFor="channel-color">{__('Channel color')}</label>
+                        <FormField
+                          name="manual-channel-color"
+                          type="checkbox"
+                          label="Pick color manually"
+                          checked={overrideColor}
+                          onChange={() => toggleColorOverride(!overrideColor)}
+                        />
+                        <ColorPicker disabled={!overrideColor} />
+                      </fieldset-section>
+                    )}
                     <FormField
                       type="text"
                       name="channel_website2"

ui/component/channelStakedIndicator/view.jsx

@@ -14,6 +14,7 @@ type Props = {
   level: number,
   large?: boolean,
   inline?: boolean,
+  hideTooltip?: Boolean,
 };
 
 function getChannelIcon(level: number): string {
@@ -28,8 +29,20 @@ function getChannelIcon(level: number): string {
   return icons[level] || ICONS.CHANNEL_LEVEL_1;
 }
 
+function getChannelIconB(level: number): string {
+  const icons = {
+    '1': ICONS.CHANNEL_LEVEL_1_B,
+    '2': ICONS.CHANNEL_LEVEL_2_B,
+    '3': ICONS.CHANNEL_LEVEL_3_B,
+    '4': ICONS.CHANNEL_LEVEL_4_B,
+    '5': ICONS.CHANNEL_LEVEL_5_B,
+  };
+
+  return icons[level] || ICONS.CHANNEL_LEVEL_1_B;
+}
+
 function ChannelStakedIndicator(props: Props) {
-  const { channelClaim, amount, level, large = false, inline = false } = props;
+  const { channelClaim, amount, level, large = false, inline = false, hideTooltip = false } = props;
 
   if (!channelClaim || !channelClaim.meta) {
     return null;
@@ -37,14 +50,16 @@ function ChannelStakedIndicator(props: Props) {
 
   const isControlling = channelClaim && channelClaim.meta.is_controlling;
   const icon = getChannelIcon(level);
+  const icon_b = getChannelIconB(level);
 
+  if (!hideTooltip) {
     return (
       SIMPLE_SITE && (
         <Tooltip
           title={
             <div className="channel-staked__tooltip">
               <div className="channel-staked__tooltip-icons">
-              <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
+                <LevelIcon icon={icon_b} isControlling={isControlling} size={isControlling ? 14 : 10} />
               </div>
 
               <div className="channel-staked__tooltip-text">
@@ -67,6 +82,20 @@ function ChannelStakedIndicator(props: Props) {
         </Tooltip>
       )
     );
+  } else {
+    return (
+      SIMPLE_SITE && (
+        <div
+          className={classnames('channel-staked__wrapper', {
+            'channel-staked__wrapper--large': large,
+            'channel-staked__wrapper--inline': inline,
+          })}
+        >
+          <LevelIcon icon={icon} large={large} isControlling={isControlling} />
+        </div>
+      )
+    );
+  }
 }
 
 type LevelIconProps = {

ui/component/channelThumbnail/view.jsx

@@ -22,6 +22,7 @@ type Props = {
   isResolving: boolean,
   noLazyLoad?: boolean,
   hideStakedIndicator?: boolean,
+  hideTooltip?: boolean,
   noOptimization?: boolean,
   setThumbUploadError: (boolean) => void,
   ThumbUploadError: boolean,
@@ -42,6 +43,7 @@ function ChannelThumbnail(props: Props) {
     isResolving,
     noLazyLoad,
     hideStakedIndicator = false,
+    hideTooltip,
     setThumbUploadError,
     ThumbUploadError,
   } = props;
@@ -74,7 +76,7 @@ function ChannelThumbnail(props: Props) {
   if (isGif && !allowGifs) {
     return (
       <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
-        {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
+        {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} hideTooltip={hideTooltip} />}
       </FreezeframeWrapper>
     );
   }
@@ -101,7 +103,7 @@ function ChannelThumbnail(props: Props) {
           }
         }}
       />
-      {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
+      {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} hideTooltip={hideTooltip} />}
     </div>
   );
 }

ui/component/claimList/view.jsx

@@ -103,6 +103,7 @@ export default function ClaimList(props: Props) {
 
   let tileUris = (prefixUris || []).concat(uris || []);
   tileUris = tileUris.filter((uri) => !excludeUris.includes(uri));
+  if (prefixUris && prefixUris.length) tileUris.splice(prefixUris.length * -1, prefixUris.length);
 
   const totalLength = tileUris.length;
 

ui/component/claimMenuList/view.jsx

@@ -391,7 +391,6 @@ function ClaimMenuList(props: Props) {
                 {(!claimIsMine || channelIsBlocked) && contentChannelUri ? (
                   !incognitoClaim && (
                     <>
-                      <hr className="menu__separator" />
                       <MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
                         <div className="menu__link">
                           <Icon aria-hidden icon={ICONS.BLOCK} />

ui/component/claimPreview/claim-preview-loading.jsx

@@ -11,17 +11,24 @@ function ClaimPreviewLoading(props: Props) {
   const { isChannel, type } = props;
   return (
     <li
-      className={classnames('claim-preview__wrapper', {
+      className={classnames('placeholder claim-preview__wrapper', {
         'claim-preview__wrapper--channel': isChannel && type !== 'inline',
         'claim-preview__wrapper--inline': type === 'inline',
         'claim-preview__wrapper--small': type === 'small',
       })}
     >
       <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
-        <div className="placeholder media__thumb" />
+        <div className="media__thumb" />
         <div className="placeholder__wrapper">
-          <div className="placeholder claim-preview__title" />
+          <div className="claim-preview__title" />
-          <div className="placeholder media__subtitle" />
+          <div className="claim-preview__title_b" />
+          <div className="claim-tile__info">
+            <div className="channel-thumbnail" />
+            <div className="claim-tile__about">
+              <div className="media__subtitle" />
+              <div className="media__subtitle_b" />
+            </div>
+          </div>
         </div>
       </div>
     </li>

ui/component/claimPreview/view.jsx

@@ -175,11 +175,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000);
     const formattedSubCountLocale = Number(channelSubCount).toLocaleString();
     return (
+      <div className="media__subtitle">
         <Tooltip title={formattedSubCountLocale} followCursor placement="top">
           <span className="claim-preview__channel-sub-count">
             {channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
           </span>
         </Tooltip>
+      </div>
     );
   }, [channelSubCount]);
   const isValid = uri && isURIValid(uri, false);
@@ -405,10 +407,19 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   </NavLink>
                 )}
               </div>
+              <div className="claim-tile__info" uri={uri}>
+                {!isChannelUri && signingChannel && (
+                  <div className="claim-preview__channel-staked">
+                    <UriIndicator focusable={false} uri={uri} link hideAnonymous>
+                      <ChannelThumbnail uri={signingChannel.permanent_url} xsmall />
+                    </UriIndicator>
+                  </div>
+                )}
                 <ClaimPreviewSubtitle uri={uri} type={type} />
                 {(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
                 {channelSubscribers}
               </div>
+            </div>
             {type !== 'small' && (
               <div className="claim-preview__actions">
                 {!pending && (
@@ -418,12 +429,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       actions
                     ) : (
                       <div className="claim-preview__primary-actions">
-                        {!isChannelUri && signingChannel && (
-                          <div className="claim-preview__channel-staked">
-                            <ChannelThumbnail uri={signingChannel.permanent_url} xsmall />
-                          </div>
-                        )}
-
                         {isChannelUri && !banState.muted && !claimIsMine && (
                           <SubscribeButton
                             uri={repostedChannelUri || (uri.startsWith('lbry://') ? uri : `lbry://${uri}`)}

ui/component/claimPreviewTile/view.jsx

@@ -9,7 +9,7 @@ import DateTime from 'component/dateTime';
 import LivestreamDateTime from 'component/livestreamDateTime';
 import ChannelThumbnail from 'component/channelThumbnail';
 import FileViewCountInline from 'component/fileViewCountInline';
-import SubscribeButton from 'component/subscribeButton';
+// import SubscribeButton from 'component/subscribeButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
@@ -92,7 +92,6 @@ function ClaimPreviewTile(props: Props) {
   const shouldFetch = claim === undefined;
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
   const canonicalUrl = claim && claim.canonical_url;
-  const permanentUrl = claim && claim.permanent_url;
   const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
   const listId = collectionId || collectionClaimId;
   const navigateUrl =
@@ -116,7 +115,6 @@ function ClaimPreviewTile(props: Props) {
   const isChannel = claim && claim.value_type === 'channel';
   const channelUri = !isChannel ? signingChannel && signingChannel.permanent_url : claim && claim.permanent_url;
   const channelTitle = signingChannel && ((signingChannel.value && signingChannel.value.title) || signingChannel.name);
-  const repostedChannelUri = isRepost && isChannel ? permanentUrl || canonicalUrl : undefined;
 
   // Aria-label value for claim preview
   let ariaLabelData = isChannel ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration);
@@ -154,17 +152,24 @@ function ClaimPreviewTile(props: Props) {
 
   if (placeholder || (!claim && isResolvingUri)) {
     return (
-      <li className={classnames('claim-preview--tile', {})}>
+      <li className={classnames('placeholder claim-preview--tile', {})}>
-        <div className="placeholder media__thumb">
+        <div className="media__thumb">
           <img src={PlaceholderTx} alt="Placeholder" />
         </div>
         <div className="placeholder__wrapper">
-          <div className="placeholder claim-tile__title" />
+          <div className="claim-tile__title" />
+          <div className="claim-tile__title_b" />
           <div
-            className={classnames('claim-tile__info placeholder', {
+            className={classnames('claim-tile__info', {
               contains_view_count: shouldShowViewCount,
             })}
-          />
+          >
+            <div className="channel-thumbnail" />
+            <div className="claim-tile__about">
+              <div className="button__content" />
+              <div className="claim-tile__about--counts" />
+            </div>
+          </div>
         </div>
       </li>
     );
@@ -231,9 +236,10 @@ function ClaimPreviewTile(props: Props) {
           })}
         >
           {isChannel ? (
-            <div className="claim-tile__about--channel">
+            //  <div className="claim-tile__about--channel">
-              <SubscribeButton uri={repostedChannelUri || uri} />
+            //    <SubscribeButton uri={repostedChannelUri || uri} />
-            </div>
+            //  </div>
+            <></>
           ) : (
             <React.Fragment>
               <UriIndicator focusable={false} uri={uri} link hideAnonymous>

ui/component/claimRepostAuthor/view.jsx

@@ -19,8 +19,11 @@ function ClaimRepostAuthor(props: Props) {
   if (short && repostUrl) {
     return (
       <span className="claim-preview__repost-author">
+        <div className="claim-preview__repost-ribbon">
           <Icon icon={ICONS.REPOST} size={12} />
+          <br />
           <span>{repostUrl}</span>
+        </div>
       </span>
     );
   }
@@ -47,11 +50,14 @@ function ClaimRepostAuthor(props: Props) {
 
   return (
     <div className="claim-preview__repost-author">
+      <div className="claim-preview__repost-ribbon">
         <Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
+        <br />
         <I18nMessage tokens={{ repost_channel_link: <UriIndicator link uri={repostChannelUrl} /> }}>
-        %repost_channel_link% reposted
+          %repost_channel_link%
         </I18nMessage>
       </div>
+    </div>
   );
 }
 

ui/component/claimTilesDiscover/view.jsx

@@ -81,6 +81,7 @@ function ClaimTilesDiscover(props: Props) {
   const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
 
   const uris = (prefixUris || []).concat(claimSearchUris);
+  if (prefixUris && prefixUris.length) uris.splice(prefixUris.length * -1, prefixUris.length);
 
   if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
     pinUrls.forEach((pin) => {

ui/component/collectionActions/view.jsx

@@ -177,7 +177,7 @@ function CollectionActions(props: Props) {
 
   if (isMobile) {
     return (
-      <div className="media__actions">
+      <div className="media__actions stretch">
         {lhsSection}
         {rhsSection}
         {infoButtons}

ui/component/collectionContentSidebar/view.jsx

@@ -58,10 +58,11 @@ export default function CollectionContent(props: Props) {
   return (
     <Card
       isBodyList
-      className="file-page__recommended-collection"
+      className="file-page__playlist-collection"
       title={
         <>
-          <span className="file-page__recommended-collection__row">
+          <a href={`/$/${PAGES.LIST}/${id}`}>
+            <span className="file-page__playlist-collection__row">
               <Icon
                 icon={
                   (id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
@@ -72,7 +73,8 @@ export default function CollectionContent(props: Props) {
               />
               {collectionName}
             </span>
-          <span className="file-page__recommended-collection__row">
+          </a>
+          <span className="file-page__playlist-collection__row">
             <Button
               button="alt"
               title={__('Loop')}
@@ -93,21 +95,14 @@ export default function CollectionContent(props: Props) {
         </>
       }
       titleActions={
-        <>
+        isMyCollection && (
-          <div className="card__title-actions--link">
-            {/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
-            <Button label={__('View List')} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
-          </div>
-
-          {isMyCollection && (
           <Button
             title={__('Edit')}
             className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
             icon={ICONS.EDIT}
             onClick={() => setShowEdit(!showEdit)}
           />
-          )}
+        )
-        </>
       }
       body={
         <DragDropContext onDragEnd={handleOnDragEnd}>

ui/component/colorPicker/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import ColorPicker from './view';
+
+const select = (state) => ({});
+
+export default connect(select)(ColorPicker);

ui/component/colorPicker/view.jsx

@@ -0,0 +1,63 @@
+// @flow
+'use strict';
+
+import React, { useState } from 'react';
+import reactCSS from 'reactcss';
+import { SketchPicker } from 'react-color';
+import classNames from 'classnames';
+import { changeColor, getPrimaryColor } from 'util/theme';
+
+type Props = {
+  disabled?: boolean,
+};
+
+function ColorPicker(props: Props) {
+  const { disabled } = props;
+  const [displayColorPicker, toggleDisplayColorPicker] = useState(false);
+  let dynamic = getPrimaryColor();
+  var rgb = dynamic.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
+  var hex = rgb
+    ? (rgb[1] | (1 << 8)).toString(16).slice(1) +
+      (rgb[2] | (1 << 8)).toString(16).slice(1) +
+      (rgb[3] | (1 << 8)).toString(16).slice(1)
+    : dynamic;
+  const [color, setColor] = useState({
+    hex: '#' + hex,
+    rgb: { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]), a: 1 },
+  });
+
+  const styles = reactCSS({
+    default: {
+      color: {
+        background: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
+      },
+    },
+  });
+
+  function handleChange(color) {
+    console.log('Color: ', color);
+    changeColor(color.rgb);
+    setColor(color);
+  }
+
+  return (
+    <div
+      className={classNames('color-picker', {
+        disabled: disabled,
+      })}
+    >
+      <input value={color.hex} />
+      <div className="swatch" onClick={() => toggleDisplayColorPicker(!displayColorPicker)}>
+        <div className="color" style={styles.color} />
+      </div>
+      {displayColorPicker ? (
+        <div className="popover">
+          <div className="cover" onClick={() => toggleDisplayColorPicker(false)} />
+          <SketchPicker color={color} onChange={handleChange} disableAlpha />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default ColorPicker;

ui/component/commentReactions/view.jsx

@@ -114,7 +114,7 @@ export default function CommentReactions(props: Props) {
         title={__('Upvote')}
         icon={likeIcon}
         iconSize={isMobile && 12}
-        className={classnames('comment__action', {
+        className={classnames('comment__action button-like', {
           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
         })}
         onClick={handleCommentLike}
@@ -125,7 +125,7 @@ export default function CommentReactions(props: Props) {
         title={__('Downvote')}
         icon={dislikeIcon}
         iconSize={isMobile && 12}
-        className={classnames('comment__action', {
+        className={classnames('comment__action button-dislike', {
           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
         })}
         onClick={handleCommentDislike}

ui/component/common/card.jsx

@@ -73,7 +73,7 @@ export default function Card(props: Props) {
             <div
               className={classnames('card__title-section', {
                 'card__title-section--body-list': isBodyList,
-                'card__title-section--small': smallTitle,
+                'card__title-section--smallx': smallTitle,
               })}
             >
               {icon && <Icon sectionIcon icon={icon} />}

ui/component/common/icon-custom.jsx

@@ -218,19 +218,17 @@ export const icons = {
         viewBox="0 0 24 24"
         width={size}
         height={size}
-        fill="none"
+        // fill={color}
+        fill="black"
         stroke={color}
         strokeWidth="0"
         strokeLinecap="round"
         strokeLinejoin="round"
         {...rest}
       >
-        <path d="M1.03125 14.1562V9.84375L12 0L22.9688 9.84375V14.1562L12 24L1.03125 14.1562Z" fill="black" />
+        <path d="M1.03125 14.1562V9.84375L12 0L22.9688 9.84375V14.1562L12 24L1.03125 14.1562Z" />
-        <path d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z" fill="black" />
+        <path d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z" />
-        <path
+        <path d="M8.925 10.3688L15.1312 4.80005L12 1.98755L2.60625 10.425V13.575L3.99375 14.8125L8.925 10.3688Z" />
-          d="M8.925 10.3688L15.1312 4.80005L12 1.98755L2.60625 10.425V13.575L3.99375 14.8125L8.925 10.3688Z"
-          fill="black"
-        />
         <path
           d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z"
           fill={`url(#paint0_linear${randomId})`}
@@ -323,7 +321,7 @@ export const icons = {
     </g>
   ),
   [ICONS.HOME]: buildIcon(
-    <g strokeWidth="2" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+    <g fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
       <path d="M1, 11 L12, 2 C12, 2 22.9999989, 11.0000005 23, 11" />
       <path d="M3, 10 C3, 10 3, 10.4453982 3, 10.9968336 L3, 20.0170446 C3, 20.5675806 3.43788135, 21.0138782 4.00292933, 21.0138781 L8.99707067, 21.0138779 C9.55097324, 21.0138779 10, 20.5751284 10, 20.0089602 L10, 15.0049177 C10, 14.449917 10.4433532, 14 11.0093689, 14 L12.9906311, 14 C13.5480902, 14 14, 14.4387495 14, 15.0049177 L14, 20.0089602 C14, 20.5639609 14.4378817, 21.0138779 15.0029302, 21.0138779 L19.9970758, 21.0138781 C20.5509789, 21.0138782 21.000006, 20.56848 21.000006, 20.0170446 L21.0000057, 10" />
     </g>
@@ -349,9 +347,25 @@ export const icons = {
       <path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29" />
     </g>
   ),
-  [ICONS.SUBSCRIBE]: buildIcon(
+  [ICONS.SUBSCRIBE]: (props: IconProps) => {
+    const { size = 24, color = 'currentColor', ...otherProps } = props;
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        fill={color}
+        stroke={'#FFFFFF'}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...otherProps}
+      >
         <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-  ),
+      </svg>
+    );
+  },
   [ICONS.SUBSCRIBED]: (props: IconProps) => {
     const { size = 24, color = 'currentColor', ...otherProps } = props;
     return (
@@ -361,8 +375,8 @@ export const icons = {
         width={size}
         height={size}
         fill={color}
-        stroke={color}
+        stroke={'#FFFFFF'}
-        strokeWidth="1"
+        strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
         {...otherProps}
@@ -372,9 +386,25 @@ export const icons = {
     );
   },
 
-  [ICONS.UNSUBSCRIBE]: buildIcon(
+  [ICONS.UNSUBSCRIBE]: (props: IconProps) => {
+    const { size = 24, color = 'currentColor', ...otherProps } = props;
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        fill={color}
+        stroke={'#FFFFFF'}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...otherProps}
+      >
         <path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
-  ),
+      </svg>
+    );
+  },
   [ICONS.SETTINGS]: buildIcon(
     <g>
       <circle cx="12" cy="12" r="3" />
@@ -737,12 +767,24 @@ export const icons = {
       <path d="M21 13v2a4 4 0 0 1-4 4H3" />
     </g>
   ),
-  [ICONS.MORE_VERTICAL]: buildIcon(
+  [ICONS.MORE_VERTICAL]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="none"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
       <g>
         <circle cx="12" cy="5" r="1" />
         <circle cx="12" cy="12" r="1" />
         <circle cx="12" cy="19" r="1" />
       </g>
+    </svg>
   ),
   [ICONS.MORE]: buildIcon(
     <g transform="rotate(90 12 12)">
@@ -1125,7 +1167,6 @@ export const icons = {
       width={props.size || '16'}
       height={props.size || '18'}
       fill="none"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     >
@@ -1275,13 +1316,6 @@ export const icons = {
   [ICONS.DOWNVOTE]: buildIcon(
     <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
   ),
-  [ICONS.FIRE_ACTIVE]: buildIcon(
-    <path
-      d="M11.3969 23.04C11.3969 23.04 18.4903 21.8396 18.9753 16.2795C19.3997 9.89148 14.2161 7.86333 13.2915 4.56586C13.1861 4.2261 13.1051 3.88045 13.049 3.53109C12.9174 2.68094 12.8516 1.82342 12.852 0.964865C12.852 0.964865 5.607 0.426785 4.87947 10.6227C4.34858 10.1469 3.92655 9.57999 3.63777 8.9548C3.349 8.32962 3.19921 7.65853 3.19706 6.98033C3.19706 6.98033 -4.32074 18.7767 8.45649 23.04C7.94555 22.1623 7.67841 21.1842 7.67841 20.1909C7.67841 19.1976 7.94555 18.2195 8.45649 17.3418C9.54778 15.0653 9.97218 13.8788 9.97218 13.8788C9.97218 13.8788 15.5044 18.6525 11.3969 23.04Z"
-      fill="#FF6635"
-      strokeWidth="0"
-    />
-  ),
   [ICONS.SLIME_ACTIVE]: buildIcon(
     <path
       d="M13.065 4.18508C12.5638 4.47334 11.9699 4.5547 11.4096 4.41183C10.8494 4.26896 10.367 3.91315 10.065 3.42008C9.70126 2.96799 9.52899 2.39146 9.58506 1.81392C9.64113 1.23639 9.92109 0.703759 10.365 0.330081C10.8662 0.0418164 11.4601 -0.0395341 12.0204 0.103332C12.5806 0.246199 13.063 0.602008 13.365 1.09508C13.7287 1.54717 13.901 2.12371 13.8449 2.70124C13.7889 3.27877 13.5089 3.8114 13.065 4.18508ZM2.565 6.76508C1.98518 6.6732 1.39241 6.81157 0.913189 7.15066C0.433971 7.48976 0.106262 8.00272 0 8.58008C0.0118186 9.17159 0.256137 9.73464 0.680058 10.1473C1.10398 10.56 1.67339 10.7891 2.265 10.7851C2.84509 10.8863 3.44175 10.7561 3.92691 10.4224C4.41207 10.0886 4.74707 9.57801 4.86 9.00008C4.85804 8.7046 4.79789 8.41241 4.683 8.14018C4.56811 7.86794 4.40072 7.62101 4.1904 7.41347C3.98007 7.20593 3.73093 7.04185 3.45719 6.9306C3.18345 6.81935 2.89048 6.7631 2.595 6.76508H2.565ZM22.2 15.1951C21.9286 15.0703 21.635 15.0008 21.3364 14.9907C21.0379 14.9806 20.7403 15.0301 20.461 15.1362C20.1818 15.2423 19.9264 15.403 19.7099 15.6088C19.4934 15.8146 19.3201 16.0615 19.2 16.3351C19.1369 16.6299 19.1337 16.9345 19.1906 17.2306C19.2475 17.5267 19.3634 17.8084 19.5313 18.0588C19.6992 18.3093 19.9157 18.5235 20.168 18.6886C20.4203 18.8537 20.7033 18.9665 21 19.0201C21.2714 19.1449 21.565 19.2143 21.8636 19.2244C22.1621 19.2346 22.4597 19.1851 22.739 19.079C23.0182 18.9729 23.2736 18.8122 23.4901 18.6064C23.7066 18.4005 23.8799 18.1536 24 17.8801C24.0634 17.5873 24.0677 17.2849 24.0127 16.9904C23.9577 16.696 23.8444 16.4155 23.6795 16.1654C23.5147 15.9153 23.3015 15.7007 23.0526 15.5341C22.8037 15.3674 22.524 15.2522 22.23 15.1951H22.2ZM20.34 10.2451C20.0073 9.99542 19.6009 9.86349 19.185 9.87008C18.4572 9.93018 17.7485 10.1341 17.1 10.4701C16.7447 10.6341 16.3789 10.7744 16.005 10.8901H15.69C15.5961 10.9108 15.4989 10.9108 15.405 10.8901C15 9.97508 16.5 9.00008 18.285 7.93508C18.8914 7.60883 19.4599 7.21644 19.98 6.76508C20.3961 6.30667 20.646 5.72169 20.6895 5.10413C20.733 4.48658 20.5677 3.87232 20.22 3.36008C19.9329 2.89588 19.5307 2.51381 19.0523 2.25098C18.574 1.98815 18.0358 1.85349 17.49 1.86008C17.2067 1.85969 16.9245 1.89496 16.65 1.96508C16.1585 2.08101 15.7042 2.31914 15.3293 2.65739C14.9543 2.99565 14.6708 3.42308 14.505 3.90008C14.16 4.75508 13.14 7.30508 12.135 7.71008C12.0359 7.72949 11.9341 7.72949 11.835 7.71008C11.6138 7.70259 11.3956 7.65692 11.19 7.57508C9.96 7.12508 9.6 5.62508 9.225 4.03508C9.06457 3.15891 8.79234 2.30695 8.415 1.50008C8.17043 1.04181 7.80465 0.659541 7.3576 0.395014C6.91055 0.130487 6.39941 -0.00612938 5.88 8.05856e-05C5.30686 0.011692 4.74338 0.149999 4.23 0.405081C3.872 0.589131 3.5547 0.843345 3.297 1.15258C3.03931 1.46182 2.84648 1.81976 2.73 2.20508C2.58357 2.66415 2.532 3.1482 2.57841 3.62781C2.62483 4.10743 2.76826 4.57261 3 4.99508C3.63898 5.99088 4.39988 6.90294 5.265 7.71008C5.59239 8.0233 5.90283 8.35377 6.195 8.70008C6.41249 8.94283 6.57687 9.22833 6.67761 9.5383C6.77835 9.84826 6.81322 10.1759 6.78 10.5001C6.68279 10.762 6.52008 10.9947 6.30737 11.1759C6.09467 11.3571 5.83908 11.4808 5.565 11.5351H5.19C4.89755 11.5247 4.60651 11.4896 4.32 11.4301C3.94485 11.3508 3.56329 11.3056 3.18 11.2951H3C2.50224 11.3269 2.02675 11.513 1.63964 11.8275C1.25253 12.142 0.973032 12.5694 0.84 13.0501C0.685221 13.5092 0.678705 14.0053 0.821373 14.4683C0.964041 14.9313 1.24867 15.3377 1.635 15.6301C1.97288 15.8809 2.38429 16.0127 2.805 16.0051C3.4891 15.9504 4.15377 15.751 4.755 15.4201C5.18104 15.1991 5.64344 15.0568 6.12 15.0001H6.285C6.32317 15.0086 6.35846 15.0269 6.38739 15.0532C6.41632 15.0795 6.4379 15.1129 6.45 15.1501C6.52858 15.4213 6.49621 15.7127 6.36 15.9601C5.80418 16.8088 4.95508 17.4229 3.975 17.6851C3.38444 17.8608 2.85799 18.205 2.46025 18.6756C2.06252 19.1462 1.81078 19.7226 1.73592 20.3342C1.66107 20.9458 1.76635 21.5659 2.03886 22.1185C2.31136 22.6711 2.73924 23.1321 3.27 23.4451C3.81477 23.8292 4.46349 24.0384 5.13 24.0451C6.1389 23.9485 7.08103 23.4979 7.7894 22.773C8.49778 22.0482 8.92665 21.0959 9 20.0851V19.9501C9.135 19.0351 9.33 17.7751 10.05 17.3401C10.2442 17.2216 10.4675 17.1593 10.695 17.1601C11.0828 17.1781 11.4558 17.3142 11.7641 17.5501C12.0724 17.786 12.3012 18.1105 12.42 18.4801C13.155 21.2251 13.725 23.4001 16.14 23.4001C16.4527 23.3961 16.7643 23.361 17.07 23.2951C17.8256 23.2158 18.5231 22.8527 19.0214 22.2792C19.5198 21.7057 19.7819 20.9644 19.755 20.2051C19.6664 19.6213 19.4389 19.0673 19.0918 18.5896C18.7446 18.112 18.2879 17.7246 17.76 17.4601C17.4534 17.2574 17.1625 17.0317 16.89 16.7851C16.005 15.9301 15.855 15.4051 15.885 15.1051C15.9198 14.8698 16.0313 14.6526 16.2021 14.4871C16.373 14.3217 16.5937 14.2173 16.83 14.1901H17.055C17.31 14.1901 17.61 14.1901 17.895 14.1901C18.18 14.1901 18.57 14.1901 18.84 14.1901H19.14C19.6172 14.1642 20.0748 13.9919 20.4505 13.6967C20.8263 13.4014 21.102 12.9976 21.24 12.5401C21.3316 12.1166 21.2981 11.6757 21.1436 11.2709C20.9892 10.8661 20.7204 10.5149 20.37 10.2601L20.34 10.2451Z"
@@ -1295,6 +1329,13 @@ export const icons = {
       strokeMiterlimit="10"
     />
   ),
+  [ICONS.FIRE_ACTIVE]: buildIcon(
+    <path
+      d="M11.3969 23.04C11.3969 23.04 18.4903 21.8396 18.9753 16.2795C19.3997 9.89148 14.2161 7.86333 13.2915 4.56586C13.1861 4.2261 13.1051 3.88045 13.049 3.53109C12.9174 2.68094 12.8516 1.82342 12.852 0.964865C12.852 0.964865 5.607 0.426785 4.87947 10.6227C4.34858 10.1469 3.92655 9.57999 3.63777 8.9548C3.349 8.32962 3.19921 7.65853 3.19706 6.98033C3.19706 6.98033 -4.32074 18.7767 8.45649 23.04C7.94555 22.1623 7.67841 21.1842 7.67841 20.1909C7.67841 19.1976 7.94555 18.2195 8.45649 17.3418C9.54778 15.0653 9.97218 13.8788 9.97218 13.8788C9.97218 13.8788 15.5044 18.6525 11.3969 23.04Z"
+      fill="#d62912"
+      strokeWidth="0"
+    />
+  ),
   [ICONS.SLIME]: buildIcon(
     <path
       d="M5.09998 23.25C2.84998 23.25 1.64998 20.55 3.14998 18.9C4.19998 17.85 8.24998 17.1 7.04998 14.7C6.14998 12.9 3.59998 15.75 2.09998 15C1.34998 14.7 1.19998 13.5 1.79998 12.75C2.39998 11.85 3.29998 12 4.19998 12.15C5.84998 12.45 7.94998 11.7 7.49998 9.60003C6.89998 7.35003 4.34998 6.45003 3.44998 4.35003C2.69998 2.25003 4.64998 -0.299968 6.89998 1.05003C8.69998 2.10003 8.39997 5.25003 9.29997 6.90003C10.2 8.40003 12 9.00003 13.2 7.65003C14.55 6.30003 14.55 3.15003 16.65 2.70003C18.45 2.25003 20.4 4.05003 19.5 5.85003C18.45 7.80003 15.15 7.80003 14.55 10.05C14.1 11.7 15.45 11.85 16.65 11.4C17.4 11.1 18.6 10.35 19.5 10.65C20.55 11.1 20.7 12.45 19.95 13.2C18.6 14.25 16.65 12.6 15.45 14.25C13.95 16.35 17.1 17.7 18.15 18.9C19.8 20.7 18.3 22.8 16.05 22.8C14.1 22.8 13.65 20.7 13.2 19.05C12.6 16.95 9.89997 15.3 8.54997 18C7.79997 19.8 8.24998 23.25 5.09998 23.25Z"
@@ -1462,6 +1503,26 @@ export const icons = {
     </g>
   ),
   [ICONS.CHANNEL_LEVEL_1]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 26.50858,-21.17718 c 2.98054,-4.64871 7.22092,-7.8939 17.93686,-13.72718 l 5.54336,-3.01756 -8.18544,-4.48244 c -11.40473,-6.24535 -13.1144,-7.91052 -19.05225,-18.55628 l -5.23365,-9.38323 -3.00873,5.5275 c -7.72372,14.18964 -9.74931,16.21463 -23.95417,23.94713 l -5.54336,3.01756 8.18544,4.48244 c 11.40473,6.24535 13.1144,7.91052 19.05225,18.55628 l 5.23365,9.38323 3.00873,-5.5275 c 1.6548,-3.04012 4.36259,-7.6391 6.01731,-10.21995 z"
+        fill="black"
+      />
+      <path d="m 248.38046,427.36081 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
+    </svg>
+  ),
+  [ICONS.CHANNEL_LEVEL_1_B]: (props: CustomProps) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
@@ -1478,6 +1539,26 @@ export const icons = {
     </svg>
   ),
   [ICONS.CHANNEL_LEVEL_2]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z"
+        fill="black"
+      />
+      <path d="m 309.09964,416.68506 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -121.39736,0.20649 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
+    </svg>
+  ),
+  [ICONS.CHANNEL_LEVEL_2_B]: (props: CustomProps) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
@@ -1494,6 +1575,27 @@ export const icons = {
     </svg>
   ),
   [ICONS.CHANNEL_LEVEL_3]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 26.50858,-21.17718 c 2.98054,-4.64871 7.22092,-7.8939 17.93686,-13.72718 l 5.54336,-3.01756 -8.18544,-4.48244 c -11.40473,-6.24535 -13.1144,-7.91052 -19.05225,-18.55628 l -5.23365,-9.38323 -3.00873,5.5275 c -7.72372,14.18964 -9.74931,16.21463 -23.95417,23.94713 l -5.54336,3.01756 8.18544,4.48244 c 11.40473,6.24535 13.1144,7.91052 19.05225,18.55628 l 5.23365,9.38323 3.00873,-5.5275 c 1.6548,-3.04012 4.36259,-7.6391 6.01731,-10.21995 z"
+        fill="black"
+      />
+      <path d="m 128.30012,386.71637 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m 240.07855,0.16317 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -119.99821,40.48127 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />{' '}
+      />
+    </svg>
+  ),
+  [ICONS.CHANNEL_LEVEL_3_B]: (props: CustomProps) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
@@ -1510,6 +1612,26 @@ export const icons = {
     </svg>
   ),
   [ICONS.CHANNEL_LEVEL_4]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 41.80336,-42.40436 c -182.535573,-304.65496 -91.26779,-152.32748 0,0 z"
+        fill="black"
+      />
+      <path d="m 404.52581,356.68506 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -95.42617,60 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z M 91.67587,356.2841 l 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m 96.02641,60.60745 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
+    </svg>
+  ),
+  [ICONS.CHANNEL_LEVEL_4_B]: (props: CustomProps) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
@@ -1526,6 +1648,26 @@ export const icons = {
     </svg>
   ),
   [ICONS.CHANNEL_LEVEL_5]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+      width={props.size || '500'}
+      height={props.size || '500'}
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M 235.55276,499.26997 C 186.79685,496.32795 137.66046,478.0957 98.932161,448.57638 64.375487,422.23673 36.705872,386.50219 19.8707,346.4707 c -3.556715,-8.45733 -7.621956,-19.74033 -7.621956,-21.15461 0,-0.7476 6.270129,-0.88029 41.300251,-0.87397 l 41.300251,0.007 2.826633,5.44767 c 9.504211,18.31713 27.376381,40.30105 42.713571,52.54042 15.17627,12.11096 34.44228,23.37235 48.55956,28.38409 l 4.87744,1.73153 5.62399,-5.99232 c 11.69896,-12.46515 22.77425,-18.22547 40.18524,-20.90053 9.81701,-1.50831 18.32619,-1.03426 28.59982,1.59329 11.83833,3.02773 20.56915,8.22721 30.9194,18.41348 l 7.06948,6.95746 2.35263,-0.82029 c 21.03111,-7.33293 46.88768,-23.94389 63.59636,-40.85601 10.80627,-10.93785 23.47767,-28.19032 30.15075,-41.05112 l 2.82663,-5.44767 41.30026,-0.007 c 35.03011,-0.006 41.30025,0.12637 41.30025,0.87397 0,1.53331 -4.32078,13.36898 -8.24488,22.58476 -19.04024,44.71617 -51.80276,83.94394 -92.25764,110.46347 -29.87833,19.58624 -62.91601,32.35663 -98.61809,38.11986 -13.56762,2.19016 -39.97761,3.57628 -53.07789,2.78579 z m 23.30406,-18.29848 c 7.82251,-13.66418 10.63782,-17.67091 14.26371,-20.29998 1.44828,-1.05012 8.31478,-5.12929 15.25889,-9.06481 6.94411,-3.93553 12.96327,-7.5623 13.37591,-8.05951 0.80132,-0.96552 -2.17464,-2.95232 -15.63724,-10.43973 -10.5445,-5.86446 -15.55499,-9.36922 -17.81266,-12.45968 -1.17894,-1.61382 -5.23587,-8.30482 -9.0154,-14.86889 -8.45664,-14.68699 -8.5034,-14.7613 -9.29003,-14.7613 -0.78663,0 -0.83339,0.0743 -9.29003,14.7613 -3.77953,6.56407 -7.83646,13.25507 -9.0154,14.86889 -2.25767,3.09046 -7.26816,6.59522 -17.81266,12.45968 -13.30771,7.40126 -16.43411,9.47956 -15.66118,10.4109 0.39949,0.48134 6.84264,4.33667 14.31813,8.56737 17.17652,9.72095 18.2701,10.7699 26.73966,25.64867 3.43107,6.02749 7.21068,12.50218 8.39912,14.38821 l 2.1608,3.42914 1.14574,-1.41493 c 0.63016,-0.77821 4.17284,-6.70261 7.87264,-13.16533 z M 141.64573,454.30242 c 5.26232,-9.917 9.51419,-14.32892 18.84422,-19.55353 6.51053,-3.64575 8.79397,-5.21077 8.79397,-6.02722 0,-0.22979 -3.43603,-2.37661 -7.63562,-4.77073 -10.94139,-6.23752 -13.74639,-9.03723 -19.42106,-19.38447 -2.56543,-4.67784 -5.02127,-8.50935 -5.4574,-8.51446 -0.8487,-0.01 -3.2361,3.56545 -7.72183,11.56434 -4.1715,7.43854 -7.24318,10.34223 -16.61082,15.70239 -4.49121,2.56986 -8.25296,5.09382 -8.35945,5.60881 -0.1299,0.62822 2.3496,2.34774 7.53506,5.2255 9.2275,5.12096 13.4496,9.04972 17.43521,16.22383 4.38458,7.8923 6.86212,11.62064 7.72183,11.62027 0.43613,-1.8e-4 2.63029,-3.46281 4.87589,-7.69473 z m 226.50331,-0.78837 c 5.29481,-9.58656 8.63331,-13.24858 15.71277,-17.23543 2.72651,-1.53544 6.48172,-3.74845 8.34491,-4.91778 3.30684,-2.07536 3.35927,-2.15343 2.19849,-3.27353 -0.65402,-0.63112 -3.86414,-2.62054 -7.13358,-4.42095 -10.92588,-6.01664 -13.32662,-8.45065 -19.43098,-19.70024 -2.21025,-4.07324 -4.41448,-7.55778 -4.89827,-7.74343 -1.11219,-0.42679 -1.67137,0.35245 -6.85397,9.55118 -4.73849,8.41046 -8.03573,12.04225 -13.97637,15.39447 -8.05336,4.54439 -12.33817,7.27709 -12.33817,7.86885 0,0.33608 2.26131,1.92366 5.02512,3.52795 14.06126,8.16206 15.95811,9.8607 20.72122,18.55594 4.70964,8.59763 6.26112,10.91338 7.19156,10.73419 0.51101,-0.0984 2.95778,-3.85196 5.43727,-8.34122 z M 78.366087,391.08177 c 5.333574,-9.82537 8.104849,-12.69077 17.262123,-17.84841 4.108197,-2.31385 8.01619,-4.62977 8.68443,-5.14648 1.19017,-0.92028 1.18439,-0.96539 -0.28277,-2.20738 -0.82378,-0.69734 -4.222251,-2.79704 -7.552175,-4.66599 -10.538989,-5.91511 -12.793329,-8.29983 -19.216388,-20.32782 -2.523964,-4.72645 -4.080064,-6.99936 -4.711056,-6.8812 -0.518216,0.097 -2.920854,3.70747 -5.339196,8.02316 -5.70866,10.1875 -10.069436,14.63742 -19.077328,19.46732 -6.784252,3.63763 -8.86763,5.29014 -7.886473,6.25545 0.320041,0.31488 4.115183,2.59983 8.433651,5.07768 9.553212,5.48145 12.203234,8.14845 17.545587,17.65799 2.202117,3.91984 4.589264,7.77804 5.30477,8.57379 1.602601,1.78233 1.422161,1.99295 6.834825,-7.97811 z m 353.928603,-0.54279 c 2.69018,-4.69098 5.80923,-9.42753 6.93122,-10.52568 1.12199,-1.09815 5.49052,-3.94008 9.70784,-6.31539 4.21732,-2.37532 8.35376,-4.90874 9.19207,-5.62983 l 1.52421,-1.31107 -3.06622,-1.93688 c -1.68642,-1.06528 -5.67998,-3.3974 -8.87458,-5.18249 -3.19459,-1.78509 -6.62863,-3.93584 -7.63119,-4.77944 -1.81295,-1.52549 -5.356,-6.92464 -9.65962,-14.72001 -3.4162,-6.18793 -3.88789,-6.71497 -5.10547,-5.70446 -0.55906,0.46397 -2.46309,3.42127 -4.23118,6.57176 -7.46181,13.29591 -7.85141,13.6858 -21.03105,21.04659 -3.15049,1.75954 -6.10779,3.65658 -6.57176,4.21564 -1.05734,1.27401 -0.92363,1.37766 9.42627,7.30739 4.2926,2.45935 8.81522,5.49339 10.05025,6.74232 1.23504,1.24892 3.91584,5.22737 5.95733,8.84099 6.0577,10.72264 6.59891,11.4796 7.60862,10.64161 0.48512,-0.40261 3.08309,-4.57009 5.77326,-9.26105 z"
+        fill="black"
+      />
+      <path d="m 425.07108,330.57589 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m -351.999998,0 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.473848,9.51823 -17.544888,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m 64.340978,61.52813 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m 225.19765,0.21238 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m -112.77127,-4.51352 14.4688,26.47266 c 3.23391,5.932 8.10833,10.8064 14.04019,14.04019 l 26.36544,14.36159 -26.47265,14.46879 c -5.93187,3.23391 -10.80629,8.10833 -14.04007,14.0402 l -14.36171,26.36544 -14.4688,-26.47266 c -3.22117,-5.87758 -8.05539,-10.71194 -13.93298,-13.93298 l -26.47265,-14.46879 26.47265,-14.4688 c 5.87759,-3.22118 10.71181,-8.05539 13.93298,-13.93298 z" />
+    </svg>
+  ),
+  [ICONS.CHANNEL_LEVEL_5_B]: (props: CustomProps) => (
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
@@ -1548,150 +1690,29 @@ export const icons = {
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth="1.5"
       />
-      <path
+      <path d="M12,19.875a.375.375,0,0,1,.375.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        d="M12,19.875a.375.375,0,0,1,.375.375"
+      <path d="M11.625,20.25A.375.375,0,0,1,12,19.875" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        fill="none"
+      <path d="M12,20.625a.375.375,0,0,1-.375-.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinecap="round"
+      <path d="M12.375,20.25a.375.375,0,0,1-.375.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinejoin="round"
+      <path d="M17.813,17.313a.375.375,0,0,1,.529-.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeWidth="1.5"
+      <path d="M17.836,17.843a.376.376,0,0,1-.023-.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      />
+      <path d="M18.366,17.819a.375.375,0,0,1-.53.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      <path
+      <path d="M18.342,17.289a.375.375,0,0,1,.024.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        d="M11.625,20.25A.375.375,0,0,1,12,19.875"
+      <path d="M19.843,11.294a.376.376,0,0,1,.34-.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        fill="none"
+      <path d="M20.25,11.634a.375.375,0,0,1-.407-.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinecap="round"
+      <path d="M20.59,11.227a.374.374,0,0,1-.34.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinejoin="round"
+      <path d="M20.183,10.887a.375.375,0,0,1,.407.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeWidth="1.5"
+      <path d="M6.187,17.313a.375.375,0,0,0-.529-.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      />
+      <path d="M6.164,17.843a.376.376,0,0,0,.023-.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      <path
+      <path d="M5.634,17.819a.375.375,0,0,0,.53.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        d="M12,20.625a.375.375,0,0,1-.375-.375"
+      <path d="M5.658,17.289a.375.375,0,0,0-.024.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        fill="none"
+      <path d="M4.157,11.294a.376.376,0,0,0-.34-.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinecap="round"
+      <path d="M3.75,11.634a.375.375,0,0,0,.407-.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeLinejoin="round"
+      <path d="M3.41,11.227a.374.374,0,0,0,.34.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        strokeWidth="1.5"
+      <path d="M3.817,10.887a.375.375,0,0,0-.407.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      />
+      <path d="M20.25 4.5L18 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-      <path
+      <path d="M6 4.5L3.75 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        d="M12.375,20.25a.375.375,0,0,1-.375.375"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M17.813,17.313a.375.375,0,0,1,.529-.024"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M17.836,17.843a.376.376,0,0,1-.023-.53"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M18.366,17.819a.375.375,0,0,1-.53.024"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M18.342,17.289a.375.375,0,0,1,.024.53"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M19.843,11.294a.376.376,0,0,1,.34-.407"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M20.25,11.634a.375.375,0,0,1-.407-.34"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M20.59,11.227a.374.374,0,0,1-.34.407"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M20.183,10.887a.375.375,0,0,1,.407.34"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M6.187,17.313a.375.375,0,0,0-.529-.024"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M6.164,17.843a.376.376,0,0,0,.023-.53"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M5.634,17.819a.375.375,0,0,0,.53.024"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M5.658,17.289a.375.375,0,0,0-.024.53"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M4.157,11.294a.376.376,0,0,0-.34-.407"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M3.75,11.634a.375.375,0,0,0,.407-.34"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M3.41,11.227a.374.374,0,0,0,.34.407"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M3.817,10.887a.375.375,0,0,0-.407.34"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path d="M20.25 4.5L18 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
-      <path d="M6 4.5L3.75 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
     </g>
   ),
   [ICONS.PEACE]: (props: CustomProps) => (

ui/component/fileActions/view.jsx

@@ -112,7 +112,7 @@ export default function FileActions(props: Props) {
     }
   }
   return (
-    <div className="media__actions section__actions--no-margin">
+    <div className="media__actions">
       {ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
 
       <ClaimSupportButton uri={uri} fileAction />

ui/component/fileReactions/view.jsx

@@ -4,9 +4,10 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
+import RatioBar from 'component/ratioBar';
 import { formatNumberWithCommas } from 'util/number';
 import NudgeFloating from 'component/nudgeFloating';
-import Tooltip from 'component/common/tooltip';
+// import Tooltip from 'component/common/tooltip';
 
 const LIVE_REACTION_FETCH_MS = 1000 * 45;
 
@@ -103,27 +104,38 @@ export default function FileReactions(props: Props) {
         />
       )}
 
-      <FileReaction
+      <div className={'ratio-wrapper'}>
+        <Button
           title={__('I like this')}
+          requiresAuth={IS_WEB}
+          authSrc="filereaction_like"
+          className={classnames('button--file-action button-like', {
+            'button--fire': myReaction === REACTION_TYPES.LIKE,
+          })}
           label={likeLabel}
+          iconSize={18}
           icon={likeIcon}
-        isActive={myReaction === REACTION_TYPES.LIKE}
-        activeClassName="button--fire"
           onClick={() => doReactionLike(uri)}
         />
-
+        <Button
-      <FileReaction
+          requiresAuth={IS_WEB}
+          authSrc={'filereaction_dislike'}
           title={__('I dislike this')}
+          className={classnames('button--file-action button-dislike', {
+            'button--slime': myReaction === REACTION_TYPES.DISLIKE,
+          })}
           label={dislikeLabel}
+          iconSize={18}
           icon={dislikeIcon}
-        isActive={myReaction === REACTION_TYPES.DISLIKE}
-        activeClassName="button--slime"
           onClick={() => doReactionDislike(uri)}
         />
+        <RatioBar likeCount={likeCount} dislikeCount={dislikeCount} />
+      </div>
     </>
   );
 }
 
+/*
 type ReactionProps = {
   title: string,
   label: any,
@@ -152,3 +164,4 @@ const FileReaction = (reactionProps: ReactionProps) => {
     </Tooltip>
   );
 };
+*/

ui/component/fileRenderFloating/view.jsx

@@ -20,8 +20,8 @@ import AutoplayCountdown from 'component/autoplayCountdown';
 
 // scss/init/vars.scss
 // --header-height
-const HEADER_HEIGHT = 64;
+const HEADER_HEIGHT = 60;
-const HEADER_HEIGHT_MOBILE = 56;
+const HEADER_HEIGHT_MOBILE = 60;
 
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
@@ -335,7 +335,7 @@ export default function FileRenderFloating(props: Props) {
           'content__viewer--floating': isFloating,
           'content__viewer--inline': !isFloating,
           'content__viewer--secondary': isComment,
-          'content__viewer--theater-mode': !isFloating && videoTheaterMode,
+          'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri,
           'content__viewer--disable-click': wasDragging,
         })}
         style={

ui/component/fileThumbnail/FreezeframeLite/styles.scss

@@ -57,7 +57,7 @@ $transition-duration: 300ms;
   }
 
   &.ff-responsive {
-    width: 100%;
+    max-width: 100%;
 
     .ff-image,
     .ff-canvas {

ui/component/header/view.jsx

@@ -198,13 +198,12 @@ const Header = (props: Props) => {
                 <span style={{ position: 'relative' }}>
                   <Button
                     aria-label={sidebarLabel}
-                    className="header__navigationItem--icon"
+                    className="header__navigationItem--icon button-rotate"
                     icon={ICONS.MENU}
                     aria-expanded={sidebarOpen}
                     onClick={() => setSidebarOpen(!sidebarOpen)}
-                  >
+                  />
                   {isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
-                  </Button>
                 </span>
               )}
 

ui/component/headerProfileMenuButton/view.jsx

@@ -38,7 +38,7 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
             })}
           >
             {activeChannelUrl ? (
-              <ChannelThumbnail uri={activeChannelUrl} small noLazyLoad />
+              <ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad />
             ) : (
               <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
             )}

ui/component/livestreamChatLayout/view.jsx

@@ -290,7 +290,7 @@ export default function LivestreamChatLayout(props: Props) {
               {chatContentToggle(
                 VIEW_MODES.SUPERCHAT,
                 <>
-                  <CreditAmount amount={superChatsLBCAmount || 0} size={8} /> /
+                  <CreditAmount amount={superChatsLBCAmount || 0} size={8} /> /&nbsp;
                   <CreditAmount amount={superChatsFiatAmount || 0} size={8} isFiat /> {__('Tipped')}
                 </>
               )}

ui/component/livestreamComment/view.jsx

@@ -90,7 +90,6 @@ export default function LivestreamComment(props: Props) {
     >
       {supportAmount > 0 && (
         <div className="livestreamComment__superchatBanner">
-          <div className="livestreamComment__superchatBanner--corner" />
           <CreditAmount isFiat={isFiat} amount={supportAmount} superChat />
         </div>
       )}

ui/component/notification/view.jsx

@@ -79,9 +79,9 @@ export default function Notification(props: Props) {
       channelUrl = notification_parameters.dynamic.channel_url;
       icon = creatorIcon(channelUrl, notification_parameters?.dynamic?.channel_thumbnail);
       break;
+    case RULE.WEEKLY_WATCH_REMINDER:
     case RULE.DAILY_WATCH_AVAILABLE:
     case RULE.DAILY_WATCH_REMIND:
-    case RULE.WEEKLY_WATCH_REMINDER:
     case RULE.MISSED_OUT:
     case RULE.REWARDS_APPROVAL_PROMPT:
       icon = <Icon icon={ICONS.LBC} sectionIcon />;
@@ -138,9 +138,9 @@ export default function Notification(props: Props) {
 
   function getNotificationTarget() {
     switch (notification_rule) {
+      case RULE.WEEKLY_WATCH_REMINDER:
       case RULE.DAILY_WATCH_AVAILABLE:
       case RULE.DAILY_WATCH_REMIND:
-      case RULE.WEEKLY_WATCH_REMINDER:
         return `/$/${PAGES.CHANNELS_FOLLOWING}`;
       case RULE.MISSED_OUT:
       case RULE.REWARDS_APPROVAL_PROMPT:

ui/component/page/view.jsx

@@ -7,6 +7,7 @@ import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import classnames from 'classnames';
 import Header from 'component/header';
 import React from 'react';
+import Wallpaper from 'component/wallpaper';
 import SettingsSideNavigation from 'component/settingsSideNavigation';
 import SideNavigation from 'component/sideNavigation';
 import type { Node } from 'react';
@@ -66,6 +67,7 @@ function Page(props: Props) {
   const isMobile = useIsMobile();
   const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', false);
 
+  const url = pathname.slice(1).replace(/:/g, '#');
   let isOnFilePage = false;
   try {
     const url = pathname.slice(1).replace(/:/g, '#');
@@ -85,6 +87,7 @@ function Page(props: Props) {
 
   return (
     <>
+      <Wallpaper uri={url} />
       {!noHeader && (
         <Header
           authHeader={authPage}
@@ -132,7 +135,7 @@ function Page(props: Props) {
               'main--file-page': filePage,
               'main--settings-page': settingsPage,
               'main--markdown': isMarkdown,
-              'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream,
+              'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream && !isMarkdown,
               'main--livestream': livestream && !chatDisabled,
               'main--popout-chat': isPopoutWindow,
             })}

ui/component/postViewer/view.jsx

@@ -52,17 +52,16 @@ function PostViewer(props: Props) {
 
   return (
     <div className="post">
-      <FileTitle uri={uri} className="post__title">
+      <FileTitle uri={uri} className="post__title" />
-        <span className="post__date">
-          <DateTime uri={uri} type="date" />
-        </span>
-      </FileTitle>
-
       <div
         className={classnames('post__info', {
           'post__info--expanded': expand !== EXPAND.NONE,
         })}
       >
+        <span className="post__date">
+          <DateTime uri={uri} type="date" />
+          <FileViewCount uri={uri} />
+        </span>
         <div className="post__info--grouped">
           <Button
             button="link"
@@ -86,7 +85,6 @@ function PostViewer(props: Props) {
             />
           )}
         </div>
-        <FileViewCount uri={uri} />
       </div>
 
       {expand === EXPAND.CREDIT_DETAILS && (

ui/component/publishForm/view.jsx

@@ -583,7 +583,7 @@ function PublishForm(props: Props) {
 
   // Editing claim uri
   return (
-    <div className="card-stack">
+    <div className="card-stack uploadPage-wraper">
       <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
 
       <PublishFile
@@ -633,6 +633,7 @@ function PublishForm(props: Props) {
 
           <Card actions={<SelectThumbnail livestreamdData={livestreamData} />} />
 
+          <label>{__('Tags')}</label>
           <TagsSelect
             suggestMature={!SIMPLE_SITE}
             disableAutoFocus

ui/component/publishPending/view.jsx

@@ -27,9 +27,9 @@ const PublishPending = (props: Props) => {
     return <span>{__('Uploading (%progress%%) ', { progress: progress })}</span>;
   } else {
     return (
-      <span>
+      <div className="confirming-change">
         {__('Confirming...')} <Spinner type="small" />
-      </span>
+      </div>
     );
   }
 };

ui/component/publishPrice/view.jsx

@@ -14,6 +14,8 @@ function PublishPrice(props: Props) {
   const { contentIsFree, fee, updatePublishForm, disabled } = props;
 
   return (
+    <>
+      <label>{__('Price')}</label>
       <Card
         actions={
           <React.Fragment>
@@ -39,7 +41,7 @@ function PublishPrice(props: Props) {
                 name="content_cost_amount"
                 min={0}
                 price={fee}
-              onChange={newFee => updatePublishForm({ fee: newFee })}
+                onChange={(newFee) => updatePublishForm({ fee: newFee })}
               />
             )}
             {fee && fee.currency !== 'LBC' && (
@@ -52,6 +54,7 @@ function PublishPrice(props: Props) {
           </React.Fragment>
         }
       />
+    </>
   );
 }
 

ui/component/ratioBar/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import RatioBar from './view';
+
+const select = (state, props) => ({});
+
+export default connect(select)(RatioBar);

ui/component/ratioBar/view.jsx

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  likeCount: number,
+  dislikeCount: number,
+};
+
+const RatioBar = (props: Props) => {
+  const { likeCount, dislikeCount } = props;
+
+  const like = (1 / (likeCount + dislikeCount)) * likeCount;
+  if (like || dislikeCount) {
+    return (
+      <div className={'ratio-bar'}>
+        <div className={'ratio-bar-like'} style={{ flex: like }} />
+        <div className={'ratio-bar-dislike'} style={{ flex: 1 - like }} />
+      </div>
+    );
+  } else {
+    return <div className={'ratio-bar'} />;
+  }
+};
+
+export default RatioBar;

ui/component/recommendedContent/view.jsx

@@ -112,18 +112,18 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
       title={__('Related')}
       titleActions={
         signingChannel && (
-          <div className="recommended-content__toggles">
+          <div className="recommended-content__bubble">
             <Button
-              className={classnames('button-toggle', {
+              className={classnames('button-bubble', {
-                'button-toggle--active': viewMode === VIEW_ALL_RELATED,
+                'button-bubble--active': viewMode === VIEW_ALL_RELATED,
               })}
-              label={__('All')}
+              label={__('Related')}
               onClick={() => setViewMode(VIEW_ALL_RELATED)}
             />
 
             <Button
-              className={classnames('button-toggle', {
+              className={classnames('button-bubble', {
-                'button-toggle--active': viewMode === VIEW_MORE_FROM,
+                'button-bubble--active': viewMode === VIEW_MORE_FROM,
               })}
               label={__('More from %claim_name%', { claim_name: channelName })}
               onClick={() => setViewMode(VIEW_MORE_FROM)}
@@ -139,7 +139,11 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
               loading={isSearching}
               uris={recommendedContentUris}
               hideMenu={isMobile}
-              injectedItem={SHOW_ADS && IS_WEB && !isAuthenticated && <Ads small type={'video'} triggerBlacklist={triggerBlacklist} />}
+              injectedItem={
+                SHOW_ADS &&
+                IS_WEB &&
+                !isAuthenticated && <Ads small type={'video'} triggerBlacklist={triggerBlacklist} />
+              }
               empty={__('No related content found')}
               onClick={handleRecommendationClicked}
             />

ui/component/repostCreate/view.jsx

@@ -315,6 +315,7 @@ function RepostCreate(props: Props) {
       <ChannelSelector />
 
       <Card
+        className="repost-wrapper"
         actions={
           <div>
             {uri && (

ui/component/scheduledStreams/view.jsx

@@ -91,6 +91,7 @@ const ScheduledStreams = (props: Props) => {
         infiniteScroll={false}
         showNoSourceClaims
         hideLayoutButton
+        // header={__('🔴 Upcoming Livestreams')}
         header={<Header />}
         maxClaimRender={upcomingMax}
         excludeUris={liveUris}

ui/component/selectThumbnail/view.jsx

@@ -123,6 +123,8 @@ function SelectThumbnail(props: Props) {
   return (
     <>
       {status !== THUMBNAIL_STATUSES.IN_PROGRESS && (
+        <>
+          <label>{__('Thumbnail')}</label>
           <div className="column">
             {thumbPreview}
             {publishForm && thumbUploaded ? (
@@ -181,6 +183,7 @@ function SelectThumbnail(props: Props) {
               </div>
             )}
           </div>
+        </>
       )}
 
       {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}

ui/component/settingsRow/view.jsx

@@ -17,7 +17,7 @@ export default function SettingsRow(props: Props) {
     <div
       className={classnames('card__main-actions settings__row', {
         'section__actions--between': !multirow,
-        'opacity-40': disabled,
+        'opacity-30': disabled,
       })}
     >
       <div className="settings__row--title">

ui/component/sideNavigation/view.jsx

@@ -11,11 +11,12 @@ import NotificationBubble from 'component/notificationBubble';
 import DebouncedInput from 'component/common/debounced-input';
 import I18nMessage from 'component/i18nMessage';
 import ChannelThumbnail from 'component/channelThumbnail';
-import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
+import { useIsMobile, useIsLargeScreen, isTouch } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
 import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 
 const FOLLOWED_ITEM_INITIAL_LIMIT = 10;
+const touch = isTouch();
 
 type SideNavLink = {
   title: string,
@@ -448,6 +449,7 @@ function SideNavigation(props: Props) {
           'navigation--micro': showMicroMenu,
           'navigation--push': showPushMenu,
           'navigation-file-page-and-mobile': hideMenuFromView,
+          'navigation-touch': touch,
         })}
       >
         {(!canDisposeMenu || sidebarOpen) && (

ui/component/subscribeButton/view.jsx

@@ -73,7 +73,7 @@ export default function SubscribeButton(props: Props) {
 
   if (isSubscribed && !permanentUrl && rawChannelName) {
     return (
-      <div className="button-group">
+      <div className="button-group button-group-subscribed">
         <Button
           ref={buttonRef}
           iconColor="red"
@@ -105,6 +105,7 @@ export default function SubscribeButton(props: Props) {
       <Button
         ref={buttonRef}
         iconColor="red"
+        className={isSubscribed ? 'button-following' : ''}
         largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
         icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE}
         button={'alt'}
@@ -129,6 +130,7 @@ export default function SubscribeButton(props: Props) {
           <Button
             button="alt"
             icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
+            className={isSubscribed ? 'button-following' : ''}
             aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
             onClick={() => {
               const newNotificationsDisabled = !notificationsDisabled;

ui/component/transactionListTable/view.jsx

@@ -33,10 +33,10 @@ function TransactionListTable(props: Props) {
           <table className="table table--transactions">
             <thead>
               <tr>
-                <th>{__('Date')}</th>
+                <th className="table-column-lbc-date">{__('Date')}</th>
-                <th>{<>{__('Type')}</>}</th>
+                <th className="table-column-lbc-type">{<>{__('Type')}</>}</th>
                 <th>{__('Details')} </th>
-                <th>{__('Transaction')}</th>
+                <th className="table-column-lbc-transaction">{__('Transaction')}</th>
                 <th className="table__item--align-right">
                   <LbcSymbol size={18} />
                 </th>

ui/component/userVerify/view.jsx

@@ -151,7 +151,13 @@ class UserVerify extends React.PureComponent<Props> {
                 <p>{__('You will be asked to provide proof of identity.')}</p>
               </>
             }
-            actions={<Button href="https://verification.odysee.com" button="primary" label={__('Join the Odysee Rewards Discord')} />}
+            actions={
+              <Button
+                href="https://verification.odysee.com"
+                button="primary"
+                label={__('Join the Odysee Rewards Discord')}
+              />
+            }
           />
 
           <div className="section__divider">

ui/component/viewers/videoViewer/internal/videojs-events.jsx

@@ -50,7 +50,7 @@ const VideoJsEvents = ({
   uri: string,
   doAnalyticsView: (string, number) => any,
   claimRewards: () => void,
-  playerServerRef: any
+  playerServerRef: any,
 }) => {
   /**
    * Analytics functionality that is run on first video start

ui/component/viewers/videoViewer/internal/videojs-functions.jsx

@@ -1,9 +1,5 @@
 // @flow
-const VideoJsFunctions = ({
+const VideoJsFunctions = ({ isAudio }: { isAudio: boolean }) => {
-   isAudio,
-}: {
-  isAudio: boolean,
-}) => {
   // TODO: can remove this function as well
   // Create the video DOM element and wrapper
   function createVideoPlayerDOM(container: any) {

ui/component/walletFiatAccountHistory/view.jsx

@@ -30,12 +30,12 @@ const WalletBalance = (props: Props) => {
         <thead>
           <tr>
             <th className="date-header">{__('Date')}</th>
-            <th>{<>{__('Receiving Channel Name')}</>}</th>
+            <th className="channelName-header">{<>{__('Receiving Channel Name')}</>}</th>
-            <th>{__('Tip Location')}</th>
+            <th className="location-header">{__('Tip Location')}</th>
-            <th>{__('Amount (USD)')} </th>
+            <th className="amount-header">{__('Amount (USD)')} </th>
-            <th>{__('Processing Fee')}</th>
+            <th className="processingFee-header">{__('Processing Fee')}</th>
-            <th>{__('Odysee Fee')}</th>
+            <th className="odyseeFee-header">{__('Odysee Fee')}</th>
-            <th>{__('Received Amount')}</th>
+            <th className="receivedAmount-header">{__('Received Amount')}</th>
           </tr>
         </thead>
         <tbody>

ui/component/walletFiatPaymentHistory/view.jsx

@@ -51,11 +51,11 @@ const WalletBalance = (props: Props) => {
             <thead>
               <tr>
                 <th className="date-header">{__('Date')}</th>
-                <th>{<>{__('Receiving Channel Name')}</>}</th>
+                <th className="channelName-header">{<>{__('Receiving Channel Name')}</>}</th>
-                <th>{__('Tip Location')}</th>
+                <th className="location-header">{__('Tip Location')}</th>
-                <th>{__('Amount (USD)')} </th>
+                <th className="amount-header">{__('Amount (USD)')} </th>
-                <th>{__('Card Last 4')}</th>
+                <th className="card-header">{__('Card Last 4')}</th>
-                <th>{__('Anonymous')}</th>
+                <th className="anonymous-header">{__('Anonymous')}</th>
               </tr>
             </thead>
             {/* list data for transactions */}

ui/component/wallpaper/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+// import { makeSelectCoverForUri, makeSelectAvatarForUri } from 'redux/selectors/claims';
+import Wallpaper from './view';
+
+/*
+const select = (state, props) => {
+  if (props.uri && (props.uri.indexOf('@') !== -1 || props.uri.indexOf('#') !== -1)) {
+    return {
+      cover: makeSelectCoverForUri(props.uri)(state),
+      avatar: makeSelectAvatarForUri(props.uri)(state),
+    };
+  } else return {};
+};
+*/
+
+export default connect()(Wallpaper);

ui/component/wallpaper/view.jsx

@@ -0,0 +1,235 @@
+// @flow
+import React from 'react';
+// import { resetColors } from 'util/theme';
+
+type Props = {
+  // uri: ?string,
+  // cover: ?string,
+  // avatar: ?string,
+  reset: ?boolean,
+};
+
+const Wallpaper = (props: Props) => {
+  // const { cover, avatar } = props;
+
+  /*
+  if (avatar) {
+    toDataUrl(avatar, function (image) {
+      if (image) {
+        let threshold = 155;
+        getAverageRGB(image, function (rgb) {
+          let brightness = Math.round((parseInt(rgb.r) * 299 + parseInt(rgb.g) * 587 + parseInt(rgb.b) * 114) / 1000);
+          if (colorCompare(rgb) < 15) {
+            rgb = colorMixer(rgb, brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.7);
+          }
+
+          // Tune link color in light theme
+          if (document.documentElement !== null) {
+            if (getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000') {
+              let link = colorMixer(
+                rgb,
+                brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 },
+                0.8
+              );
+              document.documentElement !== null &&
+                document.documentElement.style.setProperty(
+                  '--color-link',
+                  'rgba(' + link.r + ',' + link.g + ',' + link.b + ', 1)'
+                );
+            } else {
+              document.documentElement !== null &&
+                document.documentElement.style.setProperty('--color-link', 'var(--color-primary)');
+            }
+          }
+          document.documentElement !== null &&
+            document.documentElement.style.setProperty('--color-primary-dynamic', rgb.r + ',' + rgb.g + ',' + rgb.b);
+          document.documentElement !== null &&
+            document.documentElement.style.setProperty(
+              '--color-primary-contrast',
+              brightness > 155 ? 'black' : 'white'
+            );
+
+          if (document.documentElement !== null) {
+            threshold =
+              getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 70 : 155;
+          }
+          let rgbs = colorMixer(rgb, brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.6);
+          let brightnesss = Math.round(
+            (parseInt(rgbs.r) * 299 + parseInt(rgbs.g) * 587 + parseInt(rgbs.b) * 114) / 1000
+          );
+          document.documentElement !== null &&
+            document.documentElement.style.setProperty(
+              '--color-secondary-dynamic',
+              rgbs.r + ',' + rgbs.g + ',' + rgbs.b
+            );
+          document.documentElement !== null &&
+            document.documentElement.style.setProperty(
+              '--color-secondary-contrast',
+              brightnesss > 155 ? 'black' : 'white'
+            );
+        });
+      }
+    });
+  } else {
+    resetColors(true);
+  }
+
+  function toDataUrl(url, callback) {
+    const xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+      const reader = new FileReader();
+      reader.onloadend = function () {
+        const image = new Image();
+        image.src = reader.result.toString();
+        image.onload = () => callback(image);
+      };
+      reader.readAsDataURL(xhr.response);
+    };
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.send();
+  }
+
+  function getAverageRGB(img, callback) {
+    const blockSize = 5;
+    const defaultRGB = { r: 0, g: 0, b: 0 };
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext && canvas.getContext('2d');
+    const rgb = { r: 0, g: 0, b: 0 };
+    const rgb_gray = { r: 0, g: 0, b: 0 };
+    const blackwhite = { r: 0, g: 0, b: 0 };
+    let count = 0;
+    let count_gray = 0;
+    let count_off = 0;
+    let i = -4;
+    let data;
+    let length;
+
+    if (!context) {
+      return defaultRGB;
+    }
+
+    const height = (canvas.height = img.naturalHeight || img.offsetHeight || img.height);
+    const width = (canvas.width = img.naturalWidth || img.offsetWidth || img.width);
+
+    context.drawImage(img, 0, 0);
+
+    try {
+      data = context.getImageData(0, 0, width, height);
+    } catch (e) {
+      return defaultRGB;
+    }
+
+    length = data.data.length;
+
+    while ((i += blockSize * 4) < length) {
+      if (shadeCheck(data.data, i, 75)) {
+        ++count;
+        rgb.r += data.data[i];
+        rgb.g += data.data[i + 1];
+        rgb.b += data.data[i + 2];
+      } else if (shadeCheck(data.data, i, 25)) {
+        ++count_gray;
+        rgb_gray.r += data.data[i];
+        rgb_gray.g += data.data[i + 1];
+        rgb_gray.b += data.data[i + 2];
+      } else {
+        ++count_off;
+        blackwhite.r += data.data[i];
+        blackwhite.g += data.data[i + 1];
+        blackwhite.b += data.data[i + 2];
+      }
+    }
+
+    if ((100 / (count + count_gray + count_off)) * count > 3) {
+      rgb.r = ~~(rgb.r / count);
+      rgb.g = ~~(rgb.g / count);
+      rgb.b = ~~(rgb.b / count);
+    } else if (count_gray > count_off) {
+      rgb.r = ~~(rgb_gray.r / count_gray);
+      rgb.g = ~~(rgb_gray.g / count_gray);
+      rgb.b = ~~(rgb_gray.b / count_gray);
+    } else {
+      let shade = 255;
+      if (document.documentElement !== null) {
+        shade = getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 0 : 255;
+      }
+      rgb.r = shade;
+      rgb.g = shade;
+      rgb.b = shade;
+    }
+
+    callback(rgb);
+  }
+
+  function shadeCheck(data, i, threshold) {
+    let white = 0;
+    if (data[i] > 255 - threshold) white = white + 1;
+    if (data[i + 1] > 255 - threshold) white = white + 1;
+    if (data[i + 2] > 255 - threshold) white = white + 1;
+    let black = 0;
+    if (data[i] < threshold) black = black + 1;
+    if (data[i + 1] < threshold) black = black + 1;
+    if (data[i + 2] < threshold) black = black + 1;
+
+    if (white > 2 || black > 2) return false;
+    else return true;
+  }
+
+  function colorChannelMixer(a, b, mix) {
+    let channelA = a * mix;
+    let channelB = b * (1 - mix);
+    return parseInt(channelA + channelB);
+  }
+
+  function colorMixer(rgbA, rgbB, mix) {
+    let r = colorChannelMixer(rgbA.r, rgbB.r, mix);
+    let g = colorChannelMixer(rgbA.g, rgbB.g, mix);
+    let b = colorChannelMixer(rgbA.b, rgbB.b, mix);
+    return { r: r, g: g, b: b };
+  }
+
+  function colorCompare(rgb) {
+    let bg = 0;
+    if (document.documentElement !== null) {
+      bg = getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 221 : 32;
+    }
+    let r = Math.abs(rgb.r - bg);
+    let g = Math.abs(rgb.g - bg);
+    let b = Math.abs(rgb.b - bg);
+
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+
+    return ((r + g + b) / 3) * 100;
+  }
+  */
+
+  /*
+  if (cover) {
+    return (
+      cover && (
+        <>
+          <div className={'background-image'} style={{ backgroundImage: 'url("' + cover + '")' }} />
+          <div className={'theme'} />
+        </>
+      )
+    );
+  } else {  */
+  return (
+    <>
+      <div
+        className={'background-image'}
+        style={{
+          backgroundImage:
+            'url("https://thumbnails.odysee.com/optimize/plain/https://cdn.lbryplayer.xyz/speech/2e9a7dc6c99f0fb9.jpg")',
+        }}
+      />
+      <div className={'theme'} />
+    </>
+  );
+  // }
+};
+
+export default Wallpaper;

ui/component/webUploadList/internal/web-upload-item.jsx

@@ -167,7 +167,7 @@ export default function WebUploadItem(props: Props) {
   }, [locked, showFileSelector]);
 
   return (
-    <li className={'web-upload-item claim-preview claim-preview--padded claim-preview--inactive card--inline'}>
+    <li className={'web-upload-item claim-preview claim-preview--inactive card--inline'}>
       <FileThumbnail thumbnail={params.thumbnail_url} />
       <div className={'claim-preview-metadata'}>
         <div className="claim-preview-info">

ui/component/wunderbarSuggestions/view.jsx

@@ -309,7 +309,7 @@ export default function WunderBarSuggestions(props: Props) {
         className={classnames('wunderbar__wrapper', { 'wunderbar__wrapper--mobile': isMobile })}
         onSubmit={() => handleSelect(term)}
       >
-        <Combobox className="wunderbar" onSelect={handleSelect}>
+        <Combobox className="wunderbar" onSelect={handleSelect} openOnFocus>
           <Icon icon={ICONS.SEARCH} />
           <ComboboxInput
             ref={inputRef}

ui/constants/claim_search.js

@@ -40,7 +40,7 @@ export const ORDER_BY_NEW_ASC = 'new_asc';
 export const ORDER_BY_NEW_ASC_VALUE = ['^release_time'];
 
 // @note: These are used to build the default controls available on claim listings.
-export const ORDER_BY_TYPES = [ORDER_BY_TRENDING, ORDER_BY_NEW, ORDER_BY_TOP];
+export const ORDER_BY_TYPES = [ORDER_BY_NEW, ORDER_BY_TRENDING, ORDER_BY_TOP];
 
 export const DURATION_SHORT = 'short';
 export const DURATION_LONG = 'long';

ui/constants/icons.js

@@ -150,10 +150,15 @@ export const CREATOR_LIKE = 'CreatorLike';
 export const CHEF = 'Chef';
 export const ANONYMOUS = 'Anonymous';
 export const CHANNEL_LEVEL_1 = 'ChannelLevel1';
+export const CHANNEL_LEVEL_1_B = 'ChannelLevel1B';
 export const CHANNEL_LEVEL_2 = 'ChannelLevel2';
+export const CHANNEL_LEVEL_2_B = 'ChannelLevel2B';
 export const CHANNEL_LEVEL_3 = 'ChannelLevel3';
+export const CHANNEL_LEVEL_3_B = 'ChannelLevel3B';
 export const CHANNEL_LEVEL_4 = 'ChannelLevel4';
+export const CHANNEL_LEVEL_4_B = 'ChannelLevel4B';
 export const CHANNEL_LEVEL_5 = 'ChannelLevel5';
+export const CHANNEL_LEVEL_5_B = 'ChannelLevel5B';
 export const MOVIES = 'Movies';
 export const WILD_WEST = 'WildWest';
 export const UNIVERSE = 'Universe';

ui/constants/notifications.js

@@ -5,9 +5,9 @@ export const RULE = {
   FIAT_TIP: 'fiat_tip',
   NEW_CONTENT: 'new_content',
   NEW_LIVESTREAM: 'new_livestream',
+  WEEKLY_WATCH_REMINDER: 'weekly_watch_reminder',
   DAILY_WATCH_AVAILABLE: 'daily_watch_available',
   DAILY_WATCH_REMIND: 'daily_watch_remind',
-  WEEKLY_WATCH_REMINDER: 'weekly_watch_reminder',
   MISSED_OUT: 'missed_out',
   REWARDS_APPROVAL_PROMPT: 'rewards_approval_prompt',
   CREATOR_SUBSCRIBER: 'creator_subscriber',

ui/constants/tags.js

@@ -15,6 +15,7 @@ export const DEFAULT_FOLLOWED_TAGS = [
 
 export const INTERNAL_TAG_PREFIX = 'c:';
 
+// export const CHANNEL_COLOR_TAG = 'c:color';
 export const DISABLE_COMMENTS_TAG = 'c:disable-comments';
 export const DISABLE_SUPPORT_TAG = 'disable-support';
 export const PREFERENCE_EMBED = 'c:preference-embed';

ui/effects/use-persisted-state.js

@@ -7,7 +7,7 @@ function getSetAllValues(key, setValue) {
     // If no key just return the normal setValue function
     return setValue;
   }
-  return value => listeners[key].forEach(fn => fn(value));
+  return (value) => listeners[key].forEach((fn) => fn(value));
 }
 
 export default function usePersistedState(key, firstTimeDefault) {
@@ -58,7 +58,7 @@ export default function usePersistedState(key, firstTimeDefault) {
     return () => {
       if (key) {
         // remove hook on unmount
-        listeners[key] = listeners[key].filter(listener => listener !== setValue);
+        listeners[key] = listeners[key].filter((listener) => listener !== setValue);
       }
     };
   }, [key, value, localStorageAvailable]);

ui/effects/use-screensize.js

@@ -58,3 +58,7 @@ export function useIsMediumScreen() {
 export function useIsLargeScreen() {
   return useHasWindowWidthChangedEnough((windowSize) => windowSize > 1600);
 }
+
+export function isTouch() {
+  return 'ontouchstart' in window || 'onmsgesturechange' in window;
+}

ui/page/channel/view.jsx

@@ -19,7 +19,6 @@ import ChannelEdit from 'component/channelEdit';
 import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
-import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import ClaimMenuList from 'component/claimMenuList';
 import OptimizedImage from 'component/optimizedImage';
 import Yrbl from 'component/yrbl';
@@ -208,7 +207,7 @@ function ChannelPage(props: Props) {
   }
 
   return (
-    <Page noFooter>
+    <Page className="channelPage-wrapper" noFooter>
       <header className="channel-cover">
         <div className="channel__quick-actions">
           {isMyYouTubeChannel && (
@@ -228,12 +227,11 @@ function ChannelPage(props: Props) {
         {cover && <img className={classnames('channel-cover__custom')} src={PlaceholderTx} />}
         {cover && <OptimizedImage className={classnames('channel-cover__custom')} src={cover} objectFit="cover" />}
         <div className="channel__primary-info">
-          <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />
+          <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs />
           <h1 className="channel__title">
             <TruncatedText lines={2} showTooltip>
               {title || (channelName && '@' + channelName)}
             </TruncatedText>
-            <ChannelStakedIndicator uri={uri} large />
           </h1>
           <div className="channel__meta">
             <Tooltip title={formattedSubCount} followCursor placement="top">

ui/page/channels/view.jsx

@@ -45,7 +45,7 @@ export default function ChannelsPage(props: Props) {
   }, [setRewardData]);
 
   return (
-    <Page>
+    <Page className="channelsPage-wrapper">
       <div className="card-stack">
         {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
 

ui/page/channelsFollowingDiscover/view.jsx

@@ -98,7 +98,7 @@ function ChannelsFollowingDiscover(props: Props) {
   });
 
   return (
-    <Page>
+    <Page className="discoverPage-wrapper">
       {!SIMPLE_SITE &&
         rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
           <div key={title} className="claim-grid__wrapper">

ui/page/collection/view.jsx

@@ -221,7 +221,8 @@ export default function CollectionPage(props: Props) {
 
   if (urlsReady) {
     return (
-      <Page>
+      <Page className="playlistPage-wrapper">
+        {editing}
         <div className={classnames('section card-stack')}>
           {info}
 

ui/page/fileListPublished/view.jsx

@@ -117,7 +117,7 @@ function FileListPublished(props: Props) {
                   )}
                   <Button
                     icon={ICONS.PUBLISH}
-                    button="secondary"
+                    button="primary"
                     label={__('Upload')}
                     navigate={`/$/${PAGES.UPLOAD}`}
                     onClick={() => clearPublish()}

ui/page/home/view.jsx

@@ -143,7 +143,7 @@ function HomePage(props: Props) {
   const scheduledStreamsLoaded = (total) => setHasScheduledStreams(total > 0);
 
   return (
-    <Page fullWidthPage>
+    <Page className="homePage-wrapper" fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
         <div className="notice-message">
           <h1 className="section__title">

ui/page/lists/view.jsx

@@ -7,7 +7,7 @@ import Icon from 'component/common/icon';
 
 function ListsPage() {
   return (
-    <Page>
+    <Page className="playlistPage-wrapper">
       <label className="claim-list__header-label">
         <span>
           <Icon icon={ICONS.STACK} size={10} />

ui/page/livestream/view.jsx

@@ -155,7 +155,7 @@ export default function LivestreamPage(props: Props) {
 
   return (
     <Page
-      className="file-page"
+      className="file-page scheduledLivestream-wrapper"
       noFooter
       livestream
       chatDisabled={hideComments}

ui/page/search/view.jsx

@@ -82,7 +82,7 @@ export default function SearchPage(props: Props) {
   }
 
   return (
-    <Page>
+    <Page className="searchPage-wrapper">
       <section className="search">
         {urlQuery && (
           <>

ui/page/signIn/view.jsx

@@ -5,7 +5,7 @@ import Page from 'component/page';
 
 export default function SignInPage() {
   return (
-    <Page authPage>
+    <Page authPage noFooter>
       <UserSignIn />
     </Page>
   );

ui/page/signInVerify/view.jsx

@@ -88,7 +88,7 @@ function SignInVerifyPage(props: Props) {
   }
 
   return (
-    <Page authPage>
+    <Page authPage noFooter>
       <div className="main__sign-up">
         <Card
           title={isAuthenticationSuccess ? __('Log in success!') : __('Log in')}

ui/page/signUp/view.jsx

@@ -5,7 +5,7 @@ import Page from 'component/page';
 
 export default function SignUpPage() {
   return (
-    <Page authPage>
+    <Page authPage noFooter>
       <UserSignUp />
     </Page>
   );

ui/page/top/view.jsx

@@ -22,7 +22,7 @@ function TopPage(props: Props) {
   // if the query was actually '@name', still offer repost for 'name'
   const queryName = name[0] === '@' ? name.slice(1) : name;
   return (
-    <Page>
+    <Page className="topPage-wrapper">
       <SearchTopClaim query={name} hideLink setChannelActive={setChannelActive} />
       <ClaimListDiscover
         name={channelActive ? `@${queryName}` : queryName}

ui/page/wallet/view.jsx

@@ -74,7 +74,7 @@ const WalletPage = (props: Props) => {
   return (
     <>
       {/* @if TARGET='web' */}
-      <Page>
+      <Page className="transactionsPage-wrapper">
         <Tabs onChange={onTabChange} index={tabIndex}>
           <TabList className="tabs__list--collection-edit-page">
             <Tab>{__('Balance')}</Tab>

ui/redux/reducers/settings.js

@@ -40,8 +40,8 @@ const defaultState = {
     // UI
     [SETTINGS.LANGUAGE]: null,
     [SETTINGS.SEARCH_IN_LANGUAGE]: false,
-    [SETTINGS.THEME]: __('light'),
+    [SETTINGS.THEME]: __('dark'),
-    [SETTINGS.THEMES]: [__('light'), __('dark')],
+    [SETTINGS.THEMES]: [__('dark'), __('light')],
     [SETTINGS.HOMEPAGE]: null,
     [SETTINGS.HIDE_SPLASH_ANIMATION]: false,
     [SETTINGS.HIDE_BALANCE]: false,

ui/redux/selectors/claims.js

@@ -392,8 +392,29 @@ export const selectThumbnailForUri = createCachedSelector(selectClaimForUri, (cl
 
 export const makeSelectCoverForUri = (uri: string) =>
   createSelector(makeSelectClaimForUri(uri), (claim) => {
+    if (claim && claim.value.cover) {
       const cover = claim && claim.value && claim.value.cover;
       return cover && cover.url ? cover.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
+    } else {
+      const cover = claim && claim.signing_channel && claim.signing_channel.value && claim.signing_channel.value.cover;
+      return cover && cover.url ? cover.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
+    }
+  });
+
+export const makeSelectAvatarForUri = (uri: string) =>
+  createSelector(makeSelectClaimForUri(uri), (claim) => {
+    if (claim && claim.value.cover) {
+      const avatar = claim && claim.value && claim.value.thumbnail && claim.value.thumbnail;
+      return avatar && avatar.url ? avatar.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
+    } else {
+      const avatar =
+        claim &&
+        claim.signing_channel &&
+        claim.signing_channel.value &&
+        claim.signing_channel.value.thumbnail &&
+        claim.signing_channel.value.thumbnail;
+      return avatar && avatar.url ? avatar.url.trim().replace(/^http:\/\//i, 'https://') : false;
+    }
   });
 
 export const selectIsFetchingClaimListMine = (state: State) => selectState(state).isFetchingClaimListMine;

ui/scss/all.scss

@@ -18,6 +18,7 @@
 @import 'component/_textarea-suggestions';
 @import 'component/claim-list';
 @import 'component/collection';
+@import 'component/color-picker';
 @import 'component/comments';
 @import 'component/content';
 @import 'component/dat-gui';

ui/scss/component/_ads.scss

@@ -18,15 +18,16 @@
 // Inline Video Ads
 .ads__claim-item {
   border-bottom: 1px solid var(--color-border);
+  margin-top: var(--spacing-m);
   padding: var(--spacing-m);
   background-color: var(--color-ads-background);
-  //display: flex;
+  border-radius: var(--border-radius);
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
 
   .ad__container {
-    width: 358px;
+    width: 314px;
     height: 201px;
   }
 

ui/scss/component/_animation.scss

@@ -70,11 +70,13 @@
 
 @keyframes menu-animate-in {
   0% {
-    transform: scaleY(0);
+    //transform: scaleZ(0);
-    opacity: 0;
+    transform: scale(1, 0);
+    opacity: 1;
   }
   100% {
-    transform: scaleY(1);
+    //    transform: scaleZ(1);
+    transform: scaleZ(1, 1);
     opacity: 1;
   }
 }

ui/scss/component/_block-list.scss

@@ -1,7 +1,19 @@
+.block-list {
+  .claim-preview__wrapper--channel {
+    .button--no-style {
+      .button__content {
+        align-items: unset;
+      }
+    }
+  }
+}
+
 .block-list--moderator {
+  .button--no-style {
     .button__content {
       align-items: flex-start;
     }
+  }
 
   .section__actions {
     flex-wrap: wrap;
@@ -10,6 +22,9 @@
 
 .block-list--delegator {
   padding: var(--spacing-s);
+  background-color: rgba(var(--color-background-base), 0.6);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
 
   .button--alt,
   .button--secondary {
@@ -36,7 +51,7 @@
   }
 
   .section {
-    margin-left: var(--spacing-m);
+    // margin-left: var(--spacing-m);
   }
 
   label {

ui/scss/component/_button.scss

@@ -10,10 +10,7 @@
 .button--secondary,
 .button--alt,
 .button--link {
-  border-radius: var(--border-radius);
-
   &:focus {
-    @include focus;
     z-index: 2; // Ensure focus box-shadow is always visible on every button side
   }
 }
@@ -23,64 +20,111 @@
 .button--alt {
   height: var(--height-button);
   border-radius: var(--border-radius);
-  padding: var(--spacing-s) var(--spacing-m);
+  // padding: var(--spacing-s) var(--spacing-m);
-  line-height: 1.2;
+  padding: 0 var(--spacing-m);
+  line-height: 1.2em;
   font-weight: var(--font-weight-bold);
 
+  .button__label {
+    // height:1em;
+    margin-top: 2px;
+  }
+
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);
   }
 }
 
 .button--primary {
-  background-color: var(--color-button-primary-bg);
+  top: -1px;
+  background-color: var(--color-primary) !important;
 
   .button__label {
-    color: var(--color-button-primary-text);
+    color: var(--color-primary-contrast);
   }
 
   .icon {
-    stroke: var(--color-button-primary-text);
+    color: var(--color-primary-contrast);
-  }
-
-  &:hover {
-    color: var(--color-button-primary-hover-text);
-    background-color: var(--color-button-primary-bg-hover);
   }
 
   .credit-amount {
-    color: var(--color-button-primary-text);
+    color: var(--color-primary-contrast);
 
     .icon {
       margin-left: 3px;
-      margin-right: 2px;
+      margin-right: 3px;
+    }
+  }
+
+  &:hover {
+    .icon {
+      stroke: var(--color-primary-contrast) !important;
+    }
+  }
+
+  &:focus-visible {
+    background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
+    box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
+
+    .button__label {
+      color: var(--color-text) !important;
+    }
+
+    .icon {
+      stroke: var(--color-text) !important;
     }
   }
 }
 
 .button--secondary {
-  background-color: var(--color-button-secondary-bg);
+  background-color: var(--color-button-secondary-bg) !important;
-  border: 1px solid var(--color-button-secondary-border);
-
   .button__label {
-    color: var(--color-button-secondary-text);
+    color: var(--color-button-secondary-text) !important;
   }
-
   .icon {
-    stroke: var(--color-button-secondary-text);
+    stroke: var(--color-button-secondary-text) !important;
   }
 
   &:hover {
-    background-color: var(--color-button-secondary-bg-hover);
+    background-color: var(--color-button-secondary-bg-hover) !important;
+    .button__label {
+      color: var(--color-button-secondary-text-hover) !important;
+    }
+    .icon {
+      stroke: var(--color-button-secondary-text-hover) !important;
+    }
+  }
+
+  &:focus-visible {
+    background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
+    box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
+
+    .button__label {
+      color: var(--color-text) !important;
+    }
+
+    .icon {
+      stroke: var(--color-text) !important;
+    }
   }
 }
 
 .button--alt {
   background-color: var(--color-button-alt-bg);
   color: var(--color-button-alt-text);
-
   &:hover {
     background-color: var(--color-button-alt-bg-hover);
+    color: var(--color-button-alt-text-hover);
+  }
+}
+
+a.button--alt {
+  @media (max-width: $breakpoint-small) {
+    .button__label {
+      div:first-of-type {
+        top: 23% !important;
+      }
+    }
   }
 }
 
@@ -94,12 +138,25 @@
   background-color: var(--color-primary);
 
   &:hover {
-    background-color: var(--color-button-primary-bg-hover);
+    background-color: var(--color-button-secondary-bg-hover);
+
+    &.button--play {
+      background-color: var(--color-primary);
+      opacity: 1;
+    }
   }
 
   &.button--play {
+    // border: 2px solid black;
+    // background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
     background-position: calc(50% + 0.1rem) center;
+    opacity: 0.95;
+    transition: opacity 0.2s;
+    &:hover {
+      opacity: 1;
+      transition: opacity 0s;
+    }
   }
 
   &.button--view {
@@ -180,7 +237,7 @@
   order: 1;
   width: 24px;
   height: 14px;
-  border-radius: var(--border-radius);
+  border-radius: 8px;
   background: var(--color-gray-4);
   transition: background 0.2s;
 }
@@ -198,7 +255,7 @@
   width: 14px;
   background: var(--color-white);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-  border-radius: var(--border-radius);
+  border-radius: 50%;
   transition: transform 0.2s;
 }
 
@@ -208,12 +265,10 @@
 
 .button--link {
   color: var(--color-link);
-  transition: color 0.2s;
   word-break: break-word;
   font-weight: var(--font-weight-bold);
 
   &:hover {
-    text-decoration: underline;
     color: var(--color-link-hover);
   }
 }
@@ -225,21 +280,30 @@
 
 .button--uri-indicator {
   @extend .button--link;
-  color: var(--color-text-subtitle);
+  color: var(--color-text);
   max-width: 100%;
   text-align: left;
-  transition: color 0.2s;
 
   .channel-name {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    font-size: var(--font-xsmall);
+    color: rgba(var(--color-text-base), 0.6);
   }
 
   .markdown-preview & {
     height: initial;
     vertical-align: initial;
   }
+
+  &:hover {
+    color: var(--color-primary);
+
+    .channel-name {
+      color: var(--color-text);
+    }
+  }
 }
 
 .button--close {
@@ -259,21 +323,22 @@
   }
 
   &:hover {
-    color: var(--color-button-primary-text);
+    color: var(--color-primary-contrast);
-    background-color: var(--color-button-primary-bg);
+    background-color: var(--color-primary);
-  }
-
-  &:focus {
-    @include focus;
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: 0.8rem 0.8rem;
+    padding: 0.7rem 0.2rem;
+    top: var(--spacing-s);
+    right: var(--spacing-xxs);
+    &:hover {
+      background-color: unset;
+    }
   }
 }
 
 .button--header-close {
-  background-color: var(--color-primary-alt);
+  background-color: var(--color-secondary);
   padding: var(--spacing-s);
 }
 
@@ -286,13 +351,18 @@
 
 .button--file-action {
   @extend .button--alt;
+  color: var(--color-text);
   background-color: transparent;
   margin-right: var(--spacing-m);
   padding: 0 var(--spacing-xxs);
 
+  @media (max-width: $breakpoint-small) {
+    padding: 0 0;
+  }
+
   .icon {
     &:not(.color-override) {
-      stroke: #777;
+      stroke: var(--color-text);
     }
   }
 
@@ -305,23 +375,36 @@
   }
 
   &:hover {
-    background-color: var(--color-button-alt-bg);
+    .icon {
+      stroke: var(--color-link);
+    }
+    .button__label {
+      color: var(--color-link);
+    }
+  }
 }
 
-  &:focus {
+[aria-expanded='true'].button--file-action {
-    box-shadow: none;
+  background-color: var(--color-header-background);
-    background-color: var(--color-button-alt-bg);
+  .icon {
+    stroke: var(--color-primary);
   }
 }
 
 .button--file-action--menu {
   @extend .button--file-action;
 }
+[aria-expanded='true'].button--file-action--menu {
+  background-color: var(--color-header-background) !important;
+}
 
 .button--fire {
-  color: var(--color-fire);
   position: relative;
-
+  .button__content {
+    .button__label {
+      color: var(--color-fire) !important;
+    }
+  }
   path {
     stroke: var(--color-fire-outside);
   }
@@ -476,7 +559,11 @@
 }
 
 .button--slime {
-  color: var(--color-slime);
+  .button__content {
+    .button__label {
+      color: var(--color-slime) !important;
+    }
+  }
 }
 
 .button__slime-drop {
@@ -583,12 +670,31 @@ svg + .button__label {
   padding: 0 var(--spacing-m);
   height: var(--height-button);
   font-size: var(--font-base);
-  border: 1px solid var(--color-border);
   border-left-width: 0;
   border-radius: 0;
   margin: 0;
-  background-color: var(--color-card-background);
+  color: var(--color-button-toggle-text) !important;
-  color: var(--color-text);
+  background-color: var(--color-button-toggle-bg) !important;
+  // box-shadow: 0px 0px 0px 2px rgba(var(--color-header-background-base), 1) inset;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  .icon {
+    // margin-bottom:-4px;
+  }
+
+  &:hover:not(.button-toggle--active) {
+    background-color: var(--color-button-toggle-bg-hover) !important;
+    .button__label {
+      color: var(--color-button-toggle-text-hover);
+    }
+    .icon {
+      stroke: var(--color-button-toggle-text-hover) !important;
+    }
+  }
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-m) var(--spacing-s);
@@ -600,12 +706,94 @@ svg + .button__label {
     border-bottom-left-radius: var(--border-radius);
   }
 
+  &:nth-child(2),
+  &:nth-child(3),
+  &:nth-child(4),
+  &:nth-child(5) {
+    // margin-left: 2px;
+  }
+
   &:last-of-type {
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
   }
 }
 
+.button-toggle--expandformobile {
+  @media (max-width: $breakpoint-small) {
+    display: block;
+    width: 100%;
+    text-align: center;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--color-border);
+
+    &:not(:first-of-type) {
+      margin-top: var(--spacing-s);
+    }
+  }
+}
+
+.button-toggle--active {
+  // color: var(--color-button-toggle-text) !important;
+  //box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
+  color: var(--color-button-toggle-text-active) !important;
+  background-color: var(--color-button-toggle-bg-active) !important;
+
+  .icon {
+    opacity: 1;
+    stroke: var(--color-button-toggle-text-active) !important;
+  }
+
+  &:hover {
+    cursor: default;
+    text-decoration: none;
+    background-color: var(--color-button-toggle-bg-active);
+
+    .icon {
+      stroke: var(--color-button-toggle-text-active) !important;
+    }
+  }
+
+  &:focus-visible {
+    background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
+    box-shadow: 0px 0px 0px 2px var(--color-primary) inset !important;
+
+    .icon {
+      stroke: var(--color-button-toggle-text) !important;
+    }
+  }
+}
+
+.button-toggle--custom {
+  color: var(--color-primary) !important;
+  .button__content {
+    .icon {
+      stroke: var(--color-primary) !important;
+    }
+  }
+  svg {
+    opacity: 1;
+  }
+}
+
+.button-toggle__label {
+  @extend label;
+  display: inline-block;
+  margin-top: -4px;
+}
+
+.button-toggle-group-action {
+  position: absolute; // Centers the button along toggle buttons
+  margin-left: var(--spacing-xs);
+
+  @media (max-width: $breakpoint-small) {
+    position: relative;
+    top: var(--spacing-s);
+    margin-bottom: var(--spacing-s);
+    margin-left: unset;
+  }
+}
+
 .button-collection-manage {
   font-size: var(--font-base);
   border-left-width: 0;
@@ -626,7 +814,11 @@ svg + .button__label {
   text-align: center;
 
   &:hover {
-    background-color: var(--color-button-alt-bg-hover);
+    background-color: var(--color-primary);
+    color: var(--color-primary-contrast);
+    .icon {
+      stroke: var(--color-primary-contrast);
+    }
   }
 
   @media (max-width: $breakpoint-small) {
@@ -668,48 +860,6 @@ svg + .button__label {
   }
 }
 
-.button-toggle--expandformobile {
-  @media (max-width: $breakpoint-small) {
-    display: block;
-    width: 100%;
-    text-align: center;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--color-border);
-
-    &:not(:first-of-type) {
-      margin-top: var(--spacing-s);
-    }
-  }
-}
-
-.button-toggle--active {
-  color: var(--color-button-toggle-text);
-  background-color: var(--color-button-toggle-bg);
-
-  svg {
-    opacity: 1;
-  }
-
-  &:hover {
-    cursor: default;
-    text-decoration: none;
-    background-color: var(--color-button-toggle-bg);
-  }
-}
-
-.button-toggle--custom {
-  color: var(--color-primary);
-  svg {
-    opacity: 1;
-  }
-}
-
-.button-toggle__label {
-  @extend label;
-  display: inline-block;
-  margin-top: -4px;
-}
-
 .button-tab-group {
   margin-bottom: var(--spacing-l);
 }
@@ -721,12 +871,17 @@ svg + .button__label {
   .button:first-child:not(:only-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-right: 1px solid var(--color-button-border);
+    margin-right: 1px;
+    // border-right: 1px solid var(--color-button-border);
   }
 
   .button:nth-child(2) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    margin-left: 1px;
+    &:hover {
+      fill: var(--color-text) !important;
+    }
   }
 
   .button--file-action {
@@ -742,21 +897,127 @@ svg + .button__label {
   }
 }
 
-.button-toggle-group-action {
-  position: absolute; // Centers the button along toggle buttons
-  margin-left: var(--spacing-xs);
-
-  @media (max-width: $breakpoint-small) {
-    position: relative;
-    top: var(--spacing-s);
-    margin-left: unset;
-  }
-}
-
 .button--hash-id {
   @include font-mono;
 }
 
+.button-rotate {
+  transform: rotate(90deg);
+  transition: transform 0.2s;
+  margin-right: var(--spacing-s) !important;
+}
+
+.button-like {
+  &:hover {
+    .button__label {
+      color: var(--color-fire) !important;
+    }
+    .icon {
+      stroke: var(--color-fire) !important;
+    }
+  }
+  &:focus-visible {
+    box-shadow: 0px 0px 0px 2px var(--color-fire) inset !important;
+    .button__content {
+      .button__label {
+        color: var(--color-fire) !important;
+      }
+      .icon {
+        stroke: var(--color-fire) !important;
+      }
+    }
+  }
+}
+
+.button-like.comment__action--active {
+  .comment__reaction-count {
+    color: var(--color-fire) !important;
+  }
+}
+
+.button-dislike {
+  &:hover {
+    .button__label {
+      color: var(--color-slime) !important;
+    }
+    .icon {
+      stroke: var(--color-slime) !important;
+    }
+  }
+  &:focus-visible {
+    box-shadow: 0px 0px 0px 2px var(--color-slime) inset !important;
+    .button__content {
+      .button__label {
+        color: var(--color-slime) !important;
+      }
+      .icon {
+        stroke: var(--color-slime) !important;
+      }
+    }
+  }
+}
+
+.button-dislike.comment__action--active {
+  .comment__reaction-count {
+    color: var(--color-slime);
+  }
+}
+
+.button-following {
+  color: var(--color-primary-contrast) !important;
+  //background-color: rgba(var(--color-primary-dynamic),0.5) !important;
+  background-color: rgba(125, 125, 125, 0.5) !important;
+  .icon {
+    stroke: var(--color-primary-contrast) !important;
+  }
+}
+
+.recommended-content__bubble {
+  // margin-top: var(--spacing-xs);
+  display: flex;
+
+  .button-toggle:nth-child(2) {
+    margin-left: 2px;
+    @media (min-width: $breakpoint-small) {
+      margin-right: var(--spacing-xs);
+    }
+  }
+
+  .button-bubble {
+    border-radius: 1rem;
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+    margin-right: var(--spacing-xxs);
+    background-color: var(--color-button-toggle-bg) !important;
+    color: var(--color-button-toggle-text);
+    font-size: var(--font-base);
+    padding: 0 var(--spacing-xs);
+    height: 2rem;
+    max-width: 15rem;
+    .button__content {
+      height: unset;
+    }
+    &:hover:not(.button-bubble--active) {
+      background-color: var(--color-button-toggle-bg-hover) !important;
+
+      .button__label {
+        color: var(--color-button-toggle-text-hover) !important;
+      }
+    }
+  }
+  .button-bubble:first-of-type {
+    margin-left: 0;
+  }
+  .button-bubble--active {
+    color: var(--color-button-toggle-text-active) !important;
+    background-color: var(--color-button-toggle-bg-active) !important;
+    box-shadow: unset;
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+
 .file-reaction__tooltip-inner {
   margin: 0px !important;
 }

ui/scss/component/_calendar.scss

@@ -0,0 +1,28 @@
+.schedule-counter {
+  position: absolute;
+  top: 19px;
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  color: var(--color-text);
+  z-index: 99999;
+  font-size: 7px;
+}
+
+.test {
+  svg {
+    stroke: var(--color-text);
+    fill: var(--color-text);
+  }
+
+  &:hover {
+    svg {
+      stroke: var(--color-primary-contrast);
+      fill: var(--color-primary-contrast);
+    }
+
+    .schedule-counter {
+      color: var(--color-primary-contrast);
+    }
+  }
+}

ui/scss/component/_card.scss

@@ -1,9 +1,5 @@
 .card {
-  background-color: var(--color-card-background);
   position: relative;
-  border-radius: var(--card-radius);
-  overflow: hidden;
-  border: 1px solid var(--color-border);
 
   ~ .card {
     margin-bottom: var(--spacing-m);
@@ -17,6 +13,8 @@
   @media (max-width: $breakpoint-small) {
     overflow-y: scroll;
     height: 100%;
+    border-top: 1px solid var(--color-border);
+    // background-color:var(--color-background);
 
     .card__main-actions {
       margin-top: 0px !important;
@@ -69,7 +67,6 @@
 
 .card--section {
   position: relative;
-  padding: var(--spacing-m);
 }
 
 .card--reward-total {
@@ -81,13 +78,19 @@
 }
 
 .card--inline {
-  border: 1px solid var(--color-border);
   border-radius: var(--card-radius);
   margin-bottom: var(--spacing-m);
 
   &:last-of-type {
     margin-bottom: 0;
   }
+
+  .claim-preview__wrapper {
+    background: rgba(var(--color-header-background-base), 0.6);
+    &:hover {
+      background: rgba(var(--color-header-background-base), 0.9);
+    }
+  }
 }
 
 .card-collection-selector {
@@ -134,9 +137,10 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    > * {
+    > *:not(:last-child) {
-      padding-bottom: var(--spacing-m);
+      margin-right: var(--spacing-s);
     }
+
     flex-flow: wrap;
     justify-content: space-between;
   }
@@ -146,20 +150,13 @@
   @extend .section__flex;
 
   @media (min-width: $breakpoint-small) {
-    padding: var(--spacing-s) var(--spacing-m);
+    padding: var(--spacing-s) 0px;
-  }
-}
-
-.card__title-section--body-list {
-  padding-left: var(--spacing-s);
-
-  @media (min-width: $breakpoint-small) {
-    padding: var(--spacing-m);
   }
 }
 
 .card__title-section--small {
   padding: var(--spacing-s);
+  padding-left: 0px;
 }
 
 .card__actions--inline {
@@ -167,6 +164,13 @@
   margin-top: 0;
 
   @media (max-width: $breakpoint-small) {
+    padding-bottom: 0;
+    &:last-of-type {
+      .button--alt {
+        padding-bottom: 0;
+        margin-top: 6px;
+      }
+    }
     .button__content {
       svg + .button__label {
         display: none;
@@ -189,9 +193,13 @@
 
 .card-stack {
   .card:not(:last-of-type) {
+    margin-bottom: var(--spacing-xxl);
+
+    @media (max-width: $breakpoint-small) {
       margin-bottom: var(--spacing-l);
     }
   }
+}
 
 .card ~ .card-stack {
   margin-top: var(--spacing-l);
@@ -219,7 +227,7 @@
 .card__message {
   border-left: 0.5rem solid;
   padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
-  background-color: var(--color-primary-alt);
+  background-color: var(--color-secondary);
   border-color: var(--color-primary);
 }
 
@@ -237,7 +245,7 @@
   display: block;
   align-items: center;
   font-size: var(--font-large);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-bold);
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-m);
@@ -263,19 +271,68 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+
+.card--enable-overflow {
+  .card__header--between {
+    @media (max-width: $breakpoint-small) {
+      margin-bottom: 0;
+      .card__title-section {
+        width: 60%;
+      }
+    }
+  }
+
+  .card__title-actions-container {
+    @media (max-width: $breakpoint-small) {
+      flex-grow: 1;
+      min-height: 47px;
+
+      .card__title-actions {
+        width: 100%;
+        flex-grow: 1;
+        margin-right: auto;
+        .button--alt {
+          flex-grow: 1;
+        }
+        .button-toggle {
+          padding: 0 var(--spacing-s) 0 var(--spacing-xxxs);
+        }
+      }
+      .comment__sort {
+        .button {
+          float: left;
+        }
+      }
+      .button {
+        float: right;
+      }
+    }
+  }
 }
 
 .card__title-actions {
   align-self: flex-start;
-
+  .button--alt {
+    padding-top: 2px;
+    .icon {
+      // margin-top: -2px;
+    }
+  }
+  .comment__sort {
+    .button--alt {
+      padding-top: 0;
+    }
+  }
   @media (min-width: $breakpoint-small) {
-    padding: var(--spacing-s);
+    // padding: var(--spacing-s);
+    // padding-right: 0px;
   }
 }
 
 .card__title-actions--link {
   margin-top: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
 }
 
 .card__title-actions--small {
@@ -323,11 +380,11 @@
 .card__header--between {
   @extend .card__header;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: wrap;
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-xxs);
+    // padding: var(--spacing-xxs);
     padding-bottom: 0;
     margin: 0;
 
@@ -362,21 +419,58 @@
       }
     }
   }
+
+  .button--alt {
+    color: var(--color-button-alt-text);
+    background-color: var(--color-button-alt-bg);
+    // color: var(--color-primary-contrast);
+    // background-color: var(--color-primary);
+    &:hover {
+      color: var(--color-primary-contrast);
+      background-color: var(--color-primary);
+      .icon {
+        stroke: var(--color-primary-contrast);
+      }
+    }
+  }
 }
 
 .card__header--nowrap {
   @extend .card__header--between;
   flex-wrap: nowrap;
+
+  @media (max-width: $breakpoint-small) {
+    margin-bottom: var(--spacing-s);
+    .card__title-section {
+      .card__title {
+        // margin-top: calc(var(--spacing-s) - 2px);
+        margin-bottom: calc(var(--spacing-s) * -1);
+      }
+    }
+    .card__title-actions-container {
+      .card__title-actions {
+        .filePrice {
+          padding: 0;
+          .credit-amount {
+            margin-top: var(--spacing-xs);
+            padding: var(--spacing-xxxs);
+          }
+        }
+      }
+    }
+  }
 }
 
 .card__subtitle {
   color: var(--color-text-subtitle);
-  margin: var(--spacing-s) 0;
+  margin-top: var(--spacing-s);
+  margin-bottom: var(--spacing-s) 0;
   font-size: var(--font-body);
 }
 
 .card__body {
   padding: var(--spacing-m);
+  padding-left: 0px;
 
   &:not(.card__body--no-title) {
     padding-top: 0;
@@ -389,14 +483,19 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-s) !important;
+    padding: var(--spacing-l);
+    padding-left: 0px;
+    padding-right: 0px;
+    // margin-bottom: var(--spacing-s) !important;
     padding: 0 !important;
 
     .file__viewdate {
-      padding-left: var(--spacing-xxs);
+      .date_time {
+        font-size: var(--font-small);
+      }
 
       span {
-        font-size: var(--font-xxsmall);
+        font-size: var(--font-small);
         margin: 0;
       }
 
@@ -423,13 +522,29 @@
   &:only-child {
     border-top: none;
   }
+
+  .form-field__help {
+    color: var(--color-text);
+  }
+
+  .help {
+    color: var(--color-text);
+  }
 }
 
 .card__body-actions {
   padding: var(--spacing-s);
+  padding-left: 0px;
+  padding-right: 0px;
+
+  h3 {
+    padding-left: var(--spacing-s);
+  }
 
   @media (min-width: $breakpoint-small) {
     padding: var(--spacing-m);
+    padding-left: 0px;
+    padding-right: 0px;
   }
 }
 
@@ -456,9 +571,11 @@
 .card__body,
 .card__main-actions {
   padding: var(--spacing-m);
+  padding-left: 0;
+  padding-right: 0;
   padding-bottom: 0;
   margin: 0;
-  margin-bottom: var(--spacing-m);
+  margin-bottom: 0px;
 
   @media (max-width: $breakpoint-small) {
     margin-bottom: 0px;
@@ -492,6 +609,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid var(--color-border);
 
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);

ui/scss/component/_channel-mention.scss

@@ -0,0 +1,126 @@
+.channel-mention {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: calc(100% - 1.8rem);
+  z-index: 3;
+  font-size: var(--font-small);
+  padding-left: var(--spacing-s);
+
+  > .icon {
+    top: 0;
+    left: var(--spacing-m);
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    stroke: var(--color-input-placeholder);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 0;
+  }
+}
+
+.channel-mention__suggestions {
+  @extend .card;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 30vh;
+  position: absolute;
+  text-overflow: ellipsis;
+  width: 22rem;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: var(--card-box-shadow);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom: none;
+  background-color: var(--color-background);
+
+  .channel-mention__label:first-of-type {
+    margin-top: var(--spacing-xs);
+  }
+}
+
+.channel-mention__suggestions[flow-bottom] {
+  top: 4rem;
+  bottom: auto;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom: auto;
+}
+
+.channel-mention__input--none {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.channel-mention__label {
+  @extend .wunderbar__label;
+}
+
+.channel-mention__top-separator {
+  @extend .wunderbar__top-separator;
+}
+
+.channel-mention__suggestion {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-xxs);
+  //margin-left: var(--spacing-xxs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .channel-thumbnail {
+    @include handleChannelGif(2.1rem);
+    position: absolute;
+
+    @media (min-width: $breakpoint-small) {
+      @include handleChannelGif(2.1rem);
+    }
+  }
+}
+
+.channel-mention__suggestion-label {
+  @extend .wunderbar__suggestion-label;
+  margin-left: var(--spacing-m);
+  display: block;
+  position: relative;
+}
+
+.channel-mention__suggestion-name {
+  @extend .wunderbar__suggestion-name;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__suggestion-title {
+  @extend .wunderbar__suggestion-title;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__placeholder-suggestion {
+  @extend .wunderbar__placeholder-suggestion;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+}
+
+.channel-mention__placeholder-label {
+  @extend .wunderbar__placeholder-label;
+  margin-left: var(--spacing-m);
+}
+
+.channel-mention__placeholder-thumbnail {
+  @extend .wunderbar__placeholder-thumbnail;
+  margin-left: var(--spacing-m);
+}
+.channel-mention__placeholder-info {
+  @extend .wunderbar__placeholder-info;
+  margin-left: var(--spacing-m);
+}

ui/scss/component/_channel.scss

@@ -2,6 +2,115 @@ $cover-z-index: 0;
 $metadata-z-index: 1;
 $actions-z-index: 2;
 
+.channelPage-wrapper {
+  .button-group {
+    .button__content {
+      .icon {
+        stroke: var(--color-text);
+      }
+    }
+    .button-following {
+      color: var(--color-text) !important;
+      background-color: var(--color-button-alt-bg) !important;
+      .icon {
+        stroke: var(--color-text) !important;
+      }
+      &:hover {
+        color: var(--color-primary) !important;
+      }
+    }
+    .button-following:last-of-type {
+      margin-left: 2px;
+      &:hover {
+        color: var(--color-text) !important;
+      }
+    }
+  }
+
+  .claim-preview__live {
+    margin-bottom: 0;
+    .card__title-section {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  fieldset-group {
+    fieldset-section:last-of-type {
+      label {
+        text-align: right;
+        margin-left: unset !important;
+      }
+    }
+  }
+
+  .claim-preview__wrapper--channel {
+    .menu__button {
+      right: var(--spacing-s);
+    }
+    .claim-tile__info {
+      margin-top: 0;
+      padding-bottom: var(--spacing-xxxs);
+      .claim-preview-metadata-sub-upload {
+        margin-top: 3px;
+      }
+    }
+  }
+
+  .mb-xl {
+    // Temporary fix for upcoming livestreams on channel page
+    margin-bottom: 0px;
+    background: rgba(var(--color-primary-dynamic), 0.1);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-m);
+
+    .section__header--actions {
+      margin-top: 0px !important;
+      padding-top: 0px !important;
+    }
+
+    .claim-preview--tile {
+      margin-bottom: 0px;
+    }
+
+    .claim-tile__title {
+      margin-bottom: 0px;
+      min-height: unset;
+    }
+
+    .claim-tile__info {
+      padding-bottom: var(--spacing-s);
+    }
+  }
+
+  .media__info-text {
+    .claim__tags {
+      .tag {
+        margin-top: var(--spacing-xxxs);
+        display: inline-block;
+      }
+    }
+  }
+
+  label {
+    margin-top: var(--spacing-s);
+    font-size: var(--font-medium);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .media__info-text,
+  .media__info-text--constrained {
+    font-size: var(--font-base) !important;
+    opacity: 0.8;
+    .date_time {
+      font-size: var(--font-base);
+      opacity: 0.8;
+    }
+  }
+  .media__info-text:first-of-type {
+    opacity: 1;
+  }
+}
 .channel-cover {
   position: relative;
   background-image: linear-gradient(to right, #637ad2, #318794 80%);
@@ -9,6 +118,14 @@ $actions-z-index: 2;
   align-items: flex-end;
   box-sizing: content-box;
   color: #fff;
+
+  .channel-cover__customm,
+  .channel__quick-actions {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 }
 
 .channel-cover__custom {
@@ -33,6 +150,11 @@ $actions-z-index: 2;
     // I, Sean Yesmunt, take full responsibility for this monster
     min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
   }
+
+  .menu__button {
+    opacity: 1;
+    justify-content: center;
+  }
 }
 
 .channel-cover__custom--waiting {
@@ -126,7 +248,14 @@ $actions-z-index: 2;
 
 .channel-thumbnail,
 .channel-thumbnail__custom {
-  border-radius: var(--card-radius);
+  border-radius: 50%;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .channel-thumbnail__default--0 {
@@ -151,7 +280,8 @@ $actions-z-index: 2;
 
 .channel__primary-info {
   // Ensure the profile pic/title sit ontop of the default cover background
-  z-index: $metadata-z-index;
+  //z-index: $metadata-z-index;
+  z-index: 5;
   // Jump over the thumbnail photo because it is absolutely positioned
   // Then add normal page spacing, _then_ add the actual padding
   padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
@@ -161,6 +291,17 @@ $actions-z-index: 2;
   min-width: 0;
   width: 100%;
 
+  .channel__edit-thumb {
+    z-index: 5;
+    .button--alt {
+      border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
+      &:hover {
+        background-color: var(--color-button-alt-bg);
+        color: var(--color-primary);
+      }
+    }
+  }
+
   @media (max-width: $breakpoint-small) {
     padding-left: var(--spacing-m);
     margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
@@ -192,7 +333,7 @@ $actions-z-index: 2;
   align-items: flex-end;
 
   .button {
-    height: auto;
+    // height: auto;
   }
 }
 
@@ -208,6 +349,11 @@ $actions-z-index: 2;
   flex-wrap: wrap;
   font-size: var(--font-base);
 
+  .button,
+  .menu__button {
+    border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
+  }
+
   > .button,
   > .button-group .button {
     padding: 0 var(--spacing-s);
@@ -240,6 +386,26 @@ $actions-z-index: 2;
         margin-right: 0;
       }
     }
+
+    .claim__menu-button--inline {
+      z-index: 10;
+      .icon {
+        padding: 1rem;
+        margin: -1rem;
+      }
+    }
+  }
+
+  .button,
+  .menu__button {
+    &:hover {
+      color: var(--color-link);
+      background-color: rgba(var(--color-header-background-base), 0.95);
+
+      .icon {
+        stroke: var(--color-link);
+      }
+    }
   }
 }
 
@@ -272,31 +438,25 @@ $actions-z-index: 2;
 }
 
 .menu__list.channel__list {
-  margin-top: var(--spacing-xs);
   margin-left: 0;
   padding: 0;
   border-radius: var(--border-radius);
   background: transparent;
   max-height: 15rem;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   [role='menuitem'] {
     margin: 0;
 
     &[data-selected] {
-      background: transparent;
+      // background: transparent;
       .channel__list-item,
       .channel-staked__wrapper {
-        background-color: var(--color-card-background-highlighted);
+        background-color: var(--color-primary);
+        .claim-preview__title {
+          color: var(--color-primary-contrast);
         }
       }
-
-    &:first-child {
-      .channel__list-item {
-        border-top: 1px solid var(--color-border);
-        border-top-left-radius: var(--border-radius);
-        border-top-right-radius: var(--border-radius);
-      }
     }
 
     &:last-child {
@@ -308,8 +468,21 @@ $actions-z-index: 2;
 
     .channel__list-item {
       padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
-      border-left: 1px solid var(--color-border);
+
-      border-right: 1px solid var(--color-border);
+      .icon__wrapper {
+        background-color: var(--color-primary);
+        .icon {
+          stroke: var(--color-primary-contrast);
+        }
+      }
+
+      &:hover {
+        .icon__wrapper {
+          .icon {
+            stroke: var(--color-primary-contrast);
+          }
+        }
+      }
     }
   }
 }
@@ -317,9 +490,8 @@ $actions-z-index: 2;
 .channel__list-item {
   display: flex;
   align-items: center;
-  background-color: var(--color-card-background);
+  background-color: var(--color-header-background);
   padding: var(--spacing-s);
-  border-bottom: 1px solid var(--color-border);
   overflow: hidden;
 
   .channel-thumbnail {
@@ -339,23 +511,43 @@ $actions-z-index: 2;
     border-radius: var(--border-radius);
   }
 
+  .ff-container {
+    canvas {
+      border-radius: 50%;
+    }
+    .freezeframe-img {
+      width: 2rem !important;
+      height: 2rem !important;
+      border-radius: 50%;
+    }
+  }
+
   &:hover {
-    background-color: var(--color-card-background-highlighted);
+    background-color: var(--color-primary);
+
+    .channel__list-text {
+      color: var(--color-menu-icon-active);
+    }
   }
 }
 
 .channel__list-item--selected {
-  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
 
   .icon--ChevronDown {
     margin-left: var(--spacing-l);
   }
+
+  &:hover {
+    .claim-preview__title {
+      color: white;
+    }
+  }
 }
 
 .channel__list-text {
   font-weight: var(--font-weight-bold);
-  color: var(--color-text);
+  color: var(--color-menu-icon);
 }
 
 .channel__selector {
@@ -364,16 +556,32 @@ $actions-z-index: 2;
   @media (min-width: $breakpoint-small) {
     margin-bottom: var(--spacing-l);
   }
+
+  .ff-container {
+    canvas {
+      border-radius: 50%;
+    }
+    .freezeframe-img {
+      width: 2rem !important;
+      height: 2rem !important;
+      border-radius: 50%;
+    }
+  }
 }
 
 .channel-staked__wrapper {
   display: flex;
   position: absolute;
-  padding: 0.2rem;
+  text-align: center;
-  bottom: -0.75rem;
+  width: 116%;
-  left: -0.8rem;
+  left: -8%;
-  background-color: var(--color-card-background);
+  bottom: -14%;
-  border-radius: 50%;
+
+  svg {
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .channel-staked__wrapper--large {
@@ -382,6 +590,7 @@ $actions-z-index: 2;
   display: inline-block;
   bottom: auto;
   left: auto;
+  width: auto;
   top: var(--spacing-xs);
   margin-left: var(--spacing-s);
   padding: 0;
@@ -398,13 +607,13 @@ $actions-z-index: 2;
 }
 
 .channel-staked__indicator {
-  margin-left: 1px;
+  //margin-left: 1px;
   z-index: 3;
   fill: var(--color-gray-3);
 }
 
 .channel-staked__indicator--controlling {
-  fill: #00eaff;
+  fill: #ff853c;
 }
 
 .channel-staked__amount {
@@ -416,3 +625,67 @@ $actions-z-index: 2;
     color: var(--color-gray-3);
   }
 }
+
+.channelsPage-wrapper {
+  .claim-preview__wrapper--channel {
+    position: relative;
+    border-radius: var(--border-radius);
+    background: rgba(var(--color-header-background-base), 0.6);
+    padding: var(--spacing-m) !important;
+
+    .claim__menu-button {
+      right: calc(var(--spacing-m) - 8px) !important;
+      margin-top: var(--spacing-xxs);
+
+      .icon {
+        stroke: var(--color-text);
+      }
+
+      &:hover {
+        .icon {
+          stroke: var(--color-primary);
+        }
+      }
+    }
+    .help--inline {
+      color: var(--color-text);
+    }
+    .claim-tile__info {
+      display: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+    .media__subtitle {
+      .claim-preview-metadata-sub-upload {
+        margin-top: 2px;
+        font-size: var(--font-small) !important;
+      }
+    }
+
+    @media (max-width: $breakpoint-small) {
+      .claim-preview--channel {
+        a:first-of-type {
+          .button__content {
+            align-items: unset;
+          }
+        }
+        .claim-preview__actions {
+          flex-flow: row;
+          .section__actions {
+            .button--alt {
+              margin-bottom: 0;
+            }
+          }
+          .claim-preview__custom-properties {
+            justify-content: unset;
+          }
+        }
+      }
+
+      .claim-preview__actions {
+        margin-top: var(--spacing-s) !important;
+      }
+    }
+  }
+}

ui/scss/component/_claim-search.scss

@@ -13,6 +13,7 @@
   justify-content: flex-start;
   align-items: center;
   padding: var(--spacing-m);
+  padding-left: 0px;
   padding-bottom: var(--spacing-s);
   margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
@@ -22,6 +23,9 @@
   @media (min-width: $breakpoint-small) {
     flex-direction: row;
   }
+  @media (max-width: $breakpoint-small) {
+    padding: unset;
+  }
 }
 
 .claim-search__dropdown {
@@ -33,7 +37,8 @@
 }
 
 .claim-search__dropdown--selected {
-  background-color: var(--color-input-bg-selected);
+  // color: var(--color-primary-contrast);
+  // background-color: var(--color-input-bg-selected);
 }
 
 .claim-search__input-container {
@@ -56,6 +61,15 @@
   }
 }
 
+.claim-search__dropdown,
+.claim-search__input-container {
+  padding-left: 0;
+  padding-right: var(--spacing-m);
+  @media (max-width: $breakpoint-small) {
+    padding-right: 0;
+  }
+}
+
 .claim-search__filter-button {
   display: flex;
   justify-content: center;
@@ -80,6 +94,10 @@
   @media (min-width: $breakpoint-small) {
     justify-content: flex-start;
   }
+
+  .claim-search__menu-group:last-of-type {
+    margin-right: unset;
+  }
 }
 
 .claim-search__top > div {
@@ -92,6 +110,17 @@
   display: flex;
   flex-wrap: nowrap;
   margin-right: var(--spacing-s);
+
+  .button:nth-child(2):not(:last-child) {
+    // margin-left: 2px;
+  }
+
+  @media (max-width: $breakpoint-small) {
+    margin-right: 0;
+    .button-toggle {
+      padding: 0 var(--spacing-s) 0 var(--spacing-xs);
+    }
+  }
 }
 
 .claim-search__menu-group--between {

ui/scss/component/_collection.scss

@@ -88,14 +88,19 @@
 .collection-preview__edit-buttons {
   position: absolute;
   left: 0;
-  top: calc(-1 * var(--spacing-m));
+  top: calc(var(--spacing-m) * -1);
-  bottom: calc(-1 * var(--spacing-m));
+  bottom: calc(var(--spacing-m) * -1);
   padding-left: 0;
   padding-top: var(--spacing-m);
   padding-bottom: var(--spacing-m);
+
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   align-items: center;
+
+  @media (max-width: $breakpoint-small) {
+    margin-right: var(--spacing-s);
+  }
 }
 
 .collection-preview__edit-group {
@@ -103,13 +108,17 @@
   display: flex;
   flex-direction: column;
   width: 2rem;
+
   align-items: center;
   justify-content: center;
   align-items: stretch;
   flex-grow: 4;
 
   @media (max-width: $breakpoint-small) {
-    width: 1.5rem;
+    margin-right: 0;
+    button {
+      padding: var(--spacing-xs) var(--spacing-xs);
+    }
   }
 }
 

ui/scss/component/_color-picker.scss

@@ -0,0 +1,70 @@
+.color-picker {
+  position: relative;
+  height: var(--height-input);
+  //background-color:#ff0000;
+  border-radius: var(--border-radius);
+  max-width: 220px;
+  margin-top: var(--spacing-s);
+
+  .swatch {
+    position: absolute;
+    left: 0;
+    margin: 5px;
+    background: var(--color-header-background);
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    cursor: pointer;
+    width: calc(var(--height-input) - (2 * 5px));
+    height: calc(var(--height-input) - (2 * 5px));
+    box-sizing: border-box;
+  }
+
+  .color {
+    width: 100%;
+    height: 100%;
+    border-radius: calc(var(--border-radius) - 2px);
+  }
+
+  .popover {
+    position: absolute;
+    z-index: 2;
+  }
+
+  .cover {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+  }
+
+  .sketch-picker {
+    background-color: var(--color-header-background) !important;
+    margin-bottom: var(--spacing-l);
+
+    .flexbox-fix {
+      input {
+        box-shadow: unset !important;
+        background-color: var(--color-header-button) !important;
+        text-align: center;
+      }
+      label {
+        color: var(--color-text) !important;
+      }
+    }
+
+    .flexbox-fix:nth-child(3) {
+      display: none !important;
+    }
+    .flexbox-fix:last-of-type {
+      display: none !important;
+    }
+  }
+
+  input {
+    width: 220px;
+    display: inline-block;
+    padding-left: calc(var(--height-input) + var(--spacing-xxs));
+  }
+}

ui/scss/component/_comment-badge.scss

@@ -2,7 +2,9 @@
   padding-right: var(--spacing-xxs);
 
   .icon {
-    margin-bottom: -5px;
+    margin-bottom: -4px;
+    height: 1rem;
+    width: 1rem;
   }
 }
 

ui/scss/component/_comment-create.scss

@@ -3,7 +3,7 @@
 $thumbnailWidth: 1.5rem;
 $thumbnailWidthSmall: 1rem;
 
-.create__comment {
+.content_comment {
   position: relative;
 }
 
@@ -11,6 +11,59 @@ $thumbnailWidthSmall: 1rem;
   font-size: var(--font-small);
   position: relative;
 
+  .section {
+    margin-top: var(--spacing-xs);
+  }
+
+  .button--file-action {
+    &:hover {
+      background-color: var(--color-primary) !important;
+      color: var(--color-primary-contrast);
+    }
+  }
+
+  .section__actions {
+    .button,
+    .button--link {
+      background-color: var(--color-header-background);
+      color: var(--color-text);
+      border-radius: var(--border-radius);
+      &:hover {
+        background-color: var(--color-primary);
+        color: var(--color-primary-contrast);
+      }
+    }
+    .button--link {
+      // flex: auto;
+      margin-top: -2px;
+      height: var(--height-button);
+      .button__content {
+        justify-content: center;
+      }
+      .button__label {
+        margin-top: 1px;
+        line-height: 18px;
+      }
+    }
+    .button--alt {
+      margin-top: -2px;
+    }
+
+    @media (max-width: $breakpoint-small) {
+      margin-top: var(--spacing-s);
+      .button--alt {
+        flex: auto;
+        .button__content {
+          justify-content: center;
+        }
+      }
+      .button--link {
+        flex: auto;
+        height: 2rem;
+      }
+    }
+  }
+
   fieldset-section,
   .form-field--SimpleMDE {
     margin-top: 0;
@@ -20,6 +73,43 @@ $thumbnailWidthSmall: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
+
+    .comment__char-count-mde {
+      margin-left: auto;
+      min-width: 40px;
+      text-align: center;
+      margin-bottom: 8px;
+      // margin-right: var(--spacing-s);
+      padding-left: 4px;
+      padding-right: 4px;
+      padding-top: 5px;
+      border-radius: var(--border-radius);
+      height: var(--height-input-slim);
+    }
+
+    .button--file-action {
+      padding: 0px;
+      height: var(--height-input-slim);
+      background: var(--color-header-background);
+      margin-bottom: 8px;
+      .button__content {
+        .icon {
+          width: var(--height-input-slim);
+          height: var(--height-input-slim);
+          padding: 4px;
+          border-radius: var(--border-radius);
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-primary) !important;
+        .button__content {
+          .icon {
+            stroke: var(--color-primary-contrast);
+          }
+        }
+      }
+    }
   }
 
   @media (min-width: $breakpoint-small) {
@@ -40,7 +130,7 @@ $thumbnailWidthSmall: 1rem;
 
 .comment-create--drawer {
   .MuiPaper-root {
-    background-color: var(--color-background) !important;
+    //background-color: var(--color-background) !important;
 
     span {
       color: var(--color-text);
@@ -122,12 +212,16 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment-create__min-amount-notice {
+  margin-top: calc(var(--spacing-xxs) - 2px);
+  padding-top: calc(var(--spacing-xs) + 1px);
+  height: var(--height-button);
   .icon {
     margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
   }
 
   @media (max-width: $breakpoint-small) {
     margin: 0px;
+    padding-top: calc(var(--spacing-xs) + 3px);
     font-size: var(--font-xsmall);
   }
 }
@@ -135,7 +229,8 @@ $thumbnailWidthSmall: 1rem;
 .commentCreate__stickerPreview {
   @extend .commentCreate;
   display: flex;
-  border: 1px solid var(--color-border);
+  //border: 1px solid var(--color-border);
+  background-color: var(--color-header-background);
   border-radius: var(--border-radius);
   padding: var(--spacing-s);
   margin: var(--spacing-s) 0;

ui/scss/component/_comment-selectors.scss

@@ -91,6 +91,9 @@ $sticker-item-size: 5rem;
         position: absolute;
         display: inline;
         bottom: 0;
+        .credit-amount {
+          color: var(--color-primary-contrast) !important;
+        }
       }
     }
 
@@ -104,9 +107,12 @@ $sticker-item-size: 5rem;
   font-size: var(--font-small);
   padding-left: var(--spacing-xxs);
   width: 100%;
+  text-align: center;
   position: sticky;
   top: 0px;
   background-color: var(--color-tabs-background);
+  border-radius: var(--border-radius);
+  font-weight: 900;
   z-index: 1;
 
   @media (min-width: $breakpoint-small) {

ui/scss/component/_comments.scss

@@ -1,5 +1,5 @@
-$thumbnailWidth: 1.5rem;
+$thumbnailWidth: 2.5rem;
-$thumbnailWidthSmall: 1.8rem;
+$thumbnailWidthSmall: 1rem;
 
 .comments {
   list-style-type: none;
@@ -38,14 +38,16 @@ $thumbnailWidthSmall: 1.8rem;
 }
 
 .comment__sort {
-  margin: var(--spacing-s) 0;
   margin-right: var(--spacing-s);
-  display: block;
+  display: inline-block;
 
   @media (min-width: $breakpoint-small) {
     margin-top: 0;
     display: inline;
   }
+  @media (max-width: $breakpoint-small) {
+    margin-right: 0;
+  }
 }
 
 .comment {
@@ -72,13 +74,6 @@ $thumbnailWidthSmall: 1.8rem;
       @include handleChannelGif($thumbnailWidth);
     }
 
-    .channel-staked__wrapper {
-      padding: 0;
-      left: calc(#{$thumbnailWidthSmall} / 4);
-      bottom: -1rem;
-      padding: -1rem;
-      margin-left: 0;
-    }
     .channel-staked__indicator {
       @media (max-width: $breakpoint-small) {
         margin-left: 0.1rem;
@@ -95,6 +90,16 @@ $thumbnailWidthSmall: 1.8rem;
 .comment__content {
   display: flex;
   flex-direction: row;
+
+  &:hover {
+    .ff-canvas {
+      opacity: 0 !important;
+      transition: opacity 1s !important;
+    }
+    .ff-image {
+      opacity: 1 !important;
+    }
+  }
 }
 
 .comment__replies-container {
@@ -147,7 +152,6 @@ $thumbnailWidthSmall: 1.8rem;
   background-color: var(--color-comment-threadline);
 
   &:hover {
-    box-shadow: 0 0 0 1px var(--color-comment-threadline-hover);
     background-color: var(--color-comment-threadline-hover);
     border-color: var(--color-comment-threadline-hover);
   }
@@ -160,7 +164,7 @@ $thumbnailWidthSmall: 1.8rem;
 .comment--highlighted {
   background: var(--color-comment-highlighted);
   box-shadow: 0 0 0 5px var(--color-comment-highlighted);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .comment__body-container {
@@ -173,6 +177,21 @@ $thumbnailWidthSmall: 1.8rem;
   @media (min-width: $breakpoint-small) {
     margin-left: var(--spacing-s);
   }
+
+  &:hover {
+    .menu__button {
+      opacity: 1;
+    }
+  }
+
+  [aria-expanded='true'].menu__button {
+    opacity: 1;
+    background: var(--color-header-background);
+    border-radius: var(--border-radius);
+    .icon {
+      stroke: var(--color-primary);
+    }
+  }
 }
 
 .comment__dead {
@@ -194,20 +213,38 @@ $thumbnailWidthSmall: 1.8rem;
   justify-content: flex-start;
   align-items: center;
   height: 100%;
+  width: calc(100% - var(--spacing-m) - var(--spacing-s));
+
+  .channel-name {
+    color: var(--color-link);
+
+    &:hover {
+      color: rgba(var(--color-secondary-dynamic), 1);
+    }
+  }
 }
 
 .comment__pin {
+  display: inline-block;
   margin: 0 var(--spacing-s);
+  margin-right: 0;
   font-size: var(--font-xsmall);
 
   .icon {
     padding-top: 1px;
   }
+
+  @media (max-width: $breakpoint-small) {
+    width: 90%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .comment__message {
   word-break: break-word;
-  max-width: 35rem;
+  padding-right: var(--spacing-xl);
   color: var(--color-text);
 
   ul li {
@@ -242,17 +279,24 @@ $thumbnailWidthSmall: 1.8rem;
 
 .comment__author--creator {
   padding: 0 3px;
-  background-color: var(--color-primary-alt);
+  background-color: var(--color-primary);
   border-radius: var(--border-radius);
 
+  .button__content {
+    color: var(--color-primary-contrast);
+  }
+  .channel-name {
+    color: var(--color-primary-contrast);
+  }
+
   &.button--uri-indicator {
-    color: var(--color-link);
+    color: var(--color-primary-contrast);
   }
 }
 
 .comment__time {
   @extend .button--uri-indicator;
-  opacity: 0.5;
+  opacity: 0.6;
   white-space: nowrap;
   height: 100%;
   margin-right: var(--spacing-xs);
@@ -265,6 +309,12 @@ $thumbnailWidthSmall: 1.8rem;
 .comment__menu {
   align-self: flex-end;
   line-height: 1;
+
+  @media (max-width: $breakpoint-small) {
+    .menu__button {
+      opacity: 1;
+    }
+  }
 }
 
 .comment__char-count {
@@ -286,8 +336,21 @@ $thumbnailWidthSmall: 1.8rem;
   font-size: var(--font-xsmall);
 
   .menu__link {
-    color: var(--color-text);
     padding: 0;
+    color: var(--color-text);
+  }
+
+  .comment__menu-help {
+    color: var(--color-text);
+    .icon--ExternalLink {
+      margin-top: unset;
+    }
+  }
+
+  &:hover {
+    .comment__menu-help {
+      color: var(--color-primary-contrast);
+    }
   }
 }
 
@@ -362,18 +425,23 @@ $thumbnailWidthSmall: 1.8rem;
   &:disabled {
     opacity: 1;
   }
+  .button__content {
+    .icon {
+      stroke: var(--color-text);
+      fill: transparent;
+    }
+  }
+  &:hover {
+    .button__content {
+      .icon {
+        fill: var(--color-primary);
+      }
     }
-
-.comment__action,
-.comment__author {
-  &:focus {
-    @include linkFocus;
   }
 }
 
 .comment__action--active {
   .icon {
-    fill: var(--color-primary-alt);
     stroke: var(--color-primary);
   }
 }
@@ -427,6 +495,7 @@ $thumbnailWidthSmall: 1.8rem;
   max-width: 10rem;
   white-space: pre-line;
   margin-right: var(--spacing-s);
+  color: var(--color-text);
 }
 
 .comment--blocked {
@@ -450,11 +519,17 @@ $thumbnailWidthSmall: 1.8rem;
     .media__thumb {
       flex-shrink: 0;
       overflow: hidden;
-      $width: 5rem;
+      $width: 6rem;
       @include handleClaimListGifThumbnail($width);
-      width: $width;
+      width: $width !important;
       height: calc(#{$width} * (9 / 16));
       margin-right: var(--spacing-s);
+
+      @media (max-width: $breakpoint-small) {
+        $width: 10rem;
+        width: $width !important;
+        height: calc(#{$width} * (9 / 16));
+      }
     }
 
     .channel-thumbnail {
@@ -472,9 +547,19 @@ $thumbnailWidthSmall: 1.8rem;
     margin: 0 0;
     padding: 0;
 
+    &:hover {
+      .claim-preview__hover-actions {
+        display: none;
+      }
+    }
+
     @media (min-width: $breakpoint-medium) {
       margin: 0 var(--spacing-xs);
     }
+
+    @media (max-width: $breakpoint-medium) {
+      padding-bottom: 0 !important;
+    }
   }
 
   .comment {
@@ -487,12 +572,19 @@ $thumbnailWidthSmall: 1.8rem;
       margin-top: 0;
       margin-left: var(--spacing-s);
     }
+    @media (max-width: $breakpoint-medium) {
+      margin-left: var(--spacing-s);
+    }
+  }
+
+  @media (max-width: $breakpoint-small) {
+    border-bottom: 1px solid var(--color-border);
   }
 }
 
 .sticker__comment {
   margin-left: var(--spacing-m);
-  height: 7rem;
+  height: 6rem;
   overflow: hidden;
 
   img {

ui/scss/component/_content.scss

@@ -2,6 +2,11 @@
   @extend .card;
   position: absolute;
   top: var(--spacing-s);
+  border-radius: var(--border-radius);
+
+  @media (max-width: $breakpoint-small) {
+    // margin-top: calc(var(--header-height) - var(--header-height-mobile));
+  }
 }
 
 .content__viewer--mobile {
@@ -37,7 +42,17 @@
   left: calc(var(--spacing-l) + var(--spacing-s));
   z-index: 9999;
 
+  border: 2px solid black;
+  // file-viewer__overlay-secondary autoplay-countdown__counter
+
+  .file-render--video {
+    border-radius: unset;
+  }
+
   &:hover {
+    .video-js--tap-to-unmute {
+      max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 3) - 42px);
+    }
     .content__floating-close {
       visibility: visible;
       z-index: 9999;
@@ -49,6 +64,12 @@
   top: 0;
   border-radius: 0;
   border: none;
+  right: 0;
+  // Next line is fixing the player width
+  width: unset !important;
+  .file-render--video {
+    border-radius: 0;
+  }
 }
 
 .content__wrapper {
@@ -56,6 +77,7 @@
   width: 100%;
   height: 100%;
   background-color: black;
+  border-radius: var(--border-radius);
 }
 
 .content__wrapper--floating {
@@ -65,6 +87,30 @@
   .vjs-button--theater-mode {
     display: none;
   }
+
+  .video-js--tap-to-unmute {
+    max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 2));
+
+    .icon {
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+    }
+  }
+
+  .content__info {
+    .claim-preview__title {
+      .button {
+        width: 100%;
+        .button__label {
+          display: inline-block;
+        }
+        &:hover {
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
 }
 
 .content__actions {
@@ -87,10 +133,21 @@
 .content__floating-close {
   visibility: hidden;
   position: absolute;
-  top: var(--spacing-s);
+  top: 8px;
-  right: var(--spacing-s);
+  right: 8px;
-  width: 3rem;
+  width: 42px;
-  height: 3rem;
+  height: 42px;
+  padding: 10px;
+  background-color: rgba(var(--color-primary-dynamic), 0.95) !important;
+
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &:hover {
+    background-color: rgba(var(--color-primary-dynamic), 1) !important;
+  }
 }
 
 .content__floating-link {
@@ -103,12 +160,14 @@
 
 .content__info {
   cursor: grab;
-  height: var(--floating-viewer-info-height);
+  padding: var(--spacing-s);
-  padding: var(--spacing-m);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   white-space: nowrap;
+  background-color: var(--color-header-background-transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
 }
 
 .content__cover {
@@ -116,8 +175,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  border-radius: var(--card-radius);
+  border-radius: var(--border-radius);
-  border: 1px solid var(--color-border);
   justify-content: center;
   background-position: 50% 50%;
   background-repeat: no-repeat;

ui/scss/component/_emote-selector.scss

@@ -0,0 +1,49 @@
+@import '../init/breakpoints';
+
+.emoteSelector {
+  animation: menu-animate-in var(--animation-duration) var(--animation-style);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-bottom: var(--spacing-m);
+}
+
+.emoteSelector__list {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 25vh;
+  padding: var(--spacing-s);
+  background-color: rgba(var(--color-primary-dynamic), 0.01);
+  border-radius: var(--border-radius);
+
+  .emoteSelector__listRowItems {
+    display: flex;
+    flex-wrap: wrap;
+
+    .button--file-action {
+      margin: var(--spacing-xxs);
+      padding: var(--spacing-xs);
+
+      .button__content {
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+
+        .button__label {
+          line-height: normal;
+        }
+
+        span {
+          margin: auto;
+          font-size: var(--font-large);
+        }
+      }
+      &:hover {
+        background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
+      }
+    }
+  }
+}

ui/scss/component/_file-price.scss

@@ -11,7 +11,7 @@
     position: relative;
     margin-left: var(--spacing-m);
     white-space: nowrap;
-    color: var(--color-purchased-text);
+    color: var(--color-primary-contrast);
   }
 
   &::before {
@@ -21,9 +21,7 @@
     width: 250%;
     height: 160%;
     transform: skew(15deg);
-    border-radius: var(--border-radius);
+    background-color: rgba(var(--color-primary-dynamic), 1);
-    background-color: var(--color-purchased-alt);
-    border: 2px solid var(--color-purchased);
   }
 }
 
@@ -31,10 +29,12 @@
   font-size: var(--font-body);
   top: calc(var(--spacing-xxs) * -1);
   margin-left: var(--spacing-m);
+  margin-right: var(--spacing-m);
+  height: 2.4rem;
 
   .credit-amount {
     margin: 0 var(--spacing-m);
-    margin-bottom: -0.5rem;
+    margin-bottom: -0.9rem;
   }
 
   &::before {

ui/scss/component/_file-render.scss

@@ -1,4 +1,29 @@
 .file-page {
+  .card-stack {
+    .claim-preview {
+      &:hover {
+        .claim-preview__title {
+          color: var(--color-text);
+        }
+      }
+      .claim-preview__title {
+        &:hover {
+          color: var(--color-link);
+        }
+      }
+    }
+  }
+
+  .file-page__recommended {
+    .claim-preview__wrapper {
+      &:hover {
+        .claim-preview__title {
+          color: var(--color-link);
+        }
+      }
+    }
+  }
+
   .file-page__video-container + .card,
   .file-render + .card,
   .content__cover + .card,
@@ -16,10 +41,6 @@
     .file-viewer--document {
       margin-top: var(--spacing-l);
 
-      @media (min-width: $breakpoint-small) {
-        margin-top: var(--spacing-xl);
-      }
-
       .button {
         display: inline;
 
@@ -50,6 +71,24 @@
     }
   }
 
+  // Temporary fix
+  .card__main-actions {
+    .claim-tile__info {
+      display: unset;
+      margin-top: -2px;
+      padding-bottom: 0;
+      .media__subtitle {
+        padding-bottom: 3px;
+        .claim-preview__channel-sub-count {
+          font-size: var(--font-xsmall) !important;
+          @media (max-width: $breakpoint-small) {
+            font-size: var(--font-xxsmall) !important;
+          }
+        }
+      }
+    }
+  }
+
   > * {
     width: 100%;
   }
@@ -60,7 +99,7 @@
 
   @media (max-width: $breakpoint-small) {
     .card__main-actions {
-      padding: var(--spacing-s) var(--spacing-xxs) !important;
+      // padding: var(--spacing-s) var(--spacing-xxs) !important;
     }
 
     .claim-preview--inline {
@@ -114,7 +153,7 @@
 
       .claim-preview__actions {
         margin: 0;
-        align-self: center;
+        align-self: flex-start;
 
         .button-group {
           margin: 0;
@@ -148,6 +187,7 @@
 
 .file-render--video {
   background-color: black;
+  border-radius: var(--border-radius);
 
   &:after {
     content: '';
@@ -162,6 +202,18 @@
     opacity: 0;
     pointer-events: none;
   }
+
+  @media (max-width: $breakpoint-small) {
+    border-radius: unset;
+    .autoplay-countdown {
+      .file-viewer__overlay-secondary {
+        margin-bottom: 0 !important;
+      }
+      .autoplay-countdown__counter {
+        margin-top: var(--spacing-xxs) !important;
+      }
+    }
+  }
 }
 
 .file-render--scheduledLivestream {
@@ -716,10 +768,12 @@ $control-bar-icon-size: 0.8rem;
   background: black;
   border: 1px solid var(--color-gray-4);
   opacity: 0.9;
+  border-radius: var(--border-radius);
 
   &:hover {
     opacity: 1;
-    color: var(--color-white);
+    color: var(--color-primary);
+    border: 1px solid var(--color-primary);
   }
 }
 
@@ -822,6 +876,7 @@ $control-bar-icon-size: 0.8rem;
 }
 .autoplay-countdown__counter {
   margin-top: var(--spacing-m);
+  color: #fff !important;
 }
 
 .autoplay-countdown__button {
@@ -865,22 +920,13 @@ $control-bar-icon-size: 0.8rem;
 
 .file__viewdate {
   display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  margin-bottom: var(--spacing-s);
-
-  > :first-child {
-    margin-bottom: var(--spacing-s);
-  }
-
-  @media (max-width: $breakpoint-medium) {
-    flex-direction: row;
   justify-content: start;
+  flex-direction: row;
+  margin-bottom: var(--spacing-s);
 
   > :first-child {
     margin-bottom: 0;
-      margin-right: 1rem;
+    margin-right: var(--spacing-s);
-    }
   }
 }
 

ui/scss/component/_footer.scss

@@ -11,6 +11,7 @@
   @media (max-width: $breakpoint-small) {
     max-width: 100%;
     padding: var(--spacing-m);
+    padding-left: var(--spacing-s);
     align-items: flex-start;
   }
 }
@@ -29,6 +30,17 @@
 
   .footer__link {
     margin-left: 0;
+    margin-bottom: 0;
+    .button {
+      .button__label {
+        color: rgba(var(--color-text-base), 0.8);
+      }
+      &:hover {
+        .button__label {
+          color: rgba(var(--color-text-base), 1);
+        }
+      }
+    }
   }
 
   @media (min-width: $breakpoint-small) {

ui/scss/component/_form-field.scss

@@ -5,17 +5,12 @@ select,
 .date-picker-input {
   height: var(--height-input);
   border-radius: var(--border-radius);
-  border: 1px solid;
   color: var(--color-input);
   border-color: var(--color-input-border);
   background-color: var(--color-input-bg);
   padding-right: var(--spacing-s);
   padding-left: var(--spacing-s);
 
-  &:focus {
-    @include focus;
-  }
-
   &::placeholder {
     color: var(--color-input-placeholder);
     opacity: 0.4;
@@ -40,16 +35,18 @@ select,
   textarea {
     height: var(--height-input);
     border-radius: var(--border-radius);
-    border: 1px solid;
+    // border: 1px solid;
     color: var(--color-input);
-    border-color: var(--color-input-border);
+    // border-color: var(--color-input-border);
     background-color: var(--color-input-bg);
     padding-right: var(--spacing-s);
     padding-left: var(--spacing-s);
 
+    /*
     &:focus {
       @include focus;
     }
+    */
 
     &::placeholder {
       color: var(--color-input-placeholder);
@@ -130,6 +127,16 @@ form,
   }
 }
 
+fieldset-section {
+  background-color: unset !important;
+  select:focus-visible {
+    background-color: var(--color-header-background) !important;
+  }
+
+  option {
+    background-color: var(--color-header-background);
+  }
+}
 fieldset-section,
 .checkbox,
 .radio {
@@ -194,7 +201,7 @@ input-submit {
     display: inline-block;
     margin: 0;
     font-size: var(--font-base);
-    padding-left: calc(var(--height-checkbox) + var(--spacing-s));
+    padding-left: calc(var(--height-checkbox) + 10px);
     min-height: var(--height-checkbox);
 
     &::before {
@@ -225,11 +232,6 @@ input-submit {
   input[type='radio']:checked + label::after {
     content: '';
   }
-
-  input[type='checkbox']:focus + label::before,
-  input[type='radio']:focus + label::before {
-    @include focus;
-  }
 }
 
 .checkbox {
@@ -249,8 +251,8 @@ input-submit {
     width: 12px;
     border-left: 2px solid;
     border-bottom: 2px solid;
-    border-color: var(--color-input-toggle);
+    border-color: var(--color-primary);
-    border-left-color: var(--color-input-toggle);
+    border-left-color: var(--color-primary);
     transform: rotate(-45deg);
     left: 6px;
     top: 6px;
@@ -367,6 +369,13 @@ fieldset-group {
       margin-top: var(--spacing-l);
       align-items: flex-end;
       justify-content: center;
+
+      fieldset-section {
+        input {
+          margin-bottom: 5px !important;
+          margin-left: var(--spacing-s);
+        }
+      }
     }
 
     &.fieldgroup--paginate-top {
@@ -402,13 +411,14 @@ fieldset-group {
         overflow: hidden;
         padding: 0.5rem;
         height: var(--height-input);
-        border: 1px solid;
         border-top-left-radius: var(--border-radius);
         border-bottom-left-radius: var(--border-radius);
         border-color: var(--color-input-border);
         border-right-color: var(--color-input-prefix-border);
+        //color: white;
+        background-color: var(--color-header-button);
         color: var(--color-text);
-        background-color: var(--color-input-prefix-bg);
+        box-shadow: 0px 0px 0px 2px rgba(var(--color-text-base), 0.1) inset;
       }
     }
 
@@ -465,6 +475,7 @@ fieldset-group {
 
 .form-field__help {
   @extend .help;
+  color: var(--color-text);
 }
 
 .form-field__help + .checkbox,
@@ -498,12 +509,18 @@ fieldset-group {
 }
 
 .form-field__textarea-info {
-  display: flex;
+  //display: flex;
-  flex-wrap: wrap;
+  //flex-wrap: wrap;
-  align-items: center;
+  //align-items: right;
   justify-content: space-between;
   margin-top: var(--spacing-xxs);
   margin-bottom: var(--spacing-s);
+  text-align: right;
+
+  span {
+    display: inline-block;
+    padding-right: 0px;
+  }
 }
 
 fieldset-section {
@@ -529,6 +546,12 @@ fieldset-section {
       }
     }
 
+    select {
+      max-height: var(--height-input-slim) !important;
+      padding: 0 var(--spacing-xs);
+      padding-right: var(--spacing-l);
+    }
+
     @media (max-width: $breakpoint-small) {
       select {
         max-height: 1.25rem !important;
@@ -631,6 +654,10 @@ fieldset-section {
     cursor: pointer;
   }
 
+  .react-calendar button:disabled {
+    background-color: rgba(var(--color-header-background-base), 1);
+  }
+
   .react-calendar__navigation {
     height: 44px;
     margin-bottom: 1em;
@@ -710,6 +737,10 @@ fieldset-section {
     background: var(--color-button-alt-bg-hover);
   }
 
+  .react-calendar__tile:disabled {
+    background-color: rgba(var(--color-primary-dynamic), 0.4);
+  }
+
   .react-calendar__tile--now {
     background: var(--color-button-secondary-bg);
   }
@@ -770,3 +801,7 @@ fieldset-section {
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
   box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
 }
+
+#yt_sync_channel {
+  width: unset;
+}

ui/scss/component/_header.scss

@@ -7,11 +7,12 @@
   top: 0;
   width: 100%;
   background-color: var(--color-header-background);
-  box-shadow: var(--card-box-shadow);
   font-size: var(--font-body);
   user-select: none;
   -webkit-user-select: none;
   -webkit-app-region: drag;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
 
   .skip-button {
     opacity: 0;
@@ -32,6 +33,30 @@
     }
   }
 
+  .header__menu--right {
+    .header__navigationItem--balance {
+      .button__label {
+        margin-left: var(--spacing-xxs) !important;
+      }
+      &:hover {
+        .button__label {
+          color: var(--color-odysee-contrast) !important;
+        }
+      }
+    }
+  }
+
+  .button--link {
+    color: var(--color-odysee) !important;
+    &:hover {
+      color: var(--color-link-hover) !important;
+    }
+  }
+  .button--primary {
+    background-color: var(--color-odysee) !important;
+    color: var(--color-odysee-contrast) !important;
+  }
+
   @media (max-width: $breakpoint-small) {
     .card__actions--between {
       .header__menu--left,
@@ -41,11 +66,39 @@
       }
     }
   }
+
+  *:focus-visible:not(.wunderbar__input):not(.menu__list):not(.menu__list--header):not(.button--secondary):not(.button-like):not(.button-dislike):not(select):not(input):not(textarea):not(video) {
+    background-color: rgba(var(--color-primary-static), 0.2) !important;
+    color: var(--color-text) !important;
+    // outline: 2px solid var(--color-primary);
+    box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
+
+    .icon {
+      stroke: var(--color-text) !important;
+    }
+  }
+
+  select:focus-visible,
+  input:focus-visible:not(.wunderbar__input),
+  textarea:focus-visible {
+    box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
+  }
+
+  .ff-container {
+    canvas {
+      border-radius: 50%;
+    }
+    .freezeframe-img {
+      width: var(--height-button) !important;
+      height: var(--height-button) !important;
+      border-radius: 50%;
+    }
+  }
 }
 
 .header--minimal {
   box-shadow: none;
-  background-color: var(--color-background);
+  background-color: var(--color-header-background);
   border-bottom: none;
 
   .header__navigation {
@@ -85,9 +138,90 @@
   padding: var(--spacing-s) var(--spacing-m);
   flex-wrap: nowrap;
 
+  .wunderbar__wrapper {
+    .wunderbar__input {
+      background-color: var(--color-header-button) !important;
+    }
+
+    &:hover {
+      .wunderbar__input {
+        outline: 2px solid var(--color-header-button-hover) !important;
+      }
+    }
+
+    .wunderbar__input:focus-visible {
+      outline: 2px solid var(--color-header-button-hover) !important;
+    }
+  }
+
+  .button--alt {
+    background-color: var(--color-header-button);
+    color: var(--color-text);
+
+    &:hover {
+      background-color: var(--color-odysee);
+      color: var(--color-odysee-contrast);
+    }
+  }
+
+  .button__content {
+    &:hover {
+      .button__label {
+        color: var(--color-odysee-contrast);
+      }
+    }
+  }
+
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xs);
     height: var(--header-height-mobile);
+
+    .button--alt {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      .button__content {
+        width: unset;
+        height: 22px;
+      }
+    }
+
+    .header__navigationItem--logo {
+      border-radius: 50%;
+      svg {
+        width: calc(var(--header-height-mobile) - var(--spacing-m));
+        height: calc(var(--header-height-mobile) - var(--spacing-m));
+      }
+    }
+
+    .button,
+    .header__navigationItem--icon {
+      width: calc(var(--header-height-mobile) - var(--spacing-m));
+      height: calc(var(--header-height-mobile) - var(--spacing-m));
+      background-color: rgba(var(--color-primary-static), 0.6);
+      .icon {
+        stroke: var(--color-odysee-contrast);
+      }
+    }
+
+    .channel-thumbnail {
+      width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
+      height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
+    }
+  }
+}
+
+.wunderbar__wrapper--mobile {
+  border-bottom: unset !important;
+  .wunderbar__input {
+    border-radius: var(--border-radius) !important;
+    background-color: var(--color-header-button) !important;
+    &:focus-visible,
+    &:focus {
+      outline: 2px solid var(--color-odysee) !important;
+    }
   }
 }
 
@@ -104,6 +238,10 @@
 .header__menu--left {
   @extend .header__menu;
   justify-content: flex-start;
+  margin-left: var(--spacing-s);
+  @media (max-width: $breakpoint-small) {
+    margin-left: unset;
+  }
 }
 
 .header__menu--right {
@@ -139,8 +277,15 @@
     stroke: var(--color-text);
   }
 
-  &[aria-expanded='true'] {
+  &[aria-expanded='true']:not(.header__navigationItem--profilePic) {
-    background-color: var(--color-header-button-active);
+    transform: rotate(0deg);
+    &:not(.button-rotate) {
+      background-color: var(--color-header-button-hover);
+
+      .icon {
+        stroke: var(--color-odysee-contrast);
+      }
+    }
   }
 
   @media (max-width: $breakpoint-small) {
@@ -156,18 +301,17 @@
   margin-right: var(--spacing-s);
 
   &:hover {
-    background-color: var(--color-header-button-hover);
+    background-color: var(--color-odysee);
-  }
 
-  @media (min-width: $breakpoint-small) {
+    .icon {
-    &:focus {
+      stroke: var(--color-odysee-contrast);
-      @include focus;
     }
   }
 
   @media (max-width: $breakpoint-small) {
     margin: 0;
-    width: var(--height-button-mobile);
+    width: calc(var(--header-height-mobile) - var(--spacing-m));
+    height: calc(var(--header-height-mobile) - var(--spacing-m));
   }
 
   span {
@@ -179,6 +323,7 @@
 
 .header__navigationItem--profilePic {
   margin-right: var(--spacing-s);
+  border-radius: 50%;
 
   .channel-thumbnail {
     height: var(--height-button);
@@ -186,8 +331,18 @@
     margin-right: 0;
   }
 
+  .channel-staked__tooltip {
+    display: none;
+  }
+
   &:hover {
-    opacity: 0.7;
+    .ff-canvas {
+      opacity: 0 !important;
+      transition: opacity 1s !important;
+    }
+    .ff-image {
+      opacity: 1 !important;
+    }
   }
 
   @media (max-width: $breakpoint-small) {
@@ -206,18 +361,21 @@
   width: var(--height-button) !important;
 
   @media (max-width: $breakpoint-small) {
-    height: var(--height-button-mobile) !important;
+    height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
-    width: var(--height-button-mobile) !important;
+    width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
   }
 }
 
 .header__navigationItem--balance {
   @extend .header__navigationItem;
   margin: 0 var(--spacing-s);
-  color: var(--color-text);
+  padding-left: var(--spacing-s);
+  padding-right: var(--spacing-s);
+  background-color: var(--color-header-button);
 
   &:hover {
-    color: var(--color-text);
+    background-color: var(--color-header-button-hover);
+    color: var(--color-primary-contrast);
   }
 
   @media (max-width: $breakpoint-small) {
@@ -250,7 +408,8 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    margin-right: var(--spacing-m);
+    // margin-right: var(--spacing-m);
+    margin: 0;
 
     .button__label {
       display: none;