Use tailwind in sidebar panels

aws · Aug 9, 2024 · 3b2fee4 · 3b2fee4
1 parent 127d9d3
commit 3b2fee4
Show file tree

Hide file tree

Showing 24 changed files with 169 additions and 210 deletions.
diff --git a/packages/graph-explorer/src/components/CheckboxList/CheckboxList.styles.ts b/packages/graph-explorer/src/components/CheckboxList/CheckboxList.styles.ts
@@ -20,6 +20,7 @@ const defaultStyles: ThemeStyleFn = ({ theme, isDarkTheme }) => css`
       display: flex;
       flex-direction: column;
       overflow: auto;
+      max-height: 25rem;
       row-gap: ${theme.spacing["2x"]};
       padding: ${theme.spacing["2x"]} 0 0;
       border: solid 1px ${theme.palette.border};

diff --git a/packages/graph-explorer/src/components/CheckboxList/CheckboxList.tsx b/packages/graph-explorer/src/components/CheckboxList/CheckboxList.tsx
@@ -65,8 +65,8 @@ export const CheckboxList = ({
     <div
       className={cx(stylesWithTheme(defaultStyles), "checkbox-list", className)}
     >
-      {title && <div className={"title"}>{title}</div>}
-      <div className={"content"}>
+      {title && <div className="title">{title}</div>}
+      <div className="content">
         {checkboxes.map(checkbox => {
           return (
             <div key={checkbox.id} className={"checkbox-container"}>

diff --git a/packages/graph-explorer/src/components/Divider.tsx b/packages/graph-explorer/src/components/Divider.tsx
@@ -0,0 +1,3 @@
+export default function Divider() {
+  return <div className="bg-border my-1 h-[1px] min-h-[1px] w-full" />;
+}
diff --git a/packages/graph-explorer/src/components/index.ts b/packages/graph-explorer/src/components/index.ts
@@ -23,6 +23,8 @@ export { PanelEmptyState } from "./PanelEmptyState";
 export * from "./PanelEmptyState";
 export { default as PanelError } from "./PanelError";
 
+export { default as Divider } from "./Divider";
+
 export { default as Graph } from "./Graph";
 export * from "./Graph";
 

diff --git a/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.style.ts b/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.style.ts
diff --git a/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.tsx b/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.tsx
@@ -1,11 +1,13 @@
+import { Fragment } from "react/jsx-runtime";
 import {
+  Divider,
   ModuleContainer,
+  ModuleContainerContent,
   ModuleContainerHeader,
   ModuleContainerHeaderProps,
 } from "../../components";
-import { useConfiguration, useWithTheme } from "../../core";
+import { useConfiguration } from "../../core";
 import useTranslations from "../../hooks/useTranslations";
-import defaultStyles from "./EdgesStyling.style";
 import SingleEdgeStyling from "./SingleEdgeStyling";
 
 export type EdgesStylingProps = Omit<
@@ -22,26 +24,31 @@ const EdgesStyling = ({
   ...headerProps
 }: EdgesStylingProps) => {
   const config = useConfiguration();
-  const styleWithTheme = useWithTheme();
   const t = useTranslations();
 
   return (
-    <ModuleContainer variant={"sidebar"}>
+    <ModuleContainer variant="sidebar">
       <ModuleContainerHeader
         title={t("edges-styling.title")}
         {...headerProps}
       />
-      <div className={styleWithTheme(defaultStyles)}>
-        {config?.edgeTypes.map(edgeType => (
-          <SingleEdgeStyling
-            key={edgeType}
-            edgeType={edgeType}
-            opened={customizeEdgeType === edgeType}
-            onOpen={() => onEdgeCustomize(edgeType)}
-            onClose={() => onEdgeCustomize(undefined)}
-          />
-        ))}
-      </div>
+      <ModuleContainerContent className="flex flex-col gap-2">
+        {config?.edgeTypes.map((edgeType, index) => {
+          return (
+            <Fragment key={edgeType}>
+              {index !== 0 ? <Divider /> : null}
+
+              <SingleEdgeStyling
+                edgeType={edgeType}
+                opened={customizeEdgeType === edgeType}
+                onOpen={() => onEdgeCustomize(edgeType)}
+                onClose={() => onEdgeCustomize(undefined)}
+                className="px-3 pb-3 pt-2"
+              />
+            </Fragment>
+          );
+        })}
+      </ModuleContainerContent>
     </ModuleContainer>
   );
 };

diff --git a/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStyling.style.ts b/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStyling.style.ts
@@ -4,14 +4,7 @@ import type { ThemeStyleFn } from "../../core";
 const defaultStyles: ThemeStyleFn = ({ theme }) => css`
   display: flex;
   flex-direction: column;
-  background: ${theme.palette.background.default};
-  gap: ${theme.spacing["2x"]};
-  padding: ${theme.spacing["2x"]} ${theme.spacing["4x"]};
-  border-bottom: solid 1px ${theme.palette.divider};
-
-  &:last-of-type {
-    border-bottom: none;
-  }
+  gap: ${theme.spacing.base};
 
   .title {
     display: flex;

diff --git a/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStyling.tsx b/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStyling.tsx
@@ -1,5 +1,11 @@
 import { Modal } from "@mantine/core";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useRecoilState, useResetRecoilState } from "recoil";
 import { Button, Input, Select, StylingIcon } from "../../components";
 import ColorInput from "../../components/ColorInput/ColorInput";
@@ -21,19 +27,22 @@ import defaultStyles from "./SingleEdgeStyling.style";
 import modalDefaultStyles from "./SingleEdgeStylingModal.style";
 import { useEdgeTypeConfig } from "../../core/ConfigurationProvider/useConfiguration";
 import { useDebounceValue, usePrevious } from "../../hooks";
+import { cx } from "@emotion/css";
 
 export type SingleEdgeStylingProps = {
   edgeType: string;
   opened: boolean;
   onOpen(): void;
   onClose(): void;
-};
+} & ComponentProps<"div">;
 
 export default function SingleEdgeStyling({
   edgeType,
   opened,
   onOpen,
   onClose,
+  className,
+  ...rest
 }: SingleEdgeStylingProps) {
   const t = useTranslations();
   const styleWithTheme = useWithTheme();
@@ -84,7 +93,7 @@ export default function SingleEdgeStyling({
   }, [debouncedDisplayAs, prevDisplayAs, onUserPrefsChange]);
 
   return (
-    <div className={styleWithTheme(defaultStyles)}>
+    <div className={cx(styleWithTheme(defaultStyles), className)} {...rest}>
       <div className={"title"}>
         <div className={"edge-name"}>{edgeType}</div>
       </div>
@@ -121,7 +130,7 @@ export default function SingleEdgeStyling({
           backgroundOpacity: 0.1,
         }}
       >
-        <div className={"container"}>
+        <div className={"modal-container"}>
           <div>
             <p>Display Attributes</p>
             <div className={"attrs-container"}>

diff --git a/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStylingModal.style.ts b/packages/graph-explorer/src/modules/EdgesStyling/SingleEdgeStylingModal.style.ts
@@ -7,7 +7,7 @@ const defaultStyles: ThemeStyleFn = ({ theme }) => css`
     margin-left: auto;
     margin-bottom: 0;
   }
-  .container {
+  .modal-container {
     display: flex;
     flex-direction: column;
     gap: ${theme.spacing["4x"]};

diff --git a/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.styles.ts b/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.styles.ts
@@ -18,21 +18,6 @@ const defaultStyles = ({
       ? theme.palette.background.secondary
       : theme.palette.background.default};
   }
-
-  .section-divider {
-    height: 1px;
-    min-height: 1px;
-    width: 100%;
-    margin: ${theme.spacing.base} auto;
-    background-color: ${theme.palette.divider};
-  }
-
-  .checkbox-list-container {
-    width: 90%;
-    margin: 0 auto;
-    min-height: auto;
-    max-height: 50%;
-  }
 `;
 
 export default defaultStyles;
diff --git a/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.tsx b/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.tsx
@@ -2,13 +2,16 @@ import { cx } from "@emotion/css";
 import type { ModuleContainerHeaderProps } from "../../components";
 import {
   CheckboxList,
+  Divider,
   ModuleContainer,
+  ModuleContainerContent,
   ModuleContainerHeader,
 } from "../../components";
 import { useWithTheme } from "../../core";
 import useTranslations from "../../hooks/useTranslations";
 import defaultStyles from "./EntitiesFilter.styles";
 import useFiltersConfig from "./useFiltersConfig";
+import { PropsWithChildren } from "react";
 
 export type EntitiesFilterProps = Omit<
   ModuleContainerHeaderProps,
@@ -38,37 +41,44 @@ const EntitiesFilter = ({
   return (
     <ModuleContainer
       className={cx(styleWithTheme(defaultStyles), "entities-filters")}
+      variant="sidebar"
     >
       <ModuleContainerHeader
         title={title}
         variant={"sidebar"}
         {...headerProps}
       />
-      {connectionTypes.length > 0 && (
-        <div className={"checkbox-list-container"}>
-          <CheckboxList
-            title={t("entities-filter.edge-types")}
-            selectedIds={selectedConnectionTypes}
-            checkboxes={connectionTypes}
-            onChange={onChangeConnectionTypes}
-            onChangeAll={onChangeAllConnectionTypes}
-          />
-        </div>
-      )}
-      <div className={"section-divider"} />
-      {vertexTypes.length > 0 && (
-        <div className={"checkbox-list-container"}>
-          <CheckboxList
-            title={t("entities-filter.node-types")}
-            selectedIds={selectedVertexTypes}
-            checkboxes={vertexTypes}
-            onChange={onChangeVertexTypes}
-            onChangeAll={onChangeAllVertexTypes}
-          />
-        </div>
-      )}
+      <ModuleContainerContent>
+        {connectionTypes.length > 0 && (
+          <CheckboxListContainer>
+            <CheckboxList
+              title={t("entities-filter.edge-types")}
+              selectedIds={selectedConnectionTypes}
+              checkboxes={connectionTypes}
+              onChange={onChangeConnectionTypes}
+              onChangeAll={onChangeAllConnectionTypes}
+            />
+          </CheckboxListContainer>
+        )}
+        <Divider />
+        {vertexTypes.length > 0 && (
+          <CheckboxListContainer>
+            <CheckboxList
+              title={t("entities-filter.node-types")}
+              selectedIds={selectedVertexTypes}
+              checkboxes={vertexTypes}
+              onChange={onChangeVertexTypes}
+              onChangeAll={onChangeAllVertexTypes}
+            />
+          </CheckboxListContainer>
+        )}
+      </ModuleContainerContent>
     </ModuleContainer>
   );
 };
 
+function CheckboxListContainer(props: PropsWithChildren) {
+  return <div className="w-full px-3 py-2">{props.children}</div>;
+}
+
 export default EntitiesFilter;
diff --git a/packages/graph-explorer/src/modules/EntityDetails/EntityDetail.styles.ts b/packages/graph-explorer/src/modules/EntityDetails/EntityDetail.styles.ts
@@ -15,7 +15,7 @@ const defaultStyles =
       z-index: 1;
       background: ${theme.palette.background.default};
       display: flex;
-      padding: ${theme.spacing["4x"]};
+      padding: ${theme.spacing["4x"]} ${theme.spacing["3x"]};
       align-items: center;
       column-gap: ${theme.spacing["2x"]};
       border-bottom: solid 1px ${theme.palette.border};
@@ -43,11 +43,11 @@ const defaultStyles =
     .source-vertex {
       position: relative;
       z-index: 0;
-      padding-left: calc(${theme.spacing["4x"]} + 48px);
+      padding-left: calc(${theme.spacing["3x"]} + 48px);
 
       .start-line {
         position: absolute;
-        left: calc(${theme.spacing["4x"]} + 16px);
+        left: calc(${theme.spacing["3x"]} + 16px);
         top: 20%;
         height: 80%;
         width: 2px;
@@ -67,11 +67,11 @@ const defaultStyles =
     .target-vertex {
       position: relative;
       z-index: 0;
-      padding-left: calc(${theme.spacing["4x"]} + 48px);
+      padding-left: calc(${theme.spacing["3x"]} + 48px);
 
       .end-line {
         position: absolute;
-        left: calc(${theme.spacing["4x"]} + 16px);
+        left: calc(${theme.spacing["3x"]} + 16px);
         top: -1px;
         height: 80%;
         width: 2px;
@@ -113,7 +113,7 @@ const defaultStyles =
     }
 
     .connections {
-      padding: ${theme.spacing["4x"]};
+      padding: ${theme.spacing["4x"]} ${theme.spacing["3x"]};
       border-bottom: solid 1px ${theme.palette.border};
 
       .title {
@@ -144,7 +144,7 @@ const defaultStyles =
     }
 
     .properties {
-      padding: ${theme.spacing["4x"]};
+      padding: ${theme.spacing["4x"]} ${theme.spacing["3x"]};
 
       .title {
         font-weight: bold;

diff --git a/packages/graph-explorer/src/modules/EntityDetails/EntityDetails.tsx b/packages/graph-explorer/src/modules/EntityDetails/EntityDetails.tsx
@@ -76,7 +76,7 @@ const EntityDetails = ({
   );
 
   return (
-    <ModuleContainer>
+    <ModuleContainer variant="sidebar">
       {noHeader !== true && (
         <ModuleContainerHeader
           title={title}

diff --git a/packages/graph-explorer/src/modules/Namespaces/Namespaces.tsx b/packages/graph-explorer/src/modules/Namespaces/Namespaces.tsx
@@ -39,7 +39,7 @@ const Namespaces = (headerProps: EdgesStylingProps) => {
   }, [config?.schema?.prefixes]);
 
   return (
-    <ModuleContainer variant={"sidebar"}>
+    <ModuleContainer variant="sidebar">
       <ModuleContainerHeader title={"Namespaces"} {...headerProps}>
         <div style={{ marginLeft: 16 }}>
           <Select