diff --git a/index.html b/index.html index 49db93f..d6f71d1 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,15 @@ HyperLEDA +
diff --git a/src/components/core/Accordion.tsx b/src/components/core/Accordion.tsx index e2f8f29..3f740f7 100644 --- a/src/components/core/Accordion.tsx +++ b/src/components/core/Accordion.tsx @@ -17,11 +17,11 @@ export function Accordion({ const [isOpen, setIsOpen] = useState(defaultOpen); return ( -
+
diff --git a/src/components/ui/ErrorPage.tsx b/src/components/ui/ErrorPage.tsx index ec8b28e..b664352 100644 --- a/src/components/ui/ErrorPage.tsx +++ b/src/components/ui/ErrorPage.tsx @@ -24,7 +24,7 @@ export function ErrorPage({
{showLargeText &&

404

}

{title}

-

{message}

+

{message}

{children && ( diff --git a/src/components/core/Hint.tsx b/src/components/ui/Hint.tsx similarity index 51% rename from src/components/core/Hint.tsx rename to src/components/ui/Hint.tsx index 8e126d4..6f65ef7 100644 --- a/src/components/core/Hint.tsx +++ b/src/components/ui/Hint.tsx @@ -1,6 +1,6 @@ -import { Tooltip } from "flowbite-react"; import { ReactElement, ReactNode } from "react"; import { MdHelpOutline } from "react-icons/md"; +import { AppTooltip } from "./AppTooltip"; interface HintProps { children?: ReactElement; @@ -9,23 +9,14 @@ interface HintProps { trigger?: "icon" | "child"; } -const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl"; -const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" }; - export function Hint(props: HintProps): ReactElement { const trigger = props.trigger ?? "icon"; if (trigger === "child") { return ( - + {props.children} - + ); } @@ -35,15 +26,9 @@ export function Hint(props: HintProps): ReactElement { >
{props.children}
- + - +
); diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx index 10b1b86..f321f14 100644 --- a/src/components/ui/Navbar.tsx +++ b/src/components/ui/Navbar.tsx @@ -1,15 +1,5 @@ -import { - forwardRef, - useEffect, - useMemo, - useRef, - useState, - type ButtonHTMLAttributes, - type ReactElement, - type ReactNode, -} from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { NavLink, useNavigate } from "react-router-dom"; -import { Tooltip } from "flowbite-react"; import { MdAccountTree, MdInfo, @@ -23,6 +13,9 @@ import { clearAuthToken, isLoggedIn } from "../../auth/token"; import { logoutEnforced } from "../../clients/admin/sdk.gen"; import { adminClient } from "../../clients/config"; import { Link } from "../core/Link"; +import { AppTooltip } from "./AppTooltip"; +import { SidebarRailButton, sidebarRailControlClassName } from "./SidebarRail"; +import { ThemeSwitcher } from "./ThemeSwitcher"; const navItems = [ { to: "/", icon: , label: "Object search", end: true }, @@ -40,51 +33,6 @@ const navItems = [ }, ]; -function SidebarTooltip({ - content, - children, -}: { - content: ReactNode; - children: ReactNode; -}): ReactElement { - return ( - - {children} - - ); -} - -function sidebarRailControlClassName(active: boolean): string { - return `w-9 h-9 flex items-center justify-center rounded-lg transition-colors duration-300 cursor-pointer ${ - active - ? "bg-[#646cff] text-white" - : "text-neutral-400 hover:bg-neutral-700 hover:text-white" - }`; -} - -const SidebarRailButton = forwardRef< - HTMLButtonElement, - ButtonHTMLAttributes & { active?: boolean } ->(function SidebarRailButton({ active = false, className, ...rest }, ref) { - return ( - {error ? ( -

+

{error}

) : null} {success ? ( -

Logged in successfully.

+

Logged in successfully.

) : null} ); diff --git a/src/pages/ObjectDetails.tsx b/src/pages/ObjectDetails.tsx index 311bed9..8615d22 100644 --- a/src/pages/ObjectDetails.tsx +++ b/src/pages/ObjectDetails.tsx @@ -9,7 +9,7 @@ import { Column, CellPrimitive, } from "../components/ui/CommonTable"; -import { Hint } from "../components/core/Hint"; +import { Hint } from "../components/ui/Hint"; import { Link } from "../components/core/Link"; import { Accordion } from "../components/core/Accordion"; import { querySimple } from "../clients/backend/sdk.gen"; diff --git a/src/pages/RecordCrossmatchDetails.tsx b/src/pages/RecordCrossmatchDetails.tsx index 7db9fe3..65235f0 100644 --- a/src/pages/RecordCrossmatchDetails.tsx +++ b/src/pages/RecordCrossmatchDetails.tsx @@ -154,14 +154,14 @@ function ObjectSummary({ const nameField = ( <> -
Name
+
Name
{name}
); const raField = equatorial ? ( <> -
RA
+
RA
-
Dec
+
Dec
-
Redshift
+
Redshift
{redshift.z.toFixed(5)} @@ -272,8 +272,8 @@ function ResolutionSelector({ className={classNames( "rounded-lg border px-4 py-2", matchedPgc === candidate.pgc - ? "border-[#646cff] bg-neutral-900/60" - : "border-gray-600 bg-neutral-900/40", + ? "border-accent bg-accent/15" + : "border-border bg-surface", )} > {renderCandidateSummary(candidate)} @@ -283,7 +283,7 @@ function ResolutionSelector({ )} {crossmatch.status === "new" && ( -

+

{getResource("crossmatch.action.mark_new").Title}

)} @@ -299,8 +299,8 @@ function ResolutionSelector({ className={classNames( "block rounded-lg border p-4 cursor-pointer transition-colors", selected === "new" - ? "border-[#646cff] bg-neutral-900/60" - : "border-gray-600 bg-neutral-900/40 hover:border-gray-500", + ? "border-accent bg-accent/15" + : "border-border bg-surface hover:bg-surface-2", resolving !== null && "opacity-50 cursor-wait", )} > @@ -325,8 +325,8 @@ function ResolutionSelector({ className={classNames( "block rounded-lg border px-4 py-2 cursor-pointer transition-colors", selected === candidate.pgc - ? "border-[#646cff] bg-neutral-900/60" - : "border-gray-600 bg-neutral-900/40 hover:border-gray-500", + ? "border-accent bg-accent/15" + : "border-border bg-surface hover:bg-surface-2", resolving !== null && "opacity-50 cursor-wait", )} > @@ -504,7 +504,7 @@ function RecordCrossmatchDetails({ : `${candidates.length} candidates`}

-
+

Object

{resolveError && ( -

+

{resolveError}

)} diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx index 83f93f4..7701c81 100644 --- a/src/pages/TableDetails.tsx +++ b/src/pages/TableDetails.tsx @@ -259,10 +259,10 @@ function TableMeta(props: TableMetaProps): ReactElement { value={asDataType(props.table.meta.datatype)} onChange={(event) => void commitDatatype(event.target.value as DataType)} disabled={savingField !== null} - className="bg-transparent border border-gray-500 rounded px-2 py-1 text-gray-200 max-w-xs" + className="bg-surface-2 border border-border rounded px-2 py-1 text-primary max-w-xs" > {DATA_TYPES.map((option) => ( - ))} @@ -304,7 +304,7 @@ function TableMeta(props: TableMetaProps): ReactElement { onChange={(event) => setDraftDescription(event.target.value)} onKeyDown={handleDescriptionKeyDown} disabled={savingField === "description"} - className="text-2xl font-bold bg-transparent border border-gray-500 rounded px-2 py-0.5 flex-1 min-w-0 text-white" + className="text-2xl font-bold bg-transparent border border-border rounded px-2 py-0.5 flex-1 min-w-0 text-primary" autoFocus /> ) : ( @@ -316,7 +316,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
{patchError ? ( -

{patchError}

+

{patchError}

) : null} );