Use shared components repo for button/form/table styling

package.json

@@ -89,8 +89,7 @@
     "y18n": "^4.0.0"
   },
   "devDependencies": {
-    "@lbry/color": "^1.0.2",
-    "@lbry/components": "^1.5.1",
+    "@lbry/components": "^2.2.0",
     "babel-eslint": "^8.2.2",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-polyfill": "^6.26.0",

src/renderer/component/app/view.jsx

@@ -41,7 +41,7 @@ class App extends React.PureComponent<Props> {
     });
 
     // $FlowFixMe
-    document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.setAttribute('data-mode', theme);
   }
 
   componentDidMount() {
@@ -78,7 +78,7 @@ class App extends React.PureComponent<Props> {
 
     if (prevTheme !== theme) {
       // $FlowFixMe
-      document.documentElement.setAttribute('data-theme', theme);
+      document.documentElement.setAttribute('data-mode', theme);
     }
   }
 

src/renderer/component/button/view.jsx

@@ -21,7 +21,6 @@ type Props = {
   type: string,
   button: ?string, // primary, secondary, alt, link
   noPadding: ?boolean, // to remove padding and allow circular buttons
-  uppercase: ?boolean,
   iconColor?: string,
   iconSize?: number,
   constrict: ?boolean, // to shorten the button and ellipsis, only use for links
@@ -51,7 +50,6 @@ class Button extends React.PureComponent<Props> {
       button,
       type,
       noPadding,
-      uppercase,
       iconColor,
       iconSize,
       constrict,
@@ -60,25 +58,23 @@ class Button extends React.PureComponent<Props> {
     } = this.props;
 
     const combinedClassName = classnames(
-      'btn',
+      'button',
       {
-        'btn--no-padding': noPadding,
+        'button--no-padding': noPadding,
       },
       button
         ? {
-            'btn--primary': button === 'primary',
-            'btn--secondary': button === 'secondary',
-            'btn--alt': button === 'alt',
-            'btn--danger': button === 'danger',
-            'btn--inverse': button === 'inverse',
-            'btn--disabled': disabled,
-            'btn--link': button === 'link',
-            'btn--external-link': button === 'link' && href,
-            'btn--uppercase': uppercase,
-            'btn--constrict': constrict,
-            'btn--selected': selected,
+            'button--primary': button === 'primary',
+            'button--secondary': button === 'secondary',
+            'button--alt': button === 'alt',
+            'button--danger': button === 'danger',
+            'button--inverse': button === 'inverse',
+            'button--disabled': disabled,
+            'button--link': button === 'link',
+            'button--constrict': constrict,
+            'button--selected': selected,
           }
-        : 'btn--no-style',
+        : 'button--no-style',
       className
     );
 
@@ -91,9 +87,9 @@ class Button extends React.PureComponent<Props> {
         : onClick;
 
     const content = (
-      <span className="btn__content">
+      <span className="button__content">
         {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
-        {label && <span className="btn__label">{label}</span>}
+        {label && <span className="button__label">{label}</span>}
         {children && children}
         {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={iconSize} />}
       </span>

src/renderer/component/categoryList/view.jsx

@@ -309,7 +309,7 @@ class CategoryList extends PureComponent<Props, State> {
           )}
         </header>
         {obscureNsfw && isCommunityTopBids ? (
-          <p className="media__message media__message--help">
+          <p className="media__message help--warning">
             {__(
               'The community top bids section is only visible if you allow mature content in the app. You can change your content viewing preferences'
             )}{' '}

src/renderer/component/common/file-selector.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { remote } from 'electron';
 import Button from 'component/button';
-import { FormRow } from 'component/common/form';
+import { FormField } from 'component/common/form';
 import path from 'path';
 
 type FileFilters = {
@@ -63,22 +63,22 @@ class FileSelector extends React.PureComponent<Props> {
       type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
 
     return (
-      <FormRow>
-        <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
-        <input
-          webkitdirectory="true"
-          className="input-copyable"
-          type="text"
-          ref={input => {
-            if (this.input) this.input = input;
-          }}
-          onFocus={() => {
-            if (this.input) this.input.select();
-          }}
-          readOnly="readonly"
-          value={currentPath || __('No File Chosen')}
-        />
-      </FormRow>
+      <FormField
+        webkitdirectory="true"
+        className="form-field--copyable"
+        type="text"
+        ref={input => {
+          if (this.input) this.input = input;
+        }}
+        onFocus={() => {
+          if (this.input) this.input.select();
+        }}
+        readOnly="readonly"
+        value={currentPath || __('No File Chosen')}
+        inputButton={
+          <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
+        }
+      />
     );
   }
 }

src/renderer/component/common/form-components/form-field-price.jsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import type { Price } from 'page/settings';
 import { FormField } from './form-field';
-import { FormRow } from './form-row';
 
 type Props = {
   price: Price,
@@ -11,7 +10,6 @@ type Props = {
   min: number,
   disabled: boolean,
   name: string,
-  label: string,
   step: ?number,
 };
 
@@ -41,35 +39,40 @@ export class FormFieldPrice extends React.PureComponent<Props> {
   }
 
   render() {
-    const { price, placeholder, min, disabled, name, label, step } = this.props;
+    const { price, placeholder, min, disabled, name, step } = this.props;
 
     return (
-      <FormRow padded>
-        <FormField
-          name={`${name}_amount`}
-          label={label}
-          type="number"
-          className="form-field input--price-amount"
-          min={min}
-          value={price.amount}
-          onChange={this.handleAmountChange}
-          placeholder={placeholder || 5}
-          disabled={disabled}
-          step={step || 'any'}
-        />
-
-        <FormField
-          name={`${name}_currency`}
-          type="select"
-          id={`${name}_currency`}
-          disabled={disabled}
-          onChange={this.handleCurrencyChange}
-          value={price.currency}
-        >
-          <option value="LBC">{__('LBRY Credits (LBC)')}</option>
-          <option value="USD">{__('US Dollars')}</option>
-        </FormField>
-      </FormRow>
+      <fieldset-group class="fieldset-group--smushed">
+        <fieldset-section>
+          <FormField
+            name={`${name}_amount`}
+            label={__('Price')}
+            type="number"
+            className="form-field--price-amount"
+            min={min}
+            value={price.amount}
+            onChange={this.handleAmountChange}
+            placeholder={placeholder || 5}
+            disabled={disabled}
+            step={step || 'any'}
+          />
+        </fieldset-section>
+        <fieldset-section>
+          <FormField
+            label={__('Currency')}
+            name={`${name}_currency`}
+            type="select"
+            id={`${name}_currency`}
+            className="input--currency-select"
+            disabled={disabled}
+            onChange={this.handleCurrencyChange}
+            value={price.currency}
+          >
+            <option value="LBC">{__('LBRY Credits (LBC)')}</option>
+            <option value="USD">{__('US Dollars')}</option>
+          </FormField>
+        </fieldset-section>
+      </fieldset-group>
     );
   }
 }