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

consistent menu button styles and minor css fixes: #5145

Browse source
This commit is contained in:
btzr-io 2021-07-15 00:40:40 -05:00
parent d0f241d908
commit eb1ab935c5
5 changed files with 19 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/notification/view.jsx
View file

@ -193,7 +193,7 @@ export default function Notification(props: Props) {
<div className="notification__menu"> <div className="notification__menu">
<Menu> <Menu>
<MenuButton className={'notification__menu-button'} onClick={(e) => e.stopPropagation()}> <MenuButton className={'menu-button notification__menu-button'} onClick={(e) => e.stopPropagation()}>
<Icon size={18} icon={ICONS.MORE_VERTICAL} /> <Icon size={18} icon={ICONS.MORE_VERTICAL} />
</MenuButton> </MenuButton>
<MenuList className="menu__list"> <MenuList className="menu__list">

16
ui/scss/component/_claim-list.scss
View file

@ -265,7 +265,7 @@
.claim-preview__title { .claim-preview__title {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-body); font-size: var(--font-body);
margin-right: auto; margin-right: var(--spacing-l);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
@ -538,7 +538,6 @@
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
min-height: 2.5rem; min-height: 2.5rem;
padding-right: var(--spacing-m);
} }
} }
@ -737,7 +736,6 @@
.claim__menu-button { .claim__menu-button {
right: 0.2rem; right: 0.2rem;
top: var(--spacing-s);
} }
} }
@ -746,18 +744,6 @@
top: var(--spacing-xs); top: var(--spacing-xs);
right: var(--spacing-xs); right: var(--spacing-xs);
.icon {
stroke: var(--color-text);
}
&:focus {
opacity: 1;
.icon {
background-color: var(--color-button-alt-bg);
border-radius: var(--border-radius);
}
}
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
&:not(:focus):not([aria-expanded='true']) { &:not(:focus):not([aria-expanded='true']) {
opacity: 0; opacity: 0;

16
ui/scss/component/_comments.scss
View file

@ -263,14 +263,6 @@ $thumbnailWidthSmall: 1rem;
.comment__menu { .comment__menu {
align-self: flex-end; align-self: flex-end;
line-height: 1; line-height: 1;
button {
border-radius: var(--border-radius);
&:focus {
@include linkFocus;
}
}
} }
.comment__char-count { .comment__char-count {
@ -295,14 +287,6 @@ $thumbnailWidthSmall: 1rem;
} }
} }
.comment__menu-icon--hovering {
stroke: var(--color-comment-menu-hovering);
}
.comment__menu-icon {
stroke: var(--color-comment-menu);
}
.comment__menu-list { .comment__menu-list {
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
border-radius: var(--card-radius); border-radius: var(--card-radius);

11
ui/scss/component/_notification.scss
View file

@ -218,17 +218,6 @@ $contentMaxWidth: 60rem;
.icon { .icon {
stroke: var(--color-text-help); stroke: var(--color-text-help);
} }
.notification__menu-button {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
&:focus {
@include linkFocus;
}
}
} }
.notification__filter { .notification__filter {

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

@ -44,10 +44,25 @@
} }
.menu__button { .menu__button {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
padding: 0.3rem;
.icon {
stroke: var(--color-comment-menu);
}
.comment__menu-icon--hovering {
}
&:focus,
&:hover { &:hover {
opacity: 1;
background-color: var(--color-button-alt-bg);
.icon { .icon {
border-radius: var(--border-radius); stroke: var(--color-comment-menu-hovering);
background-color: var(--color-card-background-highlighted);
} }
} }
} }