streamlines top level collection components, rebuilds StickyAction component

src/components.js

@@ -30,6 +30,7 @@ export { default as ContentBlock } from './components/layout/ContentBlock';
 export { default as Table } from './components/layout/Table';
 
 // Modules
+export { default as StickyAction } from './components/modules/StickyAction';
 export { default as HeadingButton } from './components/modules/HeadingButton';
 export { default as Filter } from './components/modules/Filter';
 export { default as APIUrl } from './components/modules/APIUrl';

src/components/controls/Button/index.scss

@@ -34,7 +34,7 @@
         &:hover {
             background: $primary;
             border: $stroke-width solid $primary;
-            color: white;
+            color: $black;
 
             &.btn-icon {
                 @include color-svg($black);
@@ -63,7 +63,7 @@
     &:hover {
       border: 1px solid $primary;
       background: $primary;
-      color: white;
+      color: $black;
     }
 
     &:focus, &:active {

src/components/data/archive.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import api from 'payload/api';
 
-const withArchiveData = (PassedComponent, collection, config) => {
+const withArchiveData = PassedComponent => {
 
   class ArchiveData extends Component {
 
@@ -14,7 +14,7 @@ const withArchiveData = (PassedComponent, collection, config) => {
     }
 
     componentDidMount() {
-      api.requests.get(`${config.serverUrl}/${collection.slug}`).then(
+      api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}`).then(
         res => this.setState({ data: res }),
         err => console.warn(err)
       )

src/components/data/edit.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import api from 'payload/api';
 
-const withEditData = (PassedComponent, collection, config) => {
+const withEditData = PassedComponent => {
 
   class EditData extends Component {
     constructor(props) {
@@ -17,7 +17,7 @@ const withEditData = (PassedComponent, collection, config) => {
       const slug = this.props.match.params.slug;
 
       if (slug) {
-        api.requests.get(`${config.serverUrl}/${collection.slug}/${slug}`).then(
+        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${slug}`).then(
           res => this.setState({ data: res }),
           err => {
             console.warn(err);

src/components/field-types/Input/index.scss

@@ -4,38 +4,13 @@
 	margin-bottom: rem(.5);
 	position: relative;
 
-	label {
-		display: flex;
-
-		.required {
-			color: $error;
-			margin-left: rem(.25);
-			margin-right: auto;
-		}
-	}
-
-	.tooltip {
-		left: auto;
-		right: 0;
-		transform: none;
-		background-color: $error;
-
-		span {
-			border-top-color: $error;
-		}
-	}
-
 	input {
 		@include formInput;
 	}
 
 	&.error {
 		input {
-      background-color: lighten($error, 15%);
+      background-color: lighten($error, 20%);
 		}
 	}
-
-	@include small-break {
-		margin-bottom: rem(.5);
-	}
 }

src/components/field-types/Textarea/index.scss

@@ -4,27 +4,6 @@
   margin-bottom: rem(.5);
   position: relative;
 
-  label {
-    display: flex;
-
-    .required {
-      color: $error;
-      margin-left: rem(.25);
-      margin-right: auto;
-    }
-  }
-
-  .tooltip {
-    left: auto;
-    right: 0;
-    transform: none;
-    background-color: $error;
-
-    span {
-      border-top-color: $error;
-    }
-  }
-
   textarea {
     @include formInput();
     min-height: rem(3);
@@ -32,11 +11,7 @@
 
   &.error {
     textarea {
-      background-color: lighten($error, 15%);
+      background-color: lighten($error, 20%);
     }
   }
-
-  @include small-break {
-    margin-bottom: rem(.5);
-  }
 }

src/components/field-types/fieldType/index.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { FormContext, Tooltip } from 'payload/components';
 
+import './index.scss';
+
 const fieldType = (PassedComponent, slug, validate, errors) => {
 
   class FieldType extends Component {
@@ -24,9 +26,9 @@ const fieldType = (PassedComponent, slug, validate, errors) => {
     }
 
     componentDidMount() {
-      this.sendField(
-        this.props.value ? this.props.value : ''
-      )
+      let value = this.props.value ? this.props.value : '';
+      value = this.props.valueOverride ? this.props.valueOverride : value;
+      this.sendField(value);
 
       this.setState({
         init: true

src/components/field-types/fieldType/index.scss

@@ -0,0 +1,31 @@
+@import '~payload/scss/styles';
+
+.field-type {
+  margin-bottom: rem(.5);
+  position: relative;
+
+  label {
+    display: flex;
+
+    .required {
+      color: $error;
+      margin-left: rem(.25);
+      margin-right: auto;
+    }
+  }
+
+  .tooltip {
+    left: auto;
+    right: 0;
+    transform: none;
+    background-color: $error;
+
+    span {
+      border-top-color: $error;
+    }
+  }
+
+  @include small-break {
+    margin-bottom: rem(.5);
+  }
+}

src/components/layout/Sticky/index.js

@@ -4,7 +4,7 @@ import './index.scss';
 
 const Sticky = props => {
   return (
-    <div className="sticky">
+    <div className={`sticky${props.className ? ` ${props.className}` : ''}`}>
       {props.children}
     </div>
   );

src/components/layout/Sticky/index.scss

@@ -1,24 +1,10 @@
 @import '~payload/scss/styles';
 
 .sticky {
-  @include m;
   z-index: 10;
   padding-top: rem(.75);
   padding-bottom: rem(.75);
   width: 100%;
   position: sticky;
   top: 0;
-  display: flex;
-  justify-content: space-between;
-
-  &:before {
-    content: ' ';
-    background: rgba(white, .95);
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    right: - rem(1);
-    bottom: 0;
-    left: - rem(1);
-  }
 }

src/components/modules/APIUrl/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { Label } from 'payload/components';
 
-import { Label, Input } from 'payload/components';
+import './index.scss';
 
 const APIUrl = props => {
 
@@ -9,8 +10,7 @@ const APIUrl = props => {
   return (
     <div className="api-url">
       <Label className="uppercase">API URL</Label>
-      <div><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
-      <Input type="hidden" name="slug" valueOverride={props.slug} />
+      <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
     </div>
   );
 };

src/components/modules/APIUrl/index.scss

@@ -0,0 +1,6 @@
+.api-url {
+  .url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

src/components/modules/SearchableTable/index.js

@@ -13,8 +13,8 @@ class SearchableTable extends Component {
         key: 'title',
         label: 'Title'
       }, {
-        key: 'status',
-        label: 'Status'
+        key: '_id',
+        label: 'ID'
       }, {
         key: 'published',
         label: 'Published On'

src/components/modules/StickyAction/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Sticky } from 'payload/components';
+
+import './index.scss';
+
+const StickyAction = props => {
+  return (
+    <Sticky className="action">
+      <div className="content">
+        {props.content}
+      </div>
+      <div className="controls">
+        {props.action}
+      </div>
+    </Sticky>
+  )
+}
+
+export default StickyAction;

src/components/modules/StickyAction/index.scss

@@ -0,0 +1,36 @@
+@import '~payload/scss/styles';
+
+.sticky.action {
+  display: flex;
+  justify-content: space-between;
+
+  > .content {
+    flex-grow: 1;
+    min-width: 0;
+    padding-right: rem(1);
+  }
+
+  .controls {
+    flex-shrink: 0;
+
+    .btn {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      margin-left: rem(1);
+    }
+  }
+
+  &:before {
+    content: ' ';
+    background: rgba(white, .95);
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: - rem(1);
+    bottom: 0;
+    left: - rem(1);
+  }
+}

src/components/routes/Collections.js

@@ -10,9 +10,14 @@ const CollectionRoutes = props => {
 
       return (
         <Switch key={i}>
-          <Route path={`/collections/${collection.slug}/create`} exact component={Edit} />
-          <Route path={`/collections/${collection.slug}/:slug`} component={Edit} />
-          <Route path={`/collections/${collection.slug}`} exact component={Archive} />
+          <Route path={`/collections/${collection.slug}/create`} exact
+          render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
+
+          <Route path={`/collections/${collection.slug}/:slug`}
+          render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
+
+          <Route path={`/collections/${collection.slug}`} exact
+          render={routeProps => <Archive {...routeProps} collection={collection} config={props.config} />} />
         </Switch>
       );
     }

src/components/views/collections/Edit/index.scss

@@ -6,21 +6,4 @@
       margin: 0;
     }
   }
-
-  .stick-on-scroll .stick .wrap {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .controls {
-
-    .btn {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    > *:last-child {
-      margin-left: rem(1);
-    }
-  }
 }

src/scss/vars.scss

@@ -35,13 +35,13 @@ $font-label : 'gt-pressura-web';
 // COLORS
 //////////////////////////////
 
-$primary    : #3bffaa;
+$primary    : #1ff99a;
 
 $light-gray : #f5f5f5;
 $gray       : #afafaf;
 $black      : rgb(60, 60, 60);
 
-$error      : #ff8efc;
+$error      : #fd7373;
 $warning    : #fff93b;
 
 //////////////////////////////