Aligning Tailwind and old EmotionCSS themes (#777)

* Update colors in old theme * Update ContextMenu container styles * Add z-index for menus * Update z-index with menu level * Adjust select menu style to match ContextMenu * Remove Card from Toast * Use Panel for Legend * Remove Card component * Tweak Panel style * Remove custom box shadows * Use Tailwind neutral gray * Align select menu with context menu styles * Tweak sidebar styles * Update changelog * Add subtle variant of secondary background
aws · Feb 5, 2025 · a9c5600 · a9c5600
1 parent 10aa89a
commit a9c5600
Show file tree

Hide file tree

Showing 25 changed files with 165 additions and 444 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -13,8 +13,6 @@
   [741](https://github.com/aws/graph-explorer/pull/741))
 - **Added** attribute count to node labels list in the connection screen
   ([#743](https://github.com/aws/graph-explorer/pull/743))
-- **Improved** layout and style of searchable lists across the UI
-  ([#743](https://github.com/aws/graph-explorer/pull/743))
 - **Improved** pagination controls by using a single shared component
   ([#742](https://github.com/aws/graph-explorer/pull/742))
 - **Updated** graph foundations to accommodate loading a graph from a set of IDs
@@ -26,7 +24,16 @@
   [#768](https://github.com/aws/graph-explorer/pull/768),
   [#769](https://github.com/aws/graph-explorer/pull/769),
   [#770](https://github.com/aws/graph-explorer/pull/770),
-  [#775](https://github.com/aws/graph-explorer/pull/775),
+  [#775](https://github.com/aws/graph-explorer/pull/775))
+- **Updated** styling across the app
+  ([#777](https://github.com/aws/graph-explorer/pull/777),
+  [#743](https://github.com/aws/graph-explorer/pull/743))
+  - Rounded style for search inputs
+  - Searchable list items style consistent with connection style
+  - Softer grays
+  - More consistent shadows
+  - More consistent menus (context menus, select dropdowns, etc.)
+  - Graph legend is now consistent with other panels
 - **Updated** dependencies and remove unused dependencies
   ([#764](https://github.com/aws/graph-explorer/pull/764),
   [#776](https://github.com/aws/graph-explorer/pull/776))

diff --git a/packages/graph-explorer/src/components/Card/Card.styles.ts b/packages/graph-explorer/src/components/Card/Card.styles.ts
diff --git a/packages/graph-explorer/src/components/Card/Card.tsx b/packages/graph-explorer/src/components/Card/Card.tsx
diff --git a/packages/graph-explorer/src/components/Card/index.ts b/packages/graph-explorer/src/components/Card/index.ts
diff --git a/packages/graph-explorer/src/components/IconButton.tsx b/packages/graph-explorer/src/components/IconButton.tsx
@@ -36,7 +36,7 @@ const iconButtonVariants = cva({
     {
       variant: "text",
       color: "primary",
-      className: "text-primary-dark hover:bg-background-secondary/50",
+      className: "text-primary-dark hover:bg-background-secondary-subtle",
     },
     {
       variant: "text",

diff --git a/packages/graph-explorer/src/components/ListRow.tsx b/packages/graph-explorer/src/components/ListRow.tsx
@@ -11,7 +11,7 @@ export function ListRow({
   return (
     <div
       className={cn(
-        "bg-background-secondary hover:ring-primary-dark has-[:checked]:ring-primary-dark flex items-center gap-4 overflow-hidden rounded-lg px-3 py-1.5 ring-1 ring-transparent transition-shadow duration-200 hover:ring-1",
+        "bg-background-secondary-subtle hover:ring-primary-dark/50 has-[:checked]:ring-primary-dark/50 flex items-center gap-4 overflow-hidden rounded-lg px-3 py-1.5 ring-1 ring-transparent transition-shadow duration-150 hover:ring-1",
         isDisabled && "pointer-events-none",
         className
       )}

diff --git a/packages/graph-explorer/src/components/NotificationProvider/NotificationProvider.tsx b/packages/graph-explorer/src/components/NotificationProvider/NotificationProvider.tsx
@@ -157,12 +157,10 @@ export const NotificationProvider: FC<NotificationProviderProps> = ({
         {children}
         <div
           style={{
-            position: "fixed",
-            zIndex: 9999999,
-            pointerEvents: "none",
             ...anchorOriginStyleMap[actualAnchorOrigin.horizontal],
             ...anchorOriginStyleMap[actualAnchorOrigin.vertical],
           }}
+          className="z-menu pointer-events-none fixed"
         >
           <TransitionGroup
             style={{

diff --git a/packages/graph-explorer/src/components/Panel.tsx b/packages/graph-explorer/src/components/Panel.tsx
@@ -14,7 +14,7 @@ const Panel = React.forwardRef<React.ElementRef<"div">, PanelProps>(
       ref={ref}
       className={cn(
         "bg-background-default flex h-full flex-col overflow-hidden",
-        variant === "default" && "shadow-base rounded",
+        variant === "default" && "shadow-primary-dark/20 rounded-lg shadow",
         className
       )}
       {...props}

diff --git a/packages/graph-explorer/src/components/Select/Select.styles.ts b/packages/graph-explorer/src/components/Select/Select.styles.ts
@@ -210,64 +210,6 @@ export const selectContainerStyles =
     `;
   };
 
-const listStyles = () => css`
-  max-height: 300px;
-  overflow: auto;
-  list-style: none;
-  padding: 0;
-  margin: 2px 0;
-  outline: none;
-`;
-
-const listItemStyles = () => (activeTheme: ActiveThemeType) => {
-  const themeWithDefault = getSelectThemeWithDefaults(
-    activeTheme,
-    "valid"
-  )("default");
-
-  const { theme } = activeTheme;
-  return css`
-    background: ${themeWithDefault.list?.item?.background};
-    color: ${themeWithDefault.list?.item?.color};
-    padding: 8px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    outline: none;
-
-    &:focus:not(.select-list-item-selected),
-    &.select-list-item-focused {
-      background: ${themeWithDefault.list?.item?.hover?.background};
-      color: ${themeWithDefault.list?.item?.hover?.color};
-    }
-
-    &:hover {
-      background: ${themeWithDefault.list?.item?.hover?.background};
-      color: ${themeWithDefault.list?.item?.hover?.color};
-    }
-
-    &.select-list-item-selected {
-      background: ${themeWithDefault.list?.item?.selected?.background};
-      color: ${themeWithDefault.list?.item?.selected?.color};
-      &:hover {
-        background: ${themeWithDefault.list?.item?.selected?.background};
-        color: ${themeWithDefault.list?.item?.selected?.color};
-      }
-    }
-
-    &.select-list-item-disabled {
-      pointer-events: none;
-      filter: opacity(${theme.forms?.disabledOpacity || "40%"});
-    }
-  `;
-};
-
-const itemStyles = () => css`
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-
 const searchInputStyles = (activeTheme: ActiveThemeType) => {
   const themeWithDefault = getSelectThemeWithDefaults(
     activeTheme,
@@ -279,24 +221,6 @@ const searchInputStyles = (activeTheme: ActiveThemeType) => {
   `;
 };
 
-const popoverWrapperStyles = (activeTheme: ActiveThemeType) => {
-  const themeWithDefault = getSelectThemeWithDefaults(
-    activeTheme,
-    "valid"
-  )("default");
-
-  return css`
-    position: absolute;
-    // TODO - review zIndexes when Select is inside a popover
-    z-index: 9999999999;
-    width: 100%;
-    border: 1px solid ${themeWithDefault.list?.borderColor};
-    border-radius: ${themeWithDefault.list?.borderRadius};
-    box-shadow: ${themeWithDefault.list?.boxShadow};
-    background: ${themeWithDefault.list?.background};
-  `;
-};
-
 const multipleSelectedValuesWrapper = ({ theme }: ActiveThemeType) => css`
   display: flex;
   gap: ${theme.spacing.base};
@@ -307,11 +231,7 @@ const multipleSelectedValuesWrapper = ({ theme }: ActiveThemeType) => css`
 
 const styles = {
   selectContainerStyles,
-  listStyles,
-  listItemStyles,
-  itemStyles,
   searchInputStyles,
-  popoverWrapperStyles,
   multipleSelectedValuesWrapper,
 };
 

diff --git a/packages/graph-explorer/src/components/Select/internalComponents/ListBox.tsx b/packages/graph-explorer/src/components/Select/internalComponents/ListBox.tsx
@@ -5,8 +5,8 @@ import type { ListState } from "@react-stately/list";
 import type { Node } from "@react-types/shared";
 import type { ForwardedRef, RefObject } from "react";
 import { forwardRef, useRef } from "react";
-import { useWithTheme } from "@/core";
-import styles from "../Select.styles";
+import ListItem from "@/components/ListItem";
+import { CheckIcon } from "lucide-react";
 
 interface OptionProps<T> {
   item: Node<T>;
@@ -21,8 +21,6 @@ const ListBox = forwardRef(
   <T,>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLUListElement | null>) => {
     const { state } = props;
 
-    const styleWithTheme = useWithTheme();
-
     const { listBoxProps } = useListBox(
       props,
       state,
@@ -31,7 +29,9 @@ const ListBox = forwardRef(
 
     return (
       <ul
-        className={styleWithTheme(styles.listStyles)}
+        className={cn(
+          "max-h-[300px] list-none overflow-auto p-0 p-1 outline-none"
+        )}
         {...listBoxProps}
         ref={ref}
       >
@@ -44,12 +44,11 @@ const ListBox = forwardRef(
 );
 
 const OptionItem = <T,>({ item, state }: OptionProps<T>) => {
-  const ref = useRef<HTMLLIElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   const itemDisabled = state.disabledKeys.has(item.key);
-  const styleWithTheme = useWithTheme();
 
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
+  const { optionProps, isSelected, isDisabled } = useOption(
     {
       isDisabled: itemDisabled,
       key: item.key,
@@ -60,25 +59,17 @@ const OptionItem = <T,>({ item, state }: OptionProps<T>) => {
   );
 
   return (
-    <li
+    <ListItem
+      ref={ref}
       className={cn(
-        styleWithTheme(styles.listItemStyles()),
-        "select-list-item-wrapper",
-        {
-          ["select-list-item-disabled"]: isDisabled,
-          ["select-list-item-selected"]: isSelected,
-          ["select-list-item-focused"]: isFocused,
-        }
+        "focus:bg-background-secondary flex flex-row justify-between outline-none",
+        isDisabled && "pointer-events-none opacity-50"
       )}
       {...optionProps}
-      ref={ref}
     >
-      <div
-        className={cn(styleWithTheme(styles.itemStyles), "select-list-item")}
-      >
-        {item.rendered}
-      </div>
-    </li>
+      {item.rendered}
+      {isSelected ? <CheckIcon className="text-text-primary size-5" /> : null}
+    </ListItem>
   );
 };