Moving buttons to consistent places

CLIMB-TRE · Nov 12, 2024 · f4c0368 · f4c0368
1 parent c5d1e07
commit f4c0368
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/lib/components/Filter.tsx b/lib/components/Filter.tsx
@@ -166,16 +166,16 @@ function Filter(props: FilterProps) {
       </Stack>
       <Stack direction="horizontal" gap={1}>
         <div className="me-auto"></div>
-        <Button size="sm" variant="dark" onClick={handleApply}>
-          Apply
-        </Button>
         <Button
           size="sm"
           variant="dark"
           onClick={() => props.setEditMode(false)}
         >
           Cancel
         </Button>
+        <Button size="sm" onClick={handleApply}>
+          Apply
+        </Button>
       </Stack>
     </Stack>
   );

diff --git a/lib/components/FilterPanel.tsx b/lib/components/FilterPanel.tsx
@@ -101,16 +101,15 @@ function FilterPanel(props: FilterPanelProps) {
     <Card className="h-50">
       <Card.Header>
         <span>Filters</span>
-        <Stack direction="horizontal" gap={1} className="float-end">
-          <Button
-            size="sm"
-            variant="dark"
-            title="Add Filter"
-            onClick={() => handleFilterAdd(props.filterList.length)}
-          >
-            <MdCreate />
-          </Button>
-        </Stack>
+        <Button
+          className="float-end"
+          size="sm"
+          variant="dark"
+          title="Add Filter"
+          onClick={() => handleFilterAdd(props.filterList.length)}
+        >
+          <MdCreate />
+        </Button>
       </Card.Header>
       <Container fluid className="overflow-y-scroll p-2 h-100">
         {editMode ? (

diff --git a/lib/components/Transforms.tsx b/lib/components/Transforms.tsx
@@ -56,16 +56,16 @@ function Transforms(props: TransformsProps) {
       />
       <Stack direction="horizontal" gap={1}>
         <div className="me-auto"></div>
-        <Button size="sm" variant="dark" onClick={handleApply}>
-          Apply
-        </Button>
         <Button
           size="sm"
           variant="dark"
           onClick={() => props.setEditMode(false)}
         >
           Cancel
         </Button>
+        <Button size="sm" onClick={handleApply}>
+          Apply
+        </Button>
       </Stack>
     </Stack>
   );