awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
x032205
2025-05-23 20:18:05 -04:00
parent df57364985
commit 82f6c9fb58
2 changed files with 36 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/secret-syncs/SecretSyncSelect.tsx
View File

@@ -1,6 +1,5 @@
import { faWrench } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Spinner, Tooltip } from "@app/components/v2";
import { useSubscription } from "@app/context";
@@ -34,38 +33,26 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
{secretSyncOptions?.map(({ destination, enterprise }) => {
const { image, name } = SECRET_SYNC_MAP[destination];
return (
<Tooltip
key={destination}
content={
enterprise && !subscription.enterpriseSecretSyncs ? "Enterprise Plan Only" : undefined
<button
type="button"
onClick={() =>
enterprise && !subscription.enterpriseSecretSyncs
? handlePopUpOpen("upgradePlan")
: onSelect(destination)
}
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<button
type="button"
onClick={() =>
enterprise && !subscription.enterpriseSecretSyncs
? handlePopUpOpen("upgradePlan")
: onSelect(destination)
}
className={twMerge(
"group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600",
enterprise && !subscription.enterpriseSecretSyncs
? "border-0 bg-opacity-0 opacity-40"
: ""
)}
>
<img
src={`/images/integrations/${image}`}
height={40}
width={40}
className="mt-auto"
alt={`${name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{name}
</div>
</button>
</Tooltip>
<img
src={`/images/integrations/${image}`}
height={40}
width={40}
className="mt-auto"
alt={`${name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{name}
</div>
</button>
);
})}
<UpgradePlanModal

51
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
View File

@@ -1,6 +1,5 @@
import { faWrench } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { Spinner, Tooltip } from "@app/components/v2";
@@ -35,41 +34,27 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
const { image, name, size = 50, enterprise = false } = APP_CONNECTION_MAP[option.app];
return (
<Tooltip
key={option.app}
content={
<button
type="button"
onClick={() =>
enterprise && !subscription.enterpriseAppConnections
? "Enterprise Plan Only"
: undefined
? handlePopUpOpen("upgradePlan")
: onSelect(option.app)
}
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<button
type="button"
onClick={() =>
enterprise && !subscription.enterpriseAppConnections
? handlePopUpOpen("upgradePlan")
: onSelect(option.app)
}
className={twMerge(
"group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600",
enterprise && !subscription.enterpriseAppConnections
? "border-0 bg-opacity-0 opacity-40"
: ""
)}
>
<img
src={`/images/integrations/${image}`}
style={{
width: `${size}px`
}}
className="mt-auto"
alt={`${name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{name}
</div>
</button>
</Tooltip>
<img
src={`/images/integrations/${image}`}
style={{
width: `${size}px`
}}
className="mt-auto"
alt={`${name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{name}
</div>
</button>
);
})}
<UpgradePlanModal