franpcode/Open-Telegram-to-Notion-Website
1
0
Fork 0
mirror of https://github.com/FranP-code/Open-Telegram-to-Notion-Website.git synced 2025-10-13 00:42:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auth page done

Browse Source
This commit is contained in:
Francisco Pessano
2022-04-25 17:47:24 -03:00
parent 32404d1104
commit bf31475316
17 changed files with 453 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Notification/Notification.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react'
import './notification-style.css'
const Notification = ({notification, setNotification}) => {
React.useEffect(() => {
if (notification === false) {
return
}
setTimeout(() => {
const elem = document.querySelector("#notification-element")
elem.classList.remove('fade-in')
elem.classList.add('fade-out')
}, 2000)
setTimeout(() => {
setNotification(false)
}, 2400)
}, [notification])
return (
<>
{
notification ?
<div className="notification fade-in" id="notification-element">
<p>{notification}</p>
</div>
: null
}
</>
)
}
export default Notification

17
src/components/Notification/notification-style.css Normal file
View File

@@ -0,0 +1,17 @@
.notification {
width: 15vw;
min-width: 300px;
background-color: rgba(71, 151, 255, 0.1647058824);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.541);
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, 0);
padding: 2vh 3vw;
border-radius: 10px;
}
.notification p {
overflow-wrap: anywhere;
text-align: center;
font-weight: bold;
}/*# sourceMappingURL=notification-style.css.map */

1
src/components/Notification/notification-style.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["notification-style.scss","notification-style.css"],"names":[],"mappings":"AAAA;EAEI,WAAA;EACA,gBAAA;EAEA,kDAAA;EACA,6CAAA;EAEA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,6BAAA;EAEA,gBAAA;EAEA,mBAAA;ACJJ;ADMI;EACI,uBAAA;EACA,kBAAA;EACA,iBAAA;ACJR","file":"notification-style.css"}

25
src/components/Notification/notification-style.scss Normal file
View File

@@ -0,0 +1,25 @@
.notification {
width: 15vw;
min-width: 300px;
background-color: #4797ff2a;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.541);
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, 0);
padding: 2vh 3vw;
border-radius: 10px;
p {
overflow-wrap: anywhere;
text-align: center;
font-weight: bold;
}
}