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

Design patch 2022-04-25 (#1392)

Browse source
This commit is contained in:
Rave | 図書館猫 2022-04-25 10:10:45 +02:00 committed by GitHub
parent 20b5653f95
commit 56a7ad47c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 60 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ui/page/settingsStripeAccount/view.jsx
View file

@ -225,7 +225,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div> </div>
<div className="section__actions"> <div className="section__actions">
<a href={stripeConnectionUrl}> <a href={stripeConnectionUrl}>
<Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} /> <Button button="primary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
</a> </a>
</div> </div>
</div> </div>
@ -272,7 +272,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div> </div>
<div className="section__actions"> <div className="section__actions">
<a href={stripeConnectionUrl}> <a href={stripeConnectionUrl}>
<Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} /> <Button button="primary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
</a> </a>
</div> </div>
</div> </div>
@ -282,26 +282,28 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div> </div>
} }
// only show additional buttons if its for additional verification or to show transaction page // only show additional buttons if its for additional verification or to show transaction page
actions={(stillRequiringVerification || accountConfirmed) && actions={
<> (stillRequiringVerification || accountConfirmed) && (
{stillRequiringVerification && ( <>
<Button {stillRequiringVerification && (
button="primary" <Button
label={__('Complete Verification')} button="primary"
icon={ICONS.SETTINGS} label={__('Complete Verification')}
navigate={stripeConnectionUrl} icon={ICONS.SETTINGS}
className="stripe__complete-verification-button" navigate={stripeConnectionUrl}
/> className="stripe__complete-verification-button"
)} />
{accountConfirmed && ( )}
<Button {accountConfirmed && (
button="secondary" <Button
label={__('View Transactions')} button="secondary"
icon={ICONS.SETTINGS} label={__('View Transactions')}
navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`} icon={ICONS.SETTINGS}
/> navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
)} />
</> )}
</>
)
} }
/> />
<br /> <br />

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

@ -699,10 +699,6 @@ svg + .button__label {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
.icon {
// margin-bottom:-4px;
}
&:hover:not(.button-toggle--active) { &:hover:not(.button-toggle--active) {
background-color: var(--color-button-toggle-bg-hover) !important; background-color: var(--color-button-toggle-bg-hover) !important;
.button__label { .button__label {

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

@ -1482,13 +1482,8 @@ $claim-preview-progress-bar-height: 5px;
position: relative; position: relative;
.tag { .tag {
background-color: var(--color-primary); background-color: var(--color-header-background);
color: var(--color-primary-contrast); color: var(--color-text);
/*
@media (max-width: $breakpoint-xsmall) {
display: none;
}
*/
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
@ -1503,8 +1498,8 @@ $claim-preview-progress-bar-height: 5px;
} }
&:hover { &:hover {
background-color: var(--color-secondary); background-color: var(--color-primary);
color: var(--color-secondary-contrast); color: var(--color-primary-contrast);
} }
} }

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

@ -424,6 +424,27 @@ $thumbnailWidthSmall: 2rem;
.button__label { .button__label {
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);
} }
.comment__action:not(.comment__action--active):not(.comment__action--creator-like) {
color: rgba(var(--color-text-base), 0.7);
&:hover {
color: rgba(var(--color-text-base), 1);
}
}
.comment__action--creator-like {
span {
.icon {
stroke: rgba(var(--color-text-base), 0.7);
}
}
&:hover {
span {
.icon {
stroke: rgba(var(--color-text-base), 1);
}
}
}
}
} }
.comment__actions--nested { .comment__actions--nested {

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

@ -698,6 +698,10 @@ body {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
padding: 0 var(--spacing-m); padding: 0 var(--spacing-m);
.section__actions {
margin-left: var(--spacing-s);
}
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
.section__header--actions { .section__header--actions {
.section__actions--inline:last-of-type { .section__actions--inline:last-of-type {

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

@ -8,8 +8,6 @@
margin-left: 0; margin-left: 0;
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
margin-right: var(--spacing-s); margin-right: var(--spacing-s);
//color:var(--color-primary-contrast);
//background-color:var(--color-primary);
color: var(--color-text); color: var(--color-text);
background-color: var(--color-header-background); background-color: var(--color-header-background);
@ -49,7 +47,7 @@
// Nested style needed for more specificity // Nested style needed for more specificity
.tag__input { .tag__input {
@extend .tag--remove; @extend .tag--remove;
height: var(--tag-height); height: var(--input-height);
padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s); padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
background-color: var(--color-input-bg); background-color: var(--color-input-bg);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
@ -59,6 +57,7 @@
.tag { .tag {
@extend .badge; @extend .badge;
@extend .badge--tag; @extend .badge--tag;
font-size: var(--font-xsmall);
} }
.tag--remove { .tag--remove {

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

@ -61,9 +61,9 @@
--color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5); --color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5);
--color-button-alt-text-hover: var(--color-text); --color-button-alt-text-hover: var(--color-text);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4); --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
--color-button-toggle-text: rgba(var(--color-text-base), 0.8); --color-button-toggle-text: rgba(var(--color-text-base), 1);
--color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.7); --color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.9);
--color-button-toggle-text-hover: var(--color-text); --color-button-toggle-text-hover: var(--color-text);
--color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1); --color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);
--color-button-toggle-text-active: var(--color-text); --color-button-toggle-text-active: var(--color-text);

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

@ -69,8 +69,8 @@
--color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5); --color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5);
--color-button-alt-text-hover: var(--color-text); --color-button-alt-text-hover: var(--color-text);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4); --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
--color-button-toggle-text: rgba(var(--color-text-base), 0.8); --color-button-toggle-text: rgba(var(--color-text-base), 1);
--color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.9); --color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.9);
--color-button-toggle-text-hover: var(--color-text); --color-button-toggle-text-hover: var(--color-text);
--color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1); --color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);