mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
bde74756d3
* feat: add desktop enable button component This component will be added to the experimental page. Users will then be able to initialize a desktop connection * feat: add desktop pairing page * feat: add desktop deep-linking shared lib * test: add initial entries to render helper Allow specifying initialEntries for MemoryRouter. This change will allow testing pages that use the useParam hook. * feat: add desktop error page Error page for any desktop pairing related issue * feat: add desktop routes to route component * feat: add enable desktop button to experimental tab * feat: add desktop icon when paired in dev mode * feat: disable ledger live control when desktop enabled * feat: register desktop error actions on ui init * fix: add missing code fencing * chore: remove enable desktop rpc middleware Now that we are adding the UI there's no need for this rpc middleware (as it was used to test desktop background code) * fix: display experimental tab for desktop
129 lines
2.0 KiB
SCSS
129 lines
2.0 KiB
SCSS
.desktop-pairing {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
padding: 0 30px 0;
|
|
|
|
&__countdown-timer {
|
|
background: #f2f3f4;
|
|
border-radius: 15.5px;
|
|
padding: 7px 0 7px 0;
|
|
margin: 0 32px 0 32px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&__countdown-timer-seconds {
|
|
color: var(--color-primary-default);
|
|
}
|
|
|
|
&__icon {
|
|
padding-top: 24px;
|
|
}
|
|
|
|
&__title {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 140.62%;
|
|
text-align: center;
|
|
color: #24292e;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
&__subtitle,
|
|
&__description {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 140.62%;
|
|
text-align: center;
|
|
color: #000;
|
|
padding-top: 8px;
|
|
margin: 0 56px;
|
|
}
|
|
|
|
&__description {
|
|
margin: 18px 0;
|
|
}
|
|
|
|
&__otp {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 48px;
|
|
letter-spacing: 10px;
|
|
color: #000;
|
|
}
|
|
|
|
&__buttons {
|
|
display: flex;
|
|
width: 70%;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
}
|
|
|
|
&__tooltip-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
&__clickable {
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.desktop-pairing-warning {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
&__close-button {
|
|
z-index: 1050;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
|
|
&__close::after {
|
|
content: '\00D7';
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
float: right;
|
|
margin-top: -8px;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&__text {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
&__link {
|
|
color: var(--color-primary-default);
|
|
display: block;
|
|
cursor: pointer;
|
|
line-height: 100%;
|
|
font-size: 0.875rem;
|
|
padding: 0 0;
|
|
}
|
|
|
|
&__warning-content {
|
|
border-left: 5px solid var(--color-warning-default);
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
border-top: 0;
|
|
margin: 4px;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|