Improve styling (#247)

* Toggle using proper font for its label

* Improve Select's styling and behaviour with blank option/placeholder

src/components/Select/index.js

@@ -1,29 +1,49 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-
+import styled from 'styled-components';
 import Icon from '../Icon';
 import FormElementWrapper from '../FormComponents/FormElementWrapper';
 import FormElement from '../FormComponents/FormElement';
+import { theme } from '../../theme';
+
+const FormSelectElement = styled(FormElement)`
+  color: ${props => (props.isEmpty ? theme.color_v3.type.light : 'inherit')};
+`;
 
 const Select = React.forwardRef(
   ({ id, options, placeholder, ...props }, ref) => {
+    const [isEmpty, setIsEmpty] = useState(!props.defaultValue);
+
+    const onChange = useCallback(
+      e => {
+        setIsEmpty(!e.target.value);
+        if (typeof props.onChange === 'function') props.onChange(e);
+      },
+      [props],
+    );
+
     return (
       <FormElementWrapper invalid={props.invalid} valid={props.valid}>
-        <FormElement
+        <FormSelectElement
           as='select'
           id={id}
           name={id}
           ref={ref}
           withIcon
           {...props}
+          onChange={onChange}
+          defaultValue={props.defaultValue || ''}
+          isEmpty={isEmpty}
         >
-          {placeholder && <option value=''>{placeholder}</option>}
+          <option disabled value='' hidden={!placeholder}>
+            {placeholder || ''}
+          </option>
           {options.map(({ label, value, disabled = false }) => (
             <option key={value} value={value} disabled={disabled}>
               {label}
             </option>
           ))}
-        </FormElement>
+        </FormSelectElement>
         {props.valid ? (
           <Icon icon={Icon.ICONS.IconCheck} size={Icon.SIZES.L} />
         ) : props.invalid ? (
@@ -55,6 +75,7 @@ Select.propTypes = {
   ),
   placeholder: PropTypes.string,
   valid: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 Select.defaultProps = {

src/components/Toggle/index.js

@@ -74,6 +74,7 @@ const Toggle = React.forwardRef(
         {(children || helper) && (
           <ToggleLabels
             className='f-Toggle-labels'
+            as='label'
             {...labelProps}
             disabled={disabled}
           >

src/components/Toggle/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components/macro';
 import FormElementWrapper from '../FormComponents/FormElementWrapper';
 import { theme } from '../../theme';
+import UiText from '../UiText';
 
 const styles = {
   toggle: {
@@ -93,7 +94,10 @@ export const ToggleBulletLabelOn = styled(ToggleBulletLabel)`
   visibility: ${({ isOn }) => (isOn ? 'visible' : 'hidden')};
 `;
 
-export const ToggleLabels = styled('span')`
+export const ToggleLabels = styled(UiText).attrs({
+  variant: UiText.VARIANTS.content,
+})`
+  margin: 0;
   margin-left: ${theme.space.l};
   cursor: ${({ disabled }) => disabled && 'not-allowed'};
 `;

src/styles.css

@@ -215,3 +215,7 @@ a:hover {
 img {
   max-width: 100%;
 }
+
+::placeholder {
+  color: var(--f-color-type-light);
+}