[B] Ensure preview attrs are shown for feature

Author: 1aurend

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/config/app/locale/en-US/json/backend/records.json

@@ -113,7 +113,7 @@
         "no_title": "Untitled #{{position}}",
         "unauthorized_create": "You are not allowed to create features.",
         "unauthorized_update": "You are not allowed to update features.",
-        "instructions": "This is an approximate preview of your feature. Foreground, background, and markdown will not be displayed until the feature is saved."
+        "instructions": "This is an approximate preview of your feature. Foreground and background images, and parsed markdown will not be displayed until the feature is saved."
       },
       "untitled_record": "Untitled #{{number}}",
       "new_header": "New Feature",

client/src/frontend/components/layout/Splash/index.js

@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import * as Styled from "./styles";
 
 export default function Splash(props) {
-  const { preview, feature, authenticated } = props;
+  const { preview, feature, authenticated, previewAttrs } = props;
   const {
     style: mode,
     backgroundColor,
@@ -28,6 +28,21 @@ export default function Splash(props) {
     includeSignUp
   } = feature.attributes;
 
+  const renderedHeader = () => {
+    if (preview && previewAttrs?.header) return previewAttrs.header;
+    return headerFormatted || header;
+  };
+
+  const renderedSubheader = () => {
+    if (preview && previewAttrs?.subheader) return previewAttrs.subheader;
+    return subheaderFormatted || subheader;
+  };
+
+  const renderedBody = () => {
+    if (preview && previewAttrs?.body) return previewAttrs.body;
+    return bodyFormatted || body;
+  };
+
   return (
     <Styled.Wrapper
       $preview={preview}
@@ -40,20 +55,20 @@ export default function Splash(props) {
           <Styled.Heading
             $color={headerColor}
             dangerouslySetInnerHTML={{
-              __html: headerFormatted || header
+              __html: renderedHeader()
             }}
           />
           {(subheaderFormatted || subheader) && (
             <Styled.Subheading
               $color={headerColor}
               dangerouslySetInnerHTML={{
-                __html: subheaderFormatted || subheader
+                __html: renderedSubheader()
               }}
             />
           )}
           <Styled.Body
             $color={foregroundColor}
-            dangerouslySetInnerHTML={{ __html: bodyFormatted || body }}
+            dangerouslySetInnerHTML={{ __html: renderedBody() }}
           />
           <Styled.Buttons>
             {linkText && linkUrl ? (