66 lines
1.1 KiB
TypeScript
66 lines
1.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Card, CardBody } from '@wordpress/components';
|
|
import type { ReactNode } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
const StyledCard = styled( Card )`
|
|
border-radius: 3px;
|
|
`;
|
|
|
|
const StyledCardBody = styled( CardBody )`
|
|
padding: 24px;
|
|
|
|
// increasing the specificity of the styles to override the Gutenberg ones
|
|
&.is-size-medium.is-size-medium {
|
|
padding: 24px;
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
> * {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5em;
|
|
|
|
// fixing the spacing on the inputs and their help text, to ensure it is consistent
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
input,
|
|
select {
|
|
margin: 0;
|
|
}
|
|
|
|
// spacing adjustment on "Express checkouts > Show express checkouts on" list
|
|
ul > li:last-child {
|
|
margin-bottom: 0;
|
|
|
|
.components-base-control__field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const SettingsCard = ( {
|
|
children,
|
|
...props
|
|
}: {
|
|
children: ReactNode;
|
|
} ): JSX.Element => (
|
|
<StyledCard>
|
|
<StyledCardBody { ...props }>{ children }</StyledCardBody>
|
|
</StyledCard>
|
|
);
|
|
|
|
export default SettingsCard;
|