1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-23 18:41:38 +01:00
metamask-extension/ui/components/app/signature-request-siwe/index.scss
Sam Gbafa 512b9bdf76
Sign-in With Ethereum Design Update (#16019)
* header warning changes

* updated warning message

* Updated button color

* add rounded corners

* text + style changes

* cleanup

* linter fixes

* remove console.log

* break out components

* remove unused css

* use icon name var

* improve icon styling

* remove unused styles

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* use design system fonts

* remove unused fonts

* moved tooltip to parent component

* remove domain call

* updated stories

* classname cleanup

* fix locales

* remove unused locales

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
2022-10-04 18:33:51 -03:00

74 lines
1.4 KiB
SCSS

@import 'signature-request-siwe-header/index';
@import 'signature-request-siwe-message/index';
@import 'signature-request-siwe-icon/index';
.signature-request-siwe {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
background-color: var(--color-background-default);
margin-right: auto;
margin-left: auto;
overflow-y: auto;
@media screen and (min-width: $break-large) {
width: 408px;
max-height: 82vh;
min-height: 570px;
flex: 0 0 auto;
border-radius: 8px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
}
.signature-request-siwe__actionable-message {
margin: 0 16px 16px;
.icon {
position: absolute;
left: 17px;
top: 13px;
}
}
.actionable-message--with-icon.actionable-message--with-right-button {
padding-left: 48px;
}
}
.signature-request-siwe__warning-popover {
.page-container__footer {
border-top: none;
padding: 0;
display: block;
}
.popover-footer {
padding: inherit;
display: block;
}
&__checkbox-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px 16px 24px;
&__label {
@include H7;
color: var(--color-text-default);
margin-inline-start: 8px;
margin-top: 1px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.check-box {
color: var(--color-error-default);
}
}
}