From 97182ef9ca7770faf6e36f6292084e5ce96d5882 Mon Sep 17 00:00:00 2001
From: Raja sekar <raja.sekar.manimaran@automattic.com>
Date: Thu, 12 Sep 2024 18:28:48 +0530
Subject: [PATCH] Changes to IAM footer (#51315)

* add max-width and border raidus to footer container
- to make it look similar to design your own theme box

* remove marketplace copy from footer

* add another tab to footer

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

* add feedback on code

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../marketplace/components/footer/footer.scss     | 13 ++-----------
 .../marketplace/components/footer/footer.tsx      | 15 +++++++++------
 .../components/icon-with-text/icon-with-text.tsx  |  2 +-
 ...5-update-wccom-21574-in-app-marketplace-footer |  4 ++++
 4 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/51315-update-wccom-21574-in-app-marketplace-footer

diff --git a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
index 7ca6592b5e2..f659836081a 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
@@ -2,7 +2,8 @@
 
 .woocommerce-marketplace__footer {
 	background: $gray-0;
-	border-top: 1px solid $gray-200;
+	border-radius: 4px;
+	max-width: 1600px;
 	margin: auto;
 	padding: $content-spacing-xlarge $content-spacing-small;
 
@@ -34,16 +35,6 @@
 	gap: $large-gap;
 }
 
-.woocommerce-marketplace__footer-logo {
-	color: $wp-gray-50;
-	display: flex;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 20px;
-	gap: $small-gap;
-	margin: 48px 0 0;
-}
-
 @media screen and (min-width: $breakpoint-medium) {
 	.woocommerce-marketplace__footer {
 		padding: $content-spacing-xlarge $content-spacing-large;
diff --git a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.tsx b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.tsx
index 53accc69dd7..d68e01a27a9 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { check, commentContent, shield } from '@wordpress/icons';
+import { check, commentContent, shield, people } from '@wordpress/icons';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
@@ -10,7 +10,6 @@ import { createInterpolateElement } from '@wordpress/element';
  */
 import './footer.scss';
 import IconWithText from '../icon-with-text/icon-with-text';
-import WooIcon from '../../assets/images/woo-icon.svg';
 import { MARKETPLACE_HOST } from '../constants';
 
 const refundPolicyTitle = createInterpolateElement(
@@ -71,10 +70,14 @@ function FooterContent(): JSX.Element {
 						'woocommerce'
 					) }
 				/>
-			</div>
-			<div className="woocommerce-marketplace__footer-logo">
-				<img src={ WooIcon } alt="Woo Logo" aria-hidden="true" />
-				<span>{ __( 'Woo Marketplace', 'woocommerce' ) }</span>
+				<IconWithText
+					icon={ people }
+					title={ __( 'Support the ecosystem', 'woocommerce' ) }
+					description={ __(
+						'Our team and partners are continuously improving your extensions, themes, and WooCommerce experience.',
+						'woocommerce'
+					) }
+				/>
 			</div>
 		</div>
 	);
diff --git a/plugins/woocommerce-admin/client/marketplace/components/icon-with-text/icon-with-text.tsx b/plugins/woocommerce-admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
index 1eec0b67a9d..7f5867a9ff5 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/icon-with-text/icon-with-text.tsx
@@ -11,7 +11,7 @@ import './icon-with-text.scss';
 
 export interface IconWithTextProps {
 	icon: JSX.Element;
-	title: ReactElement;
+	title: ReactElement | string;
 	description: string;
 }
 
diff --git a/plugins/woocommerce/changelog/51315-update-wccom-21574-in-app-marketplace-footer b/plugins/woocommerce/changelog/51315-update-wccom-21574-in-app-marketplace-footer
new file mode 100644
index 00000000000..7f77d1fe125
--- /dev/null
+++ b/plugins/woocommerce/changelog/51315-update-wccom-21574-in-app-marketplace-footer
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Update footer design, add one more element to footer content and remove `woo-marketplace` copy at footer bottom.
\ No newline at end of file