Removed Semantic UI React

website/src/ui/Button.style.js

@@ -1,16 +1,18 @@
+import { colorInfo, fontInfo } from './style'
+
 export default {
   base: {
     borderRadius: '10px',
-    fontFamily: 'Arial',
-    color: '#ffffff',
+    fontFamily: fontInfo.family,
+    color: '#FFFFFF',
     fontSize: '20px',
-    background: '#3498db',
+    background: colorInfo.buttonBackgroundHover,
     padding: '10px 20px 10px 20px',
     textDecoration: 'none',
     outline: 'none',
 
     ':hover': {
-      background: '#3cb0fd',
+      background: colorInfo.buttonBackground,
       textDecoration: 'none'
     }
   }

website/src/ui/Checkbox.style.js

@@ -1,8 +1,10 @@
+import { colorInfo } from './style'
+
 export default {
   checkbox: {
     cursor: 'pointer',
     position: 'relative',
-    backgroundColor: '#2196F3',
+    backgroundColor: colorInfo.buttonBackground,
     top: 0,
     left: 0,
     height: 25,

website/src/ui/Dropdown.js

@@ -0,0 +1,19 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import style from './Input.style'
+
+class Dropdown extends Component {
+  static propTypes = {
+    password: PropTypes.bool,
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <input type={this.props.password ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
+    )
+  }
+}
+
+export default Radium(Dropdown)

website/src/ui/Dropdown.style.js

@@ -0,0 +1,2 @@
+export default {
+}

website/src/ui/Icon.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+// See https://www.flaticon.com/packs/web-button-compilation for more icons
+
+export default class Icon extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number,
+    margin: PropTypes.number
+  }
+
+  static defaultProps = {
+    size: 50,
+    margin: 5,
+    name: 'shapes'
+  }
+
+  static svgs = {
+    logout: require('icons/logout.svg'),
+    shapes: require('icons/shapes.svg')
+  }
+
+  render() {
+    return <img style={{ width: this.props.size, height: this.props.size, margin: this.props.margin }}
+      src={Icon.svgs[this.props.name]} />
+  }
+}

website/src/ui/Image.js

@@ -0,0 +1,20 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+class Image extends Component {
+  static propTypes = {
+    source: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    margin: PropTypes.number
+  }
+
+  render() {
+    return (
+      <img src={this.props.source} style={{ width: this.props.width, height: this.props.height, margin: this.props.margin }} />
+    )
+  }
+}
+
+export default Radium(Image)

website/src/ui/Input.js

@@ -5,13 +5,13 @@ import style from './Input.style'
 
 class Input extends Component {
   static propTypes = {
-    hidden: PropTypes.bool,
+    password: PropTypes.bool,
     children: PropTypes.node
   }
 
   render() {
     return (
-      <input type={this.props.hidden ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
+      <input type={this.props.password ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
     )
   }
 }

website/src/ui/Label.js

@@ -0,0 +1,33 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { fontInfo } from './style'
+
+class Label extends Component {
+  static propTypes = {
+    size: PropTypes.string,
+    color: PropTypes.string,
+    margin: PropTypes.number,
+    children: PropTypes.node
+  }
+
+  static defaultProps = {
+    size: 'medium',
+    color: 'normal',
+    margin: 0
+  }
+
+  render() {
+    return (
+      <label style={{
+        display: 'inline-block',
+        fontSize: fontInfo.size[this.props.size],
+        color: fontInfo.color[this.props.color],
+        fontFamily: fontInfo.family,
+        margin: this.props.margin
+      }}>{this.props.children}</label>
+    )
+  }
+}
+
+export default Radium(Label)

website/src/ui/Link.js

@@ -0,0 +1,30 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { fontInfo } from './style'
+
+class Link extends Component {
+  static propTypes = {
+    to: PropTypes.string,
+    size: PropTypes.string,
+    margin: PropTypes.number,
+    children: PropTypes.node
+  }
+
+  static defaultProps = {
+    size: 'medium',
+    margin: 0
+  }
+
+  render() {
+    return (
+      <a href={this.props.to} style={{
+        fontSize: fontInfo.size[this.props.size],
+        fontFamily: fontInfo.family,
+        margin: this.props.margin
+      }}>{this.props.children}</a>
+    )
+  }
+}
+
+export default Radium(Link)

website/src/ui/List.js

@@ -0,0 +1,30 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { fontInfo } from './style'
+
+class List extends Component {
+  static propTypes = {
+    size: PropTypes.string,
+    margin: PropTypes.number,
+    children: PropTypes.node
+  }
+
+  static defaultProps = {
+    size: 'medium',
+    margin: 0
+  }
+
+  render() {
+    return (
+      <span style={{
+        display: 'inline-block',
+        fontSize: fontInfo.size[this.props.size],
+        fontFamily: fontInfo.family,
+        margin: this.props.margin
+      }}>{this.props.children}</span>
+    )
+  }
+}
+
+export default Radium(List)

website/src/ui/Loader.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { keyframes, css } from 'emotion';
+import { onlyUpdateForKeys } from 'recompose';
+
+// This returns an animation
+const pulse = keyframes`
+  0% {transform: scale(1);opacity: 1}
+  45% {transform: scale(0.1);opacity: 0.7}
+  80% {transform: scale(1);opacity: 1}
+`;
+
+class Loader extends React.Component {
+  style = i => css`{
+        background-color: ${this.props.color};
+        width: ${this.props.size}px;
+        height: ${this.props.size}px;
+        margin: ${this.props.margin};
+        border-radius: 100%;
+        display: inline-block;
+        animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08);
+        animation-fill-mode: both;
+    }`;
+
+  render() {
+    return this.props.loading ?
+      <div>
+        <div className={this.style(1)} />
+        <div className={this.style(2)} />
+        <div className={this.style(3)} />
+      </div> : null;
+  }
+}
+
+Loader.propTypes = {
+  loading: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.number,
+  margin: PropTypes.string
+};
+
+Loader.defaultProps = {
+  loading: true,
+  color: '#000000',
+  size: 15,
+  margin: '2px'
+};
+
+const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader);
+Component.defaultProps = Loader.defaultProps;
+export default Component;

website/src/ui/Modal.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import style from './Modal.style'
+import { reactAutoBind } from 'auto-bind2'
+
+export class Modal extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
+  preventPropagation(e) {
+    e.stopPropagation()
+  }
+
+  render() {
+    return (
+      <div style={style.dimmer} onClick={this.preventPropagation}>
+        <div style={style.modal}>
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+}

website/src/ui/Modal.style.js

@@ -0,0 +1,28 @@
+export default {
+  dimmer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    width: '100vw',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    background: 'rgba(25, 25, 30, 0.75)'
+  },
+
+  modal: {
+    zIndex: 101,
+    background: '#FFFFFF',
+    margin: 0,
+    padding: '18px 24px',
+    width: '80%',
+    border: '1px solid $border-primary',
+    borderRadius: 4,
+    boxShadow: '0 0 25px #000000'
+  }
+}

website/src/ui/RowLayout.js

@@ -0,0 +1,31 @@
+import Radium from 'radium'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class RowLayout extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex', minWidth: this.props.width, flexDirection: 'row' }}>{this.props.children}</div>
+    )
+  }
+}
+
+RowLayout.Item = Radium(class RowLayoutItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
+  }
+
+  render() {
+    return (
+      <div style={[ this.props.width ? { minWidth: this.props.width } : { flexGrow: 1 } ]}>{this.props.children}</div>
+    )
+  }
+})
+
+export default Radium(RowLayout)

website/src/ui/StackLayout.js

@@ -0,0 +1,31 @@
+import Radium from 'radium'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class StackLayout extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex', minHeight: this.props.height, flexDirection: 'column' }}>{this.props.children}</div>
+    )
+  }
+}
+
+StackLayout.Item = Radium(class StackLayoutItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
+  }
+
+  render() {
+    return (
+      <div style={[ this.props.height ? { minHeight: this.props.height } : { flexGrow: 1 } ]}>{this.props.children}</div>
+    )
+  }
+})
+
+export default Radium(StackLayout)

website/src/ui/Text.js

@@ -0,0 +1,30 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { fontInfo } from './style'
+
+class Text extends Component {
+  static propTypes = {
+    size: PropTypes.string,
+    margin: PropTypes.number,
+    children: PropTypes.node
+  }
+
+  static defaultProps = {
+    size: 'medium',
+    margin: 0
+  }
+
+  render() {
+    return (
+      <span style={{
+        display: 'inline-block',
+        fontSize: fontInfo.size[this.props.size],
+        fontFamily: fontInfo.family,
+        margin: this.props.margin
+      }}>{this.props.children}</span>
+    )
+  }
+}
+
+export default Radium(Text)

website/src/ui/index.js

@@ -1,4 +1,16 @@
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as Input } from './Input'
+export { default as Image } from './Image'
+export { default as Text } from './Text'
+export { default as Link } from './Link'
+export { default as Label } from './Label'
+export { default as Icon } from './Icon'
+export { default as List } from './List'
+export { default as Dropdown } from './Dropdown'
+export { default as Modal } from './Modal'
+export { default as Dimmer } from './Dimmer'
+export { default as Loader } from './Loader'
 export { default as HolyGrail } from './HolyGrail'
+export { default as RowLayout } from './RowLayout'
+export { default as StackLayout } from './StackLayout'

website/src/ui/style.js

@@ -0,0 +1,19 @@
+export const colorInfo = {
+  text: '#000000',
+  alertText: '#FF0000',
+  buttonBackground: '#3498DB',
+  buttonBackgroundHover: '#3CB0FD'
+}
+
+export const fontInfo = {
+  family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind
+  size: {
+    small: '10pt',
+    medium: '12pt',
+    large: '14pt'
+  },
+  color: {
+    'normal': colorInfo.text,
+    'alert': colorInfo.alertText
+  }
+}