Skip to content

Commit 4820285

Browse files
gabrielmferngabrielmfern
authored
fix(web): Discrepancies in copy-paste component variants (#2068)
1 parent 7fb56b9 commit 4820285

File tree

14 files changed

+257
-201
lines changed

14 files changed

+257
-201
lines changed

‎apps/web/components/bento-grid/inline-styles.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,22 @@ export const component = (
2121
<Body>
2222
<Container
2323
style={{
24-
backgroundColor: '#FFFFFF',
24+
backgroundColor: 'rgb(255,255,255)',
2525
borderRadius: '8px',
26-
margin: '0 auto',
26+
marginLeft: 'auto',
27+
marginRight: 'auto',
2728
maxWidth: '900px',
2829
overflow: 'hidden',
29-
padding: '0',
30+
padding: '0px',
3031
}}
3132
>
3233
<Section>
3334
<Row
3435
style={{
35-
backgroundColor: '#292524',
36+
backgroundColor: 'rgb(41,37,36)',
3637
borderCollapse: 'separate',
3738
borderSpacing: '24px',
38-
margin: '0',
39+
margin: '0px',
3940
tableLayout: 'fixed',
4041
width: '100%',
4142
}}
@@ -44,33 +45,34 @@ export const component = (
4445
<Heading
4546
as="h1"
4647
style={{
47-
color: '#FFFFFF',
48+
color: 'rgb(255,255,255)',
4849
fontSize: '28px',
49-
fontWeight: 'bold',
50-
margin: '0 0 10px 0',
50+
fontWeight: '700',
51+
marginBottom: '10px',
5152
}}
5253
>
5354
Coffee Storage
5455
</Heading>
5556
<Text
5657
style={{
57-
color: '#ffffff99',
58+
color: 'rgb(255,255,255,0.6)',
5859
fontSize: '14px',
5960
lineHeight: '20px',
60-
margin: 0,
61+
margin: '0px',
6162
}}
6263
>
6364
Keep your coffee fresher for longer with innovative technology.
6465
</Text>
6566
<Link
6667
href="#"
6768
style={{
68-
color: '#ffffffcc',
69+
color: 'rgb(255,255,255,0.8)',
6970
display: 'block',
7071
fontSize: '14px',
72+
lineHeight: '20px',
7173
fontWeight: '600',
7274
marginTop: '12px',
73-
textDecoration: 'none',
75+
textDecorationLine: 'none',
7476
}}
7577
>
7678
Shop now →
@@ -83,7 +85,7 @@ export const component = (
8385
style={{
8486
borderRadius: '4px',
8587
height: '100%',
86-
margin: '0 -6px 0 0',
88+
marginRight: '-6px',
8789
objectFit: 'cover',
8890
objectPosition: 'center',
8991
width: '100%',
@@ -94,7 +96,7 @@ export const component = (
9496
</Section>
9597
<Section
9698
style={{
97-
margin: '0 0 12px 0',
99+
marginBottom: '24px',
98100
}}
99101
>
100102
<Row
@@ -126,7 +128,8 @@ export const component = (
126128
<Column
127129
key={product.title}
128130
style={{
129-
margin: '0 auto',
131+
marginLeft: 'auto',
132+
marginRight: 'auto',
130133
maxWidth: '180px',
131134
}}
132135
>
@@ -144,18 +147,19 @@ export const component = (
144147
as="h2"
145148
style={{
146149
fontSize: '14px',
147-
fontWeight: 'bold',
148-
margin: '0 0 8px 0',
150+
lineHeight: '20px',
151+
fontWeight: '700',
152+
marginBottom: '8px',
149153
}}
150154
>
151155
{product.title}
152156
</Heading>
153157
<Text
154158
style={{
155-
color: '#6b7280',
159+
color: 'rgb(107,114,128)',
156160
fontSize: '12px',
157161
lineHeight: '20px',
158-
margin: '0',
162+
margin: '0px',
159163
paddingRight: '12px',
160164
}}
161165
>

‎apps/web/components/bento-grid/tailwind.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,22 @@ export const component = (
1919
<Head />
2020
<Preview>Coffee Storage</Preview>
2121
<Body>
22-
<Container className="bg-white rounded-lg mx-auto max-w-[900px] overflow-hidden p-0">
22+
<Container className="bg-white rounded-[8px] mx-auto max-w-[900px] overflow-hidden p-0">
2323
<Section>
24-
<Row className="bg-[#292524] border-separate border-spacing-[24px] m-0 table-fixed w-full">
25-
<Column className="pl-3">
24+
<Row className="bg-[rgb(41,37,36)] border-separate [border-spacing:24px] m-0 table-fixed w-full">
25+
<Column className="pl-[12px]">
2626
<Heading
2727
as="h1"
2828
className="text-white text-[28px] font-bold mb-[10px]"
2929
>
3030
Coffee Storage
3131
</Heading>
32-
<Text className="text-white/60 text-sm leading-[20px] m-0">
32+
<Text className="text-white/60 text-[14px] leading-[20px] m-0">
3333
Keep your coffee fresher for longer with innovative technology.
3434
</Text>
3535
<Link
3636
href="#"
37-
className="text-white/80 block text-sm font-semibold mt-3 no-underline"
37+
className="text-white/80 block text-[14px] leading-[20px] font-semibold mt-[12px] no-underline"
3838
>
3939
Shop now →
4040
</Link>
@@ -43,13 +43,13 @@ export const component = (
4343
<Img
4444
src="/static/coffee-bean-storage.jpg"
4545
alt="Coffee Bean Storage"
46-
className="rounded h-full -mr-[6px] object-cover object-center w-full"
46+
className="rounded-[4px] h-full -mr-[6px] object-cover object-center w-full"
4747
/>
4848
</Column>
4949
</Row>
5050
</Section>
51-
<Section className="mb-6">
52-
<Row className="border-separate border-spacing-[12px] table-fixed w-full">
51+
<Section className="mb-[24px]">
52+
<Row className="border-separate [border-spacing:12px] table-fixed w-full">
5353
{[
5454
{
5555
imageUrl: '/static/atmos-vacuum-canister.jpg',
@@ -72,13 +72,16 @@ export const component = (
7272
<Img
7373
src={product.imageUrl}
7474
alt={product.altText}
75-
className="rounded mb-[18px] w-full"
75+
className="rounded-[4px] mb-[18px] w-full"
7676
/>
7777
<div>
78-
<Heading as="h2" className="text-sm font-bold mb-[8px]">
78+
<Heading
79+
as="h2"
80+
className="text-[14px] leading-[20px] font-bold mb-[8px]"
81+
>
7982
{product.title}
8083
</Heading>
81-
<Text className="text-gray-500 text-xs leading-[20px] m-0 pr-3">
84+
<Text className="text-gray-500 text-[12px] leading-[20px] m-0 pr-[12px]">
8285
{product.description}
8386
</Text>
8487
</div>

‎apps/web/components/customer-reviews/inline-styles.tsx

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,15 @@ export const component = (
1919
<Body>
2020
<Container
2121
style={{
22-
backgroundColor: '#FFFFFF',
22+
backgroundColor: 'rgb(255,255,255)',
2323
borderRadius: '8px',
24-
margin: '0 auto',
24+
marginLeft: 'auto',
25+
marginRight: 'auto',
2526
maxWidth: '400px',
26-
padding: '24px 42px',
27+
paddingLeft: '42px',
28+
paddingRight: '42px',
29+
paddingTop: '24px',
30+
paddingBottom: '24px',
2731
}}
2832
>
2933
<Section>
@@ -34,16 +38,16 @@ export const component = (
3438
style={{
3539
display: 'flex',
3640
flexDirection: 'column',
37-
margin: '12px 0 0 0',
41+
marginTop: '12px',
3842
}}
3943
>
4044
<Text style={{ display: 'none' }}>4 out of 5 stars</Text>
4145
</div>
42-
<Section style={{ margin: '24px 0' }}>
46+
<Section style={{ marginTop: '24px', marginBottom: '24px' }}>
4347
<Heading as="h2" style={{ display: 'none' }}>
4448
Review data
4549
</Heading>
46-
<dl style={{ margin: '0' }}>
50+
<dl style={{ margin: '0px' }}>
4751
{[
4852
{ rating: 5, count: 1019 },
4953
{ rating: 4, count: 162 },
@@ -69,7 +73,7 @@ export const component = (
6973
>
7074
<Text
7175
style={{
72-
color: '#6B7280',
76+
color: 'rgb(107,114,128)',
7377
fontWeight: '500',
7478
width: '12px',
7579
}}
@@ -82,6 +86,7 @@ export const component = (
8286
style={{
8387
alignItems: 'center',
8488
flex: '1 1 0%',
89+
display: 'flex',
8590
marginLeft: '4px',
8691
}}
8792
>
@@ -94,8 +99,8 @@ export const component = (
9499
>
95100
<div
96101
style={{
97-
backgroundColor: '#f3f4f6',
98-
borderColor: '#e5e7eb',
102+
backgroundColor: 'rgb(243,244,246)',
103+
borderColor: 'rgb(229,231,235)',
99104
borderRadius: '6px',
100105
borderWidth: '1px',
101106
height: '12px',
@@ -104,11 +109,11 @@ export const component = (
104109
{count.count > 0 ? (
105110
<div
106111
style={{
107-
backgroundColor: '#4f46e5',
112+
backgroundColor: 'rgb(79,70,229)',
108113
borderRadius: '6px',
109-
bottom: '0',
114+
bottom: '0px',
110115
position: 'absolute',
111-
top: '0',
116+
top: '0px',
112117
width: `calc(${count.count} / ${1624} * 100%)`,
113118
}}
114119
/>
@@ -118,7 +123,7 @@ export const component = (
118123
</dt>
119124
<dd
120125
style={{
121-
color: '#6B7280',
126+
color: 'rgb(107,114,128)',
122127
fontSize: '12px',
123128
fontVariantNumeric: 'tabular-nums',
124129
fontWeight: '500',
@@ -134,10 +139,10 @@ export const component = (
134139
</dl>
135140
<Text
136141
style={{
137-
color: '#6B7280',
142+
color: 'rgb(107,114,128)',
138143
fontSize: '12px',
139144
lineHeight: '24px',
140-
margin: '14px 0 0 0',
145+
marginTop: '14px',
141146
textAlign: 'center',
142147
}}
143148
>
@@ -149,7 +154,7 @@ export const component = (
149154
<Heading
150155
as="h3"
151156
style={{
152-
color: '#111827',
157+
color: 'rgb(17,24,39)',
153158
fontSize: '18px',
154159
fontWeight: '500',
155160
lineHeight: '24px',
@@ -160,10 +165,10 @@ export const component = (
160165
</Heading>
161166
<Text
162167
style={{
163-
color: '#6B7280',
168+
color: 'rgb(107,114,128)',
164169
fontSize: '14px',
165170
lineHeight: '20px',
166-
margin: '0',
171+
margin: '0px',
167172
}}
168173
>
169174
If you’ve used this product, share your thoughts with other
@@ -172,13 +177,14 @@ export const component = (
172177
<Button
173178
href="#"
174179
style={{
175-
backgroundColor: '#4f46e5',
180+
backgroundColor: 'rgb(79,70,229)',
176181
borderRadius: '8px',
177182
boxSizing: 'border-box',
178-
color: '#fff',
183+
color: 'rgb(255,255,255)',
179184
display: 'inline-block',
180185
fontWeight: '600',
181-
margin: '26px 0 24px 0',
186+
marginTop: '26px',
187+
marginBottom: '24px',
182188
maxWidth: '100%',
183189
padding: '12px',
184190
textAlign: 'center',

0 commit comments

Comments
 (0)