Initial commit

src/components/UI/Box/Box.css

@@ -0,0 +1,41 @@
+.Box {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--control_transparent_background);
+  box-sizing: border-box;
+  border: var(--control_border);
+  border-radius: var(--border_radius);
+  box-shadow: var(--control_box_shadow);
+}
+
+.Box.Darker {
+  background-color: var(--control_dark_transparent_background);
+}
+
+.Box.SlideOut {
+  animation: slide-out 0.5s forwards;
+  transform: translateX(-100%);
+}
+
+.Box.SlideOutTop {
+  animation: slide-out-top 0.5s forwards;
+  transform: translateY(-100%);
+}
+
+.Box.FadeIn {
+  transition: 0.3s;
+}
+
+@keyframes slide-out {
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out-top {
+  100% {
+    transform: translateY(0%);
+  }
+}

src/components/UI/Box/Box.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Box.css';
+
+export default CSSModules((props) => {
+  const styleList = ['Box'];
+  if (props.dxDark) {
+    styleList.push('Darker');
+  }
+
+  if (props.dxSlideOut) {
+    styleList.push('SlideOut');
+  } else if (props.dxFadeIn) {
+    styleList.push('FadeIn');
+  } else if (props.dxSlideOutTop) {
+    styleList.push('SlideOutTop');
+  }
+
+  return (
+    <div
+      onClick={props.clicked}
+      styleName={styleList.join(' ')}
+      style={{...props.dxStyle}}>
+      {props.children}
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Button/Button.css

@@ -0,0 +1,30 @@
+.Button {
+  display: block;
+  text-align: center;
+  margin: 0;
+  padding: 4px;
+  outline: 0;
+  color: var(--text_color);
+  border-radius: var(--border_radius);
+  background-color: var(--control_background);
+  border: none;
+  text-decoration: none;
+  text-outline: none;
+  width: 70px;
+}
+
+.Button:hover:enabled {
+  background: var(--control_background_hover);
+  color: var(--text_color_hover);
+  cursor: pointer;
+}
+
+.Button:hover:disabled {
+  cursor: default;
+}
+
+.Button:active,
+.Button.active {
+  box-shadow: none;
+  cursor: pointer;
+}

src/components/UI/Button/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Button.css';
+
+export default CSSModules((props) => {
+  return (
+    <button disabled={props.disabled}
+            styleName={'Button'}
+            style={props.buttonStyles}
+            onClick={props.clicked}>{props.children}</button>
+  );
+}, styles, {allowMultiple: true});
+

src/components/UI/DropDown/DropDown.css

@@ -0,0 +1,24 @@
+.DropDown {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.Select {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(10, 10, 20, 0.3);
+  border-color: rgba(10, 10, 20, 0.9);
+  color: var(--text_color);
+  box-sizing: border-box;
+}
+
+.Option {
+  background: rgba(10, 10, 15, 0.8);
+  border-color: rgba(10, 10, 20, 0.9);
+  color: var(--text_color);
+}

src/components/UI/DropDown/DropDown.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './DropDown.css';
+
+export default CSSModules((props) => {
+  const options = props.items.map((s, i) => {
+    return (
+      <option styleName='Option' key={i} value={i}>{s}</option>
+    );
+  });
+
+  return (
+    <div styleName='DropDown'>
+      <select styleName='Select' disabled={props.disabled} onChange={props.changed} value={props.selected}>
+        {options}
+      </select>
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Modal/Modal.css

@@ -0,0 +1,19 @@
+.Modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+}
+
+.Content {
+  position: fixed;
+  width: auto;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+}

src/components/UI/Modal/Modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Modal.css'
+
+export default CSSModules((props) => {
+  return (
+    <div
+      styleName='Modal'
+      onClick={props.clicked}>
+      <div styleName='Content'>
+        {props.children}
+      </div>
+    </div>);
+}, styles, {allowMultiple: true});