mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-13 11:07:11 +03:00
Docs: New version modal modularise CSS
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/11004 GitOrigin-RevId: 2b28dcbe295765e228caec4e573886fb051cb0da
This commit is contained in:
Sean Park-Ross
hasura-bot
parent
b6e296bf0f
commit
199e69cb16
@ -1,4 +1,4 @@
|
||||
.new-version-modal {
|
||||
.newVersionModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -8,50 +8,52 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999; /* Ensure it appears above other elements */
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: flex; /* Change to flex to use flex properties */
|
||||
}
|
||||
|
||||
.display-none {
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-version-modal .modal-main {
|
||||
.modalMain {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 50px;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.new-version-modal .modal-main {
|
||||
.modalMain {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
.closeIcon {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.monsta-image {
|
||||
.monstaImage {
|
||||
|
||||
}
|
||||
|
||||
.above-headline {
|
||||
.aboveHeadline {
|
||||
margin-top: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: var(--ifm-link-color);;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .bodyText {
|
||||
color: #141c22;
|
||||
}
|
||||
|
||||
|
||||
.headline {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
@ -61,15 +63,32 @@
|
||||
}
|
||||
|
||||
|
||||
.body-text {
|
||||
font-size: .95rem;
|
||||
[data-theme='dark'] .headline {
|
||||
color: #141c22;
|
||||
}
|
||||
|
||||
.subhead {
|
||||
|
||||
}
|
||||
|
||||
[data-theme='dark'] .subhead {
|
||||
color: #141c22;
|
||||
}
|
||||
|
||||
.bodyText {
|
||||
font-size: .95rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-thing {
|
||||
|
||||
[data-theme='dark'] .bodyText {
|
||||
color: #141c22;
|
||||
}
|
||||
|
||||
.ctaThing {
|
||||
display: block;
|
||||
background-color: #21c45c;
|
||||
background-color: #21c45c;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
@ -77,20 +96,8 @@ font-size: .95rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-thing a {
|
||||
.ctaThing a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.headline {
|
||||
color: #141c22;
|
||||
}
|
||||
.subhead {
|
||||
color: #141c22;
|
||||
}
|
||||
.body-text {
|
||||
color: #141c22;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './NewVersionModal.css';
|
||||
import styles from './NewVersionModal.module.css';
|
||||
import { useLocalStorage } from 'usehooks-ts';
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
// @ts-ignore
|
||||
import monsta from './monsta.png';
|
||||
|
||||
export const NewVersionModal = () => {
|
||||
const {
|
||||
siteConfig: { customFields },
|
||||
siteConfig: {customFields},
|
||||
} = useDocusaurusContext();
|
||||
|
||||
const [lastClosed, setLastClosed] = useLocalStorage<number | null>(
|
||||
@ -19,7 +20,7 @@ export const NewVersionModal = () => {
|
||||
useEffect(() => {
|
||||
const currentTime = Date.now();
|
||||
const oneWeek = 7 * 24 * 60 * 60 * 1000; // One week in milliseconds
|
||||
// const oneWeek = 60 * 1000; // Temp one minute in milliseconds (for testing)
|
||||
// const oneWeek = 10 * 1000; // Temp 10 seconds in milliseconds (for testing)
|
||||
|
||||
if (!lastClosed || (currentTime - lastClosed > oneWeek)) {
|
||||
setShowModal(true);
|
||||
@ -31,23 +32,23 @@ export const NewVersionModal = () => {
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
const showHideClassName = showModal ? "new-version-modal display-block" : "new-new-version-modal display-none";
|
||||
|
||||
return (
|
||||
<div className={showHideClassName} onClick={handleClose}>
|
||||
<div className="modal-main" onClick={e => e.stopPropagation()}>
|
||||
<div className="close-icon" onClick={handleClose}>
|
||||
<div className={showModal ? styles.newVersionModal : styles.displayNone} onClick={handleClose}>
|
||||
<div className={styles.modalMain} onClick={e => e.stopPropagation()}>
|
||||
<div className={styles.closeIcon} onClick={handleClose}>
|
||||
<CloseButton/>
|
||||
</div>
|
||||
<img className="monsta-image" src={monsta} alt="Hasura Logo"/>
|
||||
<p className="above-headline">INTRODUCING</p>
|
||||
<h1 className="headline">Hasura Data Delivery Network</h1>
|
||||
<h5 className="subhead">The next-generation Hasura platform is here!</h5>
|
||||
<p className="body-text">Powerful v3 engine. Reimagined console. Multi-team federation. Simplified custom logic
|
||||
integration. Enhanced developer experience. And so much more to love!</p>
|
||||
<div className="cta-thing"><a target="_blank" rel="noopener noreferrer" href="https://hasura.io/docs/3.0/index/">Check
|
||||
out Hasura DDN
|
||||
docs</a></div>
|
||||
<img className={styles.monstaImage} src={monsta} alt="Hasura Logo"/>
|
||||
<p className={styles.aboveHeadline}>INTRODUCING</p>
|
||||
<h1 className={styles.headline}>Hasura Data Delivery Network</h1>
|
||||
<h5 className={styles.subhead}>The next-generation Hasura platform is here!</h5>
|
||||
<p className={styles.bodyText}>
|
||||
Powerful v3 engine. Reimagined console. Multi-team federation. Simplified custom logic integration. Enhanced developer experience. And so much more to love!</p>
|
||||
<div className={styles.ctaThing}>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://hasura.io/docs/3.0/index/">
|
||||
Check out Hasura DDN docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -57,8 +58,8 @@ const CloseButton = () => {
|
||||
return (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#F3F4F6"></rect>
|
||||
<path d="M21.714 10.286 10.285 21.714m0-11.428 11.429 11.428" stroke="#1F2A37" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M21.714 10.286 10.285 21.714m0-11.428 11.429 11.428" stroke="#1F2A37" strokeWidth="2"
|
||||
strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user