adding testnet banner image and making modal responsive

This commit is contained in:
Kumaraguru 2025-01-13 15:52:40 +00:00
parent 46a7416fa3
commit 05e7f9f3da
No known key found for this signature in database
GPG Key ID: 4E4555A84ECD28F7
3 changed files with 48 additions and 40 deletions

View File

@ -31,7 +31,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-800 bg-neutral-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg", "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-h-[85vh] translate-x-[-50%] translate-y-[-50%] overflow-y-auto gap-4 border border-neutral-800 bg-neutral-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg sm:w-full sm:max-w-lg",
className className
)} )}
{...props} {...props}
@ -52,7 +52,7 @@ const DialogHeader = ({
}) => ( }) => (
<div <div
className={cn( className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left", "flex flex-col space-y-1.5 text-left",
className className
)} )}
{...props} {...props}

View File

@ -278,57 +278,65 @@ export default function Dashboard() {
<span className="sr-only">Dashboard information</span> <span className="sr-only">Dashboard information</span>
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[600px] mx-4"> <DialogContent className="p-4 sm:p-6">
<DialogHeader> <DialogHeader>
<DialogTitle className="mb-6">Testnet Metrics</DialogTitle> <DialogTitle className="text-xl sm:text-2xl mb-4 sm:mb-6">Testnet Metrics</DialogTitle>
<div className="w-full h-40 bg-neutral-800 rounded-lg mb-6 animate-pulse" /> {/* Image dimensions: 1200x630 (2:1.05 aspect ratio - optimal for social sharing) */}
<DialogDescription className="pt-3"> <img src="testnet.png" alt="Testnet Metrics" className="w-full aspect-[2/1.05] rounded-lg mb-4 sm:mb-6" />
The data displayed in this dashboard is collected from Codex nodes that use the{' '} <DialogDescription className="text-sm sm:text-base pt-2 sm:pt-3 space-y-4">
<a <p>
href="https://github.com/codex-storage/cli" The data displayed in this dashboard is collected from Codex nodes that use the{' '}
target="_blank" <a
rel="noopener noreferrer" href="https://github.com/codex-storage/cli"
className="text-[#7afbaf] hover:underline" target="_blank"
> rel="noopener noreferrer"
Codex CLI className="text-[#7afbaf] hover:underline"
</a> >
{' '}for running a Codex alturistic node in the testnet. Users agree to a privacy Codex CLI
disclaimer before using the Codex CLI and the data collected will be used to </a>
understand the testnet statistics and help troubleshooting users who face {' '}for running a Codex alturistic node in the testnet.
difficulty in getting onboarded to Codex. </p>
<p>
Users agree to a privacy disclaimer before using the Codex CLI and the data collected will be used to
understand the testnet statistics and help troubleshooting users who face
difficulty in getting onboarded to Codex.
</p>
</DialogDescription> </DialogDescription>
<div className="mt-8 space-y-4 border-neutral-800 pt-4"> <div className="mt-6 sm:mt-8 space-y-4 sm:space-y-6 border-t border-neutral-800 pt-4 sm:pt-6">
<div> <div>
<h4 className="text-sm font-semibold text-white mb-2">Don't wish to provide data?</h4> <h4 className="text-sm sm:text-base font-semibold text-white mb-2 sm:mb-3">Don't wish to provide data?</h4>
<p className="text-sm text-neutral-400"> <p className="text-sm text-neutral-400">
You can still run a Codex node without providing any data. To do this, please follow the steps mentioned in the <a You can still run a Codex node without providing any data. To do this, please follow the steps mentioned in the{' '}
href="https://docs.codex.storage/" <a
target="_blank" href="https://docs.codex.storage/"
rel="noopener noreferrer" target="_blank"
className="text-[#7afbaf] hover:underline" rel="noopener noreferrer"
> className="text-[#7afbaf] hover:underline"
Codex documentation >
</a> which does not use the Codex CLI. Codex documentation
</a>
{' '}which does not use the Codex CLI.
</p> </p>
</div> </div>
<div> <div>
<h4 className="text-sm font-semibold text-white mb-2">Is there an incentive to run a Codex node?</h4> <h4 className="text-sm sm:text-base font-semibold text-white mb-2 sm:mb-3">Is there an incentive to run a Codex node?</h4>
<p className="text-sm text-neutral-400"> <p className="text-sm text-neutral-400">
Codex is currently in testnet and it is not incentivized. However, in the future, Codex may be incentivized as per the roadmap. But please bear in mind that no incentives are promised for testnet node operators. Codex is currently in testnet and it is not incentivized. However, in the future, Codex may be incentivized as per the roadmap. But please bear in mind that no incentives are promised for testnet node operators.
</p> </p>
</div> </div>
<div> <div>
<h4 className="text-sm font-semibold text-white mb-2">I have a question or suggestion</h4> <h4 className="text-sm sm:text-base font-semibold text-white mb-2 sm:mb-3">I have a question or suggestion</h4>
<p className="text-sm text-neutral-400"> <p className="text-sm text-neutral-400">
The best way to get in touch with us is to join the The best way to get in touch with us is to join the{' '}
<a <a
href="https://discord.gg/codex-storage" href="https://discord.gg/codex-storage"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-[#7afbaf] hover:underline" className="text-[#7afbaf] hover:underline"
> >
{" "}Codex discord Codex discord
</a> and ask your question in the #support channel. </a>
{' '}and ask your question in the #support channel.
</p> </p>
</div> </div>
</div> </div>

BIN
public/testnet.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB