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 (
- - {isHeaderMenu ? ( - <> - - {__('Change Default Channel')} - - - ) : (incognito && !hideAnon) || !activeChannelUrl ? ( - - ) : ( - - )} - + {isHeaderMenu ? ( + + + {__('Change Default Channel')} + + + ) : ( + + {(incognito && !hideAnon) || !activeChannelUrl ? ( + + ) : ( + + )} + + )} {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 ( - + {showMemberBadge && } ); 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) { - +
-
+
{__('Sign Out')}
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);