docs: adds laravel forge app connection docs

frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx

@@ -17,10 +17,10 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {destinationDetails.name} Sync
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConfigured
             ? `Edit ${destinationDetails.name} Sync`
             : `Sync secrets to ${destinationDetails.name}`}

frontend/src/helpers/appConnections.ts

@@ -57,7 +57,14 @@ import { SupabaseConnectionMethod } from "@app/hooks/api/appConnections/types/su
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
-  { name: string; image: string; size?: number; icon?: IconDefinition; enterprise?: boolean }
+  {
+    name: string;
+    image: string;
+    size?: number;
+    icon?: IconDefinition;
+    enterprise?: boolean;
+    imageClassName?: string;
+  }
 > = {
   [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
   [AppConnection.GitHub]: { name: "GitHub", image: "GitHub.png" },
@@ -117,7 +124,11 @@ export const APP_CONNECTION_MAP: Record<
   },
   [AppConnection.Okta]: { name: "Okta", image: "Okta.png" },
   [AppConnection.Redis]: { name: "Redis", image: "Redis.png" },
-  [AppConnection.LaravelForge]: { name: "Laravel Forge", image: "Laravel Forge.png" }
+  [AppConnection.LaravelForge]: {
+    name: "Laravel Forge",
+    image: "Laravel Forge.png",
+    imageClassName: "object-contain"
+  }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx

@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
   const appDetails = APP_CONNECTION_MAP[app];
 
   return (
-    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
       <div className="relative">
         <img
           alt={`${appDetails.name} logo`}
           src={`/images/integrations/${appDetails.image}`}
-          className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+          className={`bg-bunker-500 h-12 w-12 rounded-md p-2 ${appDetails.imageClassName}`}
         />
         {appDetails.icon && (
           <FontAwesomeIcon
             icon={appDetails.icon}
-            className="absolute right-1 bottom-1 text-primary-700"
+            className="text-primary-700 absolute bottom-1 right-1"
           />
         )}
       </div>
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
         </p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
           onClick={onBack}
         >
           Select another App

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -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="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">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="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map((option) => {
           const {
             image,
@@ -78,9 +78,9 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                   ? 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"
+              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"
             >
-              <div className="relative">
+              {image && (
                 <img
                   src={`/images/integrations/${image}`}
                   style={{
@@ -89,14 +89,16 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                   className="mt-auto"
                   alt={`${name} logo`}
                 />
-                {icon && (
+              )}
+              {icon && (
+                <div className="relative">
                   <FontAwesomeIcon
-                    className="absolute -right-1.5 -bottom-1.5 text-primary-700"
+                    className="text-primary-700 absolute -bottom-1.5 -right-1.5"
                     size="xl"
                     icon={icon}
                   />
-                )}
-              </div>
+                </div>
+              )}
               <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>
@@ -125,7 +127,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -134,7 +136,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -145,7 +147,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>