Tweak styles in multiple components (#780)

* Remove duplicate animate-spin * Add simple spinner * Updated notification styles * Tweak panel header action styles * Tweak ImportantBlock styles * Tweak IconButton styles * Add react-hook-form * Add Form controls * Update changelog * Make translations type safe * Add loading type to toast notifications * Fix field alignment issue * Use lucide icons in graph toolbar * Remove dev note since it is being used by toast
aws · Feb 6, 2025 · ec7d6f5 · ec7d6f5
1 parent 7f0ae4a
commit ec7d6f5
Show file tree

Hide file tree

Showing 17 changed files with 384 additions and 202 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -27,8 +27,9 @@
   [#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
+  [#743](https://github.com/aws/graph-explorer/pull/743),
+  [#780](https://github.com/aws/graph-explorer/pull/780))
+  - Rounded style for search inputs, panels, toast notifications, and more
   - Searchable list items style consistent with connection style
   - Softer grays
   - More consistent shadows

diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json
@@ -18,6 +18,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@graph-explorer/shared": "workspace:*",
+    "@hookform/resolvers": "^3.10.0",
     "@mantine/core": "^7.16.1",
     "@mantine/emotion": "^7.16.1",
     "@mantine/hooks": "^7.16.1",
@@ -26,6 +27,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-select": "^2.1.5",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.7",
     "@react-aria/button": "3.10.1",
@@ -63,6 +65,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
+    "react-hook-form": "^7.54.2",
     "react-inlinesvg": "^4.1.8",
     "react-laag": "^2.0.5",
     "react-router": "^7.1.3",

diff --git a/packages/graph-explorer/src/components/IconButton.tsx b/packages/graph-explorer/src/components/IconButton.tsx
@@ -17,31 +17,35 @@ const iconButtonVariants = cva({
       error: "",
     },
     size: {
-      small: "h-[24px] px-1 text-sm [&_svg]:size-[20px]",
-      base: "size-[30px] text-base [&_svg]:size-[22px]",
+      small: "h-[24px] px-1 text-sm [&_svg]:size-[18px]",
+      base: "size-[30px] text-base [&_svg]:size-[20px]",
       large: "h-[42px] px-4 text-lg [&_svg]:size-[26px]",
     },
   },
   compoundVariants: [
     {
       variant: "filled",
       color: "primary",
-      className: "bg-primary-main hover:bg-primary-light",
+      className:
+        "bg-primary-main hover:bg-primary-light data-[state=open]:bg-primary-light",
     },
     {
       variant: "filled",
       color: "error",
-      className: "bg-error-main hover:bg-error-light",
+      className:
+        "bg-error-main hover:bg-error-light data-[state=open]:bg-error-light",
     },
     {
       variant: "text",
       color: "primary",
-      className: "text-primary-dark hover:bg-background-secondary-subtle",
+      className:
+        "text-primary-dark hover:bg-background-secondary-subtle data-[state=open]:bg-background-secondary",
     },
     {
       variant: "text",
       color: "error",
-      className: "text-error-main hover:bg-error-light/20",
+      className:
+        "text-error-main hover:bg-error-light/20 data-[state=open]:bg-background-secondary",
     },
   ],
   defaultVariants: {

diff --git a/packages/graph-explorer/src/components/LoadingSpinner/LoadingSpinner.styles.ts b/packages/graph-explorer/src/components/LoadingSpinner/LoadingSpinner.styles.ts
@@ -17,17 +17,7 @@ const defaultStyles =
       align-items: center;
       background: transparent;
       position: relative;
-      animation: spin 2s linear infinite;
       color: ${color ?? theme.palette.primary.contrastText};
-
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(359deg);
-        }
-      }
     }
   `;
 

diff --git a/packages/graph-explorer/src/components/LoadingSpinner/LoadingSpinner.tsx b/packages/graph-explorer/src/components/LoadingSpinner/LoadingSpinner.tsx
@@ -4,6 +4,7 @@ import { useWithTheme } from "@/core";
 import { LoaderIcon } from "@/components/icons";
 
 import defaultStyles from "./LoadingSpinner.styles";
+import { IconBaseProps } from "../icons/IconBase";
 
 export interface LoadingSpinnerProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,12 +21,21 @@ export const LoadingSpinner = ({
   const themedStyle = useWithTheme();
   return (
     <div
-      className={cn(themedStyle(defaultStyles(color)), className)}
+      className={cn(
+        themedStyle(defaultStyles(color)),
+        "animate-spin",
+        className
+      )}
       {...props}
     >
       <div>{loadingIcon || <LoaderIcon />}</div>
     </div>
   );
 };
 
+/** Basic spinner */
+export function Spinner({ className, ...props }: IconBaseProps) {
+  return <LoaderIcon className={cn(className, "animate-spin")} {...props} />;
+}
+
 export default LoadingSpinner;
diff --git a/packages/graph-explorer/src/components/LoadingSpinner/index.ts b/packages/graph-explorer/src/components/LoadingSpinner/index.ts
@@ -1,3 +1,4 @@
 export { default } from "./LoadingSpinner";
 export { default as LoaderIcon } from "@/components/icons/LoaderIcon";
 export type { LoadingSpinnerProps } from "./LoadingSpinner";
+export * from "./LoadingSpinner";
diff --git a/packages/graph-explorer/src/components/NotificationProvider/NotificationProvider.tsx b/packages/graph-explorer/src/components/NotificationProvider/NotificationProvider.tsx
@@ -48,10 +48,17 @@ export const NotificationContext = createContext<NotificationContextValue>({
   clearNotification: voidFn,
 });
 
+export type NotificationType =
+  | "error"
+  | "warning"
+  | "info"
+  | "success"
+  | "loading";
+
 export type NotificationComponentProps = PropsWithChildren<{
   message: string;
   title?: string;
-  type?: "error" | "warning" | "info" | "success";
+  type?: NotificationType;
 
   /**
    * Enable or disable the possibility to close the notification manually

diff --git a/packages/graph-explorer/src/components/Panel.tsx b/packages/graph-explorer/src/components/Panel.tsx
@@ -48,7 +48,7 @@ export type Action = {
   onlyPinnedVisible?: boolean;
   isDisabled?: boolean;
   collapsedItems?: React.ReactElement;
-  onActionClick: () => void;
+  onActionClick?: () => void;
 };
 
 const PanelHeader = React.forwardRef<
@@ -103,7 +103,7 @@ const PanelHeaderDivider = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("bg-divider h-5 w-[1px]", className)}
+    className={cn("bg-divider mx-1 h-5 w-[1px]", className)}
     {...props}
   />
 ));
@@ -129,27 +129,20 @@ export function PanelHeaderCloseButton({
 }
 PanelHeaderCloseButton.displayName = "PanelHeaderCloseButton";
 
-export function PanelHeaderActionButton({
-  isDisabled,
-  label,
-  active,
-  color,
-  icon,
-  onActionClick,
-  ...props
-}: Action & IconButtonProps) {
-  return (
-    <IconButton
-      disabled={isDisabled}
-      tooltipText={label}
-      variant={active ? "filled" : "text"}
-      color={color}
-      icon={icon}
-      onClick={() => onActionClick()}
-      {...props}
-    />
-  );
-}
+export const PanelHeaderActionButton = React.forwardRef<
+  HTMLButtonElement,
+  Action & IconButtonProps
+>(({ isDisabled, label, active, onActionClick, ...props }, ref) => (
+  <IconButton
+    ref={ref}
+    disabled={isDisabled}
+    tooltipText={label}
+    variant={active ? "filled" : "text"}
+    {...(onActionClick && { onClick: onActionClick })}
+    {...props}
+  />
+));
+PanelHeaderActionButton.displayName = "PanelHeaderActionButton";
 
 export type PanelHeaderActionsProps = React.PropsWithChildren<
   React.ComponentPropsWithoutRef<"div">
@@ -163,7 +156,7 @@ function PanelHeaderActions({
   return (
     <div
       className={cn(
-        "flex grow flex-row items-center justify-end gap-1",
+        "flex grow flex-row items-center justify-end gap-1.5",
         className
       )}
       {...props}

diff --git a/packages/graph-explorer/src/components/Toast/Toast.styles.ts b/packages/graph-explorer/src/components/Toast/Toast.styles.ts