PLANET-7512 Update Take Action Boxout styles (#2365)

This is to follow the design system
greenpeace · Sep 5, 2024 · c2bf18c · c2bf18c
1 parent 0f8deae
commit c2bf18c
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 160 deletions.
diff --git a/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js
@@ -167,17 +167,17 @@ export const TakeActionBoxoutEditor = ({
           withoutInteractiveFormatting
           allowedFormats={['core/bold', 'core/italic']}
         />
+        <RichText
+          tagName="div"
+          className="btn btn-primary"
+          placeholder={__('Button text', 'planet4-blocks-backend')}
+          value={linkText}
+          onChange={toAttribute('linkText')}
+          disabled={takeActionPageSelected}
+          withoutInteractiveFormatting
+          allowedFormats={[]}
+        />
       </div>
-      <RichText
-        tagName="div"
-        className="btn btn-action cover-card-btn"
-        placeholder={__('Button text', 'planet4-blocks-backend')}
-        value={linkText}
-        onChange={toAttribute('linkText')}
-        disabled={takeActionPageSelected}
-        withoutInteractiveFormatting
-        allowedFormats={[]}
-      />
     </section>
   );
 

diff --git a/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js
@@ -22,7 +22,7 @@ export const TakeActionBoxoutFrontend = ({
       href={link}
       {...newTab && {rel: 'noreferrer', target: '_blank'}}
     />
-    <img src={imageUrl} alt={imageAlt} />
+    {imageUrl ? <img src={imageUrl} alt={imageAlt} /> : <div className="boxout-placeholder" />}
     <div className="boxout-content">
       {title &&
         <a
@@ -38,18 +38,18 @@ export const TakeActionBoxoutFrontend = ({
       {excerpt &&
         <p className="boxout-excerpt" dangerouslySetInnerHTML={{__html: excerpt}} />
       }
+      {link && linkText &&
+        <a
+          className="btn btn-primary"
+          data-ga-category="Take Action Boxout"
+          data-ga-action="Call to Action"
+          data-ga-label="n/a"
+          href={link}
+          {...newTab && {rel: 'noreferrer', target: '_blank'}}
+        >
+          {linkText}
+        </a>
+      }
     </div>
-    {link && linkText &&
-      <a
-        className="btn btn-primary"
-        data-ga-category="Take Action Boxout"
-        data-ga-action="Call to Action"
-        data-ga-label="n/a"
-        href={link}
-        {...newTab && {rel: 'noreferrer', target: '_blank'}}
-      >
-        {linkText}
-      </a>
-    }
   </section>
 );
diff --git a/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss b/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss
@@ -20,8 +20,7 @@
 .boxout-image-container {
   position: relative;
   background: var(--grey-500);
-  height: 100%;
-  width: 336px;
+  width: 50%;
   padding: 0;
   display: flex;
   align-items: center;