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

style fixes (#7548)

Browse source
This commit is contained in:
jessopb 2022-04-20 17:17:47 -04:00 committed by GitHub
parent 845f33b4f2
commit c133d5b53a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 93 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/claimCollectionAdd/view.jsx
View file

@ -115,19 +115,13 @@ const ClaimCollectionAdd = (props: Props) => {
inputButton={
<>
<Button
button={'alt'}
icon={ICONS.ADD}
className={'button-toggle'}
disabled={!newCollectionName.length}
onClick={() => handleAddCollection()}
ref={buttonref}
/>
<Button
button={'alt'}
className={'button-toggle'}
icon={ICONS.REMOVE}
onClick={() => handleClearNew()}
/>
<Button className={'button-toggle'} icon={ICONS.REMOVE} onClick={() => handleClearNew()} />
</>
}
onChange={handleNameInput}

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

@ -144,7 +144,7 @@ export default function ClaimList(props: Props) {
const mainEl = document.querySelector(`.${MAIN_CLASS}`);
if (mainEl && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 1.5 <= window.innerHeight;
if (contentWrapperAtBottomOfPage) {
onScrollBottom();

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

@ -230,7 +230,6 @@ function ClaimListHeader(props: Props) {
{CS.ORDER_BY_TYPES.map((type) => (
<Button
key={type}
button="alt"
onClick={(e) =>
handleChange({
key: CS.ORDER_BY_KEY,
@ -251,7 +250,6 @@ function ClaimListHeader(props: Props) {
<div className="claim-search__menu-group">
{!hideAdvancedFilter && (
<Button
button="alt"
aria-label={__('More')}
className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
'button-toggle--custom': isFiltered(),

1
ui/component/playlistsMine/view.jsx
View file

@ -125,7 +125,6 @@ export default function PlaylistsMine(props: Props) {
<Button
label={__(value)}
key={value}
button="alt"
onClick={() => handleFilterType(value)}
className={classnames('button-toggle', {
'button-toggle--active': filterType === value,

1
ui/component/searchOptions/view.jsx
View file

@ -109,7 +109,6 @@ const SearchOptions = (props: Props) => {
return (
<Button
key={option}
button="alt"
label={t[1]}
className={classnames(`button-toggle`, {
'button-toggle--active': options[SEARCH_OPTIONS.CLAIM_TYPE] === option,

3
ui/component/txoList/view.jsx
View file

@ -254,7 +254,6 @@ function TxoList(props: Props) {
<div className={'txo__radios'}>
{/* active transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === TXO.ACTIVE,
@ -263,7 +262,6 @@ function TxoList(props: Props) {
/>
{/* historical transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'spent',
@ -272,7 +270,6 @@ function TxoList(props: Props) {
/>
{/* all transactions button */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
className={classnames(`button-toggle`, {
'button-toggle--active': active === 'all',

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

@ -231,7 +231,6 @@ function WalletTipAmountSelector(props: Props) {
<Button
key={defaultAmount}
disabled={shouldDisableAmountSelector(defaultAmount)}
button="alt"
className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active':
convertToTwoDecimalsOrMore(defaultAmount) === convertToTwoDecimalsOrMore(amount) && !useCustomTip,
@ -247,7 +246,6 @@ function WalletTipAmountSelector(props: Props) {
))}
<Button
button="alt"
disabled={shouldDisableFiatSelectors}
className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': useCustomTip,

2
ui/page/fileListDownloaded/view.jsx
View file

@ -59,7 +59,6 @@ function FileListDownloaded(props: Props) {
<div className="section__actions--inline">
<Button
icon={ICONS.LIBRARY}
button="alt"
label={__('Downloads')}
className={classnames(`button-toggle`, {
'button-toggle--active': viewMode === VIEW_DOWNLOADS,
@ -68,7 +67,6 @@ function FileListDownloaded(props: Props) {
/>
<Button
icon={ICONS.PURCHASED}
button="alt"
label={__('Purchases')}
className={classnames(`button-toggle`, {
'button-toggle--active': viewMode === VIEW_PURCHASES,

3
ui/page/fileListPublished/view.jsx
View file

@ -134,7 +134,6 @@ function FileListPublished(props: Props) {
header={
<span>
<Button
button="alt"
label={__('All')}
aria-label={__('All uploads')}
onClick={() => setFilterBy(FILTER_ALL)}
@ -143,7 +142,6 @@ function FileListPublished(props: Props) {
})}
/>
<Button
button="alt"
label={__('Uploads')}
onClick={() => setFilterBy(FILTER_UPLOADS)}
className={classnames(`button-toggle`, {
@ -151,7 +149,6 @@ function FileListPublished(props: Props) {
})}
/>
<Button
button="alt"
label={__('Reposts')}
onClick={() => {
setFilterBy(FILTER_REPOSTS);

2
ui/page/listBlocked/view.jsx
View file

@ -206,7 +206,6 @@ function ListBlocked(props: Props) {
return (
<Button
icon={icon}
button="alt"
label={__(label)}
className={classnames(`button-toggle`, {
'button-toggle--active': viewMode === view,
@ -221,7 +220,6 @@ function ListBlocked(props: Props) {
myChannelClaimIds && (
<Button
icon={ICONS.REFRESH}
button="alt"
label={__('Refresh')}
onClick={() => {
fetchModBlockedList();

2
ui/page/top/view.jsx
View file

@ -58,7 +58,6 @@ function TopPage(props: Props) {
<div className="claim-search__menu-group">
<Button
label={queryName}
button="alt"
onClick={() => setChannelActive(false)}
className={classnames('button-toggle', {
'button-toggle--active': !channelActive,
@ -66,7 +65,6 @@ function TopPage(props: Props) {
/>
<Button
label={`@${queryName}`}
button="alt"
onClick={() => setChannelActive(true)}
className={classnames('button-toggle', {
'button-toggle--active': channelActive,

2
ui/scss/component/_badge.scss
View file

@ -22,7 +22,7 @@
.badge--tag-mature {
@extend .badge;
background-color: var(--color-tertiary-alt);
background-color: var(--color-tertiary) !important;
color: var(--color-tertiary);
}

19
ui/scss/component/_button.scss
View file

@ -85,10 +85,10 @@
&:hover {
background-color: var(--color-button-secondary-bg-hover) !important;
.button__label {
color: var(--color-button-secondary-text-hover) !important;
color: var(--color-button-secondary-text-hover);
}
.icon {
stroke: var(--color-button-secondary-text-hover) !important;
stroke: var(--color-button-secondary-text-hover);
}
}
@ -107,8 +107,8 @@
}
.button--alt {
background-color: var(--color-button-alt-bg);
color: var(--color-button-alt-text);
background-color: var(--color-feature-background);
color: var(--color-text);
&:hover {
background-color: var(--color-button-alt-bg-hover);
color: var(--color-button-alt-text-hover);
@ -468,14 +468,15 @@ svg + .button__label {
}
.button-toggle {
@extend .button--alt;
padding: 0 var(--spacing-m);
height: var(--height-button);
font-size: var(--font-base);
border-left-width: 0;
border-radius: 0;
margin: 0;
color: var(--color-button-toggle-text) !important;
background-color: var(--color-button-toggle-bg) !important;
color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg);
-webkit-user-select: none;
user-select: none;
@ -490,6 +491,10 @@ svg + .button__label {
}
}
.button-toggle--active {
background-color: var(--color-button-toggle-bg-active);
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-m) var(--spacing-s);
}
@ -524,7 +529,7 @@ svg + .button__label {
// color: var(--color-button-toggle-text) !important;
//box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
color: var(--color-button-toggle-text-active) !important;
background-color: var(--color-button-toggle-bg-active) !important;
background-color: var(--color-button-toggle-bg-active);
.icon {
opacity: 1;

5
ui/scss/component/_card.scss
View file

@ -416,12 +416,9 @@
.button--alt {
color: var(--color-button-alt-text);
background-color: var(--color-button-alt-bg);
&:hover {
color: var(--color-primary-contrast);
background-color: var(--color-primary);
.icon {
stroke: var(--color-primary-contrast);
stroke: var(--color-button-alt-text-hover);
}
}
}

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

@ -3,6 +3,7 @@ $metadata-z-index: 1;
$actions-z-index: 2;
.channelPage-wrapper {
.channel__quick-actions {
.button-group {
.button__content {
.icon {
@ -10,19 +11,19 @@ $actions-z-index: 2;
}
}
.button-following {
color: var(--color-text) !important;
background-color: var(--color-button-alt-bg) !important;
&.button--alt {
color: var(--color-text);
background-color: var(--color-button-alt-bg);
.icon {
stroke: var(--color-text) !important;
stroke: var(--color-text);
}
&:hover {
color: var(--color-primary) !important;
color: var(--color-primary);
}
}
}
.button-following:last-of-type {
margin-left: 2px;
&:hover {
color: var(--color-text) !important;
}
}
}
@ -407,12 +408,13 @@ $actions-z-index: 2;
.button,
.menu__button {
background-color: var(--color-header-background);
&:hover {
color: var(--color-link);
//color: var(--color-link);
background-color: rgba(var(--color-header-background-base), 0.95);
.icon {
stroke: var(--color-link);
//stroke: var(--color-link);
}
}
}
@ -457,16 +459,6 @@ $actions-z-index: 2;
[role='menuitem'] {
margin: 0;
&[data-selected] {
// background: transparent;
.channel__list-item,
.channel-staked__wrapper {
.claim-preview__title {
color: var(--color-primary-contrast);
}
}
}
&:last-child {
.channel__list-item {
border-bottom-left-radius: var(--border-radius);
@ -529,14 +521,6 @@ $actions-z-index: 2;
border-radius: 50%;
}
}
&:hover {
background-color: var(--color-primary);
.channel__list-text {
color: var(--color-menu-icon-active);
}
}
}
.channel__list-item--selected {
@ -545,12 +529,6 @@ $actions-z-index: 2;
.icon--ChevronDown {
margin-left: var(--spacing-l);
}
&:hover {
.claim-preview__title {
color: white;
}
}
}
.channel__list-text {

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

@ -119,18 +119,6 @@
margin-top: var(--spacing-xxs);
}
.claim__tags {
.tag {
color: var(--color-text);
background-color: var(--color-header-button);
&:hover {
background-color: var(--color-primary);
color: var(--color-primary-contrast);
}
}
}
.claim-preview__repost-author {
width: 120px;
height: 120px;
@ -567,7 +555,7 @@
width: auto;
.button--alt {
color: var(--color-primary-contrast);
color: var(--color-text);
.icon {
stroke: var(--color-primary-contrast);

8
ui/scss/component/_claim-search.scss
View file

@ -29,13 +29,15 @@
.claim-search__dropdown {
font-size: var(--font-body);
background-color: var(--color-card-background);
background-color: var(--color-input-bg);
background-position: right var(--spacing-m) center;
}
.claim-search__dropdown--selected {
color: var(--color-primary-contrast);
background-color: var(--color-brand-blue);
color: var(--color-brand-blue);
option {
color: var(--color-text);
}
}
.claim-search__input-container {

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

@ -72,13 +72,6 @@ $thumbnailWidthSmall: 1rem;
@media (min-width: $breakpoint-small) {
@include handleChannelGif($thumbnailWidth);
}
.channel-staked__wrapper {
padding: 0;
bottom: -1rem;
padding: -1rem;
margin-left: 0;
}
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
@ -222,10 +215,6 @@ $thumbnailWidthSmall: 1rem;
.channel-name {
color: var(--color-link);
&:hover {
color: var(--color-secondary);
}
}
}

6
ui/scss/component/_header.scss
View file

@ -207,7 +207,7 @@
height: calc(var(--header-height-mobile) - var(--spacing-m));
background-color: rgba(var(--color-primary-static), 0.6);
.icon {
stroke: var(--color-brand-contrast);
stroke: var(--color-text);
}
}
@ -285,10 +285,6 @@
transform: rotate(0deg);
&:not(.button-rotate) {
background-color: var(--color-header-button-hover);
.icon {
stroke: var(--color-brand-contrast);
}
}
}

4
ui/scss/component/_main.scss
View file

@ -152,10 +152,6 @@ body {
.date_time {
font-size: var(--font-xsmall) !important;
color: rgba(var(--color-text-base), 0.6);
&:hover {
color: var(--color-text);
}
}
}

7
ui/scss/component/_markdown-editor.scss
View file

@ -41,6 +41,12 @@
}
}
button.active {
&.preview {
color: var(--color-brand-blue);
}
}
button {
color: var(--color-header-link);
border-color: transparent;
@ -107,7 +113,6 @@
button:not(.button) {
padding-right: 0;
padding-left: 0;
background-color: transparent !important;
border: transparent;
&:hover {

22
ui/scss/component/_modal.scss
View file

@ -97,15 +97,15 @@
margin: 0;
padding: var(--spacing-l);
border: 2px solid black;
border-radius: var(--border-radius);
.button-toggle {
background-color: rgba(var(--color-header-button-base), 0.4) !important;
.button-toggle:not(.button-toggle--active) {
&.button--alt {
background-color: rgba(var(--color-header-button-base), 0.4);
&:hover {
background-color: rgba(var(--color-header-button-base), 0.9) !important;
}
}
}
.button-toggle--active,
.channel__list-item,
@ -114,24 +114,20 @@
}
.channel__list-item {
&:hover {
background-color: var(--color-primary);
background-color: var(--color-feature-background);
color: var(--color-primary-contrast);
}
}
.button-toggle--active {
background-color: var(--color-feature-background);
}
label {
color: var(--color-text);
font-size: var(--font-medium);
}
[data-reach-menu-button] {
&:hover {
.channel__list-item--selected {
background-color: var(--color-primary) !important;
}
}
}
@media (max-width: $breakpoint-small) {
.card__main-actions {
border-top: unset !important;

11
ui/scss/component/_textarea-suggestions.scss
View file

@ -133,6 +133,10 @@
box-shadow: var(--card-box-shadow);
color: var(--color-text) !important;
.textareaSuggestions__topSeparator {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
}
.textarea-suggestions__group {
&:last-child hr {
display: none;
@ -275,13 +279,6 @@
background-color: var(--color-header-button);
}
}
.button-toggle {
background-color: rgba(var(--color-header-button-base), 0.4) !important;
&:hover {
background-color: rgba(var(--color-header-button-base), 0.9) !important;
}
}
.button-toggle--active {
background-color: rgba(var(--color-header-button-base), 0.9) !important;
}

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

@ -8,18 +8,15 @@ reach-portal {
[data-reach-menu] {
[data-reach-menu-items] {
&:focus-visible {
//background-color: var(--color-header-background);
background-color: var(--color-header-background);
}
[data-reach-menu-item][data-selected] {
.menu__link {
//color: var(--color-primary-contrast);
color: var(--color-alt-contrast);
color: var(--color-primary-contrast);
}
.icon {
//stroke: var(--color-primary-contrast);
stroke: var(--color-alt-contrast);
stroke: var(--color-primary-contrast);
}
}
}
@ -72,7 +69,6 @@ reach-portal {
[data-reach-menu-item][data-selected] {
background-color: var(--color-menu-background--active);
color: var(--color-primary-contrast) !important;
box-shadow: none;
.icon {
@ -125,25 +121,15 @@ reach-portal {
@extend .menu__list;
[data-reach-menu-item][data-selected] {
.menu__link {
color: var(--color-brand-contrast) !important;
}
.icon {
stroke: var(--color-primary-contrast);
}
}
[data-reach-menu-item][data-selected] {
color: var(--color-brand-contrast) !important;
background-color: var(--color-brand) !important;
background-color: var(--color-menu-background--active);
box-shadow: none;
.icon {
stroke: var(--color-brand-contrast) !important;
stroke: var(--color-brand-contrast);
}
.comment__menu-help {
color: var(--color-brand-contrast) !important;
color: var(--color-brand-contrast);
}
}

3
ui/scss/init/_gui.scss
View file

@ -896,6 +896,9 @@ img {
}
}
}
&.card {
padding: 0;
}
}
.scheduledLivestream-wrapper {

1
ui/scss/themes/dark.scss
View file

@ -22,6 +22,7 @@
--color-card-background: var(--color-gray-9);
--color-card-background2: var(--color-header-background);
--color-card-background-highlighted: var(--color-gray-8);
--color-feature-background: var(--color-header-background);
// Text
--color-text-base: 255, 255, 255;

34
ui/scss/themes/light.scss
View file

@ -13,7 +13,7 @@
--color-brand: var(--color-primary-static);
--color-brand-bright: rgb(56, 217, 169);
--color-accent: var(--color-brand-blue);
--color-secondary: rgb(219, 234, 254);
--color-secondary: var(--color-brand-blue);
--color-secondary-alt: rgb(191, 219, 254);
--color-secondary-alt-2: rgb(30, 64, 175);
--color-secondary-static: var(--color-secondary);
@ -24,7 +24,7 @@
--color-border: #ededed;
--color-background: #fafafa;
--color-background-overlay: #21252980;
--color-card-background: #ffffff;
--color-card-background: var(--color-gray-1);
--color-card-background-highlighted: #fff5f5;
//Text
@ -43,14 +43,16 @@
--color-tooltip-text: #fafafa;
// Header
--color-header-button: var(--color-button-alt-bg);
--color-header-button: var(--color-white); //var(--color-button-alt-bg);
--color-header-button-text: var(--color-black);
--color-header-background: #ffffff;
--color-feature-background: #ffffff;
// Button
--color-button-alt-bg: var(--color-gray-1);
--color-button-alt-bg-hover: var(--color-gray-2);
--color-button-alt-text: black;
--color-button-alt-bg: var(--color-feature-background);
--color-button-alt-bg-hover: var(--color-gray-1);
--color-button-alt-text: var(--color-text);
--color-button-alt-text-hover: var(--color-text);
// pri
--color-button-primary-bg: var(--color-primary);
--color-button-primary-bg-hover: var(--color-accent);
@ -60,22 +62,22 @@
--color-button-secondary-bg: var(--color-gray-1);
--color-button-secondary-border: var(--color-secondary-alt-3);
--color-button-secondary-text: var(--color-gray-6);
--color-button-secondary-bg-hover: var(--color-card-background);
--color-button-secondary-bg-hover: var(--color-feature-background);
--color-button-secondary-text-hover: var(--color-primary);
// toggle
--color-button-toggle-text: var(--color-gray-6);
--color-button-toggle-bg: var(--color-gray-1);
--color-button-toggle-bg-hover: var(--color-card-background);
--color-button-toggle-bg-hover: var(--color-feature-background);
--color-button-border: var(--color-gray-3);
--color-button-toggle-text-hover: var(--color-primary);
--color-button-toggle-bg-active: var(--color-card-background);
--color-button-toggle-text-active: var(--color-gray-6);
--color-toggle-custom: var(--color-secondary);
--color-button-toggle-text-hover: var(--color-text);
--color-button-toggle-bg-active: var(--color-header-background);
--color-button-toggle-text-active: var(--color-text);
--color-toggle-custom: var(--color-brand-blue);
// link / util
--color-link-active: var(--color-primary);
--color-link-focus-bg: #f1f1f1;
--color-link: var(--color-primary-alt-2);
--color-button-alt-text-hover: var(--color-text);
--color-link-hover: var(--color-primary);
// Input
@ -143,10 +145,10 @@
--color-spinner-light: #ffffff;
--color-spinner-dark: #212529;
--color-placeholder-background: #f0f0f0;
--color-file-viewer-background: var(--color-card-background);
--color-tabs-background: var(--color-card-background);
--color-file-viewer-background: var(--color-feature-background);
--color-tabs-background: var(--color-feature-background);
--color-tab-divider: var(--color-primary);
--color-modal-background: var(--color-card-background);
--color-modal-background: var(--color-gray-1);
// Icons
--color-follow-bg: #ffd4da;