awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 19:28:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve the styling of the project upgrade banner

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2024-02-22 05:00:26 +01:00
committed by Daniel Hougaard
parent bea24d9654
commit c0b11b8350
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
+10 -9
View File
@@ -1,5 +1,7 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { useProjectPermission } from "@app/context"; import { useProjectPermission } from "@app/context";
@@ -7,7 +9,6 @@ import { useGetUpgradeProjectStatus, useUpgradeProject } from "@app/hooks/api";
import { Workspace } from "@app/hooks/api/types"; import { Workspace } from "@app/hooks/api/types";
import { ProjectVersion } from "@app/hooks/api/workspace/types"; import { ProjectVersion } from "@app/hooks/api/workspace/types";
import { Alert } from "../Alert";
import { Button } from "../Button"; import { Button } from "../Button";
export type UpgradeProjectAlertProps = { export type UpgradeProjectAlertProps = {
@@ -85,18 +86,18 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
if (membership.role !== "admin") return null; if (membership.role !== "admin") return null;
return ( return (
<div className="my-8"> <div className="mt-4 w-full border rounded-md p-4 text-base border-primary-600/70 bg-primary/[.07] text-white flex flex-row items-center">
<Alert title="Upgrade your project" variant="warning"> <FontAwesomeIcon icon={faWarning} className="text-white/80 text-6xl pr-6"/>
<div className="max-w-md"> <div className="text-sm flex flex-col w-full">
Upgrade your project version to continue receiving the latest improvements and patches. <span className="text-lg font-semibold mb-2">Upgrade your project</span>
{currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>} Upgrade your project version to continue receiving the latest improvements and patches.
</div> {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
<div className="mt-2"> </div>
<div className="my-2">
<Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}> <Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}>
Upgrade Upgrade
</Button> </Button>
</div> </div>
</Alert>
</div> </div>
); );
}; };