Move toolbar buttons to the left side, add close button to slideout config

Author: synzen

services/backend-api/client/src/pages/Previewer/ComponentTreeToolbar.tsx

@@ -99,12 +99,12 @@ export const ComponentTreeToolbar: React.FC = () => {
             </VStack>
           )}
           {!isDesktop && (
-            <VStack
-              align="start"
-              spacing={1}
-              display={{ base: "block", [MESSAGE_BUILDER_MOBILE_BREAKPOINT]: "none" }}
+            <HStack
+              align="center"
+              width="100%"
+              display={{ base: "flex", [MESSAGE_BUILDER_MOBILE_BREAKPOINT]: "none" }}
             >
-              <Text fontSize="md" display="inline">
+              <Text fontSize="md">
                 Selected:{" "}
                 <Text
                   display="inline"
@@ -114,56 +114,51 @@ export const ComponentTreeToolbar: React.FC = () => {
                   {selectedComponent ? getPreviewerComponentLabel(selectedComponent.type) : "None"}
                 </Text>
               </Text>
-            </VStack>
+              <HStack spacing={2} flexWrap="wrap">
+                {selectedComponent && (
+                  <Box>
+                    <AddComponentButton
+                      component={selectedComponent}
+                      canHaveChildren={!!canAddChildren}
+                      onAddChild={handleAddChild}
+                      buttonProps={{
+                        variant: "solid",
+                        colorScheme: undefined,
+                        size: "sm",
+                      }}
+                    />
+                  </Box>
+                )}
+                <Button
+                  leftIcon={<FaCog />}
+                  size="sm"
+                  variant="solid"
+                  onClick={() => {
+                    if (!selectedComponent) {
+                      return;
+                    }
+
+                    handleConfigureComponent();
+                  }}
+                  aria-disabled={!selectedComponent}
+                >
+                  Configure
+                </Button>
+              </HStack>
+            </HStack>
           )}
-          <HStack spacing={2} flexWrap="wrap">
-            {isDesktop && (
+          {isDesktop && (
+            <HStack spacing={2} flexWrap="wrap">
               <Button
                 leftIcon={<VscCollapseAll />}
-                size="sm"
                 variant="ghost"
                 onClick={handleCollapseAll}
                 isDisabled={!messageComponent}
               >
                 Collapse all
               </Button>
-            )}
-            {selectedComponent && !isDesktop && (
-              <Box>
-                <AddComponentButton
-                  component={selectedComponent}
-                  canHaveChildren={!!canAddChildren}
-                  onAddChild={handleAddChild}
-                  buttonProps={{
-                    variant: "solid",
-                    colorScheme: undefined,
-                    size: "sm",
-                  }}
-                />
-              </Box>
-            )}
-            {!isDesktop && (
-              <Button
-                display={{
-                  base: "inline-flex",
-                  [MESSAGE_BUILDER_MOBILE_BREAKPOINT]: "none",
-                }}
-                leftIcon={<FaCog />}
-                size="sm"
-                variant="solid"
-                onClick={() => {
-                  if (!selectedComponent) {
-                    return;
-                  }
-
-                  handleConfigureComponent();
-                }}
-                aria-disabled={!selectedComponent}
-              >
-                Configure
-              </Button>
-            )}
-          </HStack>
+            </HStack>
+          )}
         </HStack>
       </Box>
       <SlidingConfigPanel onClose={onCloseComponentConfigure} component={configuringComponent} />

services/backend-api/client/src/pages/Previewer/SlidingConfigPanel.tsx

@@ -6,6 +6,8 @@ import {
   ModalHeader,
   ModalCloseButton,
   ModalBody,
+  ModalFooter,
+  Button,
 } from "@chakra-ui/react";
 import { ComponentPropertiesPanel } from "./ComponentPropertiesPanel";
 import getPreviewerComponentLabel from "./utils/getPreviewerComponentLabel";
@@ -52,7 +54,7 @@ export const SlidingConfigPanel: React.FC<SlidingConfigPanelProps> = ({ onClose,
           Configure {component ? getPreviewerComponentLabel(component.type) : "Component"}
         </ModalHeader>
         <ModalCloseButton color="gray.400" _hover={{ color: "white", bg: "gray.700" }} />
-        <ModalBody p={4} height="calc(100% - 73px)" overflowY="auto" bg="gray.800">
+        <ModalBody p={4} height="calc(100% - 120px)" overflowY="auto" bg="gray.800">
           {component && (
             <ComponentPropertiesPanel
               hideTitle
@@ -61,6 +63,11 @@ export const SlidingConfigPanel: React.FC<SlidingConfigPanelProps> = ({ onClose,
             />
           )}
         </ModalBody>
+        <ModalFooter borderTop="1px solid" borderColor="gray.600" bg="gray.800" p={4}>
+          <Button colorScheme="gray" onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );