Skip to content

Commit 95c4137

Browse files
billy-lebilly-le
authored
replaced Branding page styles with tw (#1942)
* replaced Branding page styles with tw * simplify tw margin
1 parent 93f07ab commit 95c4137

6 files changed

Lines changed: 18 additions & 26 deletions

File tree

‎components/Branding/LogoSection/LogoSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function LogoSection() {
3939
theme="gray"
4040
hasTitleUnderline
4141
columns={[
42-
<ul className="space-y-4">
42+
<ul className="space-y-4 [&>li>p]:my-4">
4343
{/* - SMALL LOGOS - */}
4444
<li>
4545
<h5 className="text-center">Small Logos</h5>

‎components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`LogoSection > should render with required props 1`] = `
55
columns={
66
[
77
<ul
8-
className="space-y-4"
8+
className="space-y-4 [&>li>p]:my-4"
99
>
1010
<li>
1111
<h5

‎components/Branding/Swatch/Swatch.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ export interface Swatch {
1313

1414
function Swatch({ colorName, hexCode }: Swatch) {
1515
return (
16-
<figure className="border-1 border-solid border-[#333333] p-4 m-6 w-56">
16+
<figure className="border border-solid border-theme-gray-800 p-4 m-6 w-56">
1717
<ScreenReaderOnly>{`A block of the color ${colorName}`}</ScreenReaderOnly>
1818

19-
<div className="h-56 mb-4" style={{ backgroundColor: hexCode }} />
19+
<div
20+
className="h-56 mb-4 border border-solid border-theme-gray-800"
21+
style={{ backgroundColor: hexCode }}
22+
/>
2023

2124
<figcaption>
2225
<h6>{colorName.toUpperCase()}</h6>

‎components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
exports[`Swatch > should render with required props 1`] = `
44
<figure
5-
className="border-1 border-solid border-[#333333] p-4 m-6 w-56"
5+
className="border border-solid border-theme-gray-800 p-4 m-6 w-56"
66
>
77
<ScreenReaderOnly>
88
A block of the color Blue
99
</ScreenReaderOnly>
1010
<div
11-
className="h-56 mb-4"
11+
className="h-56 mb-4 border border-solid border-theme-gray-800"
1212
style={
1313
{
1414
"backgroundColor": "#0000FF",

‎pages/branding.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,39 @@ import ColorSection from 'components/Branding/ColorSection/ColorSection';
55
import FontSection from 'components/Branding/FontSection/FontSection';
66
import OutboundLink from 'components/OutboundLink/OutboundLink';
77
import { s3 } from 'common/constants/urls';
8-
import { cx } from 'common/utils/cva';
9-
import styles from 'styles/branding.module.css';
108

119
const pageTitle = 'Branding Guide';
1210

1311
function Branding() {
1412
return (
15-
<div className={cx(styles.Branding, '[*_p]:px-4')}>
13+
<>
1614
<Head title={pageTitle} />
1715

1816
<HeroBanner className="min-h-dvh" title={pageTitle}>
19-
<h6 className="text-center">
17+
<h6 className="text-center mb-4">
2018
For external organizations, corporate sponsors and press, please obtain specific guidance
2119
and approval from the Director of Communications prior to using Operation Code Branding on
2220
public platforms. You may email your request to marketing@operationcode.org
2321
</h6>
2422

25-
<br />
23+
<h6>General Guidelines</h6>
2624

27-
<h6 className={styles.topMargin}>General Guidelines</h6>
28-
29-
<p>
25+
<p className="m-4">
3026
The size ratio between the star and the medallion changes depending on the size of
3127
reproduction. Please make use of the appropriate sized logo when creating collateral.
3228
</p>
3329

34-
<p>
30+
<p className="m-4">
3531
In most cases, use the blue-accent version of the logo. The red-accent is delivered for
3632
special uses only.
3733
</p>
3834

39-
<p>
35+
<p className="m-4">
4036
Please note: Images may appear larger or smaller than they appear on your device, but the
4137
files linked are &quot;large&quot; or &quot;small&quot; as described.
4238
</p>
4339

44-
<p>
40+
<p className="m-4">
4541
View{' '}
4642
<a
4743
rel="noreferrer"
@@ -52,7 +48,7 @@ function Branding() {
5248
</a>
5349
</p>
5450

55-
<p>
51+
<p className="m-4">
5652
<OutboundLink
5753
analyticsEventLabel="Branding EPS Download"
5854
href={`${s3}Operation-Code-Logo.eps`}
@@ -65,7 +61,7 @@ function Branding() {
6561
<LogoSection />
6662
<ColorSection />
6763
<FontSection />
68-
</div>
64+
</>
6965
);
7066
}
7167

‎styles/branding.module.css‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)