feat: make collapsable triggers wider

iforge-uos · May 4, 2024 · 0c9a06c · 0c9a06c
1 parent 235d435
commit 0c9a06c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/apps/forge/src/components/signin/actions/ToolSelectionInput.tsx b/apps/forge/src/components/signin/actions/ToolSelectionInput.tsx
@@ -140,15 +140,13 @@ const ToolSelectionInput: FlowStepComponent = ({ onSecondary, onPrimary }) => {
   const toolSelectionDisplay = (
     <>
       <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full space-y-2">
-        <div className="flex items-center justify-between space-x-4 px-4">
-          <h4 className="text-sm font-semibold">Select Training</h4>
-          <CollapsibleTrigger asChild>
-            <Button variant="ghost" size="sm">
-              {isOpen ? <ChevronsDownUp className="h-4 w-4" /> : <ChevronsUpDown className="h-4 w-4" />}
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapsibleTrigger>
-        </div>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" className="flex items-center justify-between space-x-4 px-4 w-full">
+            <h4 className="text-sm font-semibold">Select Training</h4>
+            {isOpen ? <ChevronsDownUp className="h-4 w-4" /> : <ChevronsUpDown className="h-4 w-4" />}
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
         <>
           {userHasCompulsoryTraining ? (
             <ToolSelectionList // TODO honestly think this is best as a single list but with symbols for selectiblity, then we can have fulltextsearch

diff --git a/apps/forge/src/components/signin/dashboard/components/SignInDrawer.tsx b/apps/forge/src/components/signin/dashboard/components/SignInDrawer.tsx
@@ -33,33 +33,32 @@ export const SignInDrawer: FC<SignInDrawerProps> = ({
   return (
     <>
       <Collapsible key="1" className="space-y-2 mt-2 mb-2" defaultOpen={startExpanded}>
-        <div className="flex items-center justify-between space-x-4 px-4">
-          <div className="flex items-center gap-2">
-            <span className="inline-flex items-center justify-center h-6 w-6 rounded-sm bg-primary text-sm font-semibold text-primary-foreground">
-              {entries.length}
-            </span>
-            <h4 className="text-lg font-bold">{title}</h4>
-          </div>
-          <CollapsibleTrigger asChild>
-            <Button
-              className="flex items-center gap-2"
-              size="sm"
-              variant="outline"
-              onClick={toggleOpen}
-              disabled={entries.length === 0}
-            >
-              {entries.length === 0 ? (
-                <Ban className="h-4 w-4" />
-              ) : (
-                <>
-                  {isOpen ? "Hide" : "Show"}
-                  {isOpen ? <ArrowRightIcon className="h-4 w-4" /> : <ArrowDownIcon className="h-4 w-4" />}
-                  <span className="sr-only">{isOpen ? "Hide" : "Show"}</span>
-                </>
-              )}
-            </Button>
-          </CollapsibleTrigger>
-        </div>
+        <CollapsibleTrigger asChild>
+          <Button
+            className="flex items-center justify-between space-x-4 py-7 w-full"
+            style={{ paddingLeft: "18px", paddingRight: "18px" }}
+            size="sm"
+            variant="outline"
+            onClick={toggleOpen}
+            disabled={entries.length === 0}
+          >
+            <div className="flex items-center gap-2">
+              <span className="inline-flex items-center justify-center h-6 w-6 rounded-sm bg-primary text-sm font-semibold text-primary-foreground">
+                {entries.length}
+              </span>
+              <h4 className="text-lg font-bold">{title}</h4>
+            </div>
+            {entries.length === 0 ? (
+              <Ban className="h-4 w-4" />
+            ) : (
+              <>
+                {isOpen ? "Hide" : "Show"}
+                {isOpen ? <ArrowRightIcon className="h-4 w-4" /> : <ArrowDownIcon className="h-4 w-4" />}
+                <span className="sr-only">{isOpen ? "Hide" : "Show"}</span>
+              </>
+            )}
+          </Button>
+        </CollapsibleTrigger>
         <CollapsibleContent asChild>
           <div className="rounded-md border border-gray-100 px-4 py-4 font-mono text-sm dark:border-black dark:border-opacity-15 shadow-md">
             <div className="flex flex-wrap gap-4 mr-4">