docs + minor fixes

docs/integrations/cicd/circleci-context.mdx

@@ -0,0 +1,33 @@
+---
+title: "CircleCI Context"
+description: "How to sync secrets from Infisical to CircleCI Contexts"
+---
+
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+
+<Steps>
+  <Step title="CircleCI API Token">
+    Obtain an API token in User Settings > Personal API Tokens
+
+    ![integrations circleci token](../../images/integrations/circleci-context/integrations-circleci-token.png)
+
+    Navigate to your project's integrations tab in Infisical.
+
+    ![integrations](../../images/integrations/circleci-context/integrations-page.png)
+    <Tip>If you already have other integrations setup, click "Add Integration" on the top right corner to add the CircleCi Context integration.</Tip>
+
+    Press on the CircleCI Contexts tile and input your CircleCI API token to grant Infisical access to your CircleCI account.
+
+    ![integrations circleci authorization](../../images/integrations/circleci-context/integrations-circleci-context-auth.png)
+
+  </Step>
+  <Step title="Start integration">
+    Select which Infisical environment secrets you want to sync to which CircleCI Context and press create integration to start syncing secrets to CircleCI.
+
+    ![create integration circleci](../../images/integrations/circleci-context/integrations-circleci-context-create.png)
+    ![integrations circleci](../../images/integrations/circleci-context/integrations-circleci-context-list.png)
+
+  </Step>
+</Steps>

docs/mint.json

@@ -428,6 +428,7 @@
           "group": "View more",
           "pages": [
             "integrations/cicd/circleci",
+            "integrations/cicd/circleci-context",
             "integrations/cicd/travisci",
             "integrations/cicd/rundeck",
             "integrations/cicd/codefresh",

frontend/src/pages/integrations/circleci-context/authorize.tsx

@@ -52,27 +52,30 @@ export default function CircleCIContextCreateIntegrationPage() {
           className="px-6 text-left text-xl"
           subTitle="After adding your API Token, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center justify-between">
-            <div className="flex items-center pb-0.5">
+            <div className="flex items-center">
               <Image
                 src="/images/integrations/CircleCI.png"
                 height={30}
                 width={30}
                 alt="CircleCI logo"
               />
+              <span className="ml-1.5">CircleCI Context Integration </span>
             </div>
-            <span className="ml-1.5">CircleCI Context Integration </span>
+            <Link
-            <Link href="https://infisical.com/docs/integrations/cicd/circleci-context" passHref>
+              href="https://infisical.com/docs/integrations/cicd/circleci-context"
-              <a target="_blank" rel="noopener noreferrer">
+              target="_blank"
-                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              rel="noopener noreferrer"
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+              passHref
-                  Docs
+            >
-                  <FontAwesomeIcon
+              <div className="ml-2 mb-1 flex cursor-pointer flex-row items-center gap-1.5 rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                    icon={faArrowUpRightFromSquare}
+                <FontAwesomeIcon icon={faBookOpen} />
-                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                Docs
-                  />
+                <FontAwesomeIcon
-                </div>
+                  icon={faArrowUpRightFromSquare}
-              </a>
+                  className="mb-[0.07rem] text-xxs"
+                />
+              </div>
             </Link>
           </div>
         </CardTitle>

frontend/src/pages/integrations/circleci-context/create.tsx

@@ -118,7 +118,7 @@ export default function CircleCIContextCreateIntegrationPage() {
       <Card className="max-w-lg rounded-md p-8 pt-4">
         <CardTitle
           className="w-full px-0 text-left text-xl"
-          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI environment variables."
+          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI Context Variables."
         >
           <div className="flex w-full flex-row items-center justify-between">
             <div className="flex flex-row items-center gap-1.5">
@@ -212,7 +212,11 @@ export default function CircleCIContextCreateIntegrationPage() {
           control={control}
           name="targetContext"
           render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl errorText={error?.message} isError={Boolean(error)} label="Bitbucket Repo">
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error)}
+              label="CircleCI Context"
+            >
               <FilterableSelect
                 value={value}
                 getOptionValue={(option) => option.appId!}