Form improvements & ui cleanup

src/pages/settings/Channels.tsx

@@ -30,7 +30,7 @@ export const Channels = ({
     <PrimaryTemplate
       title="Channels"
       tagline="Settings"
-      button={
+      leftButton={
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
@@ -38,6 +38,15 @@ export const Channels = ({
           }}
         />
       }
+      rightButton={
+        <IconButton
+          icon={<FiCode className="w-5 h-5" />}
+          active={debug}
+          onClick={(): void => {
+            setDebug(!debug);
+          }}
+        />
+      }
       footer={
         <Button
           className="px-10 ml-auto"
@@ -50,22 +59,7 @@ export const Channels = ({
       }
     >
       <div className="space-y-4">
-        <Card
-          title="Manage Channels"
-          description="Edit channel throughput and other settings"
-          buttons={
-            <Button
-              border
-              active={debug}
-              onClick={(): void => {
-                setDebug(!debug);
-              }}
-              icon={<FiCode />}
-            >
-              Debug
-            </Button>
-          }
-        >
+        <Card>
           <Cover enabled={debug} content={<JSONPretty data={channels} />} />
           <div className="w-full p-4 space-y-2 md:p-10">
             {channels.map((channel) => (