awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 12:26:38 +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
frontend/src/components/secret-syncs/SecretSyncSelect.tsx
+18 -31
View File
@@ -1,6 +1,5 @@
import { faWrench } from "@fortawesome/free-solid-svg-icons"; import { faWrench } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Spinner, Tooltip } from "@app/components/v2"; import { Spinner, Tooltip } from "@app/components/v2";
import { useSubscription } from "@app/context"; import { useSubscription } from "@app/context";
@@ -34,38 +33,26 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
{secretSyncOptions?.map(({ destination, enterprise }) => { {secretSyncOptions?.map(({ destination, enterprise }) => {
const { image, name } = SECRET_SYNC_MAP[destination]; const { image, name } = SECRET_SYNC_MAP[destination];
return ( return (
<Tooltip <button
key={destination} type="button"
content={ onClick={() =>
enterprise && !subscription.enterpriseSecretSyncs ? "Enterprise Plan Only" : undefined 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 <img
type="button" src={`/images/integrations/${image}`}
onClick={() => height={40}
enterprise && !subscription.enterpriseSecretSyncs width={40}
? handlePopUpOpen("upgradePlan") className="mt-auto"
: onSelect(destination) alt={`${name} logo`}
} />
className={twMerge( <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
"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", {name}
enterprise && !subscription.enterpriseSecretSyncs </div>
? "border-0 bg-opacity-0 opacity-40" </button>
: ""
)}
>
<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>
); );
})} })}
<UpgradePlanModal <UpgradePlanModal
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
+18 -33
View File
@@ -1,6 +1,5 @@
import { faWrench } from "@fortawesome/free-solid-svg-icons"; import { faWrench } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { Spinner, Tooltip } from "@app/components/v2"; 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]; const { image, name, size = 50, enterprise = false } = APP_CONNECTION_MAP[option.app];
return ( return (
<Tooltip <button
key={option.app} type="button"
content={ onClick={() =>
enterprise && !subscription.enterpriseAppConnections enterprise && !subscription.enterpriseAppConnections
? "Enterprise Plan Only" ? handlePopUpOpen("upgradePlan")
: undefined : 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 <img
type="button" src={`/images/integrations/${image}`}
onClick={() => style={{
enterprise && !subscription.enterpriseAppConnections width: `${size}px`
? handlePopUpOpen("upgradePlan") }}
: onSelect(option.app) className="mt-auto"
} alt={`${name} logo`}
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", <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
enterprise && !subscription.enterpriseAppConnections {name}
? "border-0 bg-opacity-0 opacity-40" </div>
: "" </button>
)}
>
<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>
); );
})} })}
<UpgradePlanModal <UpgradePlanModal