Skip to content

Optimize GUI for small devices #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sh-profilschmiede wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Optimize GUI for small devices #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/ConfirmModalContextProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ export default function ConfirmModalContextProvider({children}: { children: Reac
{config?.modalBody}
</p>
<div className="modal-action">
<label className="btn btn-outline"
<label className="btn btn-outline rounded-lg"
onClick={() => {
toggleOpen()
config?.onCancel?.()
}}>Cancel</label>
<label className="btn btn-primary"
<label className="btn btn-primary rounded-lg"
onClick={() => {
toggleOpen()
config?.onConfirm?.()
Expand Down
27 changes: 14 additions & 13 deletions components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,56 +16,57 @@ export default function Layout({children}: PropsWithChildren) {
<title>Shardeum Dashboard</title>
<meta name="description" content="Dashboard to configure a Shardeum validator"/>
<meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="/favicon.ico"/>
</Head>

<main className="py-10 px-20 ml-auto mr-auto max-w-[75rem]">
<main className="py-5 md:py-10 px-5 sm:px-10 lg:px-20 ml-auto mr-auto max-w-[75rem]">
{/* Navigation bar */}
<nav className="text-gray-400 py-2">
{/* Logo */}
<div className="flex">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="logo.png" alt="Logo" className="w-40"/>
<img src="/logo.png" alt="Shardeum" className="w-40"/>
<span className="flex-grow"></span>
</div>

{/* Navigation links */}
<div className="flex flex-direction-column">
<div className="flex flex-row items-start">

<ul className="flex-grow flex mb-3 mt-10 border-b-2 border-b-gray-500 h-10 items-stretch">
<li className={router.pathname == "/" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
<ul className="flex-grow flex flex-col sm:flex-row mb-3 mt-5 lg:mt-10 sm:border-b-2 border-b-gray-500 sm:h-10 items-stretch">
<li className={router.pathname == "/" ? "border-b-2 border-b-white px-2 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/'>Overview</Link></li>
<li
className={router.pathname == "/performance" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
className={router.pathname == "/performance" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/performance'>Performance</Link>
</li>
<li
className={router.pathname == "/maintenance" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
className={router.pathname == "/maintenance" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/maintenance'>Maintenance</Link>
</li>
<li
className={router.pathname == "/network" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
className={router.pathname == "/network" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/network'>Network</Link></li>
<li
className={router.pathname == "/alert-info" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
className={router.pathname == "/alert-info" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/alert-info'>Alert Info</Link></li>
<li
className={router.pathname == "/settings" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
className={router.pathname == "/settings" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
<Link href='/settings'>Settings</Link></li>
</ul>
<button title='Logout' className="hover:text-stone-200" onClick={async () => await authService.logout(apiBase)}>
<button title='Logout' className="hover:text-stone-200 mt-5 lg:mt-10" onClick={async () => await authService.logout(apiBase)}>
<ArrowRightOnRectangleIcon className='h-5 w-5 inline ml-2' onClick={async () => await authService.logout(apiBase)}/></button>
</div>

</nav>

{/* Dynamic content */}
<div className="p-4">
<div className="py-4 sm:p-4">
<main>{children}</main>
</div>

</main>
<div className="w-[26rem] h-[28rem] absolute top-32 right-0 -z-10" style={{
<div className="w-full sm:w-[26rem] h-[28rem] absolute top-0 sm:top-32 right-0 -z-10" style={{
'background':
'radial-gradient(circle at right 20% bottom 40%, purple, transparent 50%),' +
'radial-gradient(circle at right 20% top 40%, blue, transparent 50%)',
Expand Down
14 changes: 7 additions & 7 deletions components/ResetPasswordForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ const ResetPasswordForm = () => {
<>
<h1 className="font-semibold mb-3 mt-4 text-lg">Change Password</h1>
<form onSubmit={handleSubmit(onSubmit)} className="max-w-[21rem]">
<div className="flex justify-between mt-2">
<div className="flex flex-col sm:flex-row justify-between mt-2">
<label htmlFor="currentPassword">Current Password</label>
<input
className="bg-white text-black border px-1"
className="bg-white text-black rounded border px-1"
id="currentPassword"
type="password"
{...register("currentPassword", {required: "This field is required"})}
Expand All @@ -40,10 +40,10 @@ const ResetPasswordForm = () => {
{errors.currentPassword && <p>{errors.currentPassword.message}</p>}
</span>

<div className="flex justify-between mt-2">
<div className="flex flex-col sm:flex-row justify-between mt-2">
<label htmlFor="newPassword">New Password</label>
<input
className="bg-white text-black border px-1"
className="bg-white text-black rounded border px-1"
id="newPassword"
type="password"
{...register("newPassword", {required: "This field is required"})}
Expand All @@ -53,10 +53,10 @@ const ResetPasswordForm = () => {
{errors.newPassword && <p>{errors.newPassword.message}</p>}
</span>

<div className="flex justify-between mt-2">
<div className="flex flex-col sm:flex-row justify-between mt-2">
<label htmlFor="confirmNewPassword">Confirm Password</label>
<input
className="bg-white text-black border px-1"
className="bg-white text-black rounded border px-1"
id="confirmNewPassword"
type="password"
{...register("confirmNewPassword", {
Expand All @@ -71,7 +71,7 @@ const ResetPasswordForm = () => {
</span>

<div className="flex justify-end mt-2">
<LoadingButton className="btn btn-primary"
<LoadingButton className="btn btn-primary rounded-lg"
isLoading={isLoading}
disabled={!isValid}
type="submit">
Expand Down
10 changes: 5 additions & 5 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function Overview() {
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Node Status</h1>
<div
className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="capitalize"><span className='font-semibold'>Status:</span>{" "} {nodeStatus.state === "active" ?
"Validating" : nullPlaceholder(nodeStatus.state)}{" "} <StatusBadge status={nodeStatus.state}/>
</div>
Expand All @@ -80,7 +80,7 @@ export default function Overview() {
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Staked SHM</h1>
<div
className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div><span className='font-semibold'>SHM staked:</span> {nodeStatus.lockedStake ? nodeStatus.lockedStake + ' SHM' : '-'}</div>
<div className="overflow-hidden text-ellipsis"><span className='font-semibold'>Stake
address:</span> {nullPlaceholder(nodeStatus.nominatorAddress)}</div>
Expand All @@ -91,7 +91,7 @@ export default function Overview() {
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Reward SHM</h1>
<div
className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div><span className='font-semibold'>Earnings:</span> {nodeStatus.currentRewards ? nodeStatus.currentRewards?.substring(0, 6) + ' SHM' : '-'} </div>
<div><span className='font-semibold'>Last payout:</span> {nullPlaceholder(nodeStatus.lastPayout)}</div>
<div><span className='font-semibold'>Lifetime
Expand All @@ -102,7 +102,7 @@ export default function Overview() {
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Version Info</h1>
<div
className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div><span className='font-semibold'>CLI/GUI Running Version:</span> {nullPlaceholder(version.runningCliVersion)} / {nullPlaceholder(version.runningGuiVersion)}</div>
<div><span className='font-semibold'>CLI/GUI Latest Version:</span> {nullPlaceholder(version.latestCliVersion)} / {nullPlaceholder(version.latestGuiVersion)}</div>
<div><span className='font-semibold'>Validator Running Version:</span> {nullPlaceholder(version.runnningValidatorVersion)}</div>
Expand All @@ -114,7 +114,7 @@ export default function Overview() {
</div>

<h1 className="font-semibold mb-3 py-10">Node Status</h1>
<div className="h-60">
<div className="h-40 sm:h-60">
<Bar options={options} data={data}/>
</div>
</div>
Expand Down
31 changes: 19 additions & 12 deletions pages/login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,24 +37,28 @@ const Login = () => {
return (
<>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="logo.png" alt="Logo" className="w-40 mb-5 mt-20"/>
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 max-w-xl">
<img src="/logo.png" alt="Shardeum" className="w-40 mb-5"/>
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 max-w-xl">
<h1 className="text-black font-semibold text-2xl">Connect to Validator Dashboard</h1>
<p>
Connect to your validator dashboard to see the performance of your node, check rewards and run
maintenance tasks!
</p>
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('password')} placeholder="Password" type="password"
className="block p-4 w-full bg-stone-200 text-stone-600 my-2"></input>
className="block p-4 w-full bg-stone-200 text-stone-600 my-2 rounded-lg"></input>
{apiError && (
<div className="flex text-red-500 items-center mb-5">
<div className="ml-2 font-semibold">{apiError.message}</div>
</div>
<div className="flex text-red-500 items-center mb-5">
<div className="ml-2 font-semibold">{apiError.message}</div>
</div>
)}
<button disabled={formState.isSubmitting} className="btn btn-primary" type="submit">
{formState.isSubmitting ? <ArrowPathIcon className='w-5 spinner'/> : 'Connect'}
</button>

<div className="flex items-center">
<div className="ml-4 text-red-500 font-semibold">Invalid password!</div>
<button disabled={formState.isSubmitting} className="btn btn-primary rounded-lg ml-auto" type="submit">
{formState.isSubmitting ? <ArrowPathIcon className='w-5 spinner'/> : 'Connect'}
</button>
</div>
</form>
</div>
</>
Expand All @@ -67,11 +71,14 @@ Login.getLayout = function getLayout(page: ReactElement) {
<title>Shardeum Dashboard</title>
<meta name="description" content="Dashboard to configure a Shardeum validator"/>
<meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<div className="grid justify-center">
{page}
</div>
<main className="py-5 md:py-10 px-5 sm:px-10 lg:px-20 m-auto mt-10 sm:mt-20 max-w-[75rem] flex flex-col items-center">
<div className="flex flex-col items-start">
{page}
</div>
</main>
</>
}

Expand Down
22 changes: 11 additions & 11 deletions pages/maintenance/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export default function Maintenance() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-auto">
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Start / Stop Node</h1>
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="flex-grow" />
<div className="capitalize">
<span className="font-semibold">Status:</span>{" "}
Expand Down Expand Up @@ -197,7 +197,7 @@ export default function Maintenance() {
data-tip="Start node automatically once it has been terminated/rotated out of the network."
>
<LoadingButton
className="btn btn-primary btn-outline ml-2"
className="btn btn-primary btn-outline rounded-lg ml-2"
isLoading={updateSettingsLoading}
onClick={() => toggleAutoRestart()}
>
Expand All @@ -218,7 +218,7 @@ export default function Maintenance() {
)}
{nodeStatus.state === "stopped" && (
<LoadingButton
className="btn btn-primary ml-2"
className="btn btn-primary rounded-lg ml-2"
isLoading={isLoading}
onClick={() => startNode()}
>
Expand All @@ -233,7 +233,7 @@ export default function Maintenance() {
<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Add / Remove Stake</h1>
{showStakeForm && (
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm relative">
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm relative">
<StakeForm
nominator={address!}
nominee={nodeStatus?.nomineeAddress}
Expand All @@ -242,7 +242,7 @@ export default function Maintenance() {
totalStaked = {stakeInfo?.stake? Number(stakeInfo.stake): 0}
/>
<button
className="btn btn-primary btn-outline mr-2 absolute bottom-8"
className="btn btn-primary btn-outline rounded-lg mr-2 absolute bottom-8"
onClick={() => setShowStakeForm(false)}
>
<ArrowLeftIcon className="h-5 w-5 inline mr-2" />
Expand All @@ -251,7 +251,7 @@ export default function Maintenance() {
</div>
)}
{!showStakeForm && (
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="flex-grow" />
<div>
<span className="font-semibold">SHM staked:</span>{" "}
Expand Down Expand Up @@ -335,7 +335,7 @@ export default function Maintenance() {
chain?.id === CHAIN_ID &&
nodeStatus?.state !== "stopped" && (
<button
className="btn btn-primary ml-2"
className="btn btn-primary rounded-lg ml-2"
onClick={() => setShowStakeForm(true)}
>
Add Stake
Expand All @@ -345,7 +345,7 @@ export default function Maintenance() {

{isConnected && chain?.id !== CHAIN_ID && (
<button
className="btn btn-primary ml-2"
className="btn btn-primary rounded-lg ml-2"
onClick={() => switchNetwork?.(CHAIN_ID)}
>
Switch Network
Expand All @@ -361,7 +361,7 @@ export default function Maintenance() {

<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Benchmark Node</h1>
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="flex-grow" />
<div className="flex justify-between h-7">
<div>
Expand Down Expand Up @@ -415,7 +415,7 @@ export default function Maintenance() {
<div className="flex-grow" />
<div className="flex justify-end">
<div className="tooltip" data-tip="Coming Soon!">
<button className="btn btn-primary btn-disabled">
<button className="btn btn-primary btn-disabled rounded-lg">
Benchmark
<ArrowRightIcon className="h-5 w-5 inline ml-2" />
</button>
Expand All @@ -426,7 +426,7 @@ export default function Maintenance() {

<div className="flex flex-col items-stretch">
<h1 className="font-semibold mb-3">Update Version</h1>
<div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
<div className="flex-grow" />
<div>
<span className="font-semibold">
Expand Down
Loading