Style cleanup (#522)

renderer/components/action-bar/index.js

@@ -57,7 +57,7 @@ class ActionBar extends React.Component {
               width: ${width}px;
               background: white;
               border-radius: 4px;
-              box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
+              box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
               z-index: 10;
               top: ${y}px;
               left: ${x}px;

renderer/components/editor/index.js

@@ -87,6 +87,7 @@ export default class Editor extends React.Component {
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 1.4rem;
             color: #fff;
           }
 

renderer/components/preferences/categories/settings.js

@@ -59,6 +59,7 @@ class Settings extends React.Component {
     return (
       <Category>
         <Item
+          parentItem
           title="Show cursor"
           subtitle="Display the mouse cursor in your Kaptures"
         >
@@ -81,6 +82,7 @@ class Settings extends React.Component {
           />
         </Item>
         <Item
+          parentItem
           title="Keyboard shortcuts"
           subtitle="Toggle and customise keyboard shortcuts"
         >
@@ -110,6 +112,7 @@ class Settings extends React.Component {
           <Switch checked={loopExports} onClick={() => toggleSetting('loopExports')}/>
         </Item>
         <Item
+          parentItem
           title="Audio recording"
           subtitle="Record audio from input device"
         >

renderer/components/preferences/item/index.js

@@ -46,16 +46,18 @@ class Item extends React.Component {
       onSubtitleClick,
       warning,
       onClick,
-      last
+      last,
+      parentItem
     } = this.props;
 
     const subtitleArray = Array.isArray(subtitle) ? subtitle : [subtitle];
 
     const className = classNames('title', {experimental});
+    const containerClassName = classNames('container', {parent: parentItem});
     const subtitleClassName = classNames('subtitle', {link: Boolean(onSubtitleClick)});
 
     return (
-      <div className="container" onClick={onClick}>
+      <div className={containerClassName} onClick={onClick}>
         <div className="item" id={id}>
           {warning}
           <div className="content">
@@ -81,6 +83,13 @@ class Item extends React.Component {
             flex-direction: column;
           }
 
+          .parent {
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: 16px;
+            margin-right: 16px;
+          }
+
           .item {
             display: flex;
             flex-direction: ${vertical ? 'column' : 'row'};
@@ -101,6 +110,7 @@ class Item extends React.Component {
 
           .subtitle {
             color: ${onClick ? '#007aff' : '#606060'};
+            font-weight: ${onClick ? '500' : 'normal'};
             font-size: 1.2rem;
           }
 
@@ -171,7 +181,8 @@ Item.propTypes = {
     PropTypes.node
   ]),
   onClick: PropTypes.func,
-  last: PropTypes.bool
+  last: PropTypes.bool,
+  parentItem: PropTypes.bool
 };
 
 export default Item;

renderer/pages/editor.js

@@ -45,6 +45,10 @@ export default class EditorPage extends React.Component {
           </Provider>
         </div>
         <style jsx global>{`
+          html {
+            font-size: 62.5%;
+          }
+
           body,
           .cover-window {
             margin: 0;

renderer/pages/preferences.js

@@ -72,7 +72,7 @@ export default class PreferencesPage extends React.Component {
             }
 
             .overlay.active {
-              background-color: rgba(0,0,0,0.5);
+              background-color: rgba(0,0,0,0.2);
             }