Style fixes

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,14 +65,15 @@ export default function ChannelSelector(props: Props) {
   return (
     <div className="channel__selector">
       <Menu>
-        <MenuButton className={isHeaderMenu ? 'menu__link' : undefined}>
         {isHeaderMenu ? (
-            <>
+          <MenuButton className="menu__link">
             <ChannelThumbnail uri={activeChannelUrl} hideStakedIndicator xxsmall noLazyLoad />
             {__('Change Default Channel')}
             <Icon icon={ICONS.DOWN} />
-            </>
-          ) : (incognito && !hideAnon) || !activeChannelUrl ? (
+          </MenuButton>
+        ) : (
+          <MenuButton>
+            {(incognito && !hideAnon) || !activeChannelUrl ? (
               <IncognitoSelector isSelected />
             ) : (
               <ChannelListItem
@@ -84,6 +85,7 @@ export default function ChannelSelector(props: Props) {
               />
             )}
           </MenuButton>
+        )}
 
         <MenuList className="menu__list channel__list">
           {channels &&

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>
     );

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>

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);

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);