From 371ce4a7ffad699a8cdab3f9ca87e9e37c5ecbf3 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Thu, 5 May 2022 07:58:11 -0300
Subject: [PATCH] Style fixes

---
 ui/component/channelSelector/view.jsx         | 42 ++++++++++---------
 ui/component/channelThumbnail/view.jsx        |  5 ++-
 ui/component/headerProfileMenuButton/view.jsx |  4 +-
 ui/scss/component/_channel.scss               | 15 +++++--
 ui/scss/component/menu-button.scss            | 14 +++++++
 5 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx
index ce0f8f7f9..95b0745c4 100644
--- a/ui/component/channelSelector/view.jsx
+++ b/ui/component/channelSelector/view.jsx
@@ -26,7 +26,7 @@ type Props = {
   odyseeMembershipByUri: (uri: string) => string,
   storeSelection?: boolean,
   doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
-  isHeaderMenu: boolean,
+  isHeaderMenu?: boolean,
 };
 
 export default function ChannelSelector(props: Props) {
@@ -65,25 +65,27 @@ export default function ChannelSelector(props: Props) {
   return (
     <div className="channel__selector">
       <Menu>
-        <MenuButton className={isHeaderMenu ? 'menu__link' : undefined}>
-          {isHeaderMenu ? (
-            <>
-              <ChannelThumbnail uri={activeChannelUrl} hideStakedIndicator xxsmall noLazyLoad />
-              {__('Change Default Channel')}
-              <Icon icon={ICONS.DOWN} />
-            </>
-          ) : (incognito && !hideAnon) || !activeChannelUrl ? (
-            <IncognitoSelector isSelected />
-          ) : (
-            <ChannelListItem
-              odyseeMembershipByUri={odyseeMembershipByUri}
-              uri={activeChannelUrl}
-              isSelected
-              claimsByUri={claimsByUri}
-              doFetchUserMemberships={doFetchUserMemberships}
-            />
-          )}
-        </MenuButton>
+        {isHeaderMenu ? (
+          <MenuButton className="menu__link">
+            <ChannelThumbnail uri={activeChannelUrl} hideStakedIndicator xxsmall noLazyLoad />
+            {__('Change Default Channel')}
+            <Icon icon={ICONS.DOWN} />
+          </MenuButton>
+        ) : (
+          <MenuButton>
+            {(incognito && !hideAnon) || !activeChannelUrl ? (
+              <IncognitoSelector isSelected />
+            ) : (
+              <ChannelListItem
+                odyseeMembershipByUri={odyseeMembershipByUri}
+                uri={activeChannelUrl}
+                isSelected
+                claimsByUri={claimsByUri}
+                doFetchUserMemberships={doFetchUserMemberships}
+              />
+            )}
+          </MenuButton>
+        )}
 
         <MenuList className="menu__list channel__list">
           {channels &&
diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index 638119f69..95782fc79 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -100,7 +100,10 @@ function ChannelThumbnail(props: Props) {
   if (isGif && !allowGifs) {
     const url = getImageProxyUrl(channelThumbnail);
     return (
-      <FreezeframeWrapper src={url} className={classnames('channel-thumbnail', className)}>
+      <FreezeframeWrapper
+        src={url}
+        className={classnames('channel-thumbnail', className, { 'channel-thumbnail--xxsmall': xxsmall })}
+      >
         {showMemberBadge && <PremiumBadge {...badgeProps} />}
       </FreezeframeWrapper>
     );
diff --git a/ui/component/headerProfileMenuButton/view.jsx b/ui/component/headerProfileMenuButton/view.jsx
index fab35826a..8d13cb6ee 100644
--- a/ui/component/headerProfileMenuButton/view.jsx
+++ b/ui/component/headerProfileMenuButton/view.jsx
@@ -101,9 +101,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
             <HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
             <ChannelSelector storeSelection isHeaderMenu />
 
-            <MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}>
+            <MuiMenuItem onClick={signOut}>
               <div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
-                <div>
+                <div className="menu__link-label">
                   <Icon aria-hidden icon={ICONS.SIGN_OUT} />
                   {__('Sign Out')}
                 </div>
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index b1696b699..c2a90e69c 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -267,12 +267,21 @@ $actions-z-index: 2;
   margin-right: var(--spacing-xs);
 }
 
-.channel-thumbnail--xxsmall {
-  height: 16px;
-  width: 16px;
+.channel__selector .channel-thumbnail--xxsmall {
   margin-right: var(--spacing-s) !important;
 }
 
+.channel-thumbnail--xxsmall {
+  height: 1rem;
+  width: 1rem;
+
+  .ff-container,
+  .ff-canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .channel-thumbnail--waiting {
   background-color: var(--color-gray-5);
   border-radius: var(--border-radius);
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index 25da74847..5e5b040b6 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -31,8 +31,17 @@ reach-portal {
   max-width: calc(100% - var(--height-button) - var(--spacing-xs));
 }
 
+.MuiMenuItem-root {
+  padding: 0px;
+  margin: 0px !important;
+}
+
 .MuiMenu-list--paper {
   display: flex;
+
+  .menu__link {
+    display: flex !important;
+  }
 }
 
 [data-reach-menu-list],
@@ -264,6 +273,11 @@ reach-portal {
   margin-top: var(--spacing-m);
 }
 
+.menu__link-label {
+  display: flex;
+  align-items: center;
+}
+
 .menu__separator {
   margin-top: var(--border-radius);
   margin-bottom: var(--border-radius);