fix lbry/component style overrides in forms

src/ui/page/settings/view.jsx

@@ -173,7 +173,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <div className="card__content">
-                <Form>
                 <FileSelector
                   type="openDirectory"
                   currentPath={daemonSettings.download_dir}
@@ -182,7 +181,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   }}
                 />
                 <p className="help">{__('LBRY downloads will be saved here.')}</p>
-                </Form>
               </div>
             </section>
 

src/ui/scss/component/_button.scss

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

src/ui/scss/component/_form-field.scss

@@ -1,5 +1,16 @@
 @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 {
   &::placeholder {
     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-bottom-left-radius: 0;
       border-top-right-radius: var(--input-border-radius);