fix: lint

This commit is contained in:
Piyush Gupta
2025-10-14 00:14:37 +05:30
parent fc7dd6679d
commit 3a259b45ed
9 changed files with 51 additions and 51 deletions
@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
const appDetails = APP_CONNECTION_MAP[app];
return (
<div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
<div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<div className="relative">
<img
alt={`${appDetails.name} logo`}
src={`/images/integrations/${appDetails.image}`}
className={`bg-bunker-500 h-12 w-12 rounded-md p-2 ${appDetails.imageClassName}`}
className={`h-12 w-12 rounded-md bg-bunker-500 p-2 ${appDetails.imageClassName}`}
/>
{appDetails.icon && (
<FontAwesomeIcon
icon={appDetails.icon}
className="text-primary-700 absolute bottom-1 right-1"
className="absolute right-1 bottom-1 text-primary-700"
/>
)}
</div>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{appDetails.name}
<a
href={`https://infisical.com/docs/integrations/app-connections/${app}`}
@@ -37,8 +37,8 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
</p>
</div>
{onBack && (
<button
type="button"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
onClick={onBack}
>
Select another App
@@ -46,7 +46,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -60,7 +60,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="h-118 grid grid-cols-4 content-start gap-2">
<div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map((option) => {
const {
image,
@@ -78,7 +78,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
? handlePopUpOpen("upgradePlan")
: onSelect(option.app)
}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
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"
>
{image && (
<img
@@ -93,7 +93,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
{icon && (
<div className="relative">
<FontAwesomeIcon
className="text-primary-700 absolute -bottom-1.5 -right-1.5"
className="absolute -right-1.5 -bottom-1.5 text-primary-700"
size="xl"
icon={icon}
/>
@@ -127,7 +127,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -136,7 +136,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -147,7 +147,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
</>
}
>
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
<div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<span className="text-xs">
Don&#39;t see the third-party service you&#39;re looking for?
</span>