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
- - - + + + +
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/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/_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 && ( diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx index 034f583834..be0dc5dc04 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx @@ -209,6 +209,7 @@ export default function Page() { title="Unlock more team members" to={v3BillingPath(organization)} buttonLabel="Upgrade" + panelClassName="mt-4 max-w-sm" > You've used all {limits.limit} of your available team members. Upgrade your plan to 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 (
- + +