refactor: entity stuff

src/client/components/entity.jsx

@@ -15,8 +15,11 @@ const Entity = () => {
   const {traits} = entity;
   return (
     <div className="entity">
+      <div className="document-pane"></div>
+      <div className="settings-pane">
         <Traits traits={traits} />
       </div>
+    </div>
   );
 };
 

src/client/components/entity.raw.scss

@@ -0,0 +1,11 @@
+.document-pane {
+  border-right: 1px solid #1a1a1a;
+  float: left;
+  width: calc(100% - 36em);
+  height: 100vh;
+}
+
+.settings-pane {
+  float: left;
+  width: 36em;
+}

src/client/components/properties/bool.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import propertyPropTypes from './property-prop-types';
+
+const Bool = ({
+  name,
+  label,
+  value,
+}) => (
+  <label>
+    <span className="text">{label}</span>
+    <div className="invisible-separator" />
+    <input name={name} type="checkbox" checked={value} />
+  </label>
+);
+
+Bool.propTypes = {
+  ...propertyPropTypes,
+  value: PropTypes.bool.isRequired,
+};
+
+export default Bool;

src/client/components/properties/number.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import propertyPropTypes from './property-prop-types';
+
+const Number = ({
+  name,
+  label,
+  options,
+  value,
+}) => (
+  <label>
+    <span className="text">{label}</span>
+    <div className="invisible-separator" />
+    {
+      options
+        ? (
+          <select name={name} value={value}>
+            {Object.entries(options).map(([optionValue, optionLabel]) => (
+              <option value={optionValue}>{optionLabel}</option>
+            ))}
+          </select>
+        )
+        : <input name={name} size={5} type="text" value={value} />
+    }
+  </label>
+);
+
+Number.propTypes = {
+  ...propertyPropTypes,
+  value: PropTypes.number.isRequired,
+};
+
+export default Number;

src/client/components/properties/properties.hooks.jsx

@@ -1,89 +1,12 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const propertyPropTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  options: PropTypes.shape({}),
-};
-
-const bool = ({
-  name,
-  label,
-  value,
-}) => (
-  <label>
-    <span className="text">{label}</span>
-    <div className="invisible-separator" />
-    <input name={name} type="checkbox" checked={value} />
-  </label>
-);
-
-bool.propTypes = {
-  ...propertyPropTypes,
-  value: PropTypes.bool.isRequired,
-};
-
-const number = ({
-  name,
-  label,
-  options,
-  value,
-}) => (
-  <label>
-    <span className="text">{label}</span>
-    <div className="invisible-separator" />
-    {
-      options
-        ? (
-          <select name={name} value={value}>
-            {Object.entries(options).map(([optionValue, optionLabel]) => (
-              <option value={optionValue}>{optionLabel}</option>
-            ))}
-          </select>
-        )
-        : <input name={name} size={5} type="text" value={value} />
-    }
-  </label>
-);
-
-number.propTypes = {
-  ...propertyPropTypes,
-  value: PropTypes.number.isRequired,
-};
-
-const string = ({
-  name,
-  label,
-  options,
-  value,
-}) => (
-  <label>
-    <span className="text">{label}</span>
-    <div className="invisible-separator" />
-    {
-      options
-        ? (
-          <select>
-            { /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ }
-            {options.map((option) => <option value={option} />)}
-          </select>
-        )
-        : <input name={name} size={5} type="text" value={value} />
-    }
-  </label>
-);
-
-string.propTypes = {
-  ...propertyPropTypes,
-  value: PropTypes.string.isRequired,
-};
+import Bool from './bool';
+import Number from './number';
+import String from './string';
 
 // eslint-disable-next-line import/prefer-default-export
 export function propertyComponents() {
   return {
-    bool,
-    number,
-    string,
+    bool: Bool,
+    number: Number,
+    string: String,
   };
 }

src/client/components/properties/property-prop-types.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  options: PropTypes.shape({}),
+};

src/client/components/properties/string.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import propertyPropTypes from './property-prop-types';
+
+const String = ({
+  name,
+  label,
+  options,
+  value,
+}) => (
+  <label>
+    <span className="text">{label}</span>
+    <div className="invisible-separator" />
+    {
+      options
+        ? (
+          <select name={name} value={value}>
+            {Object.entries(options).map(([optionValue, optionLabel]) => (
+              <option value={optionValue}>{optionLabel}</option>
+            ))}
+          </select>
+        )
+        : <input name={name} size={5} type="text" value={value} />
+    }
+  </label>
+);
+
+String.propTypes = {
+  ...propertyPropTypes,
+  value: PropTypes.string.isRequired,
+};
+
+export default String;

src/client/components/traits.raw.scss

@@ -19,7 +19,7 @@ form {
 }
 
 .invisible-separator {
-  margin: 1em 0;
+  margin: 0.25em 0;
 }
 
 .text {

src/client/index.scss

@@ -74,32 +74,34 @@ code {
 }
 
 label {
-  align-items: center;
+  align-items: left;
   background-color: #272727;
   color: #ffffff;
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   font-family: "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
   font-size: 0.6em;
   min-height: 3em;
-  justify-content: space-between;
   padding: 0.5em 0.5em 0.5em 1em;
-  text-transform: uppercase;
+  // text-transform: uppercase;
   user-select: none;
 }
+@media(min-width: 20em) {
+  label {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
 @media(min-width: 32em) {
   label {
     font-size: 0.8em;
   }
 }
-@media(min-width: 64em) {
-  label {
-    font-size: 1em;
-  }
-}
 
 label:nth-of-type(2n+1) {
-  background-color: #1b1b1b;
+  background-color: #1d1d1d
 }
 
 input {

src/client/scss/tabs.scss

@@ -2,7 +2,7 @@
 
   .react-tabs__tab-list {
     background-color: #272727;
-    font-family: "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+    font-family: Ubuntu, "Droid Sans", sans-serif;
     font-size: 0.9em;
     overflow-x: hidden;
     scrollbar-width: thin;
@@ -13,7 +13,7 @@
       height: 6px;
     }
     &::-webkit-scrollbar-track {
-      background: #212121;
+      background: #2e1d1d;
     }
     &::-webkit-scrollbar-thumb {
       background-color: #777;
@@ -23,7 +23,7 @@
   }
 
   .react-tabs__tab {
-    background-color: #333333;
+    background-color: #2d2d2d;
     color: #aaaaaa;
     cursor: pointer;
     display: inline-block;