awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-20 21:18:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minor tw4 fixes and lint tw format

Browse Source
This commit is contained in:
Scott Wilson
2025-10-10 10:41:20 -07:00
parent bf5a291e87
commit 29b2333781
838 changed files with 3509 additions and 3511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const AccessManagementPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Access Control" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Access Control"
frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx
+7 -7
View File
@@ -215,7 +215,7 @@ const ServerAdminsPanelTable = ({
<div className="relative">
<FontAwesomeIcon icon={faShieldHalved} />
<FontAwesomeIcon
className="absolute -right-1 -bottom-[0.01rem]"
className="absolute -bottom-[0.01rem] -right-1"
size="2xs"
icon={faXmark}
/>
@@ -365,11 +365,11 @@ export const ServerAdminsTable = () => {
selectedUsers.length > 0 && "h-16"
)}
>
<div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
<div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
<div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
<button
type="button"
className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
onClick={() => setSelectedUsers([])}
>
Unselect All
@@ -390,7 +390,7 @@ export const ServerAdminsTable = () => {
</Button>
</div>
</div>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<ServerAdminsPanelTable
handlePopUpOpen={handlePopUpOpen}
users={users}
@@ -442,10 +442,10 @@ export const ServerAdminsTable = () => {
onDeleteApproved={() => handleRemoveUsers()}
buttonText="Remove"
>
<div className="mt-4 text-sm text-mineshaft-400">
<div className="text-mineshaft-400 mt-4 text-sm">
The following users will be deleted:
</div>
<div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
<div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border p-4 pl-8 text-sm text-red-200">
<ul className="list-disc">
{selectedUsers?.map((user) => {
const email = user.email ?? user.username;
@@ -467,7 +467,7 @@ export const ServerAdminsTable = () => {
<div className="inline-block">
<Badge
variant="primary"
className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
>
<FontAwesomeIcon icon={faWarning} />
<span>Deleting Yourself</span>
frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const AuthenticationPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Authentication"
frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx
+3 -3
View File
@@ -111,12 +111,12 @@ export const AuthenticationPageForm = () => {
return (
<form
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
onSubmit={handleSubmit(onAuthFormSubmit)}
>
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-medium text-mineshaft-100">Login Methods</div>
<div className="mb-4 max-w-sm text-sm text-mineshaft-400">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">Login Methods</div>
<div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
Select the login methods you wish to allow for all users of this instance.
</div>
<Controller
frontend/src/pages/admin/CachingPage/CachingPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const CachingPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Caching" description="Manage caching for your Infisical instance." />
<CachingPageForm />
frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx
+3 -3
View File
@@ -57,10 +57,10 @@ export const CachingPageForm = () => {
return (
<>
<div className="mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border p-4">
<div className="flex flex-col">
<div className="mb-2 flex items-center gap-3">
<span className="text-xl font-medium text-mineshaft-100">Secrets Cache</span>
<span className="text-mineshaft-100 text-xl font-medium">Secrets Cache</span>
{isInvalidating && (
<Badge
variant="danger"
@@ -71,7 +71,7 @@ export const CachingPageForm = () => {
</Badge>
)}
</div>
<span className="max-w-xl text-sm text-mineshaft-400">
<span className="text-mineshaft-400 max-w-xl text-sm">
The encrypted secrets cache encompasses all secrets stored within the system and
provides a temporary, secure storage location for frequently accessed credentials.
</span>
frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const EncryptionPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Encryption"
frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx
+4 -4
View File
@@ -77,16 +77,16 @@ export const EncryptionPageForm = () => {
return (
<>
<form
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col justify-start">
<div className="flex w-full justify-between">
<div className="mb-2 text-xl font-medium text-mineshaft-100">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">
KMS Encryption Strategy
</div>
</div>
<div className="mb-4 max-w-sm text-sm text-mineshaft-400">
<div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
Select which type of encryption strategy you want to use for your KMS root key. HSM is
supported on Enterprise plans.
</div>
@@ -102,7 +102,7 @@ export const EncryptionPageForm = () => {
isError={Boolean(error)}
>
<Select
className="w-full bg-mineshaft-700"
className="bg-mineshaft-700 w-full"
dropdownContainerClassName="bg-mineshaft-800"
defaultValue={field.value}
onValueChange={(e) => onChange(e)}
frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const EnvironmentPage = () => {
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Environment Variables"
frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx
+8 -8
View File
@@ -40,7 +40,7 @@ export const GroupContainer = ({
return (
<div
key={group.name}
className="overflow-clip border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b"
className="border-mineshaft-600 bg-mineshaft-800 overflow-clip border border-b-0 first:rounded-t-md last:rounded-b-md last:border-b"
>
<div
className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
@@ -58,7 +58,7 @@ export const GroupContainer = ({
icon={faChevronRight}
/>
<div className="grow text-base select-none">{group.name}</div>
<div className="grow select-none text-base">{group.name}</div>
</div>
{(open || search) && (
@@ -66,13 +66,13 @@ export const GroupContainer = ({
{group.fields.map((field) => (
<div
key={field.key}
className="flex items-center justify-between gap-4 border-t border-mineshaft-500 bg-mineshaft-700/50 p-4"
className="border-mineshaft-500 bg-mineshaft-700/50 flex items-center justify-between gap-4 border-t p-4"
>
<div className="flex max-w-lg flex-col">
<span className="text-sm">
<HighlightText text={field.key} highlight={search} />
</span>
<span className="text-sm text-mineshaft-400">
<span className="text-mineshaft-400 text-sm">
<HighlightText text={field.description} highlight={search} />
</span>
</div>
@@ -208,19 +208,19 @@ export const EnvironmentPageForm = () => {
return (
<form
className="flex flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
className="border-mineshaft-600 bg-mineshaft-900 flex flex-col gap-4 rounded-lg border p-4"
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex w-full flex-row items-center justify-between">
<div>
<div className="flex items-start gap-1">
<p className="text-xl font-medium text-mineshaft-100">Overrides</p>
<p className="text-mineshaft-100 text-xl font-medium">Overrides</p>
<a
href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
target="_blank"
rel="noopener noreferrer"
>
<div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
<span>Docs</span>
<FontAwesomeIcon
@@ -230,7 +230,7 @@ export const EnvironmentPageForm = () => {
</div>
</a>
</div>
<p className="text-sm text-bunker-300">
<p className="text-bunker-300 text-sm">
Override specific environment variables. After saving, it may take up to 5 minutes for
variables to propagate throughout every container.
</p>
frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
+2 -2
View File
@@ -11,11 +11,11 @@ export const GeneralPage = () => {
const { data: serverConfig } = useGetServerConfig();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="General"
frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx
+14 -14
View File
@@ -103,12 +103,12 @@ export const GeneralPageForm = () => {
return (
<form
className="space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
className="border-mineshaft-600 bg-mineshaft-900 space-y-6 rounded-lg border p-4"
onSubmit={handleSubmit(onFormSubmit)}
>
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-medium text-mineshaft-100">Allow user signups</div>
<div className="mb-4 max-w-sm text-sm text-mineshaft-400">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">Allow user signups</div>
<div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
Select if you want users to be able to signup freely into your Infisical instance.
</div>
<Controller
@@ -117,7 +117,7 @@ export const GeneralPageForm = () => {
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
<Select
className="w-full bg-mineshaft-700"
className="bg-mineshaft-700 w-full"
dropdownContainerClassName="bg-mineshaft-800"
defaultValue={field.value}
onValueChange={(e) => onChange(e)}
@@ -132,7 +132,7 @@ export const GeneralPageForm = () => {
</div>
{signUpMode === "anyone" && (
<div className="flex flex-col justify-start">
<div className="mb-4 text-xl font-medium text-mineshaft-100">
<div className="text-mineshaft-100 mb-4 text-xl font-medium">
Restrict signup by email domain(s)
</div>
<Controller
@@ -159,8 +159,8 @@ export const GeneralPageForm = () => {
)}
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-medium text-mineshaft-100">Default organization</div>
<div className="mb-4 max-w-sm text-sm text-mineshaft-400">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">Default organization</div>
<div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
Select the default organization you want to set for SAML/LDAP/OIDC/Github logins. When
selected, user logins will be automatically scoped to the selected organization.
</div>
@@ -171,7 +171,7 @@ export const GeneralPageForm = () => {
<FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
<Select
placeholder="Allow all organizations"
className="w-full bg-mineshaft-700"
className="bg-mineshaft-700 w-full"
dropdownContainerClassName="bg-mineshaft-800"
defaultValue={field.value ?? " "}
onValueChange={(e) => onChange(e)}
@@ -197,8 +197,8 @@ export const GeneralPageForm = () => {
</div>
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-medium text-mineshaft-100">Trust emails</div>
<div className="mb-4 max-w-sm text-sm text-mineshaft-400">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">Trust emails</div>
<div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
Select if you want Infisical to trust external emails from SAML/LDAP/OIDC identity
providers. If set to false, then Infisical will prompt SAML/LDAP/OIDC provisioned users to
verify their email upon their first login.
@@ -257,8 +257,8 @@ export const GeneralPageForm = () => {
</div>
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-medium text-mineshaft-100">Notices</div>
<div className="mb-4 max-w-lg text-sm text-mineshaft-400">
<div className="text-mineshaft-100 mb-2 text-xl font-medium">Notices</div>
<div className="text-mineshaft-400 mb-4 max-w-lg text-sm">
Configure system-wide notification banners and security messages. These settings control
the text displayed to users during authentication and throughout their session
</div>
@@ -274,7 +274,7 @@ export const GeneralPageForm = () => {
placeholder="**Auth Consent Message**"
{...field}
rows={3}
className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
className="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
/>
</FormControl>
)}
@@ -293,7 +293,7 @@ export const GeneralPageForm = () => {
placeholder='<div style="background-color: red">TOP SECRET</div>'
{...field}
rows={3}
className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
className="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
/>
</FormControl>
)}
frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const IntegrationsPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Admin" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Integrations"
frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx
+3 -3
View File
@@ -51,10 +51,10 @@ export const IntegrationsPageForm = () => {
];
return (
<div className="mb-6 min-h-64 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 min-h-64 rounded-lg border p-4">
<div className="mb-4">
<div className="text-xl font-medium text-mineshaft-100">Integrations</div>
<div className="text-sm text-mineshaft-300">
<div className="text-mineshaft-100 text-xl font-medium">Integrations</div>
<div className="text-mineshaft-300 text-sm">
Configure your instance-wide settings to enable integration with third-party services.
</div>
</div>
frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx
+5 -5
View File
@@ -72,15 +72,15 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
value="microsoft-teams-integration"
className="data-[state=open]:border-none"
>
<AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
<AccordionTrigger className="border-mineshaft-500 bg-mineshaft-700 flex h-fit w-full justify-start rounded-md border px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
<div className="text-md group order-1 ml-3 flex items-center gap-2">
<BsMicrosoftTeams className="text-lg group-hover:text-primary-400" />
<BsMicrosoftTeams className="group-hover:text-primary-400 text-lg" />
<div className="text-[15px] font-medium">Microsoft Teams</div>
</div>
</AccordionTrigger>
<AccordionContent childrenClassName="px-0 py-0">
<div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
<div className="mb-2 max-w-lg text-sm text-mineshaft-300">
<div className="border-mineshaft-500 bg-mineshaft-700 flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 px-4 py-4">
<div className="text-mineshaft-300 mb-2 max-w-lg text-sm">
Step 1: Create and configure Microsoft Teams bot and Azure Resources. Please refer
to the documentation below for more information.
</div>
@@ -93,7 +93,7 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
<Button colorSchema="secondary">Documentation</Button>
</a>
</div>
<div className="mb-4 max-w-lg text-sm text-mineshaft-300">
<div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
Step 2: Configure your instance-wide settings to enable integration with Microsoft
Teams. Copy the App ID and Client Secret from your Microsoft Teams bot&apos;s App
Registration page. The Client Secret is the password for the bot.
frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx
+5 -5
View File
@@ -105,15 +105,15 @@ export const SlackIntegrationForm = ({ adminIntegrationsConfig }: Props) => {
<form onSubmit={handleSubmit(onSubmit)}>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="slack-integration" className="data-[state=open]:border-none">
<AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
<AccordionTrigger className="border-mineshaft-500 bg-mineshaft-700 flex h-fit w-full justify-start rounded-md border px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
<div className="text-md group order-1 ml-3 flex items-center gap-2">
<BsSlack className="text-lg group-hover:text-primary-400" />
<BsSlack className="group-hover:text-primary-400 text-lg" />
<div className="text-[15px] font-medium">Slack</div>
</div>
</AccordionTrigger>
<AccordionContent childrenClassName="px-0 py-0">
<div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
<div className="mb-4 max-w-lg text-sm text-mineshaft-300">
<div className="border-mineshaft-500 bg-mineshaft-700 flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 px-4 py-4">
<div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
Step 1: Create your Infisical Slack App
</div>
<div className="mb-6">
@@ -124,7 +124,7 @@ export const SlackIntegrationForm = ({ adminIntegrationsConfig }: Props) => {
Create Slack App
</Button>
</div>
<div className="mb-4 max-w-lg text-sm text-mineshaft-300">
<div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
Step 2: Configure your instance-wide settings to enable integration with Slack. Copy
the values from the App Credentials page of your custom Slack App.
</div>
frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ export const ResourceOverviewPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "Resource Overview" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Resource Overview"
frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
+4 -4
View File
@@ -139,7 +139,7 @@ const IdentityPanelTable = ({
<div className="relative">
<FontAwesomeIcon icon={faShieldHalved} />
<FontAwesomeIcon
className="absolute -right-1 -bottom-[0.01rem]"
className="absolute -bottom-[0.01rem] -right-1"
size="2xs"
icon={faXmark}
/>
@@ -200,11 +200,11 @@ export const MachineIdentitiesTable = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-medium text-mineshaft-100">Machine Identities</p>
<p className="text-sm text-bunker-300">Manage machine identities across your instance.</p>
<p className="text-mineshaft-100 text-xl font-medium">Machine Identities</p>
<p className="text-bunker-300 text-sm">Manage machine identities across your instance.</p>
</div>
</div>
<IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
+18 -18
View File
@@ -200,15 +200,15 @@ const ViewMembersModalContent = ({
/>
<TableContainer
className={twMerge(
"mt-4 flex flex-1 flex-col border border-mineshaft-500 bg-mineshaft-700",
"border-mineshaft-500 bg-mineshaft-700 mt-4 flex flex-1 flex-col border",
Boolean(filteredMembers.length) && "rounded-b-none"
)}
>
<Table className="overflow-y-auto bg-mineshaft-700">
<Table className="bg-mineshaft-700 overflow-y-auto">
<THead className="sticky top-0 z-50">
<Tr>
<Th className="w-1/3 border-none bg-mineshaft-700 p-0">
<div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
<Th className="bg-mineshaft-700 w-1/3 border-none p-0">
<div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
Name
<IconButton
variant="plain"
@@ -226,8 +226,8 @@ const ViewMembersModalContent = ({
</IconButton>
</div>
</Th>
<Th className="w-1/3 border-none bg-mineshaft-700 p-0">
<div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
<Th className="bg-mineshaft-700 w-1/3 border-none p-0">
<div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
Email
<IconButton
variant="plain"
@@ -245,13 +245,13 @@ const ViewMembersModalContent = ({
</IconButton>
</div>
</Th>
<Th className="w-1/4 border-none bg-mineshaft-700 p-0">
<div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
<Th className="bg-mineshaft-700 w-1/4 border-none p-0">
<div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
Role
</div>
</Th>
<Th className="w-5 border-none bg-mineshaft-700 p-0">
<div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5" />
<Th className="bg-mineshaft-700 w-5 border-none p-0">
<div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5" />
</Th>
</Tr>
</THead>
@@ -277,7 +277,7 @@ const ViewMembersModalContent = ({
status !== OrgMembershipStatus.Accepted && (
<Button
isDisabled={resendOrgInvite.isPending}
className="ml-2 h-7 border-mineshaft-600 bg-mineshaft-800/50 font-normal"
className="border-mineshaft-600 bg-mineshaft-800/50 ml-2 h-7 font-normal"
colorSchema="primary"
variant="outline_bg"
size="xs"
@@ -296,7 +296,7 @@ const ViewMembersModalContent = ({
</div>
</Td>
<Td className="max-w-0">
<Badge className="flex w-fit max-w-full items-center gap-x-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
<Badge className="bg-mineshaft-400/50 text-bunker-200 flex w-fit max-w-full items-center gap-x-1 whitespace-nowrap">
<p className="truncate capitalize">{member.role.replace("-", " ")}</p>
{Boolean(member.roleId) && (
<Tooltip content="This member has a custom role assigned.">
@@ -351,7 +351,7 @@ const ViewMembersModalContent = ({
</Table>
{!filteredMembers.length && (
<EmptyState
className="my-auto bg-mineshaft-700"
className="bg-mineshaft-700 my-auto"
title={
members.length
? "No organization members match search..."
@@ -363,7 +363,7 @@ const ViewMembersModalContent = ({
</TableContainer>
{Boolean(filteredMembers.length) && (
<Pagination
className="rounded-b-md border border-t-0 bg-mineshaft-700"
className="bg-mineshaft-700 rounded-b-md border border-t-0"
count={filteredMembers.length}
page={page}
perPage={perPage}
@@ -545,7 +545,7 @@ const OrganizationsPanelTable = ({
<Tooltip className="text-center" content="View Members">
<FontAwesomeIcon
icon={faEye}
className="mr-1.5 text-mineshaft-300"
className="text-mineshaft-300 mr-1.5"
size="sm"
/>
</Tooltip>
@@ -711,11 +711,11 @@ export const OrganizationsTable = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-medium text-mineshaft-100">Organizations</p>
<p className="text-sm text-bunker-300">
<p className="text-mineshaft-100 text-xl font-medium">Organizations</p>
<p className="text-bunker-300 text-sm">
Manage, join and view organizations across your instance.
</p>
</div>
frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
+10 -10
View File
@@ -136,7 +136,7 @@ const UserPanelTable = ({
variant="plain"
size="sm"
className={twMerge(
"flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
isTableFiltered && "border-primary/50 text-primary"
)}
>
@@ -275,7 +275,7 @@ const UserPanelTable = ({
<div className="relative">
<FontAwesomeIcon icon={faShieldHalved} />
<FontAwesomeIcon
className="absolute -right-1 -bottom-[0.01rem]"
className="absolute -bottom-[0.01rem] -right-1"
size="2xs"
icon={faXmark}
/>
@@ -447,11 +447,11 @@ export const UserIdentitiesTable = () => {
selectedUsers.length > 0 && "h-16"
)}
>
<div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
<div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
<div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
<button
type="button"
className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
onClick={() => setSelectedUsers([])}
>
Unselect All
@@ -472,11 +472,11 @@ export const UserIdentitiesTable = () => {
</Button>
</div>
</div>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-medium text-mineshaft-100">User Identities</p>
<p className="text-sm text-bunker-300">Manage user identities across your instance.</p>
<p className="text-mineshaft-100 text-xl font-medium">User Identities</p>
<p className="text-bunker-300 text-sm">Manage user identities across your instance.</p>
</div>
</div>
<UserPanelTable
@@ -539,10 +539,10 @@ export const UserIdentitiesTable = () => {
onDeleteApproved={() => handleRemoveUsers()}
buttonText="Delete"
>
<div className="mt-4 text-sm text-mineshaft-400">
<div className="text-mineshaft-400 mt-4 text-sm">
The following users will be deleted:
</div>
<div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
<div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border p-4 pl-8 text-sm text-red-200">
<ul className="list-disc">
{selectedUsers?.map((user) => {
const email = user.email ?? user.username;
@@ -564,7 +564,7 @@ export const UserIdentitiesTable = () => {
<div className="inline-block">
<Badge
variant="primary"
className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
>
<FontAwesomeIcon icon={faWarning} />
<span>Deleting Yourself</span>
frontend/src/pages/admin/SignUpPage/SignUpPage.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export const SignUpPage = () => {
if (config?.initialized) return <ContentLoader text="Redirecting to admin page..." />;
return (
<div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6">
<Helmet>
<title>{t("common.head-title", { title: t("signup.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -95,7 +95,7 @@ export const SignUpPage = () => {
<div className="flex flex-col items-center space-y-2 text-center">
<img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
<div className="pt-4 text-4xl">Welcome to Infisical</div>
<div className="pb-4 text-bunker-300">Create your first Super Admin Account</div>
<div className="text-bunker-300 pb-4">Create your first Super Admin Account</div>
</div>
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="mt-8">
frontend/src/pages/auth/CliRedirectPage/CliRedirectPage.tsx
+7 -7
View File
@@ -35,7 +35,7 @@ export const CliRedirectPage = () => {
};
return (
<div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
<div className="bg-bunker-800 flex flex-col justify-between md:h-screen">
<Helmet>
<title>Infisical CLI | Login Successful!</title>
<link rel="icon" href="/infisical.ico" />
@@ -54,18 +54,18 @@ export const CliRedirectPage = () => {
{cliToken ? (
<>
<div className="pb-4">
<p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
<p className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
Unable to reach CLI
</p>
<p className="text-light mb-1 text-center text-lg text-mineshaft-400">
<p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
Your login was successful but, Infisical couldn&apos;t automatically push your login
token to the CLI.
</p>
<p className="text-light mb-1 text-center text-lg text-mineshaft-400">
<p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
Please copy the token below and manually provide it to your CLI.
</p>
</div>
<div className="dark relative flex max-h-36 max-w-xl flex-col items-center space-y-4 overflow-y-auto rounded-md border border-mineshaft-700 bg-mineshaft-900 p-3">
<div className="border-mineshaft-700 bg-mineshaft-900 dark relative flex max-h-36 max-w-xl flex-col items-center space-y-4 overflow-y-auto rounded-md border p-3">
<SecretInput value={cliToken as string} />
<div className="mx-1 flex">
<IconButton
@@ -83,10 +83,10 @@ export const CliRedirectPage = () => {
</>
) : (
<>
<p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
<p className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
Head back to your terminal
</p>
<p className="text-light mb-1 text-lg text-mineshaft-400">
<p className="text-light text-mineshaft-400 mb-1 text-lg">
You&apos;ve successfully logged in to the Infisical CLI
</p>
</>
frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx
+5 -5
View File
@@ -3,27 +3,27 @@ import { Link } from "@tanstack/react-router";
export const EmailNotVerifiedPage = () => {
return (
<div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
<Helmet>
<title>Request a New Invite</title>
<link rel="icon" href="/infisical.ico" />
</Helmet>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
</div>
</Link>
<div className="mx-auto flex w-full flex-col items-center justify-center">
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Your email was not verified
</h1>
<p className="w-max justify-center text-center text-sm text-gray-400">
Please try again. <br /> Note: If it still doesn&apos;t work, please reach out to us at
support@infisical.com
</p>
<div className="mt-6 flex flex-row text-sm text-bunker-400">
<div className="text-bunker-400 mt-6 flex flex-row text-sm">
<Link to="/login">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
Back to Login
</span>
</Link>
frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx
+8 -8
View File
@@ -62,7 +62,7 @@ export const LoginLdapPage = () => {
};
return (
<div className="flex h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
<Helmet>
<title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -71,7 +71,7 @@ export const LoginLdapPage = () => {
<meta name="og:description" content={t("login.og-description") ?? ""} />
</Helmet>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img
src="/images/gradientLogo.svg"
style={{
@@ -83,12 +83,12 @@ export const LoginLdapPage = () => {
</div>
</Link>
<div className="mx-auto w-full max-w-md md:px-6">
<p className="mx-auto mb-8 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<p className="bg-linear-to-b to-bunker-200 mx-auto mb-8 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
What&apos;s your LDAP Login?
</p>
<form onSubmit={handleSubmission}>
{!config.defaultAuthOrgSlug && !passedOrgSlug && (
<div className="relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
<Input
value={organizationSlug}
@@ -103,7 +103,7 @@ export const LoginLdapPage = () => {
</div>
</div>
)}
<div className="relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
<Input
value={username}
@@ -118,7 +118,7 @@ export const LoginLdapPage = () => {
/>
</div>
</div>
<div className="relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
<Input
value={password}
@@ -132,7 +132,7 @@ export const LoginLdapPage = () => {
/>
</div>
</div>
<div className="mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center lg:w-1/6">
<Button
type="submit"
colorSchema="primary"
@@ -150,7 +150,7 @@ export const LoginLdapPage = () => {
navigate({ to: "/login" });
}}
type="button"
className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
className="text-bunker-300 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4"
>
{t("login.other-option")}
</button>
frontend/src/pages/auth/LoginPage/LoginPage.tsx
+2 -2
View File
@@ -64,7 +64,7 @@ export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
};
return (
<div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6">
<Helmet>
<title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -73,7 +73,7 @@ export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
<meta name="og:description" content={t("login.og-description") ?? ""} />
</Helmet>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img
src="/images/gradientLogo.svg"
style={{
frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
+12 -12
View File
@@ -176,7 +176,7 @@ export const InitialStep = ({
onSubmit={handleLogin}
className="mx-auto flex w-full flex-col items-center justify-center"
>
<h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Login to Infisical
</h1>
<RegionSelect />
@@ -215,7 +215,7 @@ export const InitialStep = ({
onSubmit={handleLogin}
className="mx-auto flex w-full flex-col items-center justify-center"
>
<h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Login to Infisical
</h1>
<RegionSelect />
@@ -284,7 +284,7 @@ export const InitialStep = ({
window.open(`/api/v1/sso/redirect/google${queryString ? `?${queryString}` : ""}`);
window.close();
}}
className="h-10 w-full bg-mineshaft-600"
className="bg-mineshaft-600 h-10 w-full"
>
<FontAwesomeIcon icon={faGoogle} />
</IconButton>
@@ -313,7 +313,7 @@ export const InitialStep = ({
window.open(`/api/v1/sso/redirect/github${queryString ? `?${queryString}` : ""}`);
window.close();
}}
className="h-10 w-full bg-mineshaft-600"
className="bg-mineshaft-600 h-10 w-full"
>
<FontAwesomeIcon icon={faGithub} />
</IconButton>
@@ -342,7 +342,7 @@ export const InitialStep = ({
window.open(`/api/v1/sso/redirect/gitlab${queryString ? `?${queryString}` : ""}`);
window.close();
}}
className="h-10 w-full bg-mineshaft-600"
className="bg-mineshaft-600 h-10 w-full"
>
<FontAwesomeIcon icon={faGitlab} />
</IconButton>
@@ -352,9 +352,9 @@ export const InitialStep = ({
{(!config.enabledLoginMethods ||
(shouldDisplayLoginMethod(LoginMethod.EMAIL) && config.enabledLoginMethods.length > 1)) && (
<div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
<div className="w-full border-t border-mineshaft-400/60" />
<span className="mx-2 text-xs text-mineshaft-200">or</span>
<div className="w-full border-t border-mineshaft-400/60" />
<div className="border-mineshaft-400/60 w-full border-t" />
<span className="text-mineshaft-200 mx-2 text-xs">or</span>
<div className="border-mineshaft-400/60 w-full border-t" />
</div>
)}
{shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
@@ -415,9 +415,9 @@ export const InitialStep = ({
shouldDisplayLoginMethod(LoginMethod.GOOGLE) ||
shouldDisplayLoginMethod(LoginMethod.GITHUB) ||
shouldDisplayLoginMethod(LoginMethod.GITLAB)) ? (
<div className="mt-6 flex flex-row text-sm text-bunker-400">
<div className="text-bunker-400 mt-6 flex flex-row text-sm">
<Link to="/signup">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
Don&apos;t have an account yet? {t("login.create-account")}
</span>
</Link>
@@ -426,9 +426,9 @@ export const InitialStep = ({
<div className="mt-4" />
)}
{shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
<div className="mt-2 flex flex-row text-sm text-bunker-400">
<div className="text-bunker-400 mt-2 flex flex-row text-sm">
<Link to="/verify-email">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
Forgot password? Recover your account
</span>
</Link>
frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
+9 -9
View File
@@ -301,7 +301,7 @@ export const PasswordStep = ({
if (shouldShowMfa) {
return (
<div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto">
<Mfa
email={email}
successCallback={mfaSuccessCallback}
@@ -326,7 +326,7 @@ export const PasswordStep = ({
if (hasExchangedPrivateKey) {
return (
<div className="fixed top-0 left-0 h-screen w-screen bg-bunker-800">
<div className="bg-bunker-800 fixed left-0 top-0 h-screen w-screen">
<ContentLoader />
</div>
);
@@ -335,11 +335,11 @@ export const PasswordStep = ({
return (
<form onSubmit={handleLogin} className="mx-auto h-full w-full max-w-md px-6 pt-8">
<div className="mb-8">
<p className="mx-auto mb-4 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<p className="bg-linear-to-b to-bunker-200 mx-auto mb-4 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
What&apos;s your Infisical password?
</p>
</div>
<div className="relative mx-auto flex max-h-24 w-full min-w-88 items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="min-w-88 relative mx-auto flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
<Input
value={password}
@@ -354,7 +354,7 @@ export const PasswordStep = ({
</div>
</div>
{shouldShowCaptcha && envConfig.CAPTCHA_SITE_KEY && (
<div className="mx-auto mt-4 flex w-full min-w-88 items-center justify-center lg:w-1/6">
<div className="min-w-88 mx-auto mt-4 flex w-full items-center justify-center lg:w-1/6">
<HCaptcha
theme="dark"
sitekey={envConfig.CAPTCHA_SITE_KEY}
@@ -363,7 +363,7 @@ export const PasswordStep = ({
/>
</div>
)}
<div className="mx-auto mt-4 flex w-full min-w-88 items-center justify-center rounded-md text-center lg:w-1/6">
<div className="min-w-88 mx-auto mt-4 flex w-full items-center justify-center rounded-md text-center lg:w-1/6">
<Button
disabled={shouldShowCaptcha && captchaToken === ""}
type="submit"
@@ -376,13 +376,13 @@ export const PasswordStep = ({
{t("login.login")}
</Button>
</div>
<div className="mx-auto mt-4 flex w-max flex-col items-center text-xs text-bunker-400">
<div className="text-bunker-400 mx-auto mt-4 flex w-max flex-col items-center text-xs">
<span className="max-w-sm px-4 text-center duration-200">
Infisical Master Password serves as a decryption mechanism so that even Google is not able
to access your secrets.
</span>
<Link to="/verify-email">
<span className="mt-2 cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
{t("login.forgot-password")}
</span>
</Link>
@@ -393,7 +393,7 @@ export const PasswordStep = ({
navigate({ to: "/login" });
}}
type="button"
className="mt-2 cursor-pointer text-xs text-bunker-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
className="text-bunker-400 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-xs duration-200 hover:underline hover:underline-offset-4"
>
{t("login.other-option")}
</button>
frontend/src/pages/auth/LoginPage/components/SSOStep/SSOStep.tsx
+4 -4
View File
@@ -36,11 +36,11 @@ export const SSOStep = ({ setStep, type }: Props) => {
return (
<div className="mx-auto w-full max-w-md md:px-6">
<p className="mx-auto mb-8 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<p className="bg-linear-to-b to-bunker-200 mx-auto mb-8 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
What&apos;s your organization slug?
</p>
<form onSubmit={handleSubmission}>
<div className="relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
<div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
<Input
value={ssoIdentifier}
@@ -54,7 +54,7 @@ export const SSOStep = ({ setStep, type }: Props) => {
/>
</div>
</div>
<div className="mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-88 lg:w-1/6">
<div className="md:min-w-88 mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center lg:w-1/6">
<Button
type="submit"
colorSchema="primary"
@@ -72,7 +72,7 @@ export const SSOStep = ({ setStep, type }: Props) => {
setStep(0);
}}
type="button"
className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
className="text-bunker-300 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4"
>
{t("login.other-option")}
</button>
frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ export const LoginSsoPage = () => {
};
return (
<div className="flex h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
<Helmet>
<title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -52,7 +52,7 @@ export const LoginSsoPage = () => {
<meta name="og:description" content={t("login.og-description") ?? ""} />
</Helmet>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img
src="/images/gradientLogo.svg"
style={{ height: "90px", width: "120px" }}
frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx
+2 -2
View File
@@ -36,9 +36,9 @@ export const PasswordResetPage = () => {
const navigate = useNavigate();
return (
<div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
</div>
</Link>
frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const ConfirmEmailStep = ({ onComplete }: Props) => {
} = useVerifyPasswordResetCode();
return (
<div className="mx-auto flex w-full flex-col items-center justify-center">
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Confirm your email
</h1>
<p className="mb-8 w-max justify-center text-center text-sm text-gray-400">
frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx
+18 -18
View File
@@ -171,7 +171,7 @@ export const EnterPasswordStep = ({
onSubmit={handleSubmit(resetPasswordHandler)}
className="mx-auto flex w-full flex-col items-center justify-center"
>
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Enter new password
</h1>
<p className="w-max justify-center text-center text-sm text-gray-400">
@@ -222,13 +222,13 @@ export const EnterPasswordStep = ({
passwordErrorEscapeChar ||
passwordErrorLowEntropy ||
passwordErrorBreached ? (
<div className="mt-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 drop-shadow-sm">
<div className="border-mineshaft-600 bg-mineshaft-800 mt-4 rounded-sm border p-4 drop-shadow-sm">
<div className="mb-1 ml-2 text-sm text-gray-300">Password should contain:</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorTooShort ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
at least 14 characters
@@ -236,9 +236,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorTooLong ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
at most 100 characters
@@ -246,9 +246,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorNoLetterChar ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div
className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -258,9 +258,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorNoNumOrSpecialChar ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div
className={`${
@@ -272,9 +272,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorRepeatedChar ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div
className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -284,9 +284,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorEscapeChar ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div
className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -296,9 +296,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorLowEntropy ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div
className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -308,9 +308,9 @@ export const EnterPasswordStep = ({
</div>
<div className="ml-2 flex flex-row items-center justify-start">
{passwordErrorBreached ? (
<FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
<FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
<FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
)}
<div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
Password was found in a data breach.
frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export const InputBackupKeyStep = ({ verificationToken, onComplete }: Props) =>
onSubmit={handleSubmit(getEncryptedKeyHandler)}
className="mx-auto flex w-full flex-col items-center justify-center"
>
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Enter your backup key
</h1>
<p className="w-max justify-center text-center text-sm text-gray-400">
frontend/src/pages/auth/PasswordSetupPage/PasswordSetupPage.tsx
+20 -20
View File
@@ -96,11 +96,11 @@ export const PasswordSetupPage = () => {
passwordErrorBreached;
return (
<div className="flex h-screen w-full flex-col items-center justify-center bg-bunker-800">
<div className="bg-bunker-800 flex h-screen w-full flex-col items-center justify-center">
<form onSubmit={handleSetPassword}>
<Card className="flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 px-8 py-4">
<Card className="border-mineshaft-600 flex w-full max-w-lg flex-col rounded-md border px-8 py-4">
<CardTitle
className="p-0 pt-2 pb-4 text-left text-xl"
className="p-0 pb-4 pt-2 text-left text-xl"
subTitle="Make sure to store your password somewhere safe."
>
<div className="flex flex-row items-center">
@@ -173,13 +173,13 @@ export const PasswordSetupPage = () => {
}
/>
</FormControl>
<div className="mb-4 flex w-full max-w-md flex-col items-start rounded-md bg-mineshaft-700 px-2 py-2 transition-opacity duration-100">
<div className="bg-mineshaft-700 mb-4 flex w-full max-w-md flex-col items-start rounded-md px-2 py-2 transition-opacity duration-100">
<div className="mb-1 text-sm text-gray-400">Password must contain:</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorTooShort ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -189,9 +189,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorTooLong ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -201,9 +201,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorNoLetterChar ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -213,9 +213,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorNoNumOrSpecialChar ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${
@@ -227,9 +227,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorRepeatedChar ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -239,9 +239,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorEscapeChar ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -251,9 +251,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorLowEntropy ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -263,9 +263,9 @@ export const PasswordSetupPage = () => {
</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorBreached ? (
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}
frontend/src/pages/auth/RequestNewInvitePage/RequestNewInvitePage.tsx
+5 -5
View File
@@ -6,16 +6,16 @@ import { Helmet } from "react-helmet";
*/
export const RequestNewInvitePage = () => {
return (
<div className="flex flex-col justify-between bg-bunker-700 md:h-screen">
<div className="bg-bunker-700 flex flex-col justify-between md:h-screen">
<Helmet>
<title>Request a New Invite</title>
<link rel="icon" href="/infisical.ico" />
</Helmet>
<div className="mt-8 flex h-screen w-screen flex-col items-center justify-center text-bunker-200">
<p className="text-4xl text-primary-100">Oops, your invite has expired.</p>
<div className="text-bunker-200 mt-8 flex h-screen w-screen flex-col items-center justify-center">
<p className="text-primary-100 text-4xl">Oops, your invite has expired.</p>
<p className="my-4 text-lg">Ask your admin for a new one.</p>
<p className="max-w-xs px-7 text-center text-sm leading-tight text-bunker-400">
<span className="rounded-md bg-primary-500/40 px-1 text-black">Note:</span> If it still
<p className="text-bunker-400 max-w-xs px-7 text-center text-sm leading-tight">
<span className="bg-primary-500/40 rounded-md px-1 text-black">Note:</span> If it still
doesn&apos;t work, please reach out to us at support@infisical.com
</p>
</div>
frontend/src/pages/auth/SelectOrgPage/EmailDuplicationConfirmation.tsx
+8 -8
View File
@@ -37,7 +37,7 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
}, [logout, navigate]);
return (
<div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto">
<Helmet>
<title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -45,7 +45,7 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
<meta property="og:title" content={t("login.og-title") ?? ""} />
<meta name="og:description" content={t("login.og-description") ?? ""} />
</Helmet>
<div className="mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 border-mineshaft-500 p-10 shadow-lg">
<div className="border-mineshaft-500 mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 p-10 shadow-lg">
<Link to="/">
<div className="mb-4 flex justify-center">
<img
@@ -60,29 +60,29 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
</Link>
<form className="mx-auto flex w-full flex-col items-center justify-center">
<div className="mb-6">
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
Multiple Accounts Detected
</h1>
<p className="text-md mb-4 text-center text-white">
<span className="text-slate-300">You&apos;re currently logged in as</span>{" "}
<b>{duplicateAccounts?.data?.myAccount?.username}</b>.
</p>
<div className="mt-4 mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
<p className="mt-1 mb-2 text-sm text-bunker-300">
<div className="border-l-primary bg-mineshaft-300/5 mb-4 mt-4 flex flex-col rounded-r border-l-2 px-4 py-2.5">
<p className="text-bunker-300 mb-2 mt-1 text-sm">
We&apos;ve detected multiple accounts using variations of the same email address.
</p>
</div>
</div>
<div className="mb-4 w-full border-b border-mineshaft-400 pb-1 text-sm text-mineshaft-200">
<div className="border-mineshaft-400 text-mineshaft-200 mb-4 w-full border-b pb-1 text-sm">
Your other accounts
</div>
<div className="flex h-full max-h-60 thin-scrollbar w-full flex-col items-stretch gap-2 overflow-auto rounded-md">
<div className="thin-scrollbar flex h-full max-h-60 w-full flex-col items-stretch gap-2 overflow-auto rounded-md">
{duplicateAccounts?.data?.duplicateAccounts?.map((el) => {
const lastSession = el.devices?.at(-1);
return (
<div
key={el.id}
className="flex items-center gap-8 rounded-md bg-mineshaft-700 px-4 py-3 text-gray-200"
className="bg-mineshaft-700 flex items-center gap-8 rounded-md px-4 py-3 text-gray-200"
>
<div className="group flex grow flex-col">
<div className="truncate text-sm transition-colors">{el.username}</div>
frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const SelectOrganizationPage = () => {
if (duplicateAccounts.isPending) {
return (
<div className="h-screen w-screen bg-bunker-800">
<div className="bg-bunker-800 h-screen w-screen">
<ContentLoader />
</div>
);
frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
+6 -6
View File
@@ -247,14 +247,14 @@ export const SelectOrganizationSection = () => {
((isInitialOrgCheckLoading || defaultSelectedOrg) && !shouldShowMfa)
) {
return (
<div className="h-screen w-screen bg-bunker-800">
<div className="bg-bunker-800 h-screen w-screen">
<ContentLoader />
</div>
);
}
return (
<div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto">
<Helmet>
<title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -269,7 +269,7 @@ export const SelectOrganizationSection = () => {
method={requiredMfaMethod}
/>
) : (
<div className="mx-auto mt-20 w-fit rounded-lg border-2 border-mineshaft-500 p-10 shadow-lg">
<div className="border-mineshaft-500 mx-auto mt-20 w-fit rounded-lg border-2 p-10 shadow-lg">
<Link to="/">
<div className="mb-4 flex justify-center">
<img
@@ -284,7 +284,7 @@ export const SelectOrganizationSection = () => {
</Link>
<form className="mx-auto flex w-full flex-col items-center justify-center">
<div className="mb-8 space-y-2">
<h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
Choose your organization
</h1>
<div className="space-y-1">
@@ -308,13 +308,13 @@ export const SelectOrganizationSection = () => {
<div
onClick={() => handleSelectOrganization(org)}
key={org.id}
className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 text-gray-200 capitalize shadow-md transition-colors hover:bg-mineshaft-600"
className="bg-mineshaft-700 hover:bg-mineshaft-600 group flex cursor-pointer items-center justify-between rounded-md px-4 py-3 capitalize text-gray-200 shadow-md transition-colors"
>
<p className="truncate transition-colors">{org.name}</p>
<FontAwesomeIcon
icon={faArrowRight}
className="text-gray-400 transition-all group-hover:translate-x-2 group-hover:text-primary-500"
className="group-hover:text-primary-500 text-gray-400 transition-all group-hover:translate-x-2"
/>
</div>
))
frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx
+8 -8
View File
@@ -138,11 +138,11 @@ export const SignupInvitePage = () => {
// Step 4 of the sign up process (download the emergency kit pdf)
const stepConfirmEmail = (
<div className="mx-1 mb-36 flex h-7/12 w-full max-w-xs flex-col items-center rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-4 py-8 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
<p className="mb-2 flex justify-center text-center text-4xl font-medium text-primary-100">
<div className="h-7/12 border-mineshaft-600 bg-mineshaft-800 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl border px-4 py-8 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
<p className="text-primary-100 mb-2 flex justify-center text-center text-4xl font-medium">
Confirm your email
</p>
<div className="mx-auto mt-4 mb-2 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
<div className="mx-auto mb-2 mt-4 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
<Button
onClick={async () => {
try {
@@ -179,8 +179,8 @@ export const SignupInvitePage = () => {
// Because this is the invite signup - we directly go to the last step of signup (email is already verified)
const main = (
<div className="mx-auto mb-32 h-7/12 w-max rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-8 py-10 drop-shadow-xl md:mb-16">
<p className="mx-8 mb-6 flex justify-center bg-linear-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
<div className="h-7/12 border-mineshaft-600 bg-mineshaft-800 mx-auto mb-32 w-max rounded-xl border px-8 py-10 drop-shadow-xl md:mb-16">
<p className="bg-linear-to-tr from-mineshaft-300 mx-8 mb-6 flex justify-center to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
Almost there!
</p>
<div className="relative z-0 flex max-h-24 w-full items-center justify-end rounded-lg md:p-2">
@@ -232,7 +232,7 @@ export const SignupInvitePage = () => {
return (
<div className="items-top ml-1 flex flex-row justify-start" key={key}>
<div>
<FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
</div>
<p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
</div>
@@ -259,7 +259,7 @@ export const SignupInvitePage = () => {
);
return (
<div className="flex h-screen flex-col items-center justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col items-center justify-center">
<Helmet>
<title>Sign Up</title>
<link rel="icon" href="/infisical.ico" />
@@ -274,7 +274,7 @@ export const SignupInvitePage = () => {
) : (
<>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
</div>
</Link>
frontend/src/pages/auth/SignUpPage/SignUpPage.tsx
+2 -2
View File
@@ -125,7 +125,7 @@ export const SignUpPage = () => {
};
return (
<div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6 pb-28">
<Helmet>
<title>{t("common.head-title", { title: t("signup.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -133,7 +133,7 @@ export const SignUpPage = () => {
<meta property="og:title" content={t("signup.og-title") as string} />
<meta name="og:description" content={t("signup.og-description") as string} />
</Helmet>
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
</div>
<form onSubmit={(e) => e.preventDefault()}>{renderView(step)}</form>
frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx
+2 -2
View File
@@ -67,7 +67,7 @@ export const SignupSsoPage = () => {
};
return (
<div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
<Helmet>
<title>{t("common.head-title", { title: t("signup.title") })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -75,7 +75,7 @@ export const SignupSsoPage = () => {
<meta property="og:title" content={t("signup.og-title") as string} />
<meta name="og:description" content={t("signup.og-description") as string} />
</Helmet>
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img
src="/images/gradientLogo.svg"
style={{
frontend/src/pages/auth/SignUpSsoPage/components/EmailConfirmationStep/EmailConfirmationStep.tsx
+7 -7
View File
@@ -138,7 +138,7 @@ export const EmailConfirmationStep = ({
return (
<div className="mx-auto h-full w-full pb-4 md:px-8">
<p className="text-md flex justify-center text-bunker-200">
<p className="text-md text-bunker-200 flex justify-center">
We&apos;ve sent a verification code to {email}
</p>
<div className="mx-auto hidden w-max min-w-[20rem] md:block">
@@ -149,7 +149,7 @@ export const EmailConfirmationStep = ({
fields={6}
onChange={setCode}
{...props}
className="mt-6 mb-2"
className="mb-2 mt-6"
/>
</div>
<div className="mx-auto mt-4 block w-max md:hidden">
@@ -160,11 +160,11 @@ export const EmailConfirmationStep = ({
fields={6}
onChange={setCode}
{...propsPhone}
className="mt-2 mb-2"
className="mb-2 mt-2"
/>
</div>
{codeError && <Error text="Oops. Your code is wrong. Please try again." />}
<div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="text-l w-full py-1 text-lg">
<Button
type="submit"
@@ -184,15 +184,15 @@ export const EmailConfirmationStep = ({
<div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
<div className="flex flex-row items-baseline gap-1 text-sm">
<span className="text-bunker-400">Don&apos;t see the code?</span>
<div className="text-md mt-2 flex flex-row text-bunker-400">
<div className="text-md text-bunker-400 mt-2 flex flex-row">
<button disabled={isLoading} onClick={resendCode} type="button">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
{isResendingVerificationEmail ? "Resending..." : "Resend"}
</span>
</button>
</div>
</div>
<p className="pb-2 text-sm text-bunker-400">Make sure to check your spam inbox.</p>
<p className="text-bunker-400 pb-2 text-sm">Make sure to check your spam inbox.</p>
</div>
</div>
);
frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx
+8 -8
View File
@@ -167,12 +167,12 @@ export const UserInfoSSOStep = ({
return (
<div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
<p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
<p className="text-medium bg-linear-to-b to-bunker-200 mx-8 mb-6 flex justify-center from-white bg-clip-text text-xl font-bold text-transparent md:mx-16">
{t("signup.step3-message")}
</p>
<div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
<div className="md:border-mineshaft-600 md:bg-mineshaft-800 mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:px-8">
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
Your Name
</p>
<Input
@@ -184,14 +184,14 @@ export const UserInfoSSOStep = ({
className="h-12"
/>
{nameError && (
<p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
<p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
Please, specify your name
</p>
)}
</div>
{!forceDefaultOrg && providerOrganizationName === undefined && (
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
Organization Name
</p>
<Input
@@ -204,7 +204,7 @@ export const UserInfoSSOStep = ({
isDisabled={forceDefaultOrg}
/>
{organizationNameError && (
<p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
<p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
Please, specify your organization name
</p>
)}
@@ -212,7 +212,7 @@ export const UserInfoSSOStep = ({
)}
{providerOrganizationName === undefined && (
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
Where did you hear about us? <span className="font-light">(optional)</span>
</p>
<Input
@@ -223,7 +223,7 @@ export const UserInfoSSOStep = ({
/>
</div>
)}
<div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="text-l w-full py-1 text-lg">
<Button
type="submit"
frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx
+8 -8
View File
@@ -43,7 +43,7 @@ export const VerifyEmailPage = () => {
};
return (
<div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
<div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
<Helmet>
<title>Reset Password</title>
<link rel="icon" href="/infisical.ico" />
@@ -55,7 +55,7 @@ export const VerifyEmailPage = () => {
/>
</Helmet>
<Link to="/">
<div className="mt-20 mb-4 flex justify-center">
<div className="mb-4 mt-20 flex justify-center">
<img
src="/images/gradientLogo.svg"
style={{
@@ -71,7 +71,7 @@ export const VerifyEmailPage = () => {
onSubmit={onSubmit}
className="mx-auto flex w-full flex-col items-center justify-center"
>
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Forgot your password?
</h1>
<p className="w-max justify-center text-center text-sm text-gray-400">
@@ -102,9 +102,9 @@ export const VerifyEmailPage = () => {
Continue
</Button>
</div>
<div className="mt-6 flex flex-row text-sm text-bunker-400">
<div className="text-bunker-400 mt-6 flex flex-row text-sm">
<Link to="/login">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
Back to Login
</span>
</Link>
@@ -113,16 +113,16 @@ export const VerifyEmailPage = () => {
)}
{step === 2 && (
<div className="mx-auto flex w-full flex-col items-center justify-center">
<h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
Look for an email in your inbox
</h1>
<p className="w-max max-w-lg justify-center text-center text-sm text-gray-400">
If the email is in our system, you will receive an email at{" "}
<span className="italic">{email}</span> with instructions on how to reset your password.
</p>
<div className="mt-6 flex flex-row text-sm text-bunker-400">
<div className="text-bunker-400 mt-6 flex flex-row text-sm">
<Link to="/login">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
Back to Login
</span>
</Link>
frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { PkiAlertsSection } from "./components";
export const AlertingPage = () => {
const { t } = useTranslation();
return (
<div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
<Helmet>
<title>{t("common.head-title", { title: "Alerting" })}</title>
</Helmet>
frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertsSection.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ export const PkiAlertsSection = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Alerts</p>
<p className="text-mineshaft-100 text-xl font-medium">Alerts</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.PkiAlerts}
frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionSection.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ export const PkiCollectionSection = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Certificate Collections</p>
<p className="text-mineshaft-100 text-xl font-medium">Certificate Collections</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.PkiCollections}
frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
data?.collections.map((pkiCollection) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
key={`pki-collection-${pkiCollection.id}`}
onClick={() =>
navigate({
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ const Page = () => {
};
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx
+3 -3
View File
@@ -6,9 +6,9 @@ type Props = {
export const CaCertificatesSection = ({ caId }: Props) => {
return (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">CA Certificates</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">CA Certificates</h3>
{/* <IconButton
ariaLabel="copy icon"
variant="plain"
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx
+3 -3
View File
@@ -6,9 +6,9 @@ type Props = {
export const CaCrlsSection = ({ caId }: Props) => {
return (
<div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">
<div className="border-mineshaft-600 bg-mineshaft-900 mt-4 w-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">
CA Certificate Revocation Lists (CRLs)
</h3>
</div>
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx
+23 -23
View File
@@ -38,9 +38,9 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
const ca = data as TInternalCertificateAuthority;
return ca ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">CA Details</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">CA Details</h3>
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Identity}>
{(isAllowed) => {
return (
@@ -66,13 +66,13 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">CA Type</p>
<p className="text-sm text-mineshaft-300">{caTypeToNameMap[ca.configuration.type]}</p>
<p className="text-mineshaft-300 text-sm font-medium">CA Type</p>
<p className="text-mineshaft-300 text-sm">{caTypeToNameMap[ca.configuration.type]}</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">CA ID</p>
<p className="text-mineshaft-300 text-sm font-medium">CA ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{ca.id}</p>
<p className="text-mineshaft-300 text-sm">{ca.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
@@ -93,9 +93,9 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
{ca.configuration.type === InternalCaType.INTERMEDIATE &&
ca.status !== CaStatus.PENDING_CERTIFICATE && (
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Parent CA ID</p>
<p className="text-mineshaft-300 text-sm font-medium">Parent CA ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm">
{ca.configuration.parentCaId
? ca.configuration.parentCaId
: "N/A - External Parent CA"}
@@ -121,42 +121,42 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</div>
)}
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{ca.name}</p>
<p className="text-mineshaft-300 text-sm font-medium">Name</p>
<p className="text-mineshaft-300 text-sm">{ca.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Status</p>
<p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
<p className="text-mineshaft-300 text-sm font-medium">Status</p>
<p className="text-mineshaft-300 text-sm">{caStatusToNameMap[ca.status]}</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm font-medium">Key Algorithm</p>
<p className="text-mineshaft-300 text-sm">
{certKeyAlgorithmToNameMap[ca.configuration.keyAlgorithm]}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Max Path Length</p>
<p className="text-sm text-mineshaft-300">{ca.configuration.maxPathLength ?? "-"}</p>
<p className="text-mineshaft-300 text-sm font-medium">Max Path Length</p>
<p className="text-mineshaft-300 text-sm">{ca.configuration.maxPathLength ?? "-"}</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Not Before</p>
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm font-medium">Not Before</p>
<p className="text-mineshaft-300 text-sm">
{ca.configuration.notBefore
? format(new Date(ca.configuration.notBefore), "yyyy-MM-dd")
: "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Not After</p>
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm font-medium">Not After</p>
<p className="text-mineshaft-300 text-sm">
{ca.configuration.notAfter
? format(new Date(ca.configuration.notAfter), "yyyy-MM-dd")
: "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Enable Direct Issuance</p>
<p className="text-sm text-mineshaft-300">{ca.enableDirectIssuance ? "True" : "False"}</p>
<p className="text-mineshaft-300 text-sm font-medium">Enable Direct Issuance</p>
<p className="text-mineshaft-300 text-sm">{ca.enableDirectIssuance ? "True" : "False"}</p>
</div>
{ca.status === CaStatus.ACTIVE && (
<ProjectPermissionCan
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { CaSection } from "./components";
export const CertificateAuthoritiesPage = () => {
const { t } = useTranslation();
return (
<div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
<Helmet>
<title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
</Helmet>
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaInstallCertModal/ExternalCaInstallForm.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all whitespace-pre-wrap">{csr}</p>
<p className="mr-4 whitespace-pre-wrap break-all">{csr}</p>
</div>
</>
)}
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
+2 -2
View File
@@ -70,9 +70,9 @@ export const CaSection = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Internal Certificate Authorities</p>
<p className="text-mineshaft-100 text-xl font-medium">Internal Certificate Authorities</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.CertificateAuthorities}
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
cas.map((ca) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
key={`ca-${ca.id}`}
onClick={() =>
navigate({
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
+2 -2
View File
@@ -74,9 +74,9 @@ export const ExternalCaSection = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">External Certificate Authorities</p>
<p className="text-mineshaft-100 text-xl font-medium">External Certificate Authorities</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.CertificateAuthorities}
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export const ExternalCaTable = ({ handlePopUpOpen }: Props) => {
data.map((ca) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
key={`ca-${ca.id}`}
onClick={() => {
handlePopUpOpen("ca", {
frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const CertificatesPage = () => {
);
return (
<div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
<Helmet>
<title>{t("common.head-title", { title: "Certificates" })}</title>
</Helmet>
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateContent.tsx
+3 -3
View File
@@ -92,7 +92,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all whitespace-pre-wrap">{certificate}</p>
<p className="mr-4 whitespace-pre-wrap break-all">{certificate}</p>
</div>
{certificateChain && (
<>
@@ -127,7 +127,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all whitespace-pre-wrap">{certificateChain}</p>
<p className="mr-4 whitespace-pre-wrap break-all">{certificateChain}</p>
</div>
</>
)}
@@ -164,7 +164,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all whitespace-pre-wrap">{privateKey}</p>
<p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
</div>
</>
)}
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx
+2 -2
View File
@@ -440,7 +440,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -474,7 +474,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx
+1 -1
View File
@@ -198,7 +198,7 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
<TextArea
{...field}
isDisabled={disableBootstrapCertValidation}
className="min-h-60 border-none bg-mineshaft-900 text-gray-400"
className="bg-mineshaft-900 min-h-60 border-none text-gray-400"
reSize="none"
/>
</FormControl>
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx
+2 -2
View File
@@ -399,7 +399,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -432,7 +432,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx
+3 -3
View File
@@ -63,9 +63,9 @@ export const CertificateTemplatesSection = ({ caId }: Props) => {
};
return (
<div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">Certificate Templates</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Certificate Templates</h3>
<ProjectPermissionCan
I={ProjectPermissionPkiTemplateActions.Create}
a={ProjectPermissionSub.CertificateTemplates}
frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
+2 -2
View File
@@ -52,9 +52,9 @@ export const CertificatesSection = () => {
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Certificates</p>
<p className="text-mineshaft-100 text-xl font-medium">Certificates</p>
<ProjectPermissionCan
I={ProjectPermissionCertificateActions.Create}
a={ProjectPermissionSub.Certificates}
frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export const IntegrationsListPage = () => {
<meta property="og:title" content="Manage your certificates in seconds" />
<meta name="og:description" content="Sync and manage PKI certificates across services" />
</Helmet>
<div className="relative container mx-auto max-w-7xl pb-12 text-white">
<div className="container relative mx-auto max-w-7xl pb-12 text-white">
<div className="mb-8">
<PageHeader
title="Integrations"
frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx
+11 -11
View File
@@ -134,7 +134,7 @@ export const PkiSyncRow = ({
});
}}
className={twMerge(
"group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
"hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
syncStatus === PkiSyncStatus.Failed && "bg-red/5 hover:bg-red/10"
)}
key={`sync-${id}`}
@@ -146,7 +146,7 @@ export const PkiSyncRow = ({
className="min-w-7"
/>
</Td>
<Td className="max-w-0 min-w-32!">
<Td className="min-w-32! max-w-0">
<div>
<div className="flex w-full items-center">
<p className="truncate">{name}</p>
@@ -155,12 +155,12 @@ export const PkiSyncRow = ({
<FontAwesomeIcon
icon={faInfoCircle}
size="xs"
className="ml-1 text-mineshaft-400"
className="text-mineshaft-400 ml-1"
/>
</Tooltip>
)}
</div>
<p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
<p className="text-bunker-300 truncate text-xs leading-4">{destinationDetails.name}</p>
</div>
</Td>
{subscriberId ? (
@@ -192,7 +192,7 @@ export const PkiSyncRow = ({
className="max-w-sm"
content={
[PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].includes(syncStatus) ? (
<div className="flex flex-col gap-2 py-1 whitespace-normal">
<div className="flex flex-col gap-2 whitespace-normal py-1">
{lastSyncedAt && (
<div>
<div
@@ -200,22 +200,22 @@ export const PkiSyncRow = ({
>
<FontAwesomeIcon
icon={faCalendarCheck}
className="ml-1 pt-0.5 pr-1.5 text-sm"
className="ml-1 pr-1.5 pt-0.5 text-sm"
/>
<div className="text-xs">Last Synced</div>
</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
<div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
{format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
</div>
</div>
)}
{failureMessage && (
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="text-xs">Failure Reason</div>
</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
<div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
{failureMessage}
</div>
</div>
@@ -235,7 +235,7 @@ export const PkiSyncRow = ({
content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
>
<div>
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<FontAwesomeIcon icon={faBan} />
{!syncStatus && "Auto-Sync Disabled"}
</Badge>
frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncTableCell.tsx
+5 -5
View File
@@ -23,7 +23,7 @@ export const PkiSyncTableCell = ({
secondaryClassName
}: PkiSyncTableCellProps) => {
return (
<Td className="max-w-0 min-w-32!">
<Td className="min-w-32! max-w-0">
<Tooltip
side="left"
className="max-w-2xl break-words"
@@ -31,7 +31,7 @@ export const PkiSyncTableCell = ({
<>
<p className="text-sm">{primaryText}</p>
{secondaryText && (
<p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
<p className={twMerge("text-bunker-300 text-xs leading-3", secondaryClassName)}>
{secondaryText}
</p>
)}
@@ -46,20 +46,20 @@ export const PkiSyncTableCell = ({
<FontAwesomeIcon
size="xs"
icon={faInfoCircle}
className="ml-1 inline-block text-bunker-300"
className="text-bunker-300 ml-1 inline-block"
/>
)}
</p>
{secondaryText && (
<p
className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
className={twMerge("text-bunker-300 truncate text-xs leading-4", secondaryClassName)}
>
{secondaryText}
{infoBadge === "secondary" && (
<FontAwesomeIcon
size="xs"
icon={faInfoCircle}
className="ml-1 inline-block text-bunker-300"
className="text-bunker-300 ml-1 inline-block"
/>
)}
</p>
frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncsTable.tsx
+2 -2
View File
@@ -285,14 +285,14 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
isTableFiltered && "border-primary/50 text-primary"
)}
>
<FontAwesomeIcon icon={faFilter} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
<DropdownMenuLabel>Status</DropdownMenuLabel>
{[PkiSyncStatus.Running, PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].map(
(status) => (
frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx
+4 -4
View File
@@ -60,17 +60,17 @@ export const PkiSyncsTab = () => {
return (
<>
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<div>
<div className="flex items-start gap-1">
<p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
<p className="text-mineshaft-100 text-xl font-medium">Certificate Syncs</p>
<a
href="https://infisical.com/docs/integrations/pki-syncs/overview"
target="_blank"
rel="noopener noreferrer"
>
<div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
<span>Docs</span>
<FontAwesomeIcon
@@ -80,7 +80,7 @@ export const PkiSyncsTab = () => {
</div>
</a>
</div>
<p className="text-sm text-bunker-300">
<p className="text-bunker-300 text-sm">
Use App Connections to sync certificates to third-party services.
</p>
</div>
frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export const PkiCollectionPage = () => {
};
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx
+9 -9
View File
@@ -21,9 +21,9 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
return pkiCollection ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">Collection Details</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Collection Details</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.PkiCollections}
@@ -51,9 +51,9 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">PKI Collection ID</p>
<p className="text-mineshaft-300 text-sm font-medium">PKI Collection ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{pkiCollection.id}</p>
<p className="text-mineshaft-300 text-sm">{pkiCollection.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
@@ -72,12 +72,12 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
</div>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
<p className="text-mineshaft-300 text-sm font-medium">Name</p>
<p className="text-mineshaft-300 text-sm">{pkiCollection.name}</p>
</div>
<div>
<p className="text-sm font-medium text-mineshaft-300">Description</p>
<p className="text-sm text-mineshaft-300">{pkiCollection.description}</p>
<p className="text-mineshaft-300 text-sm font-medium">Description</p>
<p className="text-mineshaft-300 text-sm">{pkiCollection.description}</p>
</div>
</div>
</div>
frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx
+3 -3
View File
@@ -45,9 +45,9 @@ export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
const sectionName = type === PkiItemType.CA ? "Certificate Authorities" : "Certificates";
return pkiCollection ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">{sectionName}</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">{sectionName}</h3>
<IconButton
ariaLabel="copy icon"
variant="plain"
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ const Page = () => {
};
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx
+3 -3
View File
@@ -11,9 +11,9 @@ export const PkiSubscriberCertificatesSection = ({ subscriberName }: Props) => {
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["revokeCertificate"] as const);
return (
<div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">Certificates</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 h-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Certificates</h3>
</div>
<div className="py-4">
<PkiSubscriberCertificatesTable
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx
+14 -14
View File
@@ -112,9 +112,9 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
);
return pkiSubscriber ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">PKI Subscriber Details</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">PKI Subscriber Details</h3>
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Edit}
a={ProjectPermissionSub.PkiSubscribers}
@@ -143,9 +143,9 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">PKI Subscriber ID</p>
<p className="text-mineshaft-300 text-sm font-medium">PKI Subscriber ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{pkiSubscriber.id}</p>
<p className="text-mineshaft-300 text-sm">{pkiSubscriber.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
@@ -164,23 +164,23 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
</div>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
<p className="text-mineshaft-300 text-sm font-medium">Name</p>
<p className="text-mineshaft-300 text-sm">{pkiSubscriber.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Status</p>
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm font-medium">Status</p>
<p className="text-mineshaft-300 text-sm">
{pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Common Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
<p className="text-mineshaft-300 text-sm font-medium">Common Name</p>
<p className="text-mineshaft-300 text-sm">{pkiSubscriber.commonName}</p>
</div>
{pkiSubscriber.lastOperationAt && (
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Last Operation (Local Time)</p>
<p className="text-sm text-mineshaft-300">
<p className="text-mineshaft-300 text-sm font-medium">Last Operation (Local Time)</p>
<p className="text-mineshaft-300 text-sm">
{new Date(pkiSubscriber.lastOperationAt).toLocaleString()}
</p>
</div>
@@ -188,7 +188,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
{pkiSubscriber.lastOperationStatus === SubscriberOperationStatus.FAILED && (
<div className="mb-4">
<GenericFieldLabel labelClassName="text-red" label="Last Operation Status">
<p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
<p className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
{pkiSubscriber.lastOperationMessage}
</p>
</GenericFieldLabel>
frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const PkiSubscribersPage = () => {
<Helmet>
<title>{t("common.head-title", { title: "PKI Subscribers" })}</title>
</Helmet>
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<div className="container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx
+2 -2
View File
@@ -655,7 +655,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -688,7 +688,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(
({ label, value: optionValue }) => {
return (
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx
+3 -3
View File
@@ -83,16 +83,16 @@ export const PkiSubscriberSection = () => {
const subscriberName = subscriberStatusData?.subscriberName || "";
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Subscribers</p>
<p className="text-mineshaft-100 text-xl font-medium">Subscribers</p>
<div className="flex w-full justify-end">
<a
target="_blank"
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/pki/subscribers"
>
<span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
<span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
Documentation{" "}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
data.map((subscriber) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
key={`pki-subscriber-${subscriber.id}`}
onClick={() =>
navigate({
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
+3 -3
View File
@@ -68,7 +68,7 @@ const PageContent = () => {
return (
<>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
<div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<Button
variant="link"
@@ -92,11 +92,11 @@ const PageContent = () => {
<img
alt={`${destinationDetails.name} sync`}
src={`/images/integrations/${destinationDetails.image}`}
className="mt-3 ml-1 w-16"
className="ml-1 mt-3 w-16"
/>
<div>
<p className="text-3xl font-medium text-white">{pkiSync.name}</p>
<p className="leading-3 text-bunker-300">{destinationDetails.name} PKI Sync</p>
<p className="text-bunker-300 leading-3">{destinationDetails.name} PKI Sync</p>
</div>
<PkiSyncActionTriggers pkiSync={pkiSync} />
</div>
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx
+4 -4
View File
@@ -132,7 +132,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
return (
<>
<div className="mt-4 ml-auto flex flex-wrap items-center justify-end gap-2">
<div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
{syncOption?.canImportCertificates && <PkiSyncImportStatusBadge pkiSync={pkiSync} />}
<PkiSyncRemoveStatusBadge pkiSync={pkiSync} />
{pkiSync.isAutoSyncEnabled ? (
@@ -149,7 +149,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
>
<div>
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<FontAwesomeIcon icon={faBan} />
<span>Auto-Sync Disabled</span>
</Badge>
@@ -165,7 +165,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
<Button
variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faRotate} />}
className="h-9 rounded-r-none bg-mineshaft-500"
className="bg-mineshaft-500 h-9 rounded-r-none"
isDisabled={!isAllowed || triggerSyncMutation.isPending}
isLoading={triggerSyncMutation.isPending}
onClick={handleTriggerSync}
@@ -179,7 +179,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
<IconButton
ariaLabel="add-folder-or-import"
variant="outline_bg"
className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
className="border-mineshaft border-l-mineshaft-700 bg-mineshaft-500 h-9 w-10 rounded-l-none border-l-2"
>
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncAuditLogsSection.tsx
+5 -5
View File
@@ -24,11 +24,11 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
return (
<div className="flex max-h-full w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-medium text-mineshaft-100">Sync Logs</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex max-h-full w-full flex-col gap-3 rounded-lg border px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
<h3 className="text-mineshaft-100 font-medium">Sync Logs</h3>
{subscription.auditLogs && (
<p className="text-xs text-bunker-300">
<p className="text-bunker-300 text-xs">
Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
</p>
)}
@@ -47,7 +47,7 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
}}
/>
) : (
<div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
<div className="bg-mineshaft-800 text-mineshaft-200 flex h-full items-center justify-center rounded-lg text-sm">
<div className="flex flex-col items-center gap-4 py-20">
<FontAwesomeIcon size="2x" icon={faFingerprint} />
<p>
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
+4 -4
View File
@@ -15,7 +15,7 @@ import { AzureKeyVaultPkiSyncDestinationSection } from "./PkiSyncDestinationSect
const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
<div>
<label className="text-sm text-bunker-300">{label}</label>
<label className="text-bunker-300 text-sm">{label}</label>
<div className="mt-1">{children}</div>
</div>
);
@@ -45,9 +45,9 @@ export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props)
});
return (
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
<h3 className="text-mineshaft-100 font-medium">Destination Configuration</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AzureKeyVaultPkiSyncDestinationSection.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { TAzureKeyVaultPkiSync } from "@app/hooks/api/pkiSyncs/types/azure-key-v
const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
<div>
<label className="text-sm text-bunker-300">{label}</label>
<label className="text-bunker-300 text-sm">{label}</label>
<div className="mt-1">{children}</div>
</div>
);
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDetailsSection.tsx
+5 -5
View File
@@ -22,7 +22,7 @@ const GenericFieldLabel = ({
labelClassName?: string;
}) => (
<div>
<label className={`text-sm text-bunker-300 ${labelClassName || ""}`}>{label}</label>
<label className={`text-bunker-300 text-sm ${labelClassName || ""}`}>{label}</label>
<div className="mt-1">{children}</div>
</div>
);
@@ -55,9 +55,9 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
});
return (
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-medium text-mineshaft-100">Details</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
<h3 className="text-mineshaft-100 font-medium">Details</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
@@ -91,7 +91,7 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
)}
{syncStatus === PkiSyncStatus.Failed && failureMessage && (
<GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
<p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
<p className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
{failureMessage}
</p>
</GenericFieldLabel>
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx
+3 -3
View File
@@ -25,9 +25,9 @@ export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
return (
<div>
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-medium text-mineshaft-100">Sync Options</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
<h3 className="text-mineshaft-100 font-medium">Sync Options</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ import { TPkiSync } from "@app/hooks/api/pkiSyncs";
const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
<div>
<label className="text-sm text-bunker-300">{label}</label>
<label className="text-bunker-300 text-sm">{label}</label>
<div className="mt-1">{children}</div>
</div>
);
@@ -30,9 +30,9 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
return (
<div>
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-medium text-mineshaft-100">Source</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
<h3 className="text-mineshaft-100 font-medium">Source</h3>
<div>
{!subscriberId && (
<Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
+3 -3
View File
@@ -102,7 +102,7 @@ export const PkiTemplateListPage = () => {
<Helmet>
<title>{t("common.head-title", { title: "PKI Templates" })}</title>
</Helmet>
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<div className="container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
@@ -110,9 +110,9 @@ export const PkiTemplateListPage = () => {
description="Manage certificate template to request and issue dynamic certificates following a strict format."
/>
</div>
<div className="container mx-auto mb-6 max-w-7xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 container mx-auto mb-6 max-w-7xl rounded-lg border p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-medium text-mineshaft-100">Templates</p>
<p className="text-mineshaft-100 text-xl font-medium">Templates</p>
<div className="flex w-full justify-end">
<ProjectPermissionCan
I={ProjectPermissionPkiTemplateActions.Create}
frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx
+2 -2
View File
@@ -327,7 +327,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -360,7 +360,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const SettingsPage = () => {
const { t } = useTranslation();
return (
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="bg-bunker-800 flex h-full w-full justify-center text-white">
<Helmet>
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>
frontend/src/pages/kms/KmipPage/KmipPage.tsx
+2 -2
View File
@@ -11,11 +11,11 @@ export const KmipPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "KMS" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="KMIP"
frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx
+2 -2
View File
@@ -129,7 +129,7 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
isError={Boolean(errors.description?.message)}
>
<TextArea
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
{...register("description")}
/>
</FormControl>
@@ -139,7 +139,7 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
render={({ field: { onChange, value }, fieldState: { error } }) => {
return (
<FormControl label="Permissions" errorText={error?.message} isError={Boolean(error)}>
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
{KMIP_PERMISSIONS_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx
+5 -5
View File
@@ -141,16 +141,16 @@ export const KmipClientTable = () => {
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">KMIP Clients</p>
<p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">KMIP Clients</p>
<div className="flex w-full justify-end pr-4">
<a
target="_blank"
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/kms"
>
<span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
<span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
Documentation{" "}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -222,7 +222,7 @@ export const KmipClientTable = () => {
const { name, id, description, permissions } = kmipClient;
return (
<Tr className="group h-10 hover:bg-mineshaft-700" key={`st-v3-${id}`}>
<Tr className="hover:bg-mineshaft-700 group h-10" key={`st-v3-${id}`}>
<Td>{name}</Td>
<Td className="max-w-80 break-all">{description}</Td>
<Td className="max-w-40">{[permissions.join(", ")]}</Td>
@@ -232,7 +232,7 @@ export const KmipClientTable = () => {
<IconButton
variant="plain"
colorSchema="primary"
className="ml-4 p-0 data-[state=open]:text-primary-400"
className="data-[state=open]:text-primary-400 ml-4 p-0"
ariaLabel="More options"
>
<FontAwesomeIcon size="lg" icon={faEllipsis} />
frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+2 -2
View File
@@ -11,11 +11,11 @@ export const OverviewPage = () => {
const { t } = useTranslation();
return (
<div className="h-full bg-bunker-800">
<div className="bg-bunker-800 h-full">
<Helmet>
<title>{t("common.head-title", { title: "KMS" })}</title>
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Overview Page"
frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
{plaintext ? (
<FormControl label="Decrypted Data (plaintext)">
<TextArea
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
isDisabled
value={plaintext}
/>
@@ -102,7 +102,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
>
<TextArea
{...register("ciphertext")}
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
/>
</FormControl>
)}
frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx
+2 -2
View File
@@ -81,7 +81,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
{ciphertext ? (
<FormControl label="Encrypted Data (Ciphertext)">
<TextArea
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
isDisabled
value={cmekEncrypt.data?.ciphertext}
/>
@@ -95,7 +95,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
>
<TextArea
{...register("plaintext")}
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
/>
</FormControl>
<Controller
frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx
+1 -1
View File
@@ -211,7 +211,7 @@ const CmekForm = ({ onComplete, cmek }: FormProps) => {
isError={Boolean(errors.description?.message)}
>
<TextArea
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
{...register("description")}
/>
</FormControl>
frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx
+2 -2
View File
@@ -93,7 +93,7 @@ const SignForm = ({ cmek }: FormProps) => {
{signature ? (
<FormControl label="Data Signature">
<TextArea
className="max-h-80 min-h-40 max-w-full min-w-full"
className="max-h-80 min-h-40 min-w-full max-w-full"
isDisabled
value={signature}
/>
@@ -105,7 +105,7 @@ const SignForm = ({ cmek }: FormProps) => {
errorText={errors.data?.message}
isError={Boolean(errors.data)}
>
<TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
<TextArea {...register("data")} className="max-h-80 min-h-40 min-w-full max-w-full" />
</FormControl>
<div className="mb-6 flex w-full items-center justify-between gap-2">
frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx
+5 -5
View File
@@ -214,16 +214,16 @@ export const CmekTable = () => {
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-4 flex items-center justify-between">
<p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">Keys</p>
<p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">Keys</p>
<div className="flex w-full justify-end pr-4">
<a
target="_blank"
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/kms"
>
<span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
<span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
Documentation{" "}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -298,7 +298,7 @@ export const CmekTable = () => {
return (
<Tr
className="group h-10 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 group h-10"
key={`st-v3-${id}`}
onMouseLeave={() => {
setCopyCipherText("");
@@ -351,7 +351,7 @@ export const CmekTable = () => {
<IconButton
variant="plain"
colorSchema="primary"
className="ml-4 p-0 data-[state=open]:text-primary-400"
className="data-[state=open]:text-primary-400 ml-4 p-0"
ariaLabel="More options"
>
<FontAwesomeIcon size="lg" icon={faEllipsis} />

Some files were not shown because too many files have changed in this diff Show More