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:
parent
0f199daaa5
commit
d8ce8287f6
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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.
|
Loading…
Reference in New Issue