From ff39fdef148d3ac280b14a18cf21e501bd8c1b45 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 9 Dec 2024 17:05:28 +0000 Subject: [PATCH 1/4] Updated login page logos --- apps/webapp/app/assets/logos/LyftLogo.tsx | 19 +++++++++ apps/webapp/app/assets/logos/MiddayLogo.tsx | 23 +++++++++++ apps/webapp/app/assets/logos/TldrawLogo.tsx | 41 +++++++++++++++++++ apps/webapp/app/assets/logos/UnkeyLogo.tsx | 17 ++++++++ .../webapp/app/components/LoginPageLayout.tsx | 11 +++-- 5 files changed, 108 insertions(+), 3 deletions(-) create mode 100644 apps/webapp/app/assets/logos/LyftLogo.tsx create mode 100644 apps/webapp/app/assets/logos/MiddayLogo.tsx create mode 100644 apps/webapp/app/assets/logos/TldrawLogo.tsx create mode 100644 apps/webapp/app/assets/logos/UnkeyLogo.tsx diff --git a/apps/webapp/app/assets/logos/LyftLogo.tsx b/apps/webapp/app/assets/logos/LyftLogo.tsx new file mode 100644 index 0000000000..270781927a --- /dev/null +++ b/apps/webapp/app/assets/logos/LyftLogo.tsx @@ -0,0 +1,19 @@ +export function LyftLogo({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/logos/MiddayLogo.tsx b/apps/webapp/app/assets/logos/MiddayLogo.tsx new file mode 100644 index 0000000000..1f4740ecb1 --- /dev/null +++ b/apps/webapp/app/assets/logos/MiddayLogo.tsx @@ -0,0 +1,23 @@ +export function MiddayLogo({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/TldrawLogo.tsx b/apps/webapp/app/assets/logos/TldrawLogo.tsx new file mode 100644 index 0000000000..a15ca8c64d --- /dev/null +++ b/apps/webapp/app/assets/logos/TldrawLogo.tsx @@ -0,0 +1,41 @@ +export function TldrawLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/UnkeyLogo.tsx b/apps/webapp/app/assets/logos/UnkeyLogo.tsx new file mode 100644 index 0000000000..9ef4f41667 --- /dev/null +++ b/apps/webapp/app/assets/logos/UnkeyLogo.tsx @@ -0,0 +1,17 @@ +export function UnkeyLogo({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/components/LoginPageLayout.tsx b/apps/webapp/app/components/LoginPageLayout.tsx index 0d41728497..30b9116263 100644 --- a/apps/webapp/app/components/LoginPageLayout.tsx +++ b/apps/webapp/app/components/LoginPageLayout.tsx @@ -9,6 +9,10 @@ import { LinkButton } from "./primitives/Buttons"; import { Header3 } from "./primitives/Headers"; import { Paragraph } from "./primitives/Paragraph"; import { TextLink } from "./primitives/TextLink"; +import { TldrawLogo } from "~/assets/logos/TldrawLogo"; +import { UnkeyLogo } from "~/assets/logos/UnkeyLogo"; +import { LyftLogo } from "~/assets/logos/LyftLogo"; +import { MiddayLogo } from "~/assets/logos/MiddayLogo"; interface QuoteType { quote: string; @@ -72,11 +76,12 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
Trusted by developers at
- - - + + + +
From c2b538668dcbd8371e03ddb04a886a2355ab2994 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 10 Dec 2024 14:23:02 +0000 Subject: [PATCH 2/4] Adds an isSelected state to the Table --- .../app/components/primitives/Table.tsx | 37 ++++++++++++++++--- .../route.tsx | 36 +++++++++++------- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index e27f48c12f..045d54b4e9 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -70,16 +70,18 @@ type TableRowProps = { className?: string; children: ReactNode; disabled?: boolean; + isSelected?: boolean; }; export const TableRow = forwardRef( - ({ className, disabled, children }, ref) => { + ({ className, disabled, isSelected, children }, ref) => { return ( @@ -146,6 +148,7 @@ type TableCellProps = TableCellBasicProps & { isSticky?: boolean; actionClassName?: string; rowHoverStyle?: keyof typeof rowHoverStyles; + isSelected?: boolean; }; const rowHoverStyles = { @@ -160,6 +163,8 @@ const rowHoverStyles = { const stickyStyles = "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto"; +const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750"; + export const TableCell = forwardRef( ( { @@ -173,6 +178,7 @@ export const TableCell = forwardRef( hasAction = false, isSticky = false, rowHoverStyle = "default", + isSelected, }, ref ) => { @@ -203,7 +209,8 @@ export const TableCell = forwardRef( to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle", !to && !onClick && alignmentClassName, isSticky && stickyStyles, - rowHoverStyles[rowHoverStyle], + isSelected && isSelectedStyle, + !isSelected && rowHoverStyles[rowHoverStyle], className )} colSpan={colSpan} @@ -259,10 +266,20 @@ export const TableCellMenu = forwardRef< hiddenButtons?: ReactNode; popoverContent?: ReactNode; children?: ReactNode; + isSelected?: boolean; } >( ( - { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children }, + { + className, + isSticky, + onClick, + visibleButtons, + hiddenButtons, + popoverContent, + children, + isSelected, + }, ref ) => { const [isOpen, setIsOpen] = useState(false); @@ -275,9 +292,17 @@ export const TableCellMenu = forwardRef< ref={ref} alignment="right" hasAction={true} + isSelected={isSelected} > -
-
+
+
{/* Hidden buttons that show on hover */} {hiddenButtons && (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx index 00b41bc728..09a3ca38ef 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx @@ -142,11 +142,8 @@ export default function Page() { ); const isSelected = deploymentParam === deployment.shortCode; return ( - - + +
{deployment.shortCode} {deployment.label && ( @@ -154,30 +151,32 @@ export default function Page() { )}
- + - {deployment.version} - + + {deployment.version} + + - + {deployment.tasksCount !== null ? deployment.tasksCount : "–"} - + {deployment.deployedAt ? ( ) : ( "–" )} - + {deployment.deployedBy ? (
- + ); }) @@ -282,9 +285,11 @@ function CreateDeploymentInstructions() { function DeploymentActionsCell({ deployment, path, + isSelected, }: { deployment: DeploymentListItem; path: string; + isSelected: boolean; }) { const location = useLocation(); const project = useProject(); @@ -293,12 +298,17 @@ function DeploymentActionsCell({ const canRetryIndexing = deployment.isLatest && deploymentIndexingIsRetryable(deployment); if (!canRollback && !canRetryIndexing) { - return {""}; + return ( + + {""} + + ); } return ( {canRollback && ( From 3628890fda79cd0a7cedd7f2100603d0d006d03a Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 11 Dec 2024 15:40:11 +0000 Subject: [PATCH 3/4] Toast style now matches the design --- apps/webapp/app/components/primitives/Toast.tsx | 15 ++++++++++----- apps/webapp/app/routes/storybook.toast/route.tsx | 11 ++++++++--- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/primitives/Toast.tsx b/apps/webapp/app/components/primitives/Toast.tsx index d0b1eab677..21256e89ce 100644 --- a/apps/webapp/app/components/primitives/Toast.tsx +++ b/apps/webapp/app/components/primitives/Toast.tsx @@ -6,6 +6,7 @@ import { useTypedLoaderData } from "remix-typedjson"; import { loader } from "~/root"; import { useEffect } from "react"; import { Paragraph } from "./Paragraph"; +import { cn } from "~/utils/cn"; const defaultToastDuration = 5000; const permanentToastDuration = 60 * 60 * 24 * 1000; @@ -39,23 +40,27 @@ export function ToastUI({ }) { return (
{variant === "success" ? ( - + ) : ( - + )} - {message} + {message}
diff --git a/apps/webapp/app/routes/storybook.toast/route.tsx b/apps/webapp/app/routes/storybook.toast/route.tsx index 45146aaeb2..e5daa0dd82 100644 --- a/apps/webapp/app/routes/storybook.toast/route.tsx +++ b/apps/webapp/app/routes/storybook.toast/route.tsx @@ -6,15 +6,20 @@ export default function Story() { return (
- + +