[F] Improve theming

client/package.json

@@ -58,6 +58,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
     "@loadable/component": "^5.16.7",
+    "@melloware/coloris": "^0.25.0",
     "@vidstack/react": "^1.12.13",
     "ace-builds": "^1.x",
     "actioncable": "~5.0.7",

client/src/backend/components/hero/Builder/forms/JournalDescription.js

@@ -124,11 +124,12 @@ function JournalDescription({
             altTextName="attributes[logoAltText]"
             altTextLabel={t("journals.forms.logo_alt_label")}
           />
-          <Form.TextInput
+          <Form.ColorInput
             label={t("hero.background_color")}
             name="attributes[heroBackgroundColor]"
-            placeholder="#52e3ac"
+            defaultValue="#52e3ac"
             instructions={t("hero.background_color_instructions")}
+            container=".drawer--backend"
             wide
           />
           <Form.TextArea

client/src/backend/components/theme/HeaderPreview/index.js

@@ -0,0 +1,103 @@
+import { useFromStore } from "hooks";
+import { useTranslation } from "react-i18next";
+import SetCSSProperty from "global/components/utility/SetCSSProperty";
+import PressLogo from "global/components/PressLogo";
+import HeaderLogo from "global/components/atomic/HeaderLogo";
+import IconComposer from "global/components/utility/IconComposer";
+
+const DEFAULTS = {
+  accentColor: "#52e3ac",
+  foregroundColor: "#696969",
+  backgroundColor: "#ffffff",
+  activeColor: "#363636"
+};
+
+export default function HeaderPreview({
+  accentColor,
+  foregroundColor,
+  backgroundColor,
+  activeColor
+}) {
+  const { t } = useTranslation();
+  const settings = useFromStore({ requestKey: "settings", action: "select" });
+  const offset = settings.attributes.theme.headerOffset;
+  const navStyle = offset
+    ? { position: "relative", top: parseInt(offset, 10) }
+    : {};
+
+  return (
+    <div
+      className="library-header library-header--light"
+      style={{
+        "--color-accent-primary": accentColor || DEFAULTS.accentColor,
+        "--hover-color": accentColor || DEFAULTS.accentColor,
+        "--color-header-background":
+          backgroundColor || DEFAULTS.backgroundColor,
+        "--color-header-foreground":
+          foregroundColor || DEFAULTS.foregroundColor,
+        "--color-header-foreground-active": activeColor || DEFAULTS.activeColor
+      }}
+      inert=""
+    >
+      <SetCSSProperty
+        measurement="height"
+        propertyName="--library-header-height"
+      >
+        <div className="library-header__inner-preview">
+          <HeaderLogo as="span">
+            <>
+              <span className="screen-reader-text">
+                {t("navigation.return_home")}
+              </span>
+              <PressLogo
+                url={settings.attributes.pressLogoStyles.medium}
+                styles={settings.attributes.theme.logoStyles}
+                aria-hidden="true"
+              />
+            </>
+          </HeaderLogo>
+          <nav
+            className="site-nav show-82"
+            aria-label={t("navigation.primary")}
+            style={navStyle}
+          >
+            <ul className="site-nav__list">
+              <li className="site-nav__item">
+                <span className="site-nav__link site-nav__link--active">
+                  {t("titles.home")}
+                </span>
+              </li>
+              <li className="site-nav__item">
+                <span className="site-nav__link">
+                  {t("glossary.project_title_case_other")}
+                </span>
+              </li>
+              <li className="site-nav__item">
+                <span className="site-nav__link">
+                  {t("glossary.journal_title_case_other")}
+                </span>
+              </li>
+              <li className="site-nav__item">
+                <span className="site-nav__link">
+                  {t("glossary.reading_group_title_case_other")}
+                </span>
+              </li>
+            </ul>
+          </nav>
+          <nav className="breadcrumb-list hide-82">
+            <span>
+              <span className="breadcrumb-list__link">{t("titles.home")}</span>
+            </span>
+          </nav>
+          <span className="mobile-nav-toggle hide-82">
+            <IconComposer
+              icon="menu32"
+              size="default"
+              className="mobile-nav-trigger__icon"
+            />
+          </span>
+        </div>
+      </SetCSSProperty>
+    </div>
+  );
+}

client/src/backend/containers/features/Detail.js

@@ -113,13 +113,8 @@ class FeatureDetailContainer extends PureComponent {
   previewableFeature(props) {
     const { session } = props;
     if (!session) return null;
-    const { source, dirty } = session;
-    const previewAttributes = {
-      ...source.attributes,
-      ...dirty.attributes
-    };
-    const preview = { ...source, attributes: previewAttributes };
-    return preview;
+    const { dirty } = session;
+    return dirty.attributes;
   }
 
   isNew(props) {
@@ -214,7 +209,11 @@ class FeatureDetailContainer extends PureComponent {
                     label={t("records.features.preview.section_title")}
                     instructions={t("records.features.preview.instructions")}
                   >
-                    <FrontendLayout.Splash feature={previewFeature} preview />
+                    <FrontendLayout.Splash
+                      feature={feature}
+                      preview
+                      previewAttrs={previewFeature}
+                    />
                   </Form.FieldGroup>
                 ) : null}
                 {this.renderRoutes()}

client/src/backend/containers/features/Properties.js

@@ -88,20 +88,20 @@ class FeaturesPropertiesContainer extends PureComponent {
                 }
               ]}
             />
-            <Form.TextInput
+            <Form.ColorInput
               label={t("records.features.background_label")}
               name="attributes[backgroundColor]"
-              placeholder="#000000"
+              defaultValue="#000000"
             />
-            <Form.TextInput
+            <Form.ColorInput
               label={t("records.features.foreground_label")}
               name="attributes[foregroundColor]"
-              placeholder="#000000"
+              defaultValue="#000000"
             />
-            <Form.TextInput
+            <Form.ColorInput
               label={t("records.features.header_color_label")}
               name="attributes[headerColor]"
-              placeholder="#000000"
+              defaultValue="#000000"
             />
             <Form.Upload
               layout="landscape"

client/src/backend/containers/route-containers.js

@@ -123,6 +123,7 @@ export default {
   ExportTargetsEdit: ExportTargets.Edit,
   SettingsWrapper: Settings.Wrapper,
   SettingsTheme: Settings.Theme,
+  SettingsContent: Settings.Content,
   SettingsIntegrations: Settings.Integrations,
   SettingsSubjectsList: Settings.Subjects.List,
   SettingsSubjectsNew: Settings.Subjects.New,

client/src/backend/containers/settings/Content.js

@@ -0,0 +1,132 @@
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { withTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import Layout from "backend/components/layout";
+import Form from "global/components/form";
+import FormContainer from "global/containers/form";
+import { settingsAPI, requests } from "api";
+import { select } from "utils/entityUtils";
+import PageHeader from "backend/components/layout/PageHeader";
+
+export class SettingsContentContainer extends PureComponent {
+  static mapStateToProps = state => {
+    return {
+      settings: select(requests.settings, state.entityStore)
+    };
+  };
+
+  static displayName = "Settings.Content";
+
+  static propTypes = {
+    settings: PropTypes.object
+  };
+
+  render() {
+    if (!this.props.settings) return null;
+    const t = this.props.t;
+    return (
+      <div>
+        <PageHeader title={t("settings.content.header")} type="settings" />
+        <Layout.BackendPanel>
+          <FormContainer.Form
+            model={this.props.settings}
+            name="backend-settings"
+            update={settingsAPI.update}
+            create={settingsAPI.update}
+            className="form-secondary"
+          >
+            <Form.FieldGroup label={t("settings.content.top_bar_header")}>
+              <Form.TextInput
+                label={t("settings.content.text_label")}
+                name="attributes[theme][topBarText]"
+                placeholder={t("settings.content.text_placeholder")}
+              />
+              <Form.TextInput
+                label={t("settings.content.color_label")}
+                name="attributes[theme][topBarColor]"
+                placeholder={t("settings.content.color_placeholder")}
+                instructions={t("settings.content.color_instructions")}
+              />
+              <Form.TextInput
+                label={t("settings.content.top_bar_url_label")}
+                name="attributes[theme][topBarUrl]"
+                placeholder={t("settings.content.top_bar_url_placeholder")}
+              />
+              <Form.Select
+                label={t("settings.content.mode_label")}
+                name="attributes[theme][topBarMode]"
+                options={[
+                  {
+                    label: t("settings.content.mode_options.disabled"),
+                    value: "disabled"
+                  },
+                  {
+                    label: t("settings.content.mode_options.always"),
+                    value: "enforced"
+                  },
+                  {
+                    label: t("settings.content.mode_options.standalone"),
+                    value: "enabled"
+                  }
+                ]}
+              />
+            </Form.FieldGroup>
+            <Form.FieldGroup
+              label={t("settings.content.content_signup_header")}
+            >
+              <Form.TextInput
+                wide
+                label={t("settings.content.string_signup_terms_header")}
+                name="attributes[theme][stringSignupTermsHeader]"
+              />
+              <Form.TextArea
+                wide
+                label={t("settings.content.string_signup_terms_one")}
+                name="attributes[theme][stringSignupTermsOne]"
+              />
+              <Form.TextArea
+                wide
+                label={t("settings.content.string_signup_terms_two")}
+                name="attributes[theme][stringSignupTermsTwo]"
+              />
+            </Form.FieldGroup>
+            <Form.FieldGroup
+              label={t("settings.content.content_data_use_header")}
+            >
+              <Form.TextInput
+                wide
+                label={t("settings.content.string_data_use_header")}
+                name="attributes[theme][stringDataUseHeader]"
+              />
+              <Form.TextArea
+                wide
+                label={t("settings.content.string_data_use_copy")}
+                name="attributes[theme][stringDataUseCopy]"
+                instructions={t("settings.content.data_use_copy_instructions")}
+              />
+              <Form.TextInput
+                wide
+                label={t("settings.content.string_cookies_banner_header")}
+                name="attributes[theme][stringCookiesBannerHeader]"
+              />
+              <Form.TextArea
+                wide
+                label={t("settings.content.string_cookies_banner_copy")}
+                name="attributes[theme][stringCookiesBannerCopy]"
+                instructions={t(
+                  "settings.content.cookies_banner_copy_instructions"
+                )}
+              />
+            </Form.FieldGroup>
+            <Form.Save text={t("settings.save")} />
+          </FormContainer.Form>
+        </Layout.BackendPanel>
+      </div>
+    );
+  }
+}
+
+export default withTranslation()(
+  connect(SettingsContentContainer.mapStateToProps)(SettingsContentContainer)
+);