feat: update toggle styles (#1645)

Author: orangecoloured

packages/design-system/src/new-ui/ToggleGroup/ToggleGroup.tsx

@@ -10,10 +10,11 @@ const ToggleGroupRoot = React.forwardRef<
   <Toggles.Root
     ref={ref}
     className={cn(
-      "inline-flex flex-row space-x-px rounded bg-semantic-bg-line relative after:pointer-events-none after:content-[''] after:w-full after:h-full after:rounded-[inherit] after:border after:border-semantic-bg-line after:absolute after:top-0 after:left-0",
+      "inline-flex flex-row h-10 space-x-1 rounded-sm bg-semantic-bg-secondary relative border-2 border-semantic-bg-line",
       className,
     )}
     {...props}
+    style={{ padding: "3px" }}
   />
 ));
 ToggleGroupRoot.displayName = Toggles.Root.displayName;
@@ -25,8 +26,9 @@ const ToggleGroupItem = React.forwardRef<
   <Toggles.Item
     ref={ref}
     className={cn(
-      "flex h-full cursor-pointer items-center justify-center bg-semantic-bg-primary px-4 py-2 text-base font-semibold",
-      "first:rounded-l last:rounded-r focus:outline-none data-[state=on]:cursor-default data-[state=on]:bg-semantic-accent-bg data-[state=on]:text-semantic-accent-default",
+      "transition-all duration-200 ease-in-out",
+      "flex h-full cursor-pointer items-center justify-center text-base text-semantic-fg-disabled product-body-text-3-semibold rounded px-2.5 py-1.5 hover:bg-semantic-bg-line",
+      "focus:outline-none data-[state=on]:shadow data-[state=on]:text-semantic-fg-primary data-[state=on]:bg-semantic-bg-primary data-[state=on]:pointer-events-none data-[state=on]:cursor-default",
       className,
     )}
     {...props}

packages/toolkit/src/components/ReadmeEditor.tsx

@@ -127,22 +127,8 @@ export const ReadmeEditor = ({
               value={editorMode}
               onValueChange={(value: EditorMode) => setEditorMode(value)}
             >
-              <ToggleGroup.Item
-                value="edit"
-                className={
-                  editorMode === "edit" ? "pointer-events-none" : undefined
-                }
-              >
-                Edit
-              </ToggleGroup.Item>
-              <ToggleGroup.Item
-                value="preview"
-                className={
-                  editorMode === "preview" ? "pointer-events-none" : undefined
-                }
-              >
-                Preview
-              </ToggleGroup.Item>
+              <ToggleGroup.Item value="edit">Edit</ToggleGroup.Item>
+              <ToggleGroup.Item value="preview">Preview</ToggleGroup.Item>
             </ToggleGroup.Root>
             <div className="flex flex-row gap-x-4">
               <Button

packages/toolkit/src/view/dashboard/DashboardContainer.tsx

@@ -33,13 +33,11 @@ export const DashboardContainer = ({
         >
           <ToggleGroup.Item
             value="pipeline"
-            className={type === "pipeline" ? "pointer-events-none" : undefined}
           >
             Pipeline
           </ToggleGroup.Item>
           <ToggleGroup.Item
             value="credit"
-            className={type === "credit" ? "pointer-events-none" : undefined}
           >
             Credit
           </ToggleGroup.Item>

packages/toolkit/src/view/dashboard/UsageSwitch.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
-import cn from "clsx";
 import { Nullable } from "instill-sdk";
 
 import { ToggleGroup } from "@instill-ai/design-system";
@@ -46,19 +45,10 @@ export const UsageSwitch = ({
       type="single"
       value={activeTab}
       onValueChange={handleTabChange}
-      className="flex !h-10 space-x-1 bg-semantic-bg-secondary p-1 rounded-sm border-semantic-bg-line w-fit border"
+      className="w-fit"
     >
       {options.map((option) => (
-        <ToggleGroup.Item
-          key={option.value}
-          value={option.value}
-          className={cn(
-            "flex items-center justify-center px-4 py-2 rounded transition-all duration-200 ease-in-out product-body-text-3-semibold",
-            option.value === activeTab
-              ? "!bg-semantic-bg-primary shadow !text-semantic-fg-primary pointer-events-none"
-              : "bg-transparent text-semantic-fg-disabled hover:bg-semantic-bg-line",
-          )}
-        >
+        <ToggleGroup.Item key={option.value} value={option.value}>
           {option.label}
         </ToggleGroup.Item>
       ))}

packages/toolkit/src/view/recipe-editor/commands/ComponentCmdo.tsx

@@ -594,30 +594,9 @@ export const ComponentCmdo = () => {
               onValueChange={(value: "component" | "event") =>
                 onSwitchComponentType(value)
               }
-              className="flex h-10 space-x-1 rounded-sm border border-semantic-bg-line bg-semantic-bg-secondary p-1"
             >
-              <ToggleGroup.Item
-                value="component"
-                className={cn(
-                  "flex items-center justify-center rounded px-2.5 py-1.5 transition-all duration-200 ease-in-out product-body-text-3-semibold",
-                  selectingComponentType === "component"
-                    ? "pointer-events-none !bg-semantic-bg-primary !text-semantic-fg-primary shadow"
-                    : "bg-transparent text-semantic-fg-disabled hover:bg-semantic-bg-line",
-                )}
-              >
-                Tasks
-              </ToggleGroup.Item>
-              <ToggleGroup.Item
-                value="event"
-                className={cn(
-                  "flex items-center justify-center rounded px-2.5 py-1.5 transition-all duration-200 ease-in-out product-body-text-3-semibold",
-                  selectingComponentType === "event"
-                    ? "pointer-events-none !bg-semantic-bg-primary !text-semantic-fg-primary shadow"
-                    : "bg-transparent text-semantic-fg-disabled hover:bg-semantic-bg-line",
-                )}
-              >
-                Events
-              </ToggleGroup.Item>
+              <ToggleGroup.Item value="component">Tasks</ToggleGroup.Item>
+              <ToggleGroup.Item value="event">Events</ToggleGroup.Item>
             </ToggleGroup.Root>
             <button
               onClick={() => {