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>
This commit is contained in:
Raja sekar 2024-09-12 18:28:48 +05:30 committed by Karol Manijak
parent 0f199daaa5
commit d8ce8287f6
4 changed files with 16 additions and 18 deletions

View File

@ -2,7 +2,8 @@
.woocommerce-marketplace__footer { .woocommerce-marketplace__footer {
background: $gray-0; background: $gray-0;
border-top: 1px solid $gray-200; border-radius: 4px;
max-width: 1600px;
margin: auto; margin: auto;
padding: $content-spacing-xlarge $content-spacing-small; padding: $content-spacing-xlarge $content-spacing-small;
@ -34,16 +35,6 @@
gap: $large-gap; 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) { @media screen and (min-width: $breakpoint-medium) {
.woocommerce-marketplace__footer { .woocommerce-marketplace__footer {
padding: $content-spacing-xlarge $content-spacing-large; padding: $content-spacing-xlarge $content-spacing-large;

View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { check, commentContent, shield } from '@wordpress/icons'; import { check, commentContent, shield, people } from '@wordpress/icons';
import { createInterpolateElement } from '@wordpress/element'; import { createInterpolateElement } from '@wordpress/element';
/** /**
@ -10,7 +10,6 @@ import { createInterpolateElement } from '@wordpress/element';
*/ */
import './footer.scss'; import './footer.scss';
import IconWithText from '../icon-with-text/icon-with-text'; import IconWithText from '../icon-with-text/icon-with-text';
import WooIcon from '../../assets/images/woo-icon.svg';
import { MARKETPLACE_HOST } from '../constants'; import { MARKETPLACE_HOST } from '../constants';
const refundPolicyTitle = createInterpolateElement( const refundPolicyTitle = createInterpolateElement(
@ -71,10 +70,14 @@ function FooterContent(): JSX.Element {
'woocommerce' 'woocommerce'
) } ) }
/> />
</div> <IconWithText
<div className="woocommerce-marketplace__footer-logo"> icon={ people }
<img src={ WooIcon } alt="Woo Logo" aria-hidden="true" /> title={ __( 'Support the ecosystem', 'woocommerce' ) }
<span>{ __( 'Woo Marketplace', 'woocommerce' ) }</span> description={ __(
'Our team and partners are continuously improving your extensions, themes, and WooCommerce experience.',
'woocommerce'
) }
/>
</div> </div>
</div> </div>
); );

View File

@ -11,7 +11,7 @@ import './icon-with-text.scss';
export interface IconWithTextProps { export interface IconWithTextProps {
icon: JSX.Element; icon: JSX.Element;
title: ReactElement; title: ReactElement | string;
description: string; description: string;
} }

View File

@ -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.