[MOB-1221] dev: updated god mode ui #7879

Author: gurusainath

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -4,6 +4,7 @@ import { FC, useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
+import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
@@ -102,7 +103,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+  const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -122,6 +123,9 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         </>
       ),
     },
+  ];
+
+  const GITHUB_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -209,12 +213,29 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
-              {GITHUB_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
+          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+            <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+                {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col rounded-lg overflow-hidden">
+                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                  <Monitor className="w-3 h-3" />
+                  Web
+                </div>
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                  {GITHUB_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </div>

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
+import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
@@ -91,7 +92,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+  const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -111,6 +112,9 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
         </p>
       ),
     },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -196,12 +200,29 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
-              {GOOGLE_SERVICE_DETAILS.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
+          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col rounded-lg overflow-hidden">
+                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                  <Monitor className="w-3 h-3" />
+                  Web
+                </div>
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                  {GOOGLE_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </div>