Style fixes

This commit is contained in:
Rafael 2022-05-05 07:58:11 -03:00 committed by Thomas Zarebczan
parent 33826ea652
commit 371ce4a7ff
5 changed files with 54 additions and 26 deletions

View file

@ -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 &&

View file

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

View file

@ -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>

View file

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

View file

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