LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Style fixes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ui/component/channelSelector/view.jsx
View file

@ -26,7 +26,7 @@ type Props = {
odyseeMembershipByUri: (uri: string) => string, odyseeMembershipByUri: (uri: string) => string,
storeSelection?: boolean, storeSelection?: boolean,
doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void, doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
isHeaderMenu: boolean, isHeaderMenu?: boolean,
}; };
export default function ChannelSelector(props: Props) { export default function ChannelSelector(props: Props) {
@ -65,25 +65,27 @@ export default function ChannelSelector(props: Props) {
return ( return (
<div className="channel__selector"> <div className="channel__selector">
<Menu> <Menu>
<MenuButton className={isHeaderMenu ? 'menu__link' : undefined}> {isHeaderMenu ? (
{isHeaderMenu ? ( <MenuButton className="menu__link">
<> <ChannelThumbnail uri={activeChannelUrl} hideStakedIndicator xxsmall noLazyLoad />
<ChannelThumbnail uri={activeChannelUrl} hideStakedIndicator xxsmall noLazyLoad /> {__('Change Default Channel')}
{__('Change Default Channel')} <Icon icon={ICONS.DOWN} />
<Icon icon={ICONS.DOWN} /> </MenuButton>
</> ) : (
) : (incognito && !hideAnon) || !activeChannelUrl ? ( <MenuButton>
<IncognitoSelector isSelected /> {(incognito && !hideAnon) || !activeChannelUrl ? (
) : ( <IncognitoSelector isSelected />
<ChannelListItem ) : (
odyseeMembershipByUri={odyseeMembershipByUri} <ChannelListItem
uri={activeChannelUrl} odyseeMembershipByUri={odyseeMembershipByUri}
isSelected uri={activeChannelUrl}
claimsByUri={claimsByUri} isSelected
doFetchUserMemberships={doFetchUserMemberships} claimsByUri={claimsByUri}
/> doFetchUserMemberships={doFetchUserMemberships}
)} />
</MenuButton> )}
</MenuButton>
)}
<MenuList className="menu__list channel__list"> <MenuList className="menu__list channel__list">
{channels && {channels &&

5
ui/component/channelThumbnail/view.jsx
View file

@ -100,7 +100,10 @@ function ChannelThumbnail(props: Props) {
if (isGif && !allowGifs) { if (isGif && !allowGifs) {
const url = getImageProxyUrl(channelThumbnail); const url = getImageProxyUrl(channelThumbnail);
return ( return (
<FreezeframeWrapper src={url} className={classnames('channel-thumbnail', className)}> <FreezeframeWrapper
src={url}
className={classnames('channel-thumbnail', className, { 'channel-thumbnail--xxsmall': xxsmall })}
>
{showMemberBadge && <PremiumBadge {...badgeProps} />} {showMemberBadge && <PremiumBadge {...badgeProps} />}
</FreezeframeWrapper> </FreezeframeWrapper>
); );

4
ui/component/headerProfileMenuButton/view.jsx
View file

@ -101,9 +101,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
<HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} /> <HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
<ChannelSelector storeSelection isHeaderMenu /> <ChannelSelector storeSelection isHeaderMenu />
<MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}> <MuiMenuItem onClick={signOut}>
<div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}> <div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
<div> <div className="menu__link-label">
<Icon aria-hidden icon={ICONS.SIGN_OUT} /> <Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')} {__('Sign Out')}
</div> </div>

15
ui/scss/component/_channel.scss
View file

@ -267,12 +267,21 @@ $actions-z-index: 2;
margin-right: var(--spacing-xs); margin-right: var(--spacing-xs);
} }
.channel-thumbnail--xxsmall { .channel__selector .channel-thumbnail--xxsmall {
height: 16px;
width: 16px;
margin-right: var(--spacing-s) !important; margin-right: var(--spacing-s) !important;
} }
.channel-thumbnail--xxsmall {
height: 1rem;
width: 1rem;
.ff-container,
.ff-canvas {
width: 100%;
height: 100%;
}
}
.channel-thumbnail--waiting { .channel-thumbnail--waiting {
background-color: var(--color-gray-5); background-color: var(--color-gray-5);
border-radius: var(--border-radius); border-radius: var(--border-radius);

14
ui/scss/component/menu-button.scss
View file

@ -31,8 +31,17 @@ reach-portal {
max-width: calc(100% - var(--height-button) - var(--spacing-xs)); max-width: calc(100% - var(--height-button) - var(--spacing-xs));
} }
.MuiMenuItem-root {
padding: 0px;
margin: 0px !important;
}
.MuiMenu-list--paper { .MuiMenu-list--paper {
display: flex; display: flex;
.menu__link {
display: flex !important;
}
} }
[data-reach-menu-list], [data-reach-menu-list],
@ -264,6 +273,11 @@ reach-portal {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
} }
.menu__link-label {
display: flex;
align-items: center;
}
.menu__separator { .menu__separator {
margin-top: var(--border-radius); margin-top: var(--border-radius);
margin-bottom: var(--border-radius); margin-bottom: var(--border-radius);