0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-20 22:32:45 +00:00
This commit is contained in:
Víctor Losada Hernández
2024-10-20 22:29:14 +02:00
parent 976740dc8b
commit ebdbb39f24
2 changed files with 44 additions and 59 deletions

View File

@@ -26,7 +26,7 @@ const ErrorBar = (props) => {
);
const renderProtip = ()=>(
<div className="protips">
<div className='protips'>
<h4>Protips!</h4>
{hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
@@ -38,10 +38,10 @@ const ErrorBar = (props) => {
return (
<Dialog className="errorBar" closeText={DISMISS_BUTTON} >
<div className="content">
<i className="fas fa-exclamation-triangle" />
<h3> There are HTML errors in your markup</h3>
<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
<div>
<i className='fas fa-exclamation-triangle' />
<h2> There are HTML errors in your markup</h2>
<small>
If these aren't fixed your brew will not render properly when you print it to PDF or share it
</small>

View File

@@ -3,13 +3,11 @@
position : absolute;
z-index : 1000;
width : 100%;
padding : 20px;
padding-bottom : 10px;
color : white;
background-color : @red;
border : unset;
.content {
div {
> i {
float : left;
margin-right : 10px;
@@ -17,12 +15,7 @@
font-size : 3em;
opacity : 0.8;
}
h3 {
font-size : 1.1em;
font-weight : 800;
}
}
h2 { font-weight : 800; }
ul {
margin-top : 15px;
font-size : 0.8em;
@@ -30,13 +23,11 @@
list-style-type : disc;
li { line-height : 1.6em; }
}
}
hr {
box-sizing : border-box;
width : 100%;
height : 2px;
margin-top : 25px;
margin-bottom : 15px;
margin-left : -100px;
background-color : darken(@red, 8%);
border : none;
}
@@ -46,25 +37,19 @@
}
.protips {
font-size : 0.6em;
& > div {
margin-bottom : 10px;
line-height : 1.2em;
}
h4 {
font-weight : 800;
line-height : 1.5em;
text-transform : uppercase;
opacity : 0.8;
}
}
button.dismiss {
position : absolute;
top : 30px;
top : 20px;
right : 30px;
height : max-content;
padding : unset;
font-size : 40px;
cursor : pointer;
background-color : transparent;
opacity : 0.6;
&:hover { opacity : 1; }