Hey there, I'm diving into the world of React JS and finding the CSS aspect a bit challenging.
Currently, I'm working on creating a simple cookie banner design and here's what I have so far:
JavaScript:
import React from "react";
import { withWidth } from "@material-ui/core";
import style from './Cookie.module.css';
function Cookies(props) {
return (
<React.Fragment>
<div ref={props.forwardedRef}>
<div className={style.cookies}>
<div className={style.content}>
<p className={style.header}>We use cookies on this site to enhance your user experience</p>
<p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the <a href="/" target="_blank" rel="noreferrer">website's privacy policy.</a></p>
<div className={style.click}>
<button className={style.button}>
Yes I agree
</button>
</div>
</div>
</div>
</div>
</React.Fragment >
)
}
export default withWidth()(Cookies);
CSS:
.cookies {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.content {
padding-left: 100px;
padding-top: 5px;
}
.header {
color: #FFFFFF;
font-size: 20px;
}
.message {
color: #FFFFFF;
font-size: 16px;
}
.click {
left: 0;
}
.button {
background-color: #3f7edf;
color: #FFFFFF;
font-size: 13px;
height: 50px;
width: 100px;
border-radius: 5px;
border-color: #3f7edf;
}
I've added my own custom CSS to create a basic UI for the cookie banner.
Here's a look at my current Cookie Banner: CURRENT DESIGN
And here's the design I'm striving towards achieving: MY GOAL