-
+
{appsQuery.isPending ? (
diff --git a/frontend/src/components/ErrorFallback.tsx b/frontend/src/components/ErrorFallback.tsx
index 2c98435b0..f794257f7 100644
--- a/frontend/src/components/ErrorFallback.tsx
+++ b/frontend/src/components/ErrorFallback.tsx
@@ -1,7 +1,8 @@
import logger from '@/logger';
-import { Link } from 'react-router';
import { Typography } from '@material-tailwind/react';
+import FgExternalLink from '@/components/designSystem/atoms/FgExternalLink';
+import FgLink from '@/components/designSystem/atoms/FgLink';
import errorImg from '@/assets/error_icon_gradient.png';
import useVersionQuery from '@/queries/versionQuery';
@@ -29,27 +30,21 @@ export default function ErrorFallback({ error }: any) {
Oops! An unknown error occurred
)}
-
-
diff --git a/frontend/src/components/NGLinks.tsx b/frontend/src/components/NGLinks.tsx
index 7369e32e8..e9080244a 100644
--- a/frontend/src/components/NGLinks.tsx
+++ b/frontend/src/components/NGLinks.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { Button, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
import { HiOutlinePlus } from 'react-icons/hi';
import toast from 'react-hot-toast';
@@ -7,10 +7,10 @@ import { TableCard } from '@/components/ui/Table/TableCard';
import { useNGLinksColumns } from '@/components/ui/Table/ngLinksColumns';
import NGLinkDialog from '@/components/ui/Dialogs/NGLinkDialog';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
-import DeleteBtn from '@/components/ui/buttons/DeleteBtn';
import { useNGLinkContext } from '@/contexts/NGLinkContext';
import type { CreateNGLinkPayload, NGLink } from '@/queries/ngLinkQueries';
import { copyToClipboard } from '@/utils/copyText';
+import FgButton from './designSystem/atoms/FgButton';
export default function NGLinks() {
const {
@@ -113,10 +113,13 @@ export default function NGLinks() {
later if needed.
+
Take a Tutorial
@@ -113,13 +118,22 @@ export default function Help() {
target="_blank"
to={url}
>
-
-
) : (
-
diff --git a/frontend/src/components/JobDetail.tsx b/frontend/src/components/JobDetail.tsx
index b154f7e75..93e4b6852 100644
--- a/frontend/src/components/JobDetail.tsx
+++ b/frontend/src/components/JobDetail.tsx
@@ -1,11 +1,10 @@
import { useEffect, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router';
-import { Button, Card, Tabs, Typography } from '@material-tailwind/react';
+import { Card, Tabs, Typography } from '@material-tailwind/react';
import {
HiOutlineArrowLeft,
HiOutlineDownload,
- HiOutlineExternalLink,
HiOutlineRefresh,
HiOutlineStop
} from 'react-icons/hi';
@@ -16,6 +15,7 @@ import {
} from 'react-syntax-highlighter/dist/esm/styles/prism';
import AnsiText from '@/components/ui/AppsPage/AnsiText';
+import FgButton from '@/components/designSystem/atoms/FgButton';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
import type { JobFileInfo, FileSharePath } from '@/shared.types';
import JobStatusBadge from '@/components/ui/AppsPage/JobStatusBadge';
@@ -31,6 +31,7 @@ import {
useJobFileQuery,
useCancelJobMutation
} from '@/queries/jobsQueries';
+import FgExternalLink from './designSystem/atoms/FgExternalLink';
function FilePreview({
content,
@@ -207,14 +208,14 @@ export default function JobDetail() {
return (
+
{title}
-
-
+
{jobQuery.isPending ? (
Open Service
-
+
) : (
@@ -253,14 +254,13 @@ export default function JobDetail() {
{job.app_name} — {job.entry_point_name}
-
+
@@ -333,16 +328,16 @@ export default function JobDetail() {
Service is starting up...
-
+ Stop Service
+
)
) : null}
@@ -360,24 +355,25 @@ export default function JobDetail() {
and the URL will no longer be accessible.
-
-
+ Stop Service
+
@@ -448,16 +444,15 @@ export default function JobDetail() {
zonesAndFspMap={zonesAndFspQuery.data || {}}
/>
{stdoutQuery.data !== undefined && stdoutQuery.data !== null ? (
-
+
) : null}
Help & Documentation @@ -100,19 +107,24 @@ export default function Login() { {simpleLoginMutation.error.message}
-
-
Log In
-
+
Log In with OKTA @@ -122,12 +134,12 @@ export default function Login() {
-
+
-
) : null}
diff --git a/frontend/src/components/Notifications.tsx b/frontend/src/components/Notifications.tsx
index b7fbd151e..025bb0a59 100644
--- a/frontend/src/components/Notifications.tsx
+++ b/frontend/src/components/Notifications.tsx
@@ -1,5 +1,7 @@
import { Card, Typography } from '@material-tailwind/react';
import { HiOutlineInformationCircle } from 'react-icons/hi';
+
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import { useNotificationContext } from '@/contexts/NotificationsContext';
import {
getNotificationStyles,
@@ -52,7 +54,10 @@ export default function Notifications() {
-
+
{keys.map(key => (
diff --git a/frontend/src/components/designSystem/Colors.stories.tsx b/frontend/src/components/designSystem/Colors.stories.tsx
new file mode 100644
index 000000000..c661c2696
--- /dev/null
+++ b/frontend/src/components/designSystem/Colors.stories.tsx
@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+// ---------- Color definitions ----------
+
+/**
+ * Full Tailwind class names written out so the compiler can detect them.
+ * Dynamic string interpolation (e.g. `bg-${name}`) would be purged.
+ */
+export const colorGroups: Record> = {
+ primary: {
+ default: 'bg-primary',
+ dark: 'bg-primary-dark',
+ light: 'bg-primary-light',
+ foreground: 'bg-primary-foreground'
+ },
+ secondary: {
+ default: 'bg-secondary',
+ dark: 'bg-secondary-dark',
+ light: 'bg-secondary-light',
+ foreground: 'bg-secondary-foreground'
+ },
+ surface: {
+ default: 'bg-surface',
+ dark: 'bg-surface-dark',
+ light: 'bg-surface-light',
+ foreground: 'bg-surface-foreground'
+ },
+ success: {
+ default: 'bg-success',
+ dark: 'bg-success-dark',
+ light: 'bg-success-light',
+ foreground: 'bg-success-foreground'
+ },
+ info: {
+ default: 'bg-info',
+ dark: 'bg-info-dark',
+ light: 'bg-info-light',
+ foreground: 'bg-info-foreground'
+ },
+ warning: {
+ default: 'bg-warning',
+ dark: 'bg-warning-dark',
+ light: 'bg-warning-light',
+ foreground: 'bg-warning-foreground'
+ },
+ error: {
+ default: 'bg-error',
+ dark: 'bg-error-dark',
+ light: 'bg-error-light',
+ foreground: 'bg-error-foreground'
+ }
+};
+
+// ---------- Sub-components ----------
+
+function ColorSwatch({
+ className,
+ label
+}: {
+ readonly className: string;
+ readonly label: string;
+}) {
+ return (
+ ;
+}) {
+ return (
+ ;
+
+export const Colors: Story = {
+ render: () => (
+ `, ``) over giant prop APIs.
+
+5. **Semantic color classes only, not raw hex.** Use Tailwind classes backed by `mtConfig` (`bg-primary`, `text-foreground`). No new hex values.
+
+6. **No `-default` in color class names.** Per existing convention: `bg-primary`, not `bg-primary-default`.
+
+7. **Every component has a Vitest test.** Minimum: renders with props, emits callbacks, renders correctly in dark mode.
+
+8. **Every component has a Storybook story.** Co-locate `ComponentName.stories.tsx` next to the component file.
+
+9. **Every interactive component has a `focus-visible` style.** Keyboard users must see focus.
+
+10. **`Fg` prefix for all design-system components.** Makes migration greppable and prevents collision with Material Tailwind.
diff --git a/frontend/src/components/designSystem/atoms/FgBadge.stories.tsx b/frontend/src/components/designSystem/atoms/FgBadge.stories.tsx
new file mode 100644
index 000000000..54157a7ff
--- /dev/null
+++ b/frontend/src/components/designSystem/atoms/FgBadge.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import FgBadge from './FgBadge';
+
+const meta = {
+ title: 'Atoms/FgBadge',
+ component: FgBadge,
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['default', 'pill']
+ },
+ color: {
+ control: 'select',
+ options: [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'error',
+ 'warning',
+ 'info',
+ 'neutral'
+ ]
+ },
+ size: {
+ control: 'inline-radio',
+ options: ['sm', 'md']
+ }
+ },
+ args: {
+ children: 'Badge'
+ }
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Colors: Story = {
+ render: args => (
+ ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+ const button = canvas.getByRole('button', { name: /button/i });
+
+ await userEvent.click(button);
+ await expect(args.onClick).toHaveBeenCalledTimes(1);
+ }
+};
+
+export const Variants: Story = {
+ render: args => (
+ , keyof FgButtonOwnProps>;
+
+const FgButton = forwardRef(
+ (
+ {
+ children,
+ variant = 'solid',
+ color,
+ size = 'md',
+ disabled = false,
+ loading = false,
+ loadingText,
+ icon,
+ iconPosition = 'left',
+ className = '',
+ type = 'button',
+ href,
+ target,
+ rel,
+ onClick,
+ ...restProps
+ },
+ ref
+ ) => {
+ const isDisabled = disabled || loading;
+
+ const focusClasses =
+ 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
+ const loadingClasses = loading ? 'cursor-not-allowed' : '';
+ const combinedClassName =
+ `${focusClasses} ${loadingClasses} ${className}`.trim();
+
+ const iconElement = icon ?
+
+ {label}
+
+ );
+}
+
+function ColorGroupRow({
+ name,
+ variants
+}: {
+ readonly name: string;
+ readonly variants: Record
+
+ {name}
+
+
+ );
+}
+
+// ---------- Storybook meta ----------
+
+const meta = {
+ title: 'Design System/Colors',
+ parameters: {
+ controls: { disable: true }
+ },
+ excludeStories: ['colorGroups']
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj
+ {Object.entries(variants).map(([variant, className]) => (
+
+
+
+ )
+};
diff --git a/frontend/src/components/designSystem/README.md b/frontend/src/components/designSystem/README.md
new file mode 100644
index 000000000..0bf06e6fa
--- /dev/null
+++ b/frontend/src/components/designSystem/README.md
@@ -0,0 +1,36 @@
+# Fileglancer Design System
+
+A library of UI-only, reusable components built on our existing Material Tailwind + Tailwind CSS stack. Components live in an atomic hierarchy:
+
+- **atoms/** -- Smallest building blocks (buttons, inputs, badges).
+- **molecules/** -- Compositions of atoms (search bars, form fields with labels).
+- **organisms/** -- Complex UI sections (dialogs, data tables, nav bars).
+- **templates/** -- Page-level layout skeletons that slot in organisms.
+
+Semantic color classes are defined in `tailwind.config.js`.
+
+All design-system components use the `Fg` prefix (e.g. `FgButton`, `FgDialog`) and are previewed in Storybook (`pixi run storybook`).
+
+---
+
+## Authoring Rules
+
+1. **UI-only.** No `useQuery`, no router hooks, no `fetch`, no context unless it's theme-related context.
+
+2. **Props are the contract.** Every variant and state is a prop. If a component needs data, the caller provides it.
+
+3. **Callbacks, not actions.** Emit `onClick`, `onChange`, `onSubmit`. Callers wire them to mutations/navigation.
+
+4. **Composition over configuration.** Prefer compound components (`+ Colors +
+ + {/* Simple colors */} +
+
+ base
+
+
+
+ {/* Grouped colors */}
+ {Object.entries(colorGroups).map(([name, variants]) => (
+
+
+
+
+ Primary
+
+
+ Secondary
+
+
+ Success
+
+
+ Error
+
+
+ Warning
+
+
+ Info
+
+
+ Neutral
+
+
+ )
+};
+
+export const Variants: Story = {
+ render: args => (
+
+
+ Default
+
+
+ Pill
+
+
+ )
+};
+
+export const Sizes: Story = {
+ render: args => (
+
+
+ Small
+
+
+ Medium
+
+
+ )
+};
+
+export const WithDot: Story = {
+ render: args => (
+
+
+ Active
+
+
+ Offline
+
+
+ Pending
+
+
+ )
+};
+
+export const CustomDotColor: Story = {
+ args: {
+ dot: true,
+ dotColor: 'bg-red-500',
+ children: 'Custom dot'
+ }
+};
diff --git a/frontend/src/components/designSystem/atoms/FgBadge.tsx b/frontend/src/components/designSystem/atoms/FgBadge.tsx
new file mode 100644
index 000000000..d1cc9c30a
--- /dev/null
+++ b/frontend/src/components/designSystem/atoms/FgBadge.tsx
@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+type FgBadgeProps = {
+ readonly children: ReactNode;
+ readonly variant?: 'default' | 'pill';
+ readonly color?:
+ | 'primary'
+ | 'secondary'
+ | 'success'
+ | 'error'
+ | 'warning'
+ | 'info'
+ | 'neutral';
+ readonly dot?: boolean;
+ readonly dotColor?: string;
+ readonly size?: 'sm' | 'md';
+ readonly className?: string;
+};
+
+const COLOR_STYLES = {
+ primary: { bg: 'bg-primary/20', text: 'text-primary', dot: 'bg-primary' },
+ secondary: {
+ bg: 'bg-secondary/20',
+ text: 'text-secondary',
+ dot: 'bg-secondary'
+ },
+ success: { bg: 'bg-success/20', text: 'text-success', dot: 'bg-success' },
+ error: { bg: 'bg-error/20', text: 'text-error', dot: 'bg-error' },
+ warning: { bg: 'bg-warning/20', text: 'text-warning', dot: 'bg-warning' },
+ info: { bg: 'bg-info/20', text: 'text-info', dot: 'bg-info' },
+ neutral: { bg: 'bg-surface', text: 'text-foreground', dot: 'bg-foreground' }
+};
+
+const VARIANT_STYLES = {
+ default: 'rounded-md font-bold',
+ pill: 'rounded-full font-medium'
+};
+
+const SIZE_STYLES = {
+ sm: 'text-xs',
+ md: 'text-sm'
+};
+
+export default function FgBadge({
+ children,
+ variant = 'default',
+ color = 'primary',
+ dot = false,
+ dotColor,
+ size = 'sm',
+ className = ''
+}: FgBadgeProps) {
+ const colorStyle = COLOR_STYLES[color];
+ const resolvedDotColor = dotColor ?? colorStyle.dot;
+
+ return (
+
+ {dot ? (
+
+
+
+
+ ) : null}
+ {children}
+
+ );
+}
diff --git a/frontend/src/components/designSystem/atoms/FgButton.stories.tsx b/frontend/src/components/designSystem/atoms/FgButton.stories.tsx
new file mode 100644
index 000000000..8ab86a05f
--- /dev/null
+++ b/frontend/src/components/designSystem/atoms/FgButton.stories.tsx
@@ -0,0 +1,201 @@
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { HiDownload, HiOutlinePlus, HiSearch } from 'react-icons/hi';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import FgButton from './FgButton';
+
+const iconMap = {
+ None: undefined,
+ HiDownload: HiDownload,
+ HiSearch: HiSearch
+};
+
+const meta = {
+ title: 'Atoms/FgButton',
+ component: FgButton,
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['solid', 'outline', 'ghost', 'link']
+ },
+ color: {
+ control: 'select',
+ options: ['primary', 'secondary', 'error', 'success', 'warning', 'info']
+ },
+ size: {
+ control: 'select',
+ options: ['sm', 'md', 'lg']
+ },
+ icon: {
+ control: 'select',
+ options: Object.keys(iconMap),
+ mapping: iconMap
+ },
+ iconPosition: {
+ control: 'inline-radio',
+ options: ['left', 'right']
+ }
+ },
+ args: {
+ children: 'Button',
+ onClick: fn()
+ }
+} satisfies Meta
+
+ Solid
+
+
+ Outline
+
+
+ Ghost
+
+
+ Link
+
+
+ )
+};
+
+export const Colors: Story = {
+ render: args => (
+
+
+ Primary
+
+
+ Secondary
+
+
+ Error
+
+
+ Success
+
+
+ Warning
+
+
+ Info
+
+
+ )
+};
+
+export const Loading: Story = {
+ args: {
+ loading: true,
+ loadingText: 'Saving...'
+ },
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ await expect(canvas.getByTitle('Loading spinner')).toBeInTheDocument();
+ await expect(canvas.getByText('Saving...')).toBeInTheDocument();
+
+ const button = canvas.getByRole('button');
+ await userEvent.click(button);
+ await expect(args.onClick).not.toHaveBeenCalled();
+ }
+};
+
+export const WithIcon: Story = {
+ render: args => (
+
+
+ Download
+
+
+ Search
+
+
+ )
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true
+ },
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+ const button = canvas.getByRole('button', { name: /button/i });
+
+ await userEvent.click(button);
+ await expect(args.onClick).not.toHaveBeenCalled();
+ }
+};
+
+export const LinkVariantWithIcon: Story = {
+ args: {
+ variant: 'link',
+ icon: HiOutlinePlus,
+ size: 'sm',
+ children: 'Add something'
+ }
+};
+
+export const AsLink: Story = {
+ args: {
+ children: 'Open',
+ href: 'https://example.com',
+ target: '_blank',
+ rel: 'noopener'
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const link = canvas.getByRole('link', { name: /open/i });
+
+ await expect(link).toHaveAttribute('href', 'https://example.com');
+ await expect(link).toHaveAttribute('target', '_blank');
+ await expect(link).toHaveAttribute('rel', 'noopener');
+ }
+};
+
+export const DisabledLink: Story = {
+ args: {
+ children: 'Open',
+ href: 'https://example.com',
+ disabled: true
+ },
+ play: async ({ canvasElement }) => {
+ const anchor = canvasElement.querySelector('a')!;
+
+ await expect(anchor).not.toHaveAttribute('href');
+ await expect(anchor).toHaveAttribute('aria-disabled', 'true');
+ }
+};
+
+export const LoadingLink: Story = {
+ args: {
+ children: 'Open',
+ href: 'https://example.com',
+ loading: true,
+ loadingText: 'Loading...'
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const anchor = canvasElement.querySelector('a')!;
+
+ await expect(anchor).not.toHaveAttribute('href');
+ await expect(anchor).toHaveAttribute('aria-disabled', 'true');
+ await expect(canvas.getByText('Loading...')).toBeInTheDocument();
+ }
+};
diff --git a/frontend/src/components/designSystem/atoms/FgButton.tsx b/frontend/src/components/designSystem/atoms/FgButton.tsx
new file mode 100644
index 000000000..422e56c18
--- /dev/null
+++ b/frontend/src/components/designSystem/atoms/FgButton.tsx
@@ -0,0 +1,162 @@
+import { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { IconType } from 'react-icons';
+import { Button } from '@material-tailwind/react';
+
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
+import { Spinner } from '@/components/ui/widgets/Loaders';
+
+type FgButtonOwnProps = {
+ readonly children: ReactNode;
+ readonly variant?: 'solid' | 'outline' | 'ghost' | 'link';
+ readonly color?:
+ | 'primary'
+ | 'secondary'
+ | 'error'
+ | 'success'
+ | 'warning'
+ | 'info';
+ readonly size?: 'sm' | 'md' | 'lg';
+ readonly loading?: boolean;
+ readonly loadingText?: string;
+ readonly icon?: IconType;
+ readonly iconPosition?: 'left' | 'right';
+ readonly href?: string;
+ readonly target?: string;
+ readonly rel?: string;
+};
+
+type FgButtonProps = FgButtonOwnProps &
+ Omit
-
-
+
);
diff --git a/frontend/src/components/ui/AppsPage/AppCard.tsx b/frontend/src/components/ui/AppsPage/AppCard.tsx
index 85726ce37..9424059e3 100644
--- a/frontend/src/components/ui/AppsPage/AppCard.tsx
+++ b/frontend/src/components/ui/AppsPage/AppCard.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useNavigate } from 'react-router';
-import { Button, Card, IconButton, Typography } from '@material-tailwind/react';
+import { Card, IconButton, Typography } from '@material-tailwind/react';
import { buildLaunchPathFromApp } from '@/utils';
import {
HiOutlineInformationCircle,
@@ -10,8 +10,10 @@ import {
} from 'react-icons/hi';
import AppInfoDialog from '@/components/ui/AppsPage/AppInfoDialog';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FgTooltip from '@/components/ui/widgets/FgTooltip';
import type { UserApp } from '@/shared.types';
+import FgButton from '@/components/designSystem/atoms/FgButton';
interface AppCardProps {
readonly app: UserApp;
@@ -52,7 +54,7 @@ export default function AppCard({
size="sm"
variant="ghost"
>
-
-
+
diff --git a/frontend/src/components/ui/AppsPage/AppLaunchForm.tsx b/frontend/src/components/ui/AppsPage/AppLaunchForm.tsx
index 8a4778e00..6121764c5 100644
--- a/frontend/src/components/ui/AppsPage/AppLaunchForm.tsx
+++ b/frontend/src/components/ui/AppsPage/AppLaunchForm.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
-import { Accordion, Button, Tabs, Typography } from '@material-tailwind/react';
+import { Accordion, Tabs, Typography } from '@material-tailwind/react';
import {
HiChevronDown,
HiOutlinePlus,
@@ -9,6 +9,8 @@ import {
HiOutlineTrash
} from 'react-icons/hi';
+import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FileSelectorButton from '@/components/ui/FileSelector/FileSelectorButton';
import FgSwitch from '@/components/ui/widgets/FgSwitch';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
@@ -300,18 +302,18 @@ function EnvVarRows({
title="Remove variable"
type="button"
>
-
-
-
+
Environment
- Container
- Resources
-
Submit Options
-
{item.section}
-
-
{/* Path segments */}
@@ -103,7 +104,7 @@ export default function Crumbs() {
}}
variant="ghost"
>
-
{isBrokenSymlink ? (
-
{isBrokenSymlink ? (
@@ -137,7 +152,7 @@ export default function Table({
) : !isBrokenSymlink ? (
e.stopPropagation()}
to={link ?? '#'}
@@ -174,7 +189,10 @@ export default function Table({
}}
variant="ghost"
>
-
);
diff --git a/frontend/src/components/ui/BrowsePage/FileViewer.tsx b/frontend/src/components/ui/BrowsePage/FileViewer.tsx
index a448319ae..d06333ac8 100644
--- a/frontend/src/components/ui/BrowsePage/FileViewer.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileViewer.tsx
@@ -16,6 +16,7 @@ import {
useFileMetadataQuery,
useFileBinaryPreviewQuery
} from '@/queries/fileContentQueries';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import HexDump from './HexDump';
import useDarkMode from '@/hooks/useDarkMode';
@@ -251,7 +252,10 @@ export default function FileViewer({ file }: FileViewerProps) {
) : null}
{downloadUrl ? (
-
-
+ Submit
+
{!newName.trim() ? (
Please enter a folder name
diff --git a/frontend/src/components/ui/BrowsePage/ZarrMetadataTable.tsx b/frontend/src/components/ui/BrowsePage/ZarrMetadataTable.tsx
index 86f4fdf3d..b2471656d 100644
--- a/frontend/src/components/ui/BrowsePage/ZarrMetadataTable.tsx
+++ b/frontend/src/components/ui/BrowsePage/ZarrMetadataTable.tsx
@@ -8,6 +8,7 @@ import {
translateUnitToNeuroglancer,
getResolvedScales
} from '@/omezarr-helper';
+import FgLink from '@/components/designSystem/atoms/FgLink';
import FgTooltip from '@/components/ui/widgets/FgTooltip';
type ZarrMetadataTableProps = {
@@ -100,10 +101,7 @@ export default function ZarrMetadataTable({
interactiveLabel={
<>
Heuristical layer type detection is disabled in{' '}
-
- preferences
-
- .
+ preferences .
}
isInteractive={true}
diff --git a/frontend/src/components/ui/Dialogs/ChangePermissions.tsx b/frontend/src/components/ui/Dialogs/ChangePermissions.tsx
index 63573cb4f..5ab5b908d 100644
--- a/frontend/src/components/ui/Dialogs/ChangePermissions.tsx
+++ b/frontend/src/components/ui/Dialogs/ChangePermissions.tsx
@@ -1,11 +1,10 @@
-import { Button } from '@material-tailwind/react';
import toast from 'react-hot-toast';
import FgDialog from './FgDialog';
import TextWithFilePath from './TextWithFilePath';
-import { Spinner } from '@/components/ui/widgets/Loaders';
import usePermissionsDialog from '@/hooks/usePermissionsDialog';
import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type ChangePermissionsProps = {
readonly showPermissionsDialog: boolean;
@@ -224,24 +223,17 @@ export default function ChangePermissions({
) : null}
-
+ Change Permissions
+
) : null}
diff --git a/frontend/src/components/ui/Dialogs/ConvertFile.tsx b/frontend/src/components/ui/Dialogs/ConvertFile.tsx
index 68de2feed..81f7cd74a 100644
--- a/frontend/src/components/ui/Dialogs/ConvertFile.tsx
+++ b/frontend/src/components/ui/Dialogs/ConvertFile.tsx
@@ -1,16 +1,16 @@
import type { ChangeEvent } from 'react';
-import { Button, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
import toast from 'react-hot-toast';
import FgDialog from './FgDialog';
import TextWithFilePath from './TextWithFilePath';
-import { Spinner } from '@/components/ui/widgets/Loaders';
import useConvertFileDialog from '@/hooks/useConvertFileDialog';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
import { useTicketContext } from '@/contexts/TicketsContext';
import { getPreferredPathForDisplay } from '@/utils/pathHandling';
import FileSelectorButton from '@/components/ui/FileSelector/FileSelectorButton';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type ItemNamingDialogProps = {
readonly showConvertFileDialog: boolean;
@@ -164,8 +164,7 @@ export default function ConvertFileDialog({
) : null}
-
+ Submit
+
);
diff --git a/frontend/src/components/ui/Dialogs/DataLink.tsx b/frontend/src/components/ui/Dialogs/DataLink.tsx
index 17665e852..bb92a0c00 100644
--- a/frontend/src/components/ui/Dialogs/DataLink.tsx
+++ b/frontend/src/components/ui/Dialogs/DataLink.tsx
@@ -3,7 +3,7 @@
import { useState, useMemo, SetStateAction } from 'react';
import type { ReactNode, Dispatch } from 'react';
-import { Accordion, Button, Typography } from '@material-tailwind/react';
+import { Accordion, Typography } from '@material-tailwind/react';
import { HiChevronDown } from 'react-icons/hi';
import { Link } from 'react-router';
@@ -25,7 +25,7 @@ import TextWithFilePath from './TextWithFilePath';
import DataLinkOptions, {
SubpathModeOptions
} from '@/components/ui/PreferencesPage/DataLinkOptions';
-import DeleteBtn from '@/components/ui/buttons/DeleteBtn';
+import FgButton from '@/components/designSystem/atoms/FgButton';
interface CommonDataLinkDialogProps {
showDataLinkDialog: boolean;
@@ -67,17 +67,14 @@ function CreateLinkBtn({
readonly disabled?: boolean;
}) {
return (
-
+
);
}
@@ -91,8 +88,7 @@ function CancelBtn({
readonly onCancel?: () => void;
}) {
return (
-
+ Cancel
+
);
}
@@ -342,14 +338,18 @@ export default function DataLinkDialog(props: DataLinkDialogProps) {
link at any time.
-
-
+
);
diff --git a/frontend/src/components/ui/Dialogs/Rename.tsx b/frontend/src/components/ui/Dialogs/Rename.tsx
index 4ff7eb88a..9e8f9bec5 100644
--- a/frontend/src/components/ui/Dialogs/Rename.tsx
+++ b/frontend/src/components/ui/Dialogs/Rename.tsx
@@ -1,11 +1,11 @@
import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
-import { Button, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
import useRenameDialog from '@/hooks/useRenameDialog';
import FgDialog from './FgDialog';
-import { Spinner } from '@/components/ui/widgets/Loaders';
import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
import toast from 'react-hot-toast';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type ItemNamingDialogProps = {
readonly showRenameDialog: boolean;
@@ -65,20 +65,14 @@ export default function RenameDialog({
value={newName}
/>
-
+ Submit
+
);
diff --git a/frontend/src/components/ui/Dialogs/ServerDownOverlay.tsx b/frontend/src/components/ui/Dialogs/ServerDownOverlay.tsx
index 5854ead11..683c50ca3 100644
--- a/frontend/src/components/ui/Dialogs/ServerDownOverlay.tsx
+++ b/frontend/src/components/ui/Dialogs/ServerDownOverlay.tsx
@@ -1,8 +1,11 @@
import { useState, useEffect } from 'react';
-import { Dialog, Button, Typography } from '@material-tailwind/react';
+import { Dialog, Typography } from '@material-tailwind/react';
import { HiOutlineExclamationTriangle } from 'react-icons/hi2';
import { HiRefresh } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
+import FgButton from '@/components/designSystem/atoms/FgButton';
+
type ServerDownOverlayProps = {
readonly open: boolean;
readonly onRetry: () => void;
@@ -38,15 +41,9 @@ function MessageContent() {
function RetryButton({ onRetry }: { readonly onRetry: () => void }) {
return (
-
+
);
}
@@ -88,7 +85,11 @@ export function ServerDownOverlay({
-
diff --git a/frontend/src/components/ui/Dialogs/dataLinkUsage/CodeBlock.tsx b/frontend/src/components/ui/Dialogs/dataLinkUsage/CodeBlock.tsx
index 4d3be931a..ab252596c 100644
--- a/frontend/src/components/ui/Dialogs/dataLinkUsage/CodeBlock.tsx
+++ b/frontend/src/components/ui/Dialogs/dataLinkUsage/CodeBlock.tsx
@@ -5,6 +5,7 @@ import {
} from 'react-syntax-highlighter/dist/esm/styles/prism';
import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import useDarkMode from '@/hooks/useDarkMode';
import CopyTooltip from '@/components/ui/widgets/CopyTooltip';
@@ -87,7 +88,7 @@ export default function CodeBlock({
textToCopy={code}
tooltipTriggerClasses={tooltipTriggerClasses}
>
-
) : null}
diff --git a/frontend/src/components/ui/Dialogs/dataLinkUsage/DataLinkUsageDialog.tsx b/frontend/src/components/ui/Dialogs/dataLinkUsage/DataLinkUsageDialog.tsx
index 2e704529a..47eab012b 100644
--- a/frontend/src/components/ui/Dialogs/dataLinkUsage/DataLinkUsageDialog.tsx
+++ b/frontend/src/components/ui/Dialogs/dataLinkUsage/DataLinkUsageDialog.tsx
@@ -1,6 +1,7 @@
import { Typography } from '@material-tailwind/react';
import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
import TabsSkeleton from '@/components/ui/Dialogs/dataLinkUsage/TabsSkeleton';
import DataLinkTabs from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/DataLinkTabs';
@@ -86,7 +87,10 @@ export default function DataLinkUsageDialog({
textToCopy={dataLinkUrl}
tooltipTriggerClasses={TOOLTIP_TRIGGER_CLASSES}
>
- -
{prerequisites.map(({ label, href }) => (
-
-
{label} +{label}
))}
-
{segments.map((segment, index) => {
diff --git a/frontend/src/components/ui/FileSelector/FileSelectorButton.tsx b/frontend/src/components/ui/FileSelector/FileSelectorButton.tsx
index 9963bc565..32792e2b9 100644
--- a/frontend/src/components/ui/FileSelector/FileSelectorButton.tsx
+++ b/frontend/src/components/ui/FileSelector/FileSelectorButton.tsx
@@ -1,9 +1,11 @@
import { useState, useEffect } from 'react';
import type { MouseEvent } from 'react';
-import { Button, Input, Typography } from '@material-tailwind/react';
+import { Input, Typography } from '@material-tailwind/react';
import { HiOutlineFolder, HiOutlineFunnel, HiXMark } from 'react-icons/hi2';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
+import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FileSelectorBreadcrumbs from './FileSelectorBreadcrumbs';
import FileSelectorTable from './FileSelectorTable';
import { Spinner } from '@/components/ui/widgets/Loaders';
@@ -103,19 +105,19 @@ export default function FileSelectorButton({
return (
<>
-
+
{showDialog ? (
-
-
+
) : null}
diff --git a/frontend/src/components/ui/FileSelector/FileSelectorTable.tsx b/frontend/src/components/ui/FileSelector/FileSelectorTable.tsx
index a97ff98f6..26e4df3e0 100644
--- a/frontend/src/components/ui/FileSelector/FileSelectorTable.tsx
+++ b/frontend/src/components/ui/FileSelector/FileSelectorTable.tsx
@@ -15,6 +15,7 @@ import {
} from 'react-icons/hi2';
import { TbFile } from 'react-icons/tb';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import type { FileOrFolder, FileSharePath, Zone } from '@/shared.types';
import type { FileSelectorLocation } from '@/hooks/useFileSelector';
import FgTooltip from '@/components/ui/widgets/FgTooltip';
@@ -80,12 +81,18 @@ export default function FileSelectorTable({
if (currentLocation.type === 'zones') {
// At zones level: show zone icon for all items
icon = (
-
-
{profile ? profile.username : 'Loading...'}
@@ -53,7 +58,7 @@ export default function ProfileMenu() {
data-tour="preferences-link"
to="/preferences"
>
-
-
{sshKeysEnabled ? (
@@ -70,7 +75,7 @@ export default function ProfileMenu() {
className="text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
to="/ssh-keys"
>
-
diff --git a/frontend/src/components/ui/PropertiesDrawer/PermissionsTable.tsx b/frontend/src/components/ui/PropertiesDrawer/PermissionsTable.tsx
index 3c084912b..476d765e0 100644
--- a/frontend/src/components/ui/PropertiesDrawer/PermissionsTable.tsx
+++ b/frontend/src/components/ui/PropertiesDrawer/PermissionsTable.tsx
@@ -1,5 +1,6 @@
import { HiCheck, HiMinus } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import { FileOrFolder } from '@/shared.types';
import { parsePermissions } from '@/utils/index';
@@ -8,11 +9,7 @@ function PermissionIcon({
}: {
readonly hasPermission: boolean;
}) {
- return hasPermission ? (
-
-
Not logged in
@@ -95,7 +100,7 @@ export default function ProfileMenu() {
className="text-primary hover:!text-primary focus:!text-primary hover:bg-primary/10 focus:bg-primary/10"
href={loginUrl}
>
-
@@ -95,14 +96,14 @@ export default function JobOptions() {
type="text"
value={localCacheDir}
/>
-
+ Save
+
{ticket.link ? (
-
+
) : null}
-
Favorites
-
diff --git a/frontend/src/components/ui/Sidebar/FileSharePath.tsx b/frontend/src/components/ui/Sidebar/FileSharePath.tsx
index 5db2dd554..0745d4e2f 100644
--- a/frontend/src/components/ui/Sidebar/FileSharePath.tsx
+++ b/frontend/src/components/ui/Sidebar/FileSharePath.tsx
@@ -5,6 +5,8 @@ import { HiOutlineStar, HiStar } from 'react-icons/hi';
import { HiOutlineRectangleStack } from 'react-icons/hi2';
import toast from 'react-hot-toast';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
+
import type { FileSharePath } from '@/shared.types';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
import {
@@ -38,7 +40,11 @@ export default function FileSharePathComponent({
to={link}
>
Folder {displayPath} does not
exist. Do you want to delete it from your favorites?
-
{searchQuery ? (
@@ -42,7 +43,7 @@ export default function Sidebar() {
onClick={clearSearch}
type="button"
>
-
diff --git a/frontend/src/components/ui/Sidebar/Zone.tsx b/frontend/src/components/ui/Sidebar/Zone.tsx
index 48299fb61..e9168b632 100644
--- a/frontend/src/components/ui/Sidebar/Zone.tsx
+++ b/frontend/src/components/ui/Sidebar/Zone.tsx
@@ -7,6 +7,7 @@ import {
import { HiChevronRight, HiOutlineStar, HiStar } from 'react-icons/hi';
import { HiOutlineSquares2X2 } from 'react-icons/hi2';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FileSharePathComponent from './FileSharePath';
import type { Zone } from '@/shared.types';
import { usePreferencesContext } from '@/contexts/PreferencesContext';
@@ -37,7 +38,11 @@ export default function Zone({
role="button"
>
-
@@ -60,16 +65,26 @@ export default function Zone({
variant="ghost"
>
{isFavoriteZone ? (
-
diff --git a/frontend/src/components/ui/SSHKeys/GenerateTempKeyDialog.tsx b/frontend/src/components/ui/SSHKeys/GenerateTempKeyDialog.tsx
index 027118ced..9172e7156 100644
--- a/frontend/src/components/ui/SSHKeys/GenerateTempKeyDialog.tsx
+++ b/frontend/src/components/ui/SSHKeys/GenerateTempKeyDialog.tsx
@@ -1,12 +1,12 @@
import { useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
-import { Button, Input, Typography } from '@material-tailwind/react';
+import { Input, Typography } from '@material-tailwind/react';
import toast from 'react-hot-toast';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
-import { Spinner } from '@/components/ui/widgets/Loaders';
import { useGenerateTempKeyMutation } from '@/queries/sshKeyQueries';
import type { TempKeyResult } from '@/queries/sshKeyQueries';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type GenerateTempKeyDialogProps = {
readonly showDialog: boolean;
@@ -70,23 +70,18 @@ export default function GenerateTempKeyDialog({
-
-
+
);
diff --git a/frontend/src/components/ui/SSHKeys/SSHKeyCard.tsx b/frontend/src/components/ui/SSHKeys/SSHKeyCard.tsx
index 95bace295..ad7973c65 100644
--- a/frontend/src/components/ui/SSHKeys/SSHKeyCard.tsx
+++ b/frontend/src/components/ui/SSHKeys/SSHKeyCard.tsx
@@ -1,6 +1,7 @@
import { Card, Typography } from '@material-tailwind/react';
import { HiOutlineKey } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import type { SSHKeyInfo } from '@/queries/sshKeyQueries';
type SSHKeyCardProps = {
@@ -11,7 +12,12 @@ export default function SSHKeyCard({ keyInfo }: SSHKeyCardProps) {
return (
-
{keyInfo.key_type}
diff --git a/frontend/src/components/ui/SSHKeys/TempKeyDialog.tsx b/frontend/src/components/ui/SSHKeys/TempKeyDialog.tsx
index acfc73f56..19fe4e1e5 100644
--- a/frontend/src/components/ui/SSHKeys/TempKeyDialog.tsx
+++ b/frontend/src/components/ui/SSHKeys/TempKeyDialog.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { Button, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
import {
HiOutlineClipboardCopy,
HiOutlineExclamation,
@@ -7,8 +7,10 @@ import {
} from 'react-icons/hi';
import toast from 'react-hot-toast';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FgDialog from '@/components/ui/Dialogs/FgDialog';
import type { TempKeyResult } from '@/queries/sshKeyQueries';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type TempKeyDialogProps = {
readonly tempKeyResult: TempKeyResult | null;
@@ -48,7 +50,11 @@ export default function TempKeyDialog({
return (
diff --git a/frontend/src/components/ui/Sidebar/FavoritesBrowser.tsx b/frontend/src/components/ui/Sidebar/FavoritesBrowser.tsx
index 9423374f4..c4e3805e6 100644
--- a/frontend/src/components/ui/Sidebar/FavoritesBrowser.tsx
+++ b/frontend/src/components/ui/Sidebar/FavoritesBrowser.tsx
@@ -2,6 +2,7 @@ import { Collapse, Typography, List } from '@material-tailwind/react';
import { HiChevronRight } from 'react-icons/hi';
import { HiStar } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import ZoneComponent from './Zone';
import FileSharePathComponent from './FileSharePath';
import Folder from './Folder';
@@ -54,14 +55,18 @@ export default function FavoritesBrowser({
tabIndex={0}
>
-
SSH Key Generated
@@ -66,23 +72,14 @@ export default function TempKeyDialog({
page).
@@ -107,9 +104,9 @@ export default function TempKeyDialog({
-
+ Copy Private Key
+
-
+
-
{fsp.storage}
@@ -75,9 +81,17 @@ export default function FileSharePathComponent({
variant="ghost"
>
{isFavoritePath ? (
-
diff --git a/frontend/src/components/ui/Sidebar/Folder.tsx b/frontend/src/components/ui/Sidebar/Folder.tsx
index dee5edd7b..925af59d5 100644
--- a/frontend/src/components/ui/Sidebar/Folder.tsx
+++ b/frontend/src/components/ui/Sidebar/Folder.tsx
@@ -6,6 +6,8 @@ import { HiOutlineFolder } from 'react-icons/hi2';
import { HiStar } from 'react-icons/hi';
import { useQueryClient } from '@tanstack/react-query';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
+
import {
makeMapKey,
getLastSegmentFromPath,
@@ -133,7 +135,11 @@ export default function Folder({
>
{icon || (
-
{getLastSegmentFromPath(folderPath)}
@@ -173,7 +179,11 @@ export default function Folder({
}}
variant="ghost"
>
-
) : null}
diff --git a/frontend/src/components/ui/Sidebar/MissingFolderFavoriteDialog.tsx b/frontend/src/components/ui/Sidebar/MissingFolderFavoriteDialog.tsx
index 6cc6fc923..eb4956be0 100644
--- a/frontend/src/components/ui/Sidebar/MissingFolderFavoriteDialog.tsx
+++ b/frontend/src/components/ui/Sidebar/MissingFolderFavoriteDialog.tsx
@@ -1,14 +1,10 @@
import type { Dispatch, SetStateAction } from 'react';
import { useNavigate } from 'react-router';
import toast from 'react-hot-toast';
-import {
- Button,
- Dialog,
- IconButton,
- Typography
-} from '@material-tailwind/react';
+import { Dialog, IconButton, Typography } from '@material-tailwind/react';
import { HiX } from 'react-icons/hi';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import {
FolderFavorite,
usePreferencesContext
@@ -18,6 +14,7 @@ import {
makeBrowseLink,
removeLastSegmentFromPath
} from '@/utils';
+import FgButton from '@/components/designSystem/atoms/FgButton';
type MissingFolderFavoriteDialogProps = {
readonly folderFavorite: FolderFavorite;
@@ -55,15 +52,14 @@ export default function MissingFolderFavoriteDialog({
size="sm"
variant="outline"
>
-
-
-
+
diff --git a/frontend/src/components/ui/Sidebar/Sidebar.tsx b/frontend/src/components/ui/Sidebar/Sidebar.tsx
index db5b67f26..68e03f6a2 100644
--- a/frontend/src/components/ui/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/ui/Sidebar/Sidebar.tsx
@@ -2,6 +2,7 @@ import type { ChangeEvent } from 'react';
import { Card, Input } from '@material-tailwind/react';
import { HiOutlineFunnel, HiXMark } from 'react-icons/hi2';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
import FavoritesBrowser from './FavoritesBrowser';
import ZonesBrowser from './ZonesBrowser';
import useFilteredZonesAndFavorites from '@/hooks/useFilteredZonesAndFavorites';
@@ -32,7 +33,7 @@ export default function Sidebar() {
value={searchQuery}
>
{{
- asc:
@@ -121,7 +123,7 @@ const DebouncedInput = forwardRef<
value={value}
>