Skip to content

Commit 3969708

Browse files
youssefeayoussefea
authored
Update Base Pay Logo (#144)
* update change logo * update button * update brand guidelines button
1 parent 76cfe6a commit 3969708

2 files changed

Lines changed: 150 additions & 6 deletions

File tree

‎docs/base-account/guides/accept-payments.mdx‎

Lines changed: 100 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,59 @@ USDC on Base is a fully-backed digital dollar that settles in seconds and costs
2121
If you intend on using the BasePayButton, please follow the [Brand Guidelines](/base-account/reference/ui-elements/brand-guidelines) to ensure consistency across your application.
2222

2323
<div style={{ display: 'flex', justifyContent: 'center' }}>
24-
<BasePayButton />
24+
<button
25+
type="button"
26+
style={{
27+
display: 'flex',
28+
alignItems: 'center',
29+
justifyContent: 'center',
30+
padding: '12px 16px',
31+
backgroundColor: '#ffffff',
32+
border: 'none',
33+
borderRadius: '8px',
34+
cursor: 'pointer',
35+
fontFamily: 'system-ui, -apple-system, sans-serif',
36+
minWidth: '180px',
37+
height: '44px'
38+
}}
39+
>
40+
<img
41+
src="/images/base-account/BasePayBlueLogo.png"
42+
alt="Base Pay"
43+
style={{
44+
height: '20px',
45+
width: 'auto'
46+
}}
47+
/>
48+
</button>
2549
</div>
2650
<br />
2751
<div style={{ display: 'flex', justifyContent: 'center' }}>
28-
<BasePayButton colorScheme="dark" />
52+
<button
53+
type="button"
54+
style={{
55+
display: 'flex',
56+
alignItems: 'center',
57+
justifyContent: 'center',
58+
padding: '12px 16px',
59+
backgroundColor: '#0000FF',
60+
border: 'none',
61+
borderRadius: '8px',
62+
cursor: 'pointer',
63+
fontFamily: 'system-ui, -apple-system, sans-serif',
64+
minWidth: '180px',
65+
height: '44px'
66+
}}
67+
>
68+
<img
69+
src="/images/base-account/BasePayWhiteLogo.png"
70+
alt="Base Pay"
71+
style={{
72+
height: '20px',
73+
width: 'auto'
74+
}}
75+
/>
76+
</button>
2977
</div>
3078

3179
</Warning>
@@ -132,11 +180,59 @@ See full props and theming options in the [Button Reference](/base-account/refer
132180
If you intend on using the BasePayButton, please follow the [Brand Guidelines](/base-account/reference/ui-elements/brand-guidelines) to ensure consistency across your application.
133181

134182
<div style={{ display: 'flex', justifyContent: 'center' }}>
135-
<BasePayButton />
183+
<button
184+
type="button"
185+
style={{
186+
display: 'flex',
187+
alignItems: 'center',
188+
justifyContent: 'center',
189+
padding: '12px 16px',
190+
backgroundColor: '#ffffff',
191+
border: 'none',
192+
borderRadius: '8px',
193+
cursor: 'pointer',
194+
fontFamily: 'system-ui, -apple-system, sans-serif',
195+
minWidth: '180px',
196+
height: '44px'
197+
}}
198+
>
199+
<img
200+
src="/images/base-account/BasePayBlueLogo.png"
201+
alt="Base Pay"
202+
style={{
203+
height: '20px',
204+
width: 'auto'
205+
}}
206+
/>
207+
</button>
136208
</div>
137209
<br />
138210
<div style={{ display: 'flex', justifyContent: 'center' }}>
139-
<BasePayButton colorScheme="dark" />
211+
<button
212+
type="button"
213+
style={{
214+
display: 'flex',
215+
alignItems: 'center',
216+
justifyContent: 'center',
217+
padding: '12px 16px',
218+
backgroundColor: '#0000FF',
219+
border: 'none',
220+
borderRadius: '8px',
221+
cursor: 'pointer',
222+
fontFamily: 'system-ui, -apple-system, sans-serif',
223+
minWidth: '180px',
224+
height: '44px'
225+
}}
226+
>
227+
<img
228+
src="/images/base-account/BasePayWhiteLogo.png"
229+
alt="Base Pay"
230+
style={{
231+
height: '20px',
232+
width: 'auto'
233+
}}
234+
/>
235+
</button>
140236
</div>
141237
</Warning>
142238

‎docs/base-account/reference/ui-elements/brand-guidelines.mdx‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,59 @@ For detailed technical integration steps and API references, please refer to the
109109
Integrating "Base Pay" offers one-click checkout for users with a Base Account. Integrate it into your product for easy purchase power for online and offline goods.
110110

111111
<div style={{ display: 'flex', justifyContent: 'center' }}>
112-
<BasePayButton />
112+
<button
113+
type="button"
114+
style={{
115+
display: 'flex',
116+
alignItems: 'center',
117+
justifyContent: 'center',
118+
padding: '12px 16px',
119+
backgroundColor: '#ffffff',
120+
border: 'none',
121+
borderRadius: '8px',
122+
cursor: 'pointer',
123+
fontFamily: 'system-ui, -apple-system, sans-serif',
124+
minWidth: '180px',
125+
height: '44px'
126+
}}
127+
>
128+
<img
129+
src="/images/base-account/BasePayBlueLogo.png"
130+
alt="Base Pay"
131+
style={{
132+
height: '20px',
133+
width: 'auto'
134+
}}
135+
/>
136+
</button>
113137
</div>
114138
<br />
115139
<div style={{ display: 'flex', justifyContent: 'center' }}>
116-
<BasePayButton colorScheme="dark" />
140+
<button
141+
type="button"
142+
style={{
143+
display: 'flex',
144+
alignItems: 'center',
145+
justifyContent: 'center',
146+
padding: '12px 16px',
147+
backgroundColor: '#0000FF',
148+
border: 'none',
149+
borderRadius: '8px',
150+
cursor: 'pointer',
151+
fontFamily: 'system-ui, -apple-system, sans-serif',
152+
minWidth: '180px',
153+
height: '44px'
154+
}}
155+
>
156+
<img
157+
src="/images/base-account/BasePayWhiteLogo.png"
158+
alt="Base Pay"
159+
style={{
160+
height: '20px',
161+
width: 'auto'
162+
}}
163+
/>
164+
</button>
117165
</div>
118166

119167
### Design & Brand Guidelines

0 commit comments

Comments
 (0)