fix: project views and icons for intros (#36811)

client/src/components/Map/components/Block.js

@@ -10,10 +10,10 @@ import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import { completedChallengesSelector } from '../../../redux';
 import Caret from '../../../assets/icons/Caret';
 import { blockNameify } from '../../../../utils/blockNameify';
-/* eslint-disable max-len */
 import GreenPass from '../../../assets/icons/GreenPass';
 import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
-/* eslint-enable max-len */
+import IntroInformation from '../../../assets/icons/IntroInformation';
+
 const mapStateToProps = (state, ownProps) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
 
@@ -95,7 +95,11 @@ export class Block extends Component {
           key={'map-challenge' + challenge.fields.slug}
         >
           <span className='badge map-badge'>
-            {i !== 0 && this.renderCheckMark(challenge.isCompleted)}
+            {i === 0 ? (
+              <IntroInformation style={mapIconStyle} />
+            ) : (
+              this.renderCheckMark(challenge.isCompleted)
+            )}
           </span>
           <Link
             onClick={this.handleChallengeClick(challenge.fields.slug)}

client/src/components/Map/components/__snapshots__/Block.test.js.snap

@@ -74,7 +74,17 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
     >
       <span
         className="badge map-badge"
-      />
+      >
+        <IntroInformation
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
       <mockConstructor
         onClick={[Function]}
         to="/super-block-one/block-a"

client/src/components/formHelpers/FormFields.js

@@ -15,7 +15,7 @@ const propTypes = {
   fields: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   options: PropTypes.shape({
     ignored: PropTypes.arrayOf(PropTypes.string),
-    placeholder: PropTypes.bool,
+    placeholders: PropTypes.objectOf(PropTypes.string),
     required: PropTypes.arrayOf(PropTypes.string),
     types: PropTypes.objectOf(PropTypes.string)
   })
@@ -25,7 +25,7 @@ function FormFields(props) {
   const { fields, options = {} } = props;
   const {
     ignored = [],
-    placeholder = true,
+    placeholders = {},
     required = [],
     types = {}
   } = options;
@@ -38,6 +38,8 @@ function FormFields(props) {
             {({ input: { value, onChange }, meta: { pristine, error } }) => {
               const key = kebabCase(name);
               const type = name in types ? types[name] : 'text';
+              const placeholder =
+                name in placeholders ? placeholders[name] : '';
               return (
                 <Col key={key} xs={12}>
                   <FormGroup>
@@ -51,7 +53,7 @@ function FormFields(props) {
                       id={key}
                       name={name}
                       onChange={onChange}
-                      placeholder={placeholder ? name : ''}
+                      placeholder={placeholder}
                       required={required.includes(name)}
                       rows={4}
                       type={type}