Skip to content

Commit f82ff1f

Browse files
markchernovMark Chernov
markchernov
and
Mark Chernov
authored
Replace img usages with next/image (#1585)
Co-authored-by: Mark Chernov <[email protected]>
1 parent 66a3aea commit f82ff1f

File tree

22 files changed

+280
-94
lines changed

22 files changed

+280
-94
lines changed

‎components/Branding/LogoSection/LogoSection.js

Lines changed: 79 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import classNames from 'classnames';
22
import Badge from 'components/Badge/Badge';
33
import Content from 'components/Content/Content';
44
import { s3 } from 'common/constants/urls';
5+
import Image from 'next/image';
56
import styles from './LogoSection.module.css';
67

78
function LogoSection() {
@@ -29,9 +30,11 @@ function LogoSection() {
2930
<li>
3031
<Badge
3132
icon={
32-
<img
33+
<Image
3334
src={`${s3}branding/logos/small-blue-logo.png`}
3435
alt="Small Blue Accented Logo"
36+
width={318}
37+
height={60}
3538
/>
3639
}
3740
isImageFirst={false}
@@ -41,9 +44,11 @@ function LogoSection() {
4144
<li>
4245
<Badge
4346
icon={
44-
<img
47+
<Image
4548
src={`${s3}branding/logos/small-red-logo.png`}
4649
alt="Small Red Accented Logo"
50+
width={318}
51+
height={60}
4752
/>
4853
}
4954
isImageFirst={false}
@@ -53,9 +58,11 @@ function LogoSection() {
5358
<li>
5459
<Badge
5560
icon={
56-
<img
61+
<Image
5762
src={`${s3}branding/logos/small-logo.png`}
5863
alt="Small Unaccented Logo"
64+
width={318}
65+
height={60}
5966
/>
6067
}
6168
isImageFirst={false}
@@ -65,9 +72,11 @@ function LogoSection() {
6572
<li>
6673
<Badge
6774
icon={
68-
<img
75+
<Image
6976
src={`${s3}branding/logos/small-white-logo.png`}
7077
alt="Small White Accented Logo"
78+
width={318}
79+
height={60}
7180
/>
7281
}
7382
isImageFirst={false}
@@ -89,9 +98,11 @@ function LogoSection() {
8998
<li>
9099
<Badge
91100
icon={
92-
<img
101+
<Image
93102
src={`${s3}branding/logos/small-stacked-logo-blue.png`}
94103
alt="Large Stacked Original"
104+
width={270}
105+
height={226}
95106
/>
96107
}
97108
isImageFirst={false}
@@ -101,9 +112,11 @@ function LogoSection() {
101112
<li>
102113
<Badge
103114
icon={
104-
<img
115+
<Image
105116
src={`${s3}branding/logos/small-stacked-logo-red.png`}
106117
alt="Red Stacked Logo"
118+
width={270}
119+
height={226}
107120
/>
108121
}
109122
isImageFirst={false}
@@ -113,9 +126,11 @@ function LogoSection() {
113126
<li>
114127
<Badge
115128
icon={
116-
<img
129+
<Image
117130
src={`${s3}branding/logos/small-stacked-logo.png`}
118131
alt="Light Stacked Logo"
132+
width={270}
133+
height={226}
119134
/>
120135
}
121136
isImageFirst={false}
@@ -138,23 +153,40 @@ function LogoSection() {
138153
<li>
139154
<Badge
140155
icon={
141-
<img src={`${s3}branding/logos/large-blue-medal.png`} alt="OC Blue Medal" />
156+
<Image
157+
src={`${s3}branding/logos/large-blue-medal.png`}
158+
alt="OC Blue Medal"
159+
width={300}
160+
height={404}
161+
/>
142162
}
143163
isImageFirst={false}
144164
label="Blue"
145165
/>
146166
</li>
147167
<li>
148168
<Badge
149-
icon={<img src={`${s3}branding/logos/large-red-medal.png`} alt="Red Medal" />}
169+
icon={
170+
<Image
171+
src={`${s3}branding/logos/large-red-medal.png`}
172+
alt="Red Medal"
173+
width={300}
174+
height={404}
175+
/>
176+
}
150177
isImageFirst={false}
151178
label="Red"
152179
/>
153180
</li>
154181
<li>
155182
<Badge
156183
icon={
157-
<img src={`${s3}branding/logos/large-slate-medal.png`} alt="Navy Medal" />
184+
<Image
185+
src={`${s3}branding/logos/large-slate-medal.png`}
186+
alt="Navy Medal"
187+
width={300}
188+
height={404}
189+
/>
158190
}
159191
isImageFirst={false}
160192
label="Navy"
@@ -176,7 +208,12 @@ function LogoSection() {
176208
<li>
177209
<Badge
178210
icon={
179-
<img src={`${s3}branding/logos/large-blue-medal.png`} alt="OC Blue Badge" />
211+
<Image
212+
src={`${s3}branding/logos/large-blue-medal.png`}
213+
alt="OC Blue Badge"
214+
width={300}
215+
height={404}
216+
/>
180217
}
181218
isImageFirst={false}
182219
label="OC Blue Badge"
@@ -185,15 +222,29 @@ function LogoSection() {
185222

186223
<li>
187224
<Badge
188-
icon={<img src={`${s3}branding/logos/large-red-medal.png`} alt="Red Badge" />}
225+
icon={
226+
<Image
227+
src={`${s3}branding/logos/large-red-medal.png`}
228+
alt="Red Badge"
229+
width={300}
230+
height={404}
231+
/>
232+
}
189233
isImageFirst={false}
190234
label="Red Badge"
191235
/>
192236
</li>
193237

194238
<li>
195239
<Badge
196-
icon={<img src={`${s3}branding/logos/large-slate-medal.png`} alt="Navy" />}
240+
icon={
241+
<Image
242+
src={`${s3}branding/logos/large-slate-medal.png`}
243+
alt="Navy"
244+
width={300}
245+
height={404}
246+
/>
247+
}
197248
isImageFirst={false}
198249
label="Navy Badge"
199250
/>
@@ -221,9 +272,11 @@ function LogoSection() {
221272
<li>
222273
<Badge
223274
icon={
224-
<img
275+
<Image
225276
src={`${s3}branding/logos/large-blue-logo.png`}
226277
alt="Original Large Logo"
278+
width={384}
279+
height={70}
227280
/>
228281
}
229282
isImageFirst={false}
@@ -234,7 +287,12 @@ function LogoSection() {
234287
<li>
235288
<Badge
236289
icon={
237-
<img src={`${s3}branding/logos/large-red-logo.png`} alt="Red Large Logo" />
290+
<Image
291+
src={`${s3}branding/logos/large-red-logo.png`}
292+
alt="Red Large Logo"
293+
width={384}
294+
height={70}
295+
/>
238296
}
239297
isImageFirst={false}
240298
label="Red"
@@ -244,9 +302,11 @@ function LogoSection() {
244302
<li>
245303
<Badge
246304
icon={
247-
<img
305+
<Image
248306
src={`${s3}branding/logos/large-logo.png`}
249307
alt="Large Unaccented Logo"
308+
width={384}
309+
height={70}
250310
/>
251311
}
252312
isImageFirst={false}
@@ -257,9 +317,11 @@ function LogoSection() {
257317
<li>
258318
<Badge
259319
icon={
260-
<img
320+
<Image
261321
src={`${s3}branding/logos/large-white-logo.png`}
262322
alt="Large White Accented Logo"
323+
width={384}
324+
height={70}
263325
/>
264326
}
265327
isImageFirst={false}

0 commit comments

Comments
 (0)