Skip to content

Commit 4d2ee3f

Browse files
AndyMBridgesAndyMBridges
committed
update container and font sizes to support wide-screen display
1 parent 8b0a7e7 commit 4d2ee3f

File tree

14 files changed

+135
-109
lines changed

14 files changed

+135
-109
lines changed

‎src/components/Accordion/accordion.module.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.accordion {
1212
background: var(--accordion-background);
1313
border-radius: 8px;
14-
margin-bottom: 24px;
14+
margin-bottom: 2rem;
1515

1616
.header {
1717
display: flex;
@@ -21,17 +21,17 @@
2121

2222
.closeButton {
2323
cursor: pointer;
24-
margin-left: 24px;
25-
margin-right: 24px;
24+
margin-left: 2rem;
25+
margin-right: 2rem;
2626
display: flex;
27-
height: 16px;
27+
height: 1rem;
2828
line-height: 1;
2929

3030
.image {
31-
min-width: 16px;
32-
width: 16px;
33-
min-height: 16px;
34-
height: 16px;
31+
min-width: 1rem;
32+
width: 1rem;
33+
min-height: 1rem;
34+
height: 1rem;
3535
transition: all 0.5s;
3636
transform: rotate(45deg);
3737

‎src/components/AuthLogin/AuthModal.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import { REQUEST_PARAMS } from '@site/src/lib/constants'
1717
import { MetamaskProviderContext } from '@site/src/theme/Root'
1818
import Button from '@site/src/components/elements/buttons/button'
19+
import Text from '@site/src/components/Text'
1920

2021
Modal.setAppElement('#__docusaurus')
2122
type AuthModalProps = {
@@ -47,10 +48,12 @@ const ConnectingModal = () => {
4748
<img src="/img/spinner.png" className={styles.spinner} />
4849
<Icon name="metamask" classes={styles.metamask} />
4950
</div>
50-
<div className={styles.heading}>Waiting for MetaMask</div>
51-
<div className={styles.content}>
51+
<Text as="p" className={styles.heading}>
52+
Waiting for MetaMask
53+
</Text>
54+
<Text as="p" className={styles.content}>
5255
Don’t close or exit this window. Please continue connecting on your extension.
53-
</div>
56+
</Text>
5457
</>
5558
)
5659
}
@@ -62,12 +65,16 @@ const ConnectionSuccessModal = () => {
6265
<Icon name="spinner-success" classes={styles.spinner} />
6366
<Icon name="metamask" classes={styles.metamask} />
6467
</div>
65-
<div className={styles.heading}>Wallet Connected!</div>
66-
<div className={styles.content}>
67-
Your wallet is successfully connected.
68-
<br />
69-
You’re all set!
70-
</div>
68+
<Text as="p" className={styles.heading}>
69+
Wallet Connected!
70+
</Text>
71+
<Text as="p" className={styles.content}>
72+
<span>
73+
Your wallet is successfully connected.
74+
<br />
75+
You’re all set!
76+
</span>
77+
</Text>
7178
</>
7279
)
7380
}
@@ -91,10 +98,14 @@ const ConnectionErrorModal = ({
9198
<Icon name="spinner-error" classes={styles.spinner} />
9299
<Icon name="metamask" classes={styles.metamask} />
93100
</div>
94-
<div className={styles.heading}>There was an issue connecting your wallet</div>
95-
<div className={styles.content}>
96-
Please try again or <a href="https://support.metamask.io/">contact us</a>.
97-
</div>
101+
<Text as="p" className={styles.heading}>
102+
There was an issue connecting your wallet
103+
</Text>
104+
<Text as="p" className={styles.content}>
105+
<span>
106+
Please try again or <a href="https://support.metamask.io/">contact us</a>.
107+
</span>
108+
</Text>
98109
<div className={styles.flexButton}>
99110
<Button as="button" onClick={handleCancel} label={'Cancel'} />
100111
<Button as="button" onClick={login} label={'Retry'} />

‎src/components/AuthLogin/styles.module.scss‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,33 +22,34 @@
2222
transform: translate(-50%, -50%);
2323
overflow: auto;
2424
outline: none;
25-
/* background: var(--background-default, #24272a); */
2625
background: var(--modal-bg-color-primary);
27-
width: 360px;
28-
padding: 16px;
29-
border-radius: 8px;
26+
width: 60%;
27+
padding: 1.4rem;
28+
border-radius: 1rem;
3029
margin: auto;
3130
text-align: center;
31+
@include bp(desktop) {
32+
width: 20%;
33+
}
3234
}
3335

3436
.modalContent {
3537
color: #fff;
36-
37-
--font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;
38-
3938
position: relative;
4039
}
4140

4241
.modalClose {
4342
position: absolute;
4443
top: 0;
4544
right: 0;
46-
width: 24px;
47-
height: 24px;
45+
width: 2rem;
46+
height: 2rem;
4847
border: 0;
4948
background: transparent;
5049
cursor: pointer;
5150
svg {
51+
width: 2rem;
52+
height: 2rem;
5253
path {
5354
fill: var(--modal-font-color-primary);
5455
}
@@ -59,8 +60,8 @@
5960
display: flex;
6061
align-items: center;
6162
position: relative;
62-
width: 60px;
63-
height: 60px;
63+
width: 5rem;
64+
height: 5rem;
6465
margin: auto;
6566
}
6667

@@ -69,9 +70,13 @@
6970
position: absolute;
7071
top: 0;
7172
left: 0;
72-
width: 60px;
73-
height: 60px;
73+
width: 5rem;
74+
height: 5rem;
7475
animation: rotating 3s linear infinite;
76+
svg {
77+
width: 5rem;
78+
height: 5rem;
79+
}
7580
}
7681

7782
@keyframes spinner /* Safari and Chrome */ {
@@ -97,21 +102,22 @@
97102
.metamask {
98103
display: block;
99104
margin: auto;
100-
width: 30px;
101-
height: 28px;
105+
width: 2rem;
106+
height: 2.4rem;
107+
svg {
108+
width: 2rem;
109+
height: 2.4rem;
110+
}
102111
}
103112

104113
.heading {
105-
font-size: 18px;
106114
font-weight: 500;
107-
line-height: 24px;
108-
margin: 12px 0 0;
115+
margin: 1rem 0 0;
109116
color: var(--modal-font-color-primary);
110117
}
111118

112119
.content {
113120
margin: 12px 0;
114-
font-size: 16px;
115121
color: var(--modal-font-color-primary);
116122
}
117123

‎src/components/CustomReferencePage/styles.module.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
}
1111

1212
.contentWrapper {
13-
max-width: 1440px;
1413
margin: 0 auto;
1514
}
1615

@@ -24,7 +23,6 @@
2423
}
2524
}
2625

27-
2826
@media (width >= 997px) {
2927
.sidebarViewport {
3028
height: 100%;
@@ -42,7 +40,7 @@
4240
border-right: 1px solid var(--ifm-toc-border-color);
4341
}
4442

45-
.sidebar>div {
43+
.sidebar > div {
4644
padding-top: 0 !important;
4745
}
48-
}
46+
}

‎src/components/Faucet/faq.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.accordionHeader {
22
margin: 0;
3-
padding: 24px;
3+
padding: 2rem;
44
}
55
.accordionContainer {
66
margin: 0;

‎src/components/Faucet/hero.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
.heroWrapper {
2828
width: calc(100% - var(--page-padding-x) * 2);
2929
margin: 0 auto;
30+
@include bp(desktop) {
31+
max-width: 70%;
32+
}
3033
}
3134

3235
.hero {
@@ -57,7 +60,7 @@
5760

5861
.inputCont {
5962
width: 100%;
60-
max-width: 600px;
63+
max-width: 40%;
6164

6265
@media screen and (max-width: 996px) {
6366
max-width: 100%;
@@ -82,24 +85,21 @@
8285
}
8386
input {
8487
height: 4.2rem;
88+
font-size: inherit;
8589
margin-bottom: 0;
8690
cursor: auto;
8791
}
8892
}
8993

9094
.caption {
91-
font-size: 12px;
92-
font-style: normal;
93-
font-weight: 400;
94-
line-height: 20px;
9595
margin-bottom: 0;
9696
}
9797
}
9898

9999
.alignedButtons {
100100
display: flex;
101101
align-items: flex-end;
102-
margin-left: 8px;
102+
margin-left: 1rem;
103103
@media screen and (max-width: 996px) {
104104
width: 100%;
105105
margin-top: 1rem;

‎src/components/Faucet/maintenance.module.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.maintenance {
1212
background: rgba(0, 0, 0, 0.4);
1313
position: absolute;
14-
top: -74px;
14+
top: -100%;
1515
bottom: 0;
1616
left: 0;
1717
right: 0;
@@ -20,13 +20,13 @@
2020

2121
.modal {
2222
position: sticky;
23-
top: 80px;
23+
top: 30%;
2424
width: 100%;
25-
max-width: 480px;
25+
max-width: 80%;
2626
margin: 0 auto;
27-
padding: 16px;
27+
padding: 1.4rem;
2828
text-align: center;
29-
border-radius: 8px;
29+
border-radius: 1rem;
3030
background: var(--maintenance-modal-background);
3131
box-shadow:
3232
0px 0px 16px 0px var(--maintenance-modal-shadow),
@@ -36,6 +36,10 @@
3636
0px 4px 4px 0px var(--maintenance-modal-shadow),
3737
0px 2px 2px 0px var(--maintenance-modal-shadow);
3838

39+
@include bp(desktop) {
40+
max-width: 25%;
41+
}
42+
3943
.button {
4044
padding: 0 36px;
4145
}

‎src/components/Input/input.module.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
:root[data-theme="dark"] {
1+
:root[data-theme='dark'] {
22
--input-border: #848c96;
33
--input-background: #24272a;
44
--input-color: #fff;
55
--input-error: #e06470;
66
}
77

8-
:root[data-theme="light"] {
8+
:root[data-theme='light'] {
99
--input-border: #bbc0c5;
1010
--input-background: #fff;
1111
--input-color: #141618;
@@ -17,29 +17,24 @@
1717

1818
.label {
1919
text-overflow: ellipsis;
20-
font-size: 14px;
2120
font-style: normal;
2221
font-weight: 500;
23-
line-height: 22px;
2422
margin-bottom: 0;
2523
}
2624

2725
.input {
2826
display: flex;
2927
height: 48px;
30-
padding: 12px 16px;
28+
padding: 1rem;
3129
align-items: center;
3230
gap: 10px;
3331
align-self: stretch;
34-
border-radius: 8px;
32+
border-radius: 1rem;
3533
border: 1px solid var(--input-border);
3634
background: var(--input-background);
3735
overflow: hidden;
3836
color: var(--input-color);
39-
font-size: 14px;
4037
font-style: normal;
41-
font-weight: 400;
42-
line-height: 22px;
4338
outline: none;
4439
width: 100%;
4540
margin-bottom: 4px;

‎src/components/NavbarWallet/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Tooltip } from '@site/src/components/Tooltip'
1212
import { trackClickForSegment } from '@site/src/lib/segmentAnalytics'
1313
import Link from '@docusaurus/Link'
1414
import { useColorMode } from '@docusaurus/theme-common'
15+
import Text from '@site/src/components/Text'
1516

1617
interface INavbarWalletComponent {
1718
includeUrl: string[]
@@ -182,9 +183,9 @@ const NavbarWalletComponent: FC = ({ includeUrl = [] }: INavbarWalletComponent)
182183
<div>
183184
<div className={styles.innerItemWrap}>
184185
<img src="/img/icons/jazzicon.png" className={styles.avatar} alt="avatar" />{' '}
185-
<span className={styles.walletId}>
186+
<Text as="p" className={styles.walletId}>
186187
{metaMaskAccountEns || reformatMetamaskAccount(userAccount)}
187-
</span>
188+
</Text>
188189
<button
189190
data-testid="navbar-account-copy"
190191
className={styles.copyButton}
@@ -212,7 +213,6 @@ const NavbarWalletComponent: FC = ({ includeUrl = [] }: INavbarWalletComponent)
212213
</li>
213214
<li className={styles.item}>
214215
<DisconnectButton
215-
thin
216216
type="danger"
217217
testId="navbar-account-disconnect"
218218
onClick={handleDisconnect}

0 commit comments

Comments
 (0)