Add actual start time to team

2018-04-27 15:51:38 -07:00
parent d2a22fd3a5
commit 1b5ccf251f
14 changed files with 3583 additions and 3374 deletions
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@@ -6,6 +6,7 @@
    "animejs": "^2.2.0",
    "autobind-decorator": "^2.1.0",
    "eventemitter3": "^2.0.3",
+    "moment": "^2.22.1",
    "npm": "^5.7.1",
    "prop-types": "^15.5.10",
    "radium": "^0.22.0",
--- a/website/src/Teams/TeamForm.js
+++ b/website/src/Teams/TeamForm.js
@@ -1,10 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import autobind from 'autobind-decorator'
-import { Row, Column, BoundInput, BoundButton, List } from 'ui'
-import { FormBinder } from 'react-form-binder'
-import { sizeInfo } from 'ui/style'
-import { api } from 'src/API'
+import React from "react"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
+import { Row, Column, BoundInput, BoundButton, List, FormIconButton } from "ui"
+import { FormBinder } from "react-form-binder"
+import { sizeInfo } from "ui/style"
+import moment from "moment"
+import { api } from "src/API"

 export class TeamForm extends React.Component {
  static propTypes = {
@@ -16,21 +17,24 @@ export class TeamForm extends React.Component {

  static bindings = {
    name: {
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
+    },
+    start: {
+      isValid: (r, v) => v === "" || moment(v).isValid(),
    },
    remove: {
      noValue: true,
-      isVisible: (r) => (r._id),
+      isVisible: (r) => r._id,
    },
    reset: {
      noValue: true,
      isDisabled: (r) => {
        return !r.anyModified
-      }
+      },
    },
    submit: {
      noValue: true,
-      isDisabled: (r) => (!r.anyModified || !r.allValid),
+      isDisabled: (r) => !r.anyModified || !r.allValid,
    },
  }

@@ -38,8 +42,12 @@ export class TeamForm extends React.Component {
    super(props)

    this.state = {
-      binder: new FormBinder(props.team, TeamForm.bindings, this.props.onModifiedChanged),
-      users: []
+      binder: new FormBinder(
+        props.team,
+        TeamForm.bindings,
+        this.props.onModifiedChanged
+      ),
+      users: [],
    }

    this.getUsersForTeam(props.team._id)
@@ -48,19 +56,26 @@ export class TeamForm extends React.Component {
  @autobind
  getUsersForTeam(teamId) {
    if (teamId) {
-      api.listUsersForTeam(teamId).then((list) => {
-        list.items.sort((a, b) => (a.lastName.localeCompare(b.lastName)))
-        this.setState({ users: list.items })
-      }).catch(() => {
-        this.setState({ users: [] })
-      })
+      api
+        .listUsersForTeam(teamId)
+        .then((list) => {
+          list.items.sort((a, b) => a.lastName.localeCompare(b.lastName))
+          this.setState({ users: list.items })
+        })
+        .catch(() => {
+          this.setState({ users: [] })
+        })
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.team !== this.props.team) {
      this.setState({
-        binder: new FormBinder(nextProps.team, TeamForm.bindings, nextProps.onModifiedChanged)
+        binder: new FormBinder(
+          nextProps.team,
+          TeamForm.bindings,
+          nextProps.onModifiedChanged
+        ),
      })

      this.getUsersForTeam(nextProps.team._id)
@@ -82,18 +97,30 @@ export class TeamForm extends React.Component {
  handleReset() {
    const { team, onModifiedChanged } = this.props

-    this.setState({ binder: new FormBinder(team, TeamForm.bindings, onModifiedChanged) })
+    this.setState({
+      binder: new FormBinder(team, TeamForm.bindings, onModifiedChanged),
+    })

    if (onModifiedChanged) {
      onModifiedChanged(false)
    }
  }

+  @autobind
+  handleStartNow() {
+    if (this.startTimeInput) {
+      this.startTimeInput.handleChange(moment().format())
+    }
+  }
+
  render() {
    const { binder, users } = this.state

    return (
-      <form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='teamForm' onSubmit={this.handleSubmit}>
+      <form
+        style={{ width: "100%", height: "100%", overflow: "scroll" }}
+        id="teamForm"
+        onSubmit={this.handleSubmit}>
        <Column>
          <Column.Item height={sizeInfo.formColumnSpacing} />
          <Column.Item>
@@ -102,29 +129,79 @@ export class TeamForm extends React.Component {
              <Row.Item grow>
                <Column>
                  <Column.Item>
-                    <BoundInput label='Name' name='name' message='Must not be empty' binder={binder} />
+                    <BoundInput
+                      label="Name"
+                      name="name"
+                      message="Must not be empty"
+                      binder={binder}
+                    />
                  </Column.Item>
                  <Column.Item height={300}>
-                    <List items={users} render={(item) => (
-                      <List.Item key={item._id}>
-                        <List.Icon name='profile' size={sizeInfo.dropdownIconSize} />
-                        <List.Text>{item.firstName + ' ' + item.lastName}</List.Text>
-                      </List.Item>
-                    )} />
+                    <List
+                      items={users}
+                      render={(item) => (
+                        <List.Item key={item._id}>
+                          <List.Icon
+                            name="profile"
+                            size={sizeInfo.dropdownIconSize}
+                          />
+                          <List.Text>
+                            {item.firstName + " " + item.lastName}
+                          </List.Text>
+                        </List.Item>
+                      )}
+                    />
+                  </Column.Item>
+                  <Column.Item height={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow={1}>
+                        <BoundInput
+                          ref={(ref) => (this.startTimeInput = ref)}
+                          label="Start Time"
+                          name="start"
+                          binder={binder}
+                          message="Must enter a valid date and time"
+                        />
+                      </Row.Item>
+                      <Row.Item width={sizeInfo.formRowSpacing} />
+                      <Row.Item>
+                        <FormIconButton
+                          icon="clock"
+                          onClick={this.handleStartNow}
+                        />
+                      </Row.Item>
+                      <Row.Item grow={2} />
+                    </Row>
                  </Column.Item>
                  <Column.Item height={sizeInfo.formColumnSpacing} />
                  <Column.Item minHeight={sizeInfo.buttonHeight}>
                    <Row>
                      <Row.Item>
-                        <BoundButton text='Reset' name='reset' binder={binder} onClick={this.handleReset} />
+                        <BoundButton
+                          text="Reset"
+                          name="reset"
+                          binder={binder}
+                          onClick={this.handleReset}
+                        />
                      </Row.Item>
                      <Row.Item grow />
                      <Row.Item>
-                        <BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
+                        <BoundButton
+                          text="Remove"
+                          name="remove"
+                          binder={binder}
+                          onClick={this.props.onRemove}
+                        />
                      </Row.Item>
                      <Row.Item width={sizeInfo.formRowSpacing} />
                      <Row.Item>
-                        <BoundButton submit='teamForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
+                        <BoundButton
+                          submit="teamForm"
+                          text={binder._id ? "Save" : "Add"}
+                          name="submit"
+                          binder={binder}
+                        />
                      </Row.Item>
                    </Row>
                  </Column.Item>
--- a/website/src/assets/icons/clock.svg
+++ b/website/src/assets/icons/clock.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="74px" height="74px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>clock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Images-&amp;-Icons" transform="translate(-824.000000, -467.000000)" fill="#E2DEDE" fill-rule="nonzero">
+            <g id="clock" transform="translate(824.000000, 467.000000)">
+                <path d="M54.8,35.6 L39.4,35.6 L39.4,20.2 C39.4,18.9850133 38.4149867,18 37.2,18 C35.9850133,18 35,18.9850133 35,20.2 L35,37.8 C35,39.0149867 35.9850133,40 37.2,40 L54.8,40 C56.0149867,40 57,39.0149867 57,37.8 C57,36.5850133 56.0149867,35.6 54.8,35.6 Z" id="Shape"></path>
+                <path d="M37.1445312,0 C16.925332,0 0,16.3356445 0,36.8554688 C0,57.1829219 16.7531953,74 37.1445312,74 C57.6867578,74 74,57.0526992 74,36.8554688 C74,16.4853789 57.5163555,0 37.1445312,0 Z M37.1445313,69.6929688 C19.0538438,69.6929688 4.30703125,54.9461563 4.30703125,36.8554688 C4.30703125,18.9241992 19.0538438,4.30703125 37.1445313,4.30703125 C55.0758008,4.30703125 69.6929688,18.9241992 69.6929688,36.8554688 C69.6929688,54.9461563 55.0758008,69.6929688 37.1445313,69.6929688 Z" id="Shape"></path>
+                <path d="M37.6454082,9 C22.0310434,9 9,21.6614158 9,37.3545918 C9,52.9849515 21.9627015,66 37.6454082,66 C53.3532704,66 66,52.9579056 66,37.3545918 C66,21.7198699 53.2801301,9 37.6454082,9 Z M37.6454082,61.6668367 C24.482625,61.6668367 13.3331633,50.517375 13.3331633,37.3545918 C13.3331633,24.1252117 24.2556429,13.3331633 37.6454082,13.3331633 C50.8747883,13.3331633 61.6668367,24.1252117 61.6668367,37.3545918 C61.6668367,50.7443571 50.8747883,61.6668367 37.6454082,61.6668367 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/src/ui/BoundEmailIcon.js
+++ b/website/src/ui/BoundEmailIcon.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Text, Icon } from 'ui'
-import { sizeInfo } from 'ui/style'
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, Icon } from "ui"
+import { sizeInfo } from "ui/style"

 export class BoundEmailIcon extends React.Component {
  static propTypes = {
@@ -27,7 +27,11 @@ export class BoundEmailIcon extends React.Component {
      <div>
        <Text>&nbsp;</Text>
        <br />
-        <Icon name={value ? 'confirmed' : 'warning'} size={sizeInfo.formBoundIcon} margin={sizeInfo.formBoundIconMargin} />
+        <Icon
+          name={value ? "confirmed" : "warning"}
+          size={sizeInfo.formBoundIcon}
+          margin={sizeInfo.formBoundIconMargin}
+        />
      </div>
    )
  }
--- a/website/src/ui/BoundInput.js
+++ b/website/src/ui/BoundInput.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Input, Text } from 'ui'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { Input, Text } from "ui"
+import autobind from "autobind-decorator"

 export class BoundInput extends React.Component {
  static propTypes = {
@@ -10,7 +10,7 @@ export class BoundInput extends React.Component {
    label: PropTypes.string,
    binder: PropTypes.object.isRequired,
    password: PropTypes.bool,
-    placeholder: PropTypes.string
+    placeholder: PropTypes.string,
  }

  constructor(props) {
@@ -19,12 +19,12 @@ export class BoundInput extends React.Component {
  }

  @autobind
-  handleChange(e) {
+  handleChange(newValue) {
    const { binder, name } = this.props
    const state = binder.getFieldState(name)

    if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, e.target.value))
+      this.setState(binder.updateFieldValue(name, newValue))
    }
  }

@@ -43,17 +43,21 @@ export class BoundInput extends React.Component {
    }

    return (
-      <div style={{ width: '100%' }}>
+      <div style={{ width: "100%" }}>
        <Text>{label}</Text>
        <br />
-        <Input value={value}
+        <Input
+          value={value}
          visible
          disabled={disabled}
          password={password}
          name={name}
-          onChange={this.handleChange}
-          placeholder={placeholder} />
-        <Text size='small' color='alert' hidden={valid}>{message}</Text>
+          onChange={(e) => this.handleChange(e.target.value)}
+          placeholder={placeholder}
+        />
+        <Text size="small" color="alert" hidden={valid}>
+          {message}
+        </Text>
      </div>
    )
  }
--- a/website/src/ui/FormIconButton.js
+++ b/website/src/ui/FormIconButton.js
@@ -0,0 +1,62 @@
+import Radium from "radium"
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+import { colorInfo, sizeInfo } from "./style"
+import { Text, Icon } from "."
+
+@Radium
+export class FormIconButton extends Component {
+  static propTypes = {
+    visible: PropTypes.bool,
+    // disabled: PropTypes.bool,
+    icon: PropTypes.string,
+    onClick: PropTypes.func,
+  }
+
+  static defaultProps = {
+    visible: true,
+    disabled: false,
+    width: sizeInfo.buttonWidth,
+  }
+
+  static style = {
+    icon: {
+      borderWidth: 0,
+      borderRadius: sizeInfo.formButtonIconBorderRadius,
+      background: colorInfo.buttonBackgroundHover,
+      outline: "none",
+      padding: sizeInfo.formButtonIconPadding,
+      ":hover": {
+        background: colorInfo.buttonBackground,
+      },
+      ":disabled": {
+        background: colorInfo.buttonDisabledBackground,
+      },
+      ":active": {
+        background: colorInfo.buttonBackgroundActive,
+      },
+    },
+  }
+
+  render() {
+    const { icon, visible } = this.props
+
+    if (!visible) {
+      return null
+    }
+
+    return (
+      <div>
+        <Text>&nbsp;</Text>
+        <br />
+        <Icon
+          name={icon}
+          size={sizeInfo.formButtonIcon}
+          margin={sizeInfo.formButtonIconMargin}
+          style={FormIconButton.style.icon}
+          onClick={this.props.onClick}
+        />
+      </div>
+    )
+  }
+}
--- a/website/src/ui/Icon.js
+++ b/website/src/ui/Icon.js
@@ -1,7 +1,7 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { sizeInfo } from './style'
+import Radium from "radium"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { sizeInfo } from "./style"

 // See https://www.flaticon.com/packs/free-basic-ui-elements

@@ -12,6 +12,7 @@ export class Icon extends Component {
    size: PropTypes.number,
    margin: PropTypes.number,
    style: PropTypes.object,
+    onClick: PropTypes.func,
  }

  static defaultProps = {
@@ -20,28 +21,35 @@ export class Icon extends Component {
  }

  static svgs = {
-    logout: require('icons/logout.svg'),
-    thumb: require('icons/thumb.svg'),
-    profile: require('icons/profile.svg'),
-    admin: require('icons/admin.svg'),
-    hand: require('icons/hand.svg'),
-    users: require('icons/users.svg'),
-    team: require('icons/team.svg'),
-    teams: require('icons/teams.svg'),
-    system: require('icons/system.svg'),
-    confirmed: require('icons/confirmed.svg'),
-    help: require('icons/help.svg'),
-    warning: require('icons/warning.svg'),
-    edit: require('icons/edit.svg'),
-    placeholder: require('icons/placeholder.svg'),
+    logout: require("icons/logout.svg"),
+    thumb: require("icons/thumb.svg"),
+    profile: require("icons/profile.svg"),
+    admin: require("icons/admin.svg"),
+    hand: require("icons/hand.svg"),
+    users: require("icons/users.svg"),
+    team: require("icons/team.svg"),
+    teams: require("icons/teams.svg"),
+    system: require("icons/system.svg"),
+    confirmed: require("icons/confirmed.svg"),
+    help: require("icons/help.svg"),
+    warning: require("icons/warning.svg"),
+    edit: require("icons/edit.svg"),
+    placeholder: require("icons/placeholder.svg"),
+    clock: require("icons/clock.svg"),
  }

  render() {
    let { size, name, margin, style } = this.props
-    let source = Icon.svgs[name] || Icon.svgs['placeholder']
+    let source = Icon.svgs[name] || Icon.svgs["placeholder"]

    size -= margin * 2

-    return <img style={[{ width: size, height: size, margin }, style]} src={source} />
+    return (
+      <img
+        style={[{ width: size, height: size, margin }, style]}
+        src={source}
+        onClick={this.props.onClick}
+      />
+    )
  }
 }
--- a/website/src/ui/Input.js
+++ b/website/src/ui/Input.js
@@ -1,7 +1,7 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
+import Radium from "radium"
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+import { colorInfo, sizeInfo, fontInfo } from "ui/style"

 // See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element

@@ -10,12 +10,12 @@ export class Input extends Component {
  static propTypes = {
    password: PropTypes.bool,
    placeholder: PropTypes.string,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    onChange: PropTypes.func,
    visible: PropTypes.bool,
    disabled: PropTypes.bool,
    name: PropTypes.string,
    value: PropTypes.string,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  }

  static style = {
@@ -24,10 +24,10 @@ export class Input extends Component {
      borderWidth: 1,
      borderColor: colorInfo.border,
      backgroundColor: colorInfo.inputBackground,
-      borderStyle: 'solid',
+      borderStyle: "solid",
      borderRadius: sizeInfo.inputBorderRadius,
-      ':focus': {
-        outline: 'none'
+      ":focus": {
+        outline: "none",
      },
    },

@@ -37,24 +37,40 @@ export class Input extends Component {
      borderWidth: 0,
      padding: 0,
      margin: 0,
-      width: '100%',
-      outline: 'none',
-      ':disabled': {
+      width: "100%",
+      outline: "none",
+      ":disabled": {
        color: colorInfo.textDisabled,
        background: colorInfo.inputBackground,
-      }
+      },
    },
  }

  render() {
-    let { name, width, password, placeholder, onChange, visible, disabled, value } = this.props
+    let {
+      name,
+      width,
+      password,
+      placeholder,
+      onChange,
+      visible,
+      disabled,
+      value,
+    } = this.props

-    width = width || '100%'
+    width = width || "100%"

    return (
      <div style={Input.style.div}>
-        <input name={name} value={value} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
-          style={[ { width }, Input.style.input ]} placeholder={placeholder} onChange={onChange} />
+        <input
+          name={name}
+          value={value}
+          type={!visible ? "hidden" : password ? "password" : "text"}
+          disabled={disabled}
+          style={[{ width }, Input.style.input]}
+          placeholder={placeholder}
+          onChange={onChange}
+        />
      </div>
    )
  }
--- a/website/src/ui/Row.js
+++ b/website/src/ui/Row.js
@@ -1,13 +1,13 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import Radium from "radium"
+import React, { Component } from "react"
+import PropTypes from "prop-types"

@Radium
 export class Row extends Component {
  static propTypes = {
    children: PropTypes.node,
-    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    fillParent: PropTypes.bool,
  }

@@ -15,30 +15,41 @@ export class Row extends Component {
    const { children, width, minWidth, fillParent } = this.props

    return (
-      <div style={[
-        { display: 'flex', minWidth, width, flexDirection: 'row' },
-        fillParent && { position: 'absolute', width: '100%', height: '100%' },
-      ]}>{children}</div>
-    )
-  }
-}
-
-Row.Item = Radium(class RowLayoutItem extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-    grow: PropTypes.bool,
-  }
-
-  render() {
-    const { children, grow, width, minWidth } = this.props
-    const flexGrow = grow ? 1 : null
-
-    return (
-      <div style={{ position: 'relative', width, minWidth, flexGrow }}>
+      <div
+        style={[
+          { display: "flex", minWidth, width, flexDirection: "row" },
+          fillParent && { position: "absolute", width: "100%", height: "100%" },
+        ]}>
        {children}
      </div>
    )
  }
-})
+}
+
+Row.Item = Radium(
+  class RowLayoutItem extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      grow: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    }
+
+    render() {
+      const { children, grow, width, minWidth } = this.props
+      const flexGrow = !grow ? null : typeof grow === "number" ? grow : 1
+
+      return (
+        <div
+          style={{
+            position: "relative",
+            width,
+            minWidth,
+            flexGrow,
+          }}>
+          {children}
+        </div>
+      )
+    }
+  }
+)
--- a/website/src/ui/index.js
+++ b/website/src/ui/index.js
@@ -1,24 +1,25 @@
-export { Anime } from './Anime'
-export { Box } from './Box'
-export { Button } from './Button'
-export { HeaderButton } from './HeaderButton'
-export { HeaderText } from './HeaderText'
-export { PanelButton } from './PanelButton'
-export { Checkbox } from './Checkbox'
-export { Input } from './Input'
-export { Image } from './Image'
-export { Text } from './Text'
-export { Link } from './Link'
-export { Icon } from './Icon'
-export { List } from './List'
-export { Dropdown } from './Dropdown'
-export { Modal } from './Modal'
-export { Dimmer } from './Dimmer'
-export { Loader } from './Loader'
-export { Row } from './Row'
-export { Column } from './Column'
-export { BoundButton } from './BoundButton'
-export { BoundCheckbox } from './BoundCheckbox'
-export { BoundInput } from './BoundInput'
-export { BoundEmailIcon } from './BoundEmailIcon'
-export { BoundDropdown } from './BoundDropdown'
+export { Anime } from "./Anime"
+export { Box } from "./Box"
+export { Button } from "./Button"
+export { FormIconButton } from "./FormIconButton"
+export { HeaderButton } from "./HeaderButton"
+export { HeaderText } from "./HeaderText"
+export { PanelButton } from "./PanelButton"
+export { Checkbox } from "./Checkbox"
+export { Input } from "./Input"
+export { Image } from "./Image"
+export { Text } from "./Text"
+export { Link } from "./Link"
+export { Icon } from "./Icon"
+export { List } from "./List"
+export { Dropdown } from "./Dropdown"
+export { Modal } from "./Modal"
+export { Dimmer } from "./Dimmer"
+export { Loader } from "./Loader"
+export { Row } from "./Row"
+export { Column } from "./Column"
+export { BoundButton } from "./BoundButton"
+export { BoundCheckbox } from "./BoundCheckbox"
+export { BoundInput } from "./BoundInput"
+export { BoundEmailIcon } from "./BoundEmailIcon"
+export { BoundDropdown } from "./BoundDropdown"
--- a/website/src/ui/style.js
+++ b/website/src/ui/style.js
@@ -1,36 +1,36 @@
 let colorInfo = {
-  text: '#000000',
-  textInverse: '#FFFFFF',
-  textPlaceholder: '#EEEEEE',
-  textAlert: '#FF0000',
-  textGray: '#B0B0B0',
-  textDisabled: '#AAAAAA',
+  text: "#000000",
+  textInverse: "#FFFFFF",
+  textPlaceholder: "#EEEEEE",
+  textAlert: "#FF0000",
+  textGray: "#B0B0B0",
+  textDisabled: "#AAAAAA",

-  border: '#B2B2B2',
+  border: "#B2B2B2",

-  modalShadow: '#000000',
-  modalBackground: '#FFFFFF',
+  modalShadow: "#000000",
+  modalBackground: "#FFFFFF",

-  inputBackground: '#FFFFFF',
+  inputBackground: "#FFFFFF",

-  buttonBackground: '#3498DB',
-  buttonBackgroundHover: '#3CB0FD',
-  buttonBackgroundActive: '#1A72AC',
-  buttonDisabledBackground: '#E0E0E0',
+  buttonBackground: "#3498DB",
+  buttonBackgroundHover: "#3CB0FD",
+  buttonBackgroundActive: "#1A72AC",
+  buttonDisabledBackground: "#E0E0E0",

-  headerBorder: '#B2B2B2',
-  headerButtonBackground: '#FAFAFA',
-  headerButtonBackgroundHover: '#DADADA',
-  headerButtonBackgroundActive: '#AAAAAA',
+  headerBorder: "#B2B2B2",
+  headerButtonBackground: "#FAFAFA",
+  headerButtonBackgroundHover: "#DADADA",
+  headerButtonBackgroundActive: "#AAAAAA",

-  checkboxUnchecked: '#A0A0A0',
-  checkboxUncheckedHover: '#808080',
-  checkmark: '#FFFFFF',
+  checkboxUnchecked: "#A0A0A0",
+  checkboxUncheckedHover: "#808080",
+  checkmark: "#FFFFFF",

-  listBackground: '#FFFFFF',
-  listBackgroundActive: '#E7E5E5',
+  listBackground: "#FFFFFF",
+  listBackgroundActive: "#E7E5E5",

-  dropdownBackground: '#FFFFFF',
+  dropdownBackground: "#FFFFFF",
 }

 Object.assign(colorInfo, {
@@ -58,15 +58,15 @@ const sizeInfo = {
  headerTextOffset: 2,
  headerButtonMargin: 8,

-  footerTextMargin: '5px 0px 5px 10px',
+  footerTextMargin: "5px 0px 5px 10px",

  buttonHeight: 40,
-  buttonPadding: '0 15px 0 15px',
+  buttonPadding: "0 15px 0 15px",
  buttonWidth: 125,
  buttonWideWidth: 225,

  checkboxSize: 25,
-  checkmarkBorder: '0 3px 3px 0',
+  checkmarkBorder: "0 3px 3px 0",

  panelButton: 200,
  panelButtonIcon: 170,
@@ -83,22 +83,27 @@ const sizeInfo = {
  formBoundIcon: 30,
  formBoundIconMargin: 0,

+  formButtonIcon: 24,
+  formButtonIconMargin: 0,
+  formButtonIconBorderRadius: 4,
+  formButtonIconPadding: 3,
+
  listBorderWidth: 1,
  listTopBottomGap: 10,
  listIcon: 25,
-  listIconMargin: '5px 10px 5px 10px',
+  listIconMargin: "5px 10px 5px 10px",

  dropdownIconSize: 20,
  dropdownItems: 6,
  dropdownBorderWidth: 1,
  dropdownIcon: 25,
-  dropdownIconMargin: '5px 10px 5px 10px',
+  dropdownIconMargin: "5px 10px 5px 10px",

  modalWidth: 450,
  modalShadowWidth: 25,
  modalMessageIcon: 150,

-  profileWidth: '65vw',
+  profileWidth: "65vw",

  inputPadding: 5,
  inputBorderRadius: 5,
@@ -110,21 +115,21 @@ const sizeInfo = {
 }

 const fontInfo = {
-  family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind
+  family: "Hind, sans-serif", // https://fonts.google.com/specimen/Hind?selection.family=Hind
  size: {
-    small: '10pt',
-    medium: '12pt',
-    large: '14pt',
-    huge: '26pt',
-    header: '18pt',
-    footer: '8pt',
+    small: "10pt",
+    medium: "12pt",
+    large: "14pt",
+    huge: "26pt",
+    header: "18pt",
+    footer: "8pt",
  },
  color: {
-    'normal': colorInfo.text,
-    'inverse': colorInfo.textInverse,
-    'alert': colorInfo.textAlert,
-    'dimmed': colorInfo.textGray,
-  }
+    normal: colorInfo.text,
+    inverse: colorInfo.textInverse,
+    alert: colorInfo.textAlert,
+    dimmed: colorInfo.textGray,
+  },
 }

 export { colorInfo, sizeInfo, fontInfo }