fix(#28): reduce vertical space between tree nodes in all lists

getezy · Dec 6, 2022 · dc31a9b · dc31a9b
1 parent 03f9478
commit dc31a9b
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 14 deletions.
diff --git a/src/app/components/tree/tree-node.tsx b/src/app/components/tree/tree-node.tsx
@@ -17,8 +17,8 @@ const StyledTreeNode = styled('li', {
   variants: {
     defaultPadding: {
       true: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 2,
+        paddingBottom: 2,
         paddingRight: 5,
       },
     },
@@ -59,7 +59,7 @@ export const TreeNode: React.FC<PropsWithChildren<TreeNodeProps>> = ({
   commandsContent,
   children,
   isOpen = true,
-  defaultPadding = false,
+  defaultPadding = true,
   onCollapseToggle,
   onClick,
   onDoubleClick,

diff --git a/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx b/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx
@@ -44,12 +44,6 @@ export const DirectoryNode: React.FC<
   );
 
   return (
-    <TreeNode
-      id={data.id}
-      key={data.id}
-      content={content}
-      commandsContent={commandsContent}
-      defaultPadding
-    />
+    <TreeNode id={data.id} key={data.id} content={content} commandsContent={commandsContent} />
   );
 };
diff --git a/src/app/pages/side-bar/nodes/collection.node.tsx b/src/app/pages/side-bar/nodes/collection.node.tsx
@@ -116,7 +116,6 @@ export const CollectionNode: React.FC<TreeNodeRendererProps<Collection<Collectio
         commandsContent={commandsContent}
         isOpen={isOpen}
         onCollapseToggle={onCollapseToggle}
-        defaultPadding
       >
         <Tree<GrpcService> data={data.children}>
           {data.children?.map((service) => (

diff --git a/src/app/pages/side-bar/nodes/method.node.tsx b/src/app/pages/side-bar/nodes/method.node.tsx
@@ -55,7 +55,6 @@ export const GrpcMethodNode: React.FC<TreeNodeRendererProps<GrpcMethod>> = ({ da
       content={content}
       css={{ paddingLeft: 20 }}
       onDoubleClick={handleDoubleClick}
-      defaultPadding
     />
   );
 };
diff --git a/src/app/pages/side-bar/nodes/service.node.tsx b/src/app/pages/side-bar/nodes/service.node.tsx
@@ -31,7 +31,6 @@ export const GrpcServiceNode: React.FC<TreeNodeRendererProps<GrpcService>> = ({
       css={{ paddingLeft: 10 }}
       isOpen={isOpen}
       onCollapseToggle={onCollapseToggle}
-      defaultPadding
     >
       <Tree<GrpcMethod> data={data.methods}>
         {data.methods?.map((method) => (

diff --git a/src/app/pages/tabs-container/collection-types/grpc/response/streams/response.node.tsx b/src/app/pages/tabs-container/collection-types/grpc/response/streams/response.node.tsx
@@ -58,7 +58,12 @@ export const ReponseNode: React.FC<TreeNodeRendererProps<GrpcStreamMessage>> = (
       commandsContent={data.value && commandsContent}
       isOpen={isOpen}
       onCollapseToggle={onCollapseToggle}
-      defaultPadding
+      defaultPadding={false}
+      css={{
+        paddingTop: 5,
+        paddingBottom: 5,
+        paddingRight: 5,
+      }}
     >
       {data.value && (
         <CodeEditor

diff --git a/src/app/pages/tabs-container/collection-types/grpc/tls/tls-presets-list.tsx b/src/app/pages/tabs-container/collection-types/grpc/tls/tls-presets-list.tsx
@@ -69,6 +69,7 @@ const ReponseNode: React.FC<
       commandsContent={!data.system && commandsContent}
       isOpen={isOpen}
       onCollapseToggle={onCollapseToggle}
+      defaultPadding={false}
       css={{
         height: 50,
         paddingRight: 5,