fix lbry/component style overrides in forms

This commit is contained in:
Sean Yesmunt 2019-07-09 01:53:24 -04:00
parent 3b01f66e80
commit 7102f06b82
4 changed files with 25 additions and 14 deletions

View file

@ -173,16 +173,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
</header> </header>
<div className="card__content"> <div className="card__content">
<Form> <FileSelector
<FileSelector type="openDirectory"
type="openDirectory" currentPath={daemonSettings.download_dir}
currentPath={daemonSettings.download_dir} onFileChosen={(newDirectory: string) => {
onFileChosen={(newDirectory: string) => { setDaemonSetting('download_dir', newDirectory);
setDaemonSetting('download_dir', newDirectory); }}
}} />
/> <p className="help">{__('LBRY downloads will be saved here.')}</p>
<p className="help">{__('LBRY downloads will be saved here.')}</p>
</Form>
</div> </div>
</section> </section>

View file

@ -44,8 +44,7 @@
line-height: var(--button-height); line-height: var(--button-height);
border-radius: var(--button-radius); border-radius: var(--button-radius);
font-size: 1.1rem; font-size: 1.1rem;
padding-top: 0; padding: 0 var(--spacing-medium);
padding-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
} }

View file

@ -1,5 +1,16 @@
@import '~@lbry/components/sass/form/_index.scss'; @import '~@lbry/components/sass/form/_index.scss';
// Reset lbry components style that turns buttons inside of forms black
form {
.button--primary,
[type='submit'] {
&:not(:hover),
&:hover {
@extend .button--primary;
}
}
}
textarea { textarea {
&::placeholder { &::placeholder {
opacity: 0.4; opacity: 0.4;
@ -223,7 +234,10 @@ fieldset-section {
} }
} }
.button { .button,
// specificity needed because of @lbry/component rules
// @lbry/componentfixme
.button[type='submit']:not(:hover) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-right-radius: var(--input-border-radius); border-top-right-radius: var(--input-border-radius);