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

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

@ -225,7 +225,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div>
<div className="section__actions">
<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>
</div>
</div>
@ -272,7 +272,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div>
<div className="section__actions">
<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>
</div>
</div>
@ -282,7 +282,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div>
}
// only show additional buttons if its for additional verification or to show transaction page
actions={(stillRequiringVerification || accountConfirmed) &&
actions={
(stillRequiringVerification || accountConfirmed) && (
<>
{stillRequiringVerification && (
<Button
@ -302,6 +303,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
/>
)}
</>
)
}
/>
<br />

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

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

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

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

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

@ -424,6 +424,27 @@ $thumbnailWidthSmall: 2rem;
.button__label {
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 {

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

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

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

@ -8,8 +8,6 @@
margin-left: 0;
margin-bottom: var(--spacing-s);
margin-right: var(--spacing-s);
//color:var(--color-primary-contrast);
//background-color:var(--color-primary);
color: var(--color-text);
background-color: var(--color-header-background);
@ -49,7 +47,7 @@
// Nested style needed for more specificity
.tag__input {
@extend .tag--remove;
height: var(--tag-height);
height: var(--input-height);
padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
background-color: var(--color-input-bg);
margin-bottom: var(--spacing-m);
@ -59,6 +57,7 @@
.tag {
@extend .badge;
@extend .badge--tag;
font-size: var(--font-xsmall);
}
.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-text-hover: var(--color-text);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4);
--color-button-toggle-text: rgba(var(--color-text-base), 0.8);
--color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.7);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
--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-text-hover: var(--color-text);
--color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);
--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-text-hover: var(--color-text);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4);
--color-button-toggle-text: rgba(var(--color-text-base), 0.8);
--color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
--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-text-hover: var(--color-text);
--color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);