Consolidate UI settings

apps/roam/src/components/settings/DefaultFilters.tsx

@@ -179,15 +179,15 @@ const DefaultFilters = ({
           }}
         />
       ))}
-      <div className="flex items-center justify-end gap-2">
+      <div className="flex items-center gap-2">
         <InputGroup
           style={{ minWidth: "initial" }}
           value={newColumn}
           onChange={(e) => setNewColumn(e.target.value)}
         />
         <Button
-          icon={"add"}
-          intent={Intent.PRIMARY}
+          icon={"plus"}
+          minimal
           disabled={!newColumn}
           onClick={() => {
             const newFilters = {

apps/roam/src/components/settings/DiscourseNodeAttributes.tsx

@@ -84,36 +84,36 @@ const NodeAttributes = ({ uid }: { uid: string }) => {
           />
         ))}
       </div>
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <Label style={{ width: 120, marginBottom: 0 }}>
-          Attribute Label
+      <div>
+        <Label style={{ marginBottom: 8 }}>Attribute Label</Label>
+        <div style={{ display: "flex", alignItems: "center" }}>
           <InputGroup
             value={newAttribute}
             onChange={(e) => setNewAttribute(e.target.value)}
           />
-        </Label>
-        <Button
-          text={"Add"}
-          rightIcon={"plus"}
-          style={{ marginLeft: 16 }}
-          onClick={() => {
-            const DEFAULT = "{count:Has Any Relation To:any}";
-            createBlock({
-              node: {
-                text: newAttribute,
-                children: [{ text: DEFAULT }],
-              },
-              parentUid: uid,
-              order: attributes.length,
-            }).then((uid) => {
-              setAttributes([
-                ...attributes,
-                { uid, label: newAttribute, value: DEFAULT },
-              ]);
-              setNewAttribute("");
-            });
-          }}
-        />
+          <Button
+            text={"Add"}
+            rightIcon={"plus"}
+            style={{ marginLeft: 16 }}
+            onClick={() => {
+              const DEFAULT = "{count:Has Any Relation To:any}";
+              createBlock({
+                node: {
+                  text: newAttribute,
+                  children: [{ text: DEFAULT }],
+                },
+                parentUid: uid,
+                order: attributes.length,
+              }).then((uid) => {
+                setAttributes([
+                  ...attributes,
+                  { uid, label: newAttribute, value: DEFAULT },
+                ]);
+                setNewAttribute("");
+              });
+            }}
+          />
+        </div>
       </div>
     </div>
   );

apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx

@@ -3,10 +3,10 @@ import {
   Label,
   Radio,
   RadioGroup,
-  Switch,
   Tooltip,
   Icon,
   ControlGroup,
+  Checkbox,
 } from "@blueprintjs/core";
 import React, { useState, useMemo } from "react";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
@@ -91,9 +91,8 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
           }}
         />
       </Label>
-      <Switch
+      <Checkbox
         style={{ width: 240, lineHeight: "normal" }}
-        alignIndicator="right"
         checked={isKeyImage}
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
@@ -122,7 +121,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
             className={"ml-2 align-middle opacity-80"}
           />
         </Tooltip>
-      </Switch>
+      </Checkbox>
       {/* </Tooltip> */}
       <RadioGroup
         disabled={!isKeyImage}

apps/roam/src/components/settings/DiscourseNodeSpecification.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import getSubTree from "roamjs-components/util/getSubTree";
 import createBlock from "roamjs-components/writes/createBlock";
-import { Switch } from "@blueprintjs/core";
+import { Checkbox } from "@blueprintjs/core";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import refreshConfigTree from "~/utils/refreshConfigTree";
@@ -83,7 +83,7 @@ const NodeSpecification = ({
         {`.roamjs-node-specification .bp3-button.bp3-intent-primary { display: none; }`}
       </style>
       <p>
-        <Switch
+        <Checkbox
           checked={!!enabled}
           className={"ml-8 inline-block"}
           onChange={(e) => {

apps/roam/src/components/settings/ExportSettings.tsx

@@ -47,17 +47,19 @@ const DiscourseGraphExport = ({}: {}) => {
           value={exportSettings.appendRefNodeContext.value || false}
         />
       </div>
-      <SelectPanel
-        title="link type"
-        description="How to format links that appear in your export."
-        order={5}
-        options={{
-          items: ["alias", "wikilinks", "roam url"],
-        }}
-        uid={exportSettings.linkType.uid}
-        parentUid={parentUid}
-        value={exportSettings.linkType.value || "alias"}
-      />
+      <div className="link-type-select-wrapper">
+        <SelectPanel
+          title="link type"
+          description="How to format links that appear in your export."
+          order={5}
+          options={{
+            items: ["alias", "wikilinks", "roam url"],
+          }}
+          uid={exportSettings.linkType.uid}
+          parentUid={parentUid}
+          value={exportSettings.linkType.value || "alias"}
+        />
+      </div>
       <NumberPanel
         title="max filename length"
         description="Set the maximum name length for markdown file exports"

apps/roam/src/styles/styles.css

@@ -134,3 +134,8 @@ svg.rs-svg-container {
 .roamjs-query-column-views table.bp3-html-table td {
   vertical-align: initial;
 }
+
+.link-type-select-wrapper .bp3-button {
+  width: 100px;
+  justify-content: space-between;
+}