fix: button color in publish form
This commit is contained in:
parent
04115ac264
commit
87549a5a30
5 changed files with 45 additions and 30 deletions
|
@ -34,7 +34,7 @@
|
||||||
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
|
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@lbry/components": "^2.2.3",
|
"@lbry/components": "^2.2.4",
|
||||||
"@types/three": "^0.93.1",
|
"@types/three": "^0.93.1",
|
||||||
"bluebird": "^3.5.1",
|
"bluebird": "^3.5.1",
|
||||||
"breakdance": "^3.0.1",
|
"breakdance": "^3.0.1",
|
||||||
|
|
|
@ -168,11 +168,9 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
input = (
|
input = (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<fieldset-section>
|
<fieldset-section>
|
||||||
{(label || errorMessage) && (
|
<label htmlFor={name}>
|
||||||
<label htmlFor={name}>
|
{errorMessage ? <span className="error-text">{errorMessage}</span> : label}
|
||||||
{errorMessage ? <span className="error-text">{errorMessage}</span> : label}
|
</label>
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
{prefix && (
|
{prefix && (
|
||||||
<label className="form-field--inline-prefix" htmlFor={name}>
|
<label className="form-field--inline-prefix" htmlFor={name}>
|
||||||
{prefix}
|
{prefix}
|
||||||
|
|
|
@ -53,35 +53,45 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--inverse {
|
// This is a hack and the extra styles are just so this is more specific than the @lbry/components styling
|
||||||
|
// Will make a PR there, but just doing it now for the release - Sean
|
||||||
|
[type='button'].button--inverse {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
html[data-mode='dark'] & {
|
||||||
border-color: rgba($lbry-white, 0.1);
|
&:not(:hover) {
|
||||||
background-color: rgba($lbry-black, 0.3);
|
border-color: rgba($lbry-white, 0.1);
|
||||||
}
|
background-color: rgba($lbry-black, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
&:not(:hover) {
|
&:hover {
|
||||||
background-color: $lbry-white;
|
border-color: rgba($lbry-white, 0.1);
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $lbry-gray-1;
|
|
||||||
color: $lbry-black;
|
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
|
||||||
background-color: rgba($lbry-white, 0.1);
|
background-color: rgba($lbry-white, 0.1);
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html[data-mode='light'] & {
|
||||||
|
&:not(:hover) {
|
||||||
|
background-color: $lbry-white;
|
||||||
|
color: $lbry-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $lbry-gray-1;
|
||||||
|
color: $lbry-black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button__content {
|
.button__content {
|
||||||
svg {
|
svg {
|
||||||
color: $lbry-gray-4;
|
color: $lbry-gray-4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--link:not(:disabled) {
|
.button--link:not(:disabled) {
|
||||||
html[data-mode='dark'] & {
|
html[data-mode='dark'] & {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
|
|
|
@ -142,14 +142,21 @@ fieldset-group {
|
||||||
|
|
||||||
// form buttons are black by default
|
// form buttons are black by default
|
||||||
form {
|
form {
|
||||||
// [data-mode='dark'] & {
|
[type='button'] {
|
||||||
.button--primary:not(:hover) {
|
&.button--primary {
|
||||||
background-color: $lbry-teal-5;
|
&:not(:hover) {
|
||||||
border-color: $lbry-teal-5;
|
background-color: $lbry-teal-5;
|
||||||
|
border-color: $lbry-teal-5;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $lbry-teal-3;
|
background-color: $lbry-teal-3;
|
||||||
border-color: $lbry-teal-3;
|
border-color: $lbry-teal-3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button--inverse {
|
||||||
|
@extend .button--inverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,10 +111,10 @@
|
||||||
version "0.7.1"
|
version "0.7.1"
|
||||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
||||||
|
|
||||||
"@lbry/components@^2.2.3":
|
"@lbry/components@^2.2.4":
|
||||||
version "2.2.3"
|
version "2.2.4"
|
||||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.3.tgz#8823855bb4e011d2fc7497de03e6435e07757d6f"
|
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.4.tgz#ee2c91788de447ed33185daa7a747ba684e5143f"
|
||||||
integrity sha512-HONPvhjtvOBEaBTeHTIs0WFD1u3j9tprNTFTKa9zoI7ZLtbHnGqHM+Vi3Oq5xl8OQxEkgJNsHGUDtV4FLhcsHg==
|
integrity sha512-SF0g4JROwYsvJc9fEFmAYAj9cITJ9L2MTkWCs9vfPhDS4iXE6ZW5VNtcxI5JOVAvsZMRHq5oX9EtjxHs1pIIdg==
|
||||||
|
|
||||||
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||||
version "0.1.3"
|
version "0.1.3"
|
||||||
|
|
Loading…
Reference in a new issue