Canvas: Improve spacing on Integrations tab
Change-Id: Ib2b7c1f15dfecabc56e39269ea122fc4f3842c33
diff --git a/apps/canvas/front/src/Integrations.tsx b/apps/canvas/front/src/Integrations.tsx
index 436c1e8..55acf1a 100644
--- a/apps/canvas/front/src/Integrations.tsx
+++ b/apps/canvas/front/src/Integrations.tsx
@@ -6,7 +6,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "./components/ui/button";
import { useToast } from "@/hooks/use-toast";
-import { Checkbox } from "./components/ui/checkbox";
+import { CircleCheck, CircleX } from "lucide-react";
import { useState, useCallback } from "react";
const schema = z.object({
@@ -70,24 +70,30 @@
};
return (
- <div className="px-4 py-1 space-y-6">
- <div>
- <div className="flex items-center space-x-2">
- <Checkbox checked={!!githubService} disabled />
- <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
- <h3 className="text-md font-medium mb-2">GitHub</h3>
- </label>
+ <div className="px-4 py-1">
+ <div className="flex flex-col gap-1">
+ <div className="flex flex-row items-center gap-1">
+ {githubService ? <CircleCheck /> : <CircleX />}
+ <div>Github</div>
</div>
{!!githubService && !isEditing && (
- <Button variant="outline" onClick={() => setIsEditing(true)}>
+ <Button variant="outline" className="w-fit" onClick={() => setIsEditing(true)}>
Update Access Token
</Button>
)}
{(!githubService || isEditing) && (
+ <div className="flex flex-row items-center gap-1 text-sm">
+ <div>Follow the link to generate new PAT:</div>
+ <a href="https://github.com/settings/personal-access-tokens" target="_blank">
+ https://github.com/settings/personal-access-tokens
+ </a>
+ </div>
+ )}
+ {(!githubService || isEditing) && (
<Form {...form}>
- <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
+ <form className="space-y-2" onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="githubToken"
@@ -96,8 +102,8 @@
<FormControl>
<Input
type="password"
- placeholder="GitHub Personal Access Token"
- className="border border-black"
+ placeholder="Personal Access Token"
+ className="w-1/4"
{...field}
/>
</FormControl>
@@ -105,7 +111,7 @@
</FormItem>
)}
/>
- <div className="flex space-x-2">
+ <div className="flex flex-row items-center gap-1">
<Button type="submit" disabled={isSaving}>
{isSaving ? "Saving..." : "Save"}
</Button>