Polish spacing (#467)

* Better padding and wrapping on graph empty state * Use title and subtitle of navbar and tweak styling * Better top bar spacing * Restrict title to one line too * Make content min-width be 240px * Remove bottom margin on search input * Handle case when no active connection * Fix spacing issue on styling sidebar panels
aws · Jun 28, 2024 · 7d8ac74 · 7d8ac74
1 parent e877877
commit 7d8ac74
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 56 deletions.
diff --git a/packages/graph-explorer/src/components/Graph/internalComponents/EmptyState.tsx b/packages/graph-explorer/src/components/Graph/internalComponents/EmptyState.tsx
@@ -27,6 +27,8 @@ function styles() {
     flex-direction: column;
     color: #4b8fe2;
     font-size: 1rem;
+    text-wrap: balance;
+    padding: 1rem;
     user-select: none;
     pointer-events: none;
     .label {

diff --git a/packages/graph-explorer/src/components/Workspace/Workspace.styles.ts b/packages/graph-explorer/src/components/Workspace/Workspace.styles.ts
@@ -104,11 +104,20 @@ const titleSectionStyles =
     flex-direction: column;
 
     > .${pfx}-title {
-      font-size: ${theme.typography.sizes.lg};
+      font-weight: bold;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
     }
 
     > .${pfx}-subtitle {
+      overflow: hidden;
       font-size: ${theme.typography.sizes.xs};
+      line-height: 1.25em;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
       color: ${theme.palette.text.secondary};
     }
   `;
@@ -156,6 +165,7 @@ const mainBarStyles: ThemeStyleFn = ({ theme }) => css`
   padding: 0 ${theme.spacing["2x"]} 0 0;
   background-color: ${theme.palette.background.default};
   color: ${theme.palette.text.primary};
+  gap: ${theme.spacing["3x"]};
 `;
 
 const subBarStyles: ThemeStyleFn = ({ theme }) => css`
@@ -174,21 +184,20 @@ const titleContainerStyles =
     display: flex;
     height: 100%;
     align-items: center;
-    gap: ${theme.spacing["2x"]};
     margin-left: ${withBackButton ? "-" + theme.spacing["2x"] : 0};
   `;
 
 const topBarTitleContent: ThemeStyleFn = ({ theme }) => css`
   display: flex;
-  width: 60%;
   height: 100%;
   padding: ${theme.spacing["2x"]} 0;
   justify-content: center;
+  flex-grow: 1;
+  min-width: 240px;
 `;
 
 const topBarTitleVersion: ThemeStyleFn = ({ theme }) => css`
   display: flex;
-  margin: ${theme.spacing["2x"]};
   justify-content: center;
   align-items: center;
   font-size: ${theme.typography.sizes.xs};

diff --git a/packages/graph-explorer/src/components/Workspace/components/HideNavBarLogo.style.ts b/packages/graph-explorer/src/components/Workspace/components/HideNavBarLogo.style.ts
@@ -10,7 +10,7 @@ const defaultStyles =
       background-color: ${theme.navBar?.header ||
       fade(theme.palette.primary.dark, 0.5)};
       height: 100%;
-      margin-right: ${theme.spacing["4x"]};
+      margin-right: ${theme.spacing["2x"]};
 
       .${pfx}-navbar-logo-container {
         transition: ${theme.navBar?.animation?.toggleMenuSpeed || "400ms"};

diff --git a/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx b/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx
@@ -74,13 +74,9 @@ const WorkspaceTopBar = ({
             WorkspaceTopBarTitle.displayName || WorkspaceTopBarTitle.name
           ]
         }
-        <div className={pfx("space")} />
-        {
-          childrenByType[
-            WorkspaceTopBarContent.displayName || WorkspaceTopBarContent.name
-          ]
-        }
-        <div className={pfx("space")} />
+        {childrenByType[
+          WorkspaceTopBarContent.displayName || WorkspaceTopBarContent.name
+        ] ?? <div className={pfx("space")} />}
         {
           childrenByType[
             WorkspaceTopBarVersion.displayName || WorkspaceTopBarVersion.name

diff --git a/packages/graph-explorer/src/modules/KeywordSearch/KeywordSearch.styles.ts b/packages/graph-explorer/src/modules/KeywordSearch/KeywordSearch.styles.ts
@@ -21,6 +21,7 @@ const defaultStyles =
       .${pfx}-search-input {
         flex-grow: 5;
         width: unset;
+        margin-bottom: unset;
 
         .${pfx}-results-adornment {
           font-size: ${theme.typography.sizes?.xs};

diff --git a/packages/graph-explorer/src/modules/NodesStyling/SingleNodeStyling.style.ts b/packages/graph-explorer/src/modules/NodesStyling/SingleNodeStyling.style.ts
@@ -19,7 +19,7 @@ const defaultStyles =
       display: flex;
       justify-content: space-between;
       gap: ${theme.spacing["2x"]};
-      .${pfx}-edge-name {
+      .${pfx}-vertex-name {
         margin-bottom: ${theme.spacing.base};
         max-width: 80%;
         word-break: break-word;

diff --git a/packages/graph-explorer/src/workspaces/Connections/Connections.styles.ts b/packages/graph-explorer/src/workspaces/Connections/Connections.styles.ts
@@ -9,13 +9,6 @@ const defaultStyles =
         white-space: nowrap;
       }
 
-      .${pfx}-top-bar-title {
-        font-weight: bold;
-      }
-      .${pfx}-top-bar-subtitle {
-        font-size: ${theme.typography.sizes?.xs};
-      }
-
       .${pfx}-advanced-list {
         padding: ${theme.spacing["2x"]};
         background: ${theme.palette.background.default};

diff --git a/packages/graph-explorer/src/workspaces/Connections/Connections.tsx b/packages/graph-explorer/src/workspaces/Connections/Connections.tsx
@@ -53,14 +53,10 @@ const Connections = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
       )}
     >
       <TopBarWithLogo>
-        <Workspace.TopBar.Title>
-          <div>
-            <div className={pfx("top-bar-title")}>Connections Details</div>
-            <div className={pfx("top-bar-subtitle")}>
-              Active connection: {config?.displayLabel || config?.id}
-            </div>
-          </div>
-        </Workspace.TopBar.Title>
+        <Workspace.TopBar.Title
+          title="Connections Details"
+          subtitle={`Connection: ${config?.displayLabel || config?.id || "none"}`}
+        />
         <Workspace.TopBar.AdditionalControls>
           <Link
             to={

diff --git a/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.styles.ts b/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.styles.ts
@@ -9,12 +9,6 @@ const defaultStyles =
         min-width: 500px;
       }
 
-      .${pfx}-top-bar-title {
-        font-weight: bold;
-      }
-      .${pfx}-top-bar-subtitle {
-        font-size: ${theme.typography.sizes?.xs};
-      }
       .${pfx}-button {
         white-space: nowrap;
       }

diff --git a/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx b/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx
@@ -269,14 +269,10 @@ function DataExplorerContent({
       )}
     >
       <TopBarWithLogo>
-        <Workspace.TopBar.Title>
-          <div>
-            <div className={pfx("top-bar-title")}>Data Explorer</div>
-            <div className={pfx("top-bar-subtitle")}>
-              Active connection: {config?.displayLabel || config?.id}
-            </div>
-          </div>
-        </Workspace.TopBar.Title>
+        <Workspace.TopBar.Title
+          title="Data Explorer"
+          subtitle={`Connection: ${config?.displayLabel || config?.id}`}
+        />
         <Workspace.TopBar.AdditionalControls>
           <Link to={"/graph-explorer"}>
             <Button

diff --git a/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.styles.ts b/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.styles.ts
@@ -5,12 +5,6 @@ const defaultStyles =
   (pfx: string) =>
   ({ theme }: ActiveThemeType<ProcessedTheme>) => css`
     &.${pfx}-graph-explorer {
-      .${pfx}-top-bar-title {
-        font-weight: bold;
-      }
-      .${pfx}-top-bar-subtitle {
-        font-size: ${theme.typography.sizes?.xs};
-      }
       .${pfx}-v-divider {
         height: 24px;
         width: 1px;

diff --git a/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx b/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx
@@ -186,14 +186,10 @@ const GraphExplorer = ({ classNamePrefix = "ft" }: GraphViewProps) => {
       )}
     >
       <TopBarWithLogo>
-        <Workspace.TopBar.Title>
-          <div>
-            <div className={pfx("top-bar-title")}>Graph Explorer</div>
-            <div className={pfx("top-bar-subtitle")}>
-              Active connection: {config?.displayLabel || config?.id}
-            </div>
-          </div>
-        </Workspace.TopBar.Title>
+        <Workspace.TopBar.Title
+          title="Graph Explorer"
+          subtitle={`Connection: ${config?.displayLabel || config?.id}`}
+        />
         <Workspace.TopBar.Content>
           <KeywordSearch />
         </Workspace.TopBar.Content>