1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-30 08:09:15 +01:00
metamask-extension/ui/components/app/signature-request-original/index.scss
Vladimir Saric 8aa3263b82
Added navigation between multiple sign prompts and reject all sign prompts (#17093)
* Fixed navigation through multiple unapproved transactions for ERC20 tokens

* Fixed tx details activity-log currency

* Fixed e2e test failure

* Added navigation between multiple sign prompts and reject all sign prompts

* Resolving conflicts

* Creating SignatureRequestNavigation component and extracting the UI rendering part into a single component

* Fixing e2e tests and updating snapshot

* Using single component for navigation which shows both messages and transactions requests

* Fixing test-unit-jest-main

* Added more unit tests

* Fixing test-storybook

* Fixing test-storybook

---------

Co-authored-by: Filip Sekulic <filip.sekulic@consensys.net>
2023-01-31 16:29:23 +01:00

137 lines
2.2 KiB
SCSS

.request-signature {
&__container {
width: 380px;
border-radius: 8px;
background-color: var(--color-background-default);
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
display: flex;
flex-flow: column nowrap;
z-index: 25;
align-items: center;
position: relative;
height: 100%;
margin-left: auto;
margin-right: auto;
@include screen-sm-max {
width: 100%;
top: 0;
box-shadow: none;
}
@include screen-sm-min {
height: 650px;
}
&__reject {
padding-bottom: 20px;
}
}
&__typed-container {
padding: 17px;
h1 {
font-weight: 900;
margin-bottom: 5px;
}
* {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> div {
margin-bottom: 10px;
}
}
&__content__title {
@include H3;
display: flex;
justify-content: center;
color: var(--color-default-text);
z-index: 3;
}
&__account,
&__navigation {
width: 100%;
}
&__body {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
flex: 1 1 auto;
}
&__origin {
display: flex;
justify-content: center;
margin-top: 16px;
margin-bottom: 16px;
}
&__notice,
&__warning {
@include H6;
text-align: center;
margin-top: 21px;
margin-bottom: 11px;
width: 100%;
}
&__notice {
color: var(--color-text-alternative);
padding: 0 10px;
}
&__rows {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border-top: 1px solid var(--color-border-default);
display: flex;
flex-flow: column;
}
&__row {
display: flex;
flex-flow: column;
flex: 1 0 auto;
}
&__row-title {
@include H5;
width: 80px;
color: var(--color-text-alternative);
margin-top: 12px;
margin-left: 18px;
width: 100%;
}
&__row-value {
@include H6;
color: var(--color-text-alternative);
width: 100%;
overflow-wrap: break-word;
border-bottom: 1px solid var(--color-border-default);
padding: 6px 18px 15px;
white-space: pre-wrap;
}
&__help-link {
cursor: pointer;
text-decoration: underline;
color: var(--color-primary-default);
margin-inline-start: 3px;
}
}