Switches in settings (#45)

packages/frontend/src/components/Chain/Chain.css

@@ -101,17 +101,3 @@
   font-size: 20px;
   font-weight: 100;
 }
-
-.Chain-settings-category p {
-  padding: 0;
-  margin: 0 0 0.1em 0;
-  cursor: pointer;
-}
-
-.Chain-settings-category .Icon {
-  margin-right: 10px;
-}
-
-.Chain-settings-disabled {
-  color: #666;
-}

packages/frontend/src/components/Chain/Chain.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { State as AppState } from '../../state';
 import { formatNumber, secondsWithPrecision, viewport } from '../../utils';
 import { Tab } from './';
-import { Tile, Icon, Node, Ago } from '../';
+import { Tile, Node, Ago, Option } from '../';
 import { Types } from '@dotstats/common';
 import { Persistent } from '../../Persistent';
 
@@ -177,7 +177,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
                   return null;
                 }
 
-                const className = settings[setting] ? '' : 'Chain-settings-disabled';
+                const checked = settings[setting];
 
                 const changeSetting = () => {
                   const change = {};
@@ -187,7 +187,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
                   this.props.setSettings(change);
                 }
 
-                return <p key={index} className={className} onClick={changeSetting}><Icon src={icon} alt={label} /> {label}</p>;
+                return <Option key={index} onClick={changeSetting} icon={icon} label={label} checked={checked} />;
               })
           }
         </div>

packages/frontend/src/components/Option.css

@@ -0,0 +1,47 @@
+.Option {
+  color: #666;
+  padding: 0;
+  margin: 0 0 8px 0;
+  cursor: pointer;
+}
+
+.Option-on {
+  color: #fff;
+}
+
+.Option .Icon {
+  margin-right: 10px;
+}
+
+.Option-switch {
+  width: 40px;
+  height: 18px;
+  border-radius: 18px;
+  display: block;
+  float: right;
+  position: relative;
+  background: #444;
+  transition: background-color 0.15s linear, border-color 0.15s linear;
+}
+
+.Option-on .Option-switch {
+  background: #d64ca8;
+  border-color: #d64ca8;
+}
+
+.Option-knob {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #222;
+  transition: left 0.15s ease-in-out;
+}
+
+.Option-on .Option-knob {
+  left: 22px;
+}

packages/frontend/src/components/Option.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Icon } from './';
+
+import './Option.css';
+
+export namespace Option {
+  export interface Props {
+    icon: string;
+    label: string;
+    checked: boolean;
+    onClick: () => void;
+  }
+}
+
+export function Option(props: Option.Props): React.ReactElement<any> {
+  const className = props.checked ? "Option Option-on" : "Option";
+
+  return (
+    <p className={className} onClick={props.onClick}>
+      <Icon src={props.icon} alt={props.label} />
+      {props.label}
+      <span className="Option-switch">
+        <span className="Option-knob" />
+      </span>
+    </p>
+  );
+}

packages/frontend/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './Icon';
 export * from './Tile';
 export * from './Ago';
 export * from './OfflineIndicator';
+export * from './Option';
 
 import * as Node from './Node';