m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Dark Mode: Info Box (#14161)

Browse Source
This commit is contained in:
David Walsh 2022-03-23 18:38:15 -05:00 committed by GitHub
parent 39e63432bf
commit db738d0f73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/app/info-box/index.scss
View File

@ -1,17 +1,17 @@
.info-box { .info-box {
border-radius: 4px; border-radius: 4px;
background-color: var(--alabaster); background-color: var(--color-background-alternative);
position: relative; position: relative;
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
color: var(--mid-gray); color: var(--color-text-alternative);
&__close::after { &__close::after {
content: '\00D7'; content: '\00D7';
font-size: 29px; font-size: 29px;
font-weight: 200; font-weight: 200;
color: var(--dusty-gray); color: var(--color-icon-default);
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 0; top: 0;

22
ui/components/app/info-box/info-box.stories.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import InfoBox from '.';
export default {
title: 'Components/App/InfoBox',
id: __filename,
component: InfoBox,
argTypes: {
title: 'string',
description: 'string',
},
};
export const DefaultStory = (args) => <InfoBox {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
title: 'Hello Ether',
description: 'This is the description',
};

1
ui/css/utilities/colors.scss
View File

@ -46,5 +46,4 @@
--malibu-blue: #b8cbd8; --malibu-blue: #b8cbd8;
--athens-grey: #e9edf0; --athens-grey: #e9edf0;
--geyser: #d2d8dd; --geyser: #d2d8dd;
--mid-gray: #5b5d67;
} }