Formatted padding and add forms

src/components/AddCrudItem/index.js

@@ -56,11 +56,14 @@ export default class AddCrudItem extends Component {
         } = this.props;
 
         const fields = Object.keys(docFields).map(key => (
-            <Field key={key}
-                type={docFields[key].type}
-                value={this.state[key]}
-                onChange={this.onFieldChange[key]}
-            />
+            <div key={key} className="field-wrapper">
+                <span className="title">{key}</span>
+                <Field
+                    type={docFields[key].type}
+                    value={this.state[key]}
+                    onChange={this.onFieldChange[key]}
+                />
+            </div>
         ));
 
         return (

src/components/AddCrudItem/style.scss

@@ -1,8 +1,32 @@
 .add-field-wrapper {
     display: flex;
+    margin-top: 0.5em;
 
     .fields {
         flex: 4;
+
+        .field-wrapper {
+            display: flex;
+            margin-bottom: 0.5em;
+            align-items: center;
+
+            .title {
+                flex: 1;
+                text-transform: capitalize;
+                font-size: 90%;
+                font-weight: bold;
+
+                &::after {
+                    content: ':';
+                }
+            }
+
+            input,
+            textarea {
+                margin: 0 1em;
+                flex: 2;
+            }
+        }
     }
 
     .meta {

src/components/App/style.scss

@@ -34,6 +34,7 @@ body {
         display: flex;
         flex: 1;
         padding: 1em;
+        background: $color-secondary;
     }
 }
 

src/components/CrudDocument/style.scss

@@ -2,15 +2,11 @@
 
 .crud-document-wrapper {
     display: flex;
-    margin: 0 0 0.5em 0;
-    padding: 0.5em 0 0 0;
+    margin-top: 0.5em;
+    padding-bottom: 0.5em;
     align-items: center;
 
-    border-top: 1px solid $color-grey-light;
-
-    &:first-child {
-        border-top: 0;
-    }
+    border-bottom: 1px solid $color-grey-light;
 
     &.pending {
         opacity: $opacity-pending;

src/containers/CrudList/style.scss

@@ -2,8 +2,19 @@
 
 .crud-list-wrapper {
     display: flex;
-    flex: 0 0 50%;
+    margin: 0 0.5em;
+    padding: 0.5em;
     flex-flow: column;
+    border: 1px solid $color-grey-light;
+    background: white;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+
+    &:first-child {
+        margin-left: 0;
+    }
+    &:last-child {
+        margin-right: 0;
+    }
 
     &.loading {
         .body {