update to data bar appearance

components/core/DataView.js

@@ -110,16 +110,27 @@ const STYLES_ACTION_BAR = css`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
-    0 0 4px 2px ${Constants.system.shadow};
   border-radius: 4px;
-  padding: 12px 32px;
+  padding: 0px 32px;
   box-sizing: border-box;
-  background-color: ${Constants.system.foreground};
+  background-color: ${Constants.system.textGrayDark};
+  width: 90vw;
+  max-width: 878px;
+  height: 48px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
+`;
+
+const STYLES_ACTION_BAR_CONTAINER = css`
   position: fixed;
   bottom: 12px;
-  left: 10vw;
-  width: 80vw;
+  left: 0px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  z-index: ${Constants.zindex.header};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
@@ -141,6 +152,7 @@ const STYLES_LEFT = css`
 
 const STYLES_FILES_SELECTED = css`
   font-family: ${Constants.font.semiBold};
+  color: ${Constants.system.white};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
@@ -448,6 +460,7 @@ export default class DataView extends React.Component {
     const footer = (
       <React.Fragment>
         {numChecked ? (
+          <div css={STYLES_ACTION_BAR_CONTAINER}>
             <div css={STYLES_ACTION_BAR}>
               <div css={STYLES_LEFT}>
                 <span css={STYLES_FILES_SELECTED}>
@@ -455,12 +468,16 @@ export default class DataView extends React.Component {
                 </span>
               </div>
               <div css={STYLES_RIGHT}>
-              <ButtonPrimary transparent onClick={this._handleAddToSlate}>
+                <ButtonPrimary
+                  transparent
+                  style={{ color: Constants.system.white }}
+                  onClick={this._handleAddToSlate}
+                >
                   Add to slate
                 </ButtonPrimary>
                 <ButtonWarning
                   transparent
-                style={{ marginLeft: 8 }}
+                  style={{ marginLeft: 8, color: Constants.system.white }}
                   onClick={() => this._handleDelete()}
                   loading={
                     this.state.loading &&
@@ -482,6 +499,7 @@ export default class DataView extends React.Component {
                 </div>
               </div>
             </div>
+          </div>
         ) : null}
       </React.Fragment>
     );

components/core/SlateLayout.js

@@ -213,20 +213,30 @@ const STYLES_ACTION_BAR = css`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
-    0 0 4px 2px ${Constants.system.shadow};
   border-radius: 4px;
-  padding: 12px 32px;
+  padding: 0px 32px;
   box-sizing: border-box;
-  background-color: ${Constants.system.foreground};
+  background-color: ${Constants.system.textGrayDark};
+  width: 90vw;
+  max-width: 878px;
+  height: 48px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
+`;
+
+const STYLES_ACTION_BAR_CONTAINER = css`
   position: fixed;
   bottom: 12px;
-  width: calc(100vw - ${Constants.sizes.sidebar}px + 32px);
-  max-width: 1660px;
+  left: 0px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
   z-index: ${Constants.zindex.header};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    width: calc(100vw - 48px);
+    display: none;
   }
 `;
 
@@ -245,6 +255,7 @@ const STYLES_LEFT = css`
 
 const STYLES_FILES_SELECTED = css`
   font-family: ${Constants.font.semiBold};
+  color: ${Constants.system.white};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
@@ -1239,10 +1250,12 @@ export class SlateLayout extends React.Component {
               height: this.state.editing
                 ? `calc(100vh + ${this.state.containerHeight}px)`
                 : `calc(96px + ${this.state.containerHeight}px)`,
-              backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${10 *
-                this.state.unit}px`,
-              backgroundPosition: `-${(CONTAINER_SIZE / 220) *
-                this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit}px`,
+              backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${
+                10 * this.state.unit
+              }px`,
+              backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${
+                (CONTAINER_SIZE / 220) * this.state.unit
+              }px`,
             }}
             ref={(c) => {
               this._ref = c;
@@ -1691,6 +1704,7 @@ export class SlateLayout extends React.Component {
           </div>
         </div>
         {numChecked ? (
+          <div css={STYLES_ACTION_BAR_CONTAINER}>
             <div css={STYLES_ACTION_BAR}>
               <div css={STYLES_LEFT}>
                 <span css={STYLES_FILES_SELECTED}>
@@ -1699,7 +1713,11 @@ export class SlateLayout extends React.Component {
               </div>
               {this.props.isOwner ? (
                 <div css={STYLES_RIGHT}>
-                <ButtonPrimary transparent onClick={this._handleAddToSlate}>
+                  <ButtonPrimary
+                    transparent
+                    style={{ color: Constants.system.white }}
+                    onClick={this._handleAddToSlate}
+                  >
                     Add to slate
                   </ButtonPrimary>
                   {/* <ButtonPrimary transparent onClick={this._handleDownload}>
@@ -1707,7 +1725,7 @@ export class SlateLayout extends React.Component {
                   </ButtonPrimary> */}
                   <ButtonWarning
                     transparent
-                  style={{ marginLeft: 8 }}
+                    style={{ marginLeft: 8, color: Constants.system.white }}
                     onClick={this._handleRemoveFromSlate}
                     loading={
                       this.state.loading &&
@@ -1720,7 +1738,7 @@ export class SlateLayout extends React.Component {
                   </ButtonWarning>
                   <ButtonWarning
                     transparent
-                  style={{ marginLeft: 8 }}
+                    style={{ marginLeft: 8, color: Constants.system.white }}
                     onClick={this._handleDeleteFiles}
                     loading={
                       this.state.loading &&
@@ -1737,10 +1755,18 @@ export class SlateLayout extends React.Component {
                 </div>
               ) : (
                 <div css={STYLES_RIGHT}>
-                <ButtonPrimary transparent onClick={this._handleAddToSlate}>
+                  <ButtonPrimary
+                    transparent
+                    onClick={this._handleAddToSlate}
+                    style={{ color: Constants.system.white }}
+                  >
                     Add to slate
                   </ButtonPrimary>
-                <ButtonPrimary transparent onClick={this._handleSaveCopy}>
+                  <ButtonPrimary
+                    transparent
+                    onClick={this._handleSaveCopy}
+                    style={{ color: Constants.system.white }}
+                  >
                     Save copy
                   </ButtonPrimary>
                   {/* <ButtonPrimary transparent onClick={this._handleDownload}>
@@ -1752,6 +1778,7 @@ export class SlateLayout extends React.Component {
                 </div>
               )}
             </div>
+          </div>
         ) : null}
         <input
           ref={(c) => {
@@ -1767,9 +1794,7 @@ export class SlateLayout extends React.Component {
               onClose={() => this.setState({ signInModal: false })}
               viewer={this.props.viewer}
               open={this.state.signInModal}
-              redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${
-                this.props.creator.username
-              }&slate=${this.props.slate.slatename}`}
+              redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`}
             />
           </div>
         )}

components/core/SlateMediaObjectPreview.js

@@ -46,6 +46,9 @@ const STYLES_TITLE = css`
   overflow: hidden;
   word-break: break-all;
   text-overflow: break-word;
+  color: ${Constants.system.textGray};
+  font-size: ${Constants.typescale.lvlN1};
+  font-family: ${Constants.font.medium};
 `;
 
 const STYLES_BLUR_CONTAINER = css`
@@ -203,8 +206,8 @@ export default class SlateMediaObjectPreview extends React.Component {
     let element = (
       <FileTypeIcon
         type={this.props.type}
-        height={this.props.previewPanel ? "80px" : "24px"}
-        style={this.props.previewPanel ? { color: "#bfbfbf" } : null}
+        height={this.props.previewPanel ? "80px" : "32px"}
+        style={{ color: Constants.system.textGray }}
       />
     );
     return (

scenes/SceneSlates.js

@@ -35,7 +35,6 @@ export default class SceneSlates extends React.Component {
   };
 
   render() {
-    console.log(this.props.viewer.slates);
     let subscriptions = this.props.viewer.subscriptions
       .filter((each) => {
         return !!each.target_slate_id;

server.js

@@ -108,7 +108,7 @@ app.prepare().then(async () => {
 
     const isBucketsAvailable = await Utilities.checkTextile();
 
-    if (!isBucketsAvailable) {
+    if (!isBucketsAvailable && Environment.IS_PRODUCTION) {
       return res.redirect("/maintenance");
     }