diff --git a/packages/libs/coreui/src/components/containers/NoteBox.tsx b/packages/libs/coreui/src/components/containers/NoteBox.tsx index 1d2aaedf18..86ccd763c2 100644 --- a/packages/libs/coreui/src/components/containers/NoteBox.tsx +++ b/packages/libs/coreui/src/components/containers/NoteBox.tsx @@ -1,19 +1,22 @@ import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; import { error, warning, mutedBlue } from '../../definitions/colors'; +import { Error, Info, Warning } from '@material-ui/icons'; export interface Props { type: 'info' | 'warning' | 'error'; + showIcon?: boolean; children: ReactNode; } const baseCss = css` - border-left: 0.25em solid var(--note-box-border-color); + border-left: 0.35em solid var(--note-box-border-color); border-radius: 0.25em; - padding: 0.5em 1em; + padding: 1em 3em; background: var(--note-box-bg-color); gap: 1em; margin-bottom: 1em; + position: relative; `; const infoCss = css` @@ -36,6 +39,12 @@ const errorCss = css` ${baseCss}; `; +const iconCss = css` + position: absolute; + left: 0.5em; + font-size: 1.5em; +`; + export function NoteBox(props: Props) { const finalCss = props.type === 'warning' @@ -43,5 +52,20 @@ export function NoteBox(props: Props) { : props.type === 'error' ? errorCss : infoCss; - return
+ Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus morbi ac + ultrices purus urna tristique mattis consequat. Posuere volutpat + facilisi natoque dictumst dignissim magna dapibus. Taciti vel a etiam + curabitur velit torquent. Fusce interdum dictum vulputate sollicitudin + nulla. Orci placerat congue odio aptent enim mauris. Turpis nec + rhoncus eleifend eleifend eget. Auctor sed nullam vestibulum quisque + egestas; nullam aenean ante. +
+