fix: button color in publish form

This commit is contained in:
Sean Yesmunt 2019-02-20 17:51:54 -05:00
parent 04115ac264
commit 87549a5a30
5 changed files with 45 additions and 30 deletions

View file

@ -34,7 +34,7 @@
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
},
"dependencies": {
"@lbry/components": "^2.2.3",
"@lbry/components": "^2.2.4",
"@types/three": "^0.93.1",
"bluebird": "^3.5.1",
"breakdance": "^3.0.1",

View file

@ -168,11 +168,9 @@ export class FormField extends React.PureComponent<Props> {
input = (
<React.Fragment>
<fieldset-section>
{(label || errorMessage) && (
<label htmlFor={name}>
{errorMessage ? <span className="error-text">{errorMessage}</span> : label}
</label>
)}
<label htmlFor={name}>
{errorMessage ? <span className="error-text">{errorMessage}</span> : label}
</label>
{prefix && (
<label className="form-field--inline-prefix" htmlFor={name}>
{prefix}

View file

@ -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;
transition: background-color 0.2s;
border-radius: 0;
html[data-mode='dark'] & {
border-color: rgba($lbry-white, 0.1);
background-color: rgba($lbry-black, 0.3);
}
&:not(:hover) {
border-color: rgba($lbry-white, 0.1);
background-color: rgba($lbry-black, 0.3);
}
&:not(:hover) {
background-color: $lbry-white;
}
&:hover {
background-color: $lbry-gray-1;
color: $lbry-black;
html[data-mode='dark'] & {
&:hover {
border-color: rgba($lbry-white, 0.1);
background-color: rgba($lbry-white, 0.1);
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 {
svg {
color: $lbry-gray-4;
}
}
}
.button--link:not(:disabled) {
html[data-mode='dark'] & {
&:not(:hover) {

View file

@ -142,14 +142,21 @@ fieldset-group {
// form buttons are black by default
form {
// [data-mode='dark'] & {
.button--primary:not(:hover) {
background-color: $lbry-teal-5;
border-color: $lbry-teal-5;
[type='button'] {
&.button--primary {
&:not(:hover) {
background-color: $lbry-teal-5;
border-color: $lbry-teal-5;
}
&:hover {
background-color: $lbry-teal-3;
border-color: $lbry-teal-3;
&:hover {
background-color: $lbry-teal-3;
border-color: $lbry-teal-3;
}
}
&.button--inverse {
@extend .button--inverse;
}
}
}

View file

@ -111,10 +111,10 @@
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
"@lbry/components@^2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.3.tgz#8823855bb4e011d2fc7497de03e6435e07757d6f"
integrity sha512-HONPvhjtvOBEaBTeHTIs0WFD1u3j9tprNTFTKa9zoI7ZLtbHnGqHM+Vi3Oq5xl8OQxEkgJNsHGUDtV4FLhcsHg==
"@lbry/components@^2.2.4":
version "2.2.4"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.4.tgz#ee2c91788de447ed33185daa7a747ba684e5143f"
integrity sha512-SF0g4JROwYsvJc9fEFmAYAj9cITJ9L2MTkWCs9vfPhDS4iXE6ZW5VNtcxI5JOVAvsZMRHq5oX9EtjxHs1pIIdg==
"@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3"