openstatus.dev / openstatus
Openstatus www.openstatus.dev
fork atom

Allow user to choose theme for status page (#73)

* feat: change theme

* add env.example

* minor fix

* fix: imports

* fix: color usage

* fix: svg current color

* fix: format

---------

Co-authored-by: mxkaske <maximilian@kaske.org>

authored by

Miljan
mxkaske and committed by
GitHub c95d4750 3a5054ec

+449 -48
+1
apps/web/package.json
··· 55 55 "next": "13.5.3", 56 56 "next-contentlayer": "0.3.4", 57 57 "next-plausible": "3.11.1", 58 + "next-themes": "^0.2.1", 58 59 "react": "18.2.0", 59 60 "react-day-picker": "8.8.2", 60 61 "react-dom": "18.2.0",
+1 -1
apps/web/src/app/(content)/blog/page.tsx
··· 45 45 title={post.title} 46 46 href={`./blog/${post.slug}`} 47 47 > 48 - <div className="prose"> 48 + <div className="prose dark:prose-invert"> 49 49 <p>{post.description}</p> 50 50 </div> 51 51 <div>
+1 -1
apps/web/src/app/_components/background.tsx
··· 16 16 <div className="fixed left-0 top-0 -z-50"> 17 17 <div className="sticky left-0 top-0 h-screen w-screen overflow-hidden"> 18 18 <div className="bg-muted-foreground/20 absolute inset-0 z-[-1]" /> 19 - <div className="bg-gradient-radial from-muted-foreground/80 absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full from-0% to-transparent to-90% blur-md" /> 19 + <div className="bg-gradient-radial from-muted-foreground/50 absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full from-0% to-transparent to-90% blur-md" /> 20 20 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 21 21 <defs> 22 22 <pattern
+2 -2
apps/web/src/app/_components/event-table.tsx
··· 52 52 className={cn( 53 53 "px-2 py-0.5 text-xs", 54 54 isOk 55 - ? "border-green-100 bg-green-50" 56 - : "border-red-100 bg-red-50", 55 + ? "border-green-500/20 bg-green-500/10" 56 + : "border-red-500/20 bg-red-500/10", 57 57 )} 58 58 > 59 59 {event.statusCode}
+6 -3
apps/web/src/app/layout.tsx
··· 12 12 twitterMetadata, 13 13 } from "@/app/shared-metadata"; 14 14 import { TailwindIndicator } from "@/components/tailwind-indicator"; 15 + import { ThemeProvider } from "@/components/theme-provider"; 15 16 import Background from "./_components/background"; 16 17 17 18 const inter = Inter({ subsets: ["latin"] }); ··· 40 41 return ( 41 42 <html lang="en"> 42 43 <body className={`${inter.className} ${calSans.variable}`}> 43 - <Background>{children}</Background> 44 - <Toaster /> 45 - <TailwindIndicator /> 44 + <ThemeProvider attribute="class" defaultTheme="system" enableSystem> 45 + <Background>{children}</Background> 46 + <Toaster /> 47 + <TailwindIndicator /> 48 + </ThemeProvider> 46 49 </body> 47 50 </html> 48 51 );
+1 -1
apps/web/src/app/oss-friends/page.tsx
··· 47 47 <CardFooter> 48 48 <div className="flex items-center gap-2.5"> 49 49 <Link href={friend.href} target="_blank"> 50 - <Icons.globe className="text-muted-foreground h-5 w-5 hover:text-black" /> 50 + <Icons.globe className="text-muted-foreground hover:text-foreground h-5 w-5" /> 51 51 </Link> 52 52 </div> 53 53 </CardFooter>
+4 -2
apps/web/src/app/status-page/[domain]/layout.tsx
··· 1 1 import { Shell } from "@/components/dashboard/shell"; 2 + import { ThemeToggle } from "@/components/theme-toggle"; 2 3 import NavigationLink from "./_components/navigation-link"; 3 - import { UserButton } from "./_components/user-button"; 4 4 5 5 export default function StatusPageLayout({ 6 6 children, ··· 20 20 {children} 21 21 </Shell> 22 22 </main> 23 - <footer className="z-10"> 23 + <footer className="z-10 mx-auto flex w-full max-w-xl items-center justify-between"> 24 + <div /> 24 25 <p className="text-muted-foreground text-center text-sm"> 25 26 powered by{" "} 26 27 <a ··· 32 33 openstatus.dev 33 34 </a> 34 35 </p> 36 + <ThemeToggle /> 35 37 </footer> 36 38 </div> 37 39 );
+1 -1
apps/web/src/app/status/page.tsx
··· 48 48 <CardFooter> 49 49 <div className="flex items-center gap-2.5"> 50 50 <Link href={status.url} target="_blank"> 51 - <Icons.globe className="text-muted-foreground h-5 w-5 hover:text-black" /> 51 + <Icons.globe className="text-muted-foreground hover:text-foreground h-5 w-5" /> 52 52 </Link> 53 53 </div> 54 54 </CardFooter>
+1 -1
apps/web/src/components/content/article.tsx
··· 36 36 <Link 37 37 href={post.author.url ?? "#"} 38 38 target="_blank" 39 - className="cursor-pointer font-medium text-black hover:underline" 39 + className="text-foreground cursor-pointer font-medium hover:underline" 40 40 > 41 41 {post.author.name} 42 42 </Link>
+3 -1
apps/web/src/components/data-table/data-table-status-badge.tsx
··· 14 14 variant="outline" 15 15 className={cn( 16 16 "px-2 py-0.5 text-xs", 17 - isOk ? "border-green-100 bg-green-50" : "border-red-100 bg-red-50", 17 + isOk 18 + ? "border-green-500/20 bg-green-500/10" 19 + : "border-red-500/20 bg-red-500/10", 18 20 )} 19 21 > 20 22 {statusCode || "Error"}
+1 -1
apps/web/src/components/data-table/monitor/columns.tsx
··· 24 24 > 25 25 {active ? ( 26 26 <span className="relative flex h-2 w-2"> 27 - <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75 duration-1000" /> 27 + <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500/80 opacity-75 duration-1000" /> 28 28 <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500" /> 29 29 </span> 30 30 ) : (
+6
apps/web/src/components/icons.tsx
··· 10 10 Fingerprint, 11 11 Globe, 12 12 Image, 13 + Laptop, 13 14 LayoutDashboard, 14 15 Link, 15 16 MessageCircle, 16 17 Minus, 18 + Moon, 17 19 PanelTop, 18 20 Pencil, 19 21 Play, ··· 22 24 Search, 23 25 SearchCheck, 24 26 Siren, 27 + SunMedium, 25 28 Table, 26 29 Tag, 27 30 ToyBrick, ··· 64 67 zap: Zap, 65 68 "alert-triangle": AlertTriangle, 66 69 minus: Minus, 70 + sun: SunMedium, 71 + moon: Moon, 72 + laptop: Laptop, 67 73 discord: ({ ...props }: LucideProps) => ( 68 74 <svg viewBox="0 0 640 512" {...props}> 69 75 <path
+4 -4
apps/web/src/components/incidents/status-badge.tsx
··· 19 19 className={cn( 20 20 "font-normal", 21 21 { 22 - "border-red-600/20 bg-red-50 text-red-600": 22 + "border-red-500/20 bg-red-500/10 text-red-500": 23 23 status === "investigating", 24 - "border-yellow-600/20 bg-yellow-50 text-yellow-600": 24 + "border-yellow-500/20 bg-yellow-500/10 text-yellow-500": 25 25 status === "identified", 26 - "border-blue-600/20 bg-blue-50 text-blue-600": 26 + "border-blue-500/20 bg-blue-500/10 text-blue-500": 27 27 status === "monitoring", 28 - "border-green-600/20 bg-green-50 text-green-600": 28 + "border-green-500/20 bg-green-500/10 text-green-500": 29 29 status === "resolved", 30 30 }, 31 31 className,
+5 -1
apps/web/src/components/layout/marketing-footer.tsx
··· 3 3 4 4 import { cn } from "@/lib/utils"; 5 5 import { Shell } from "../dashboard/shell"; 6 + import { ThemeToggle } from "../theme-toggle"; 6 7 import { StatusWidgetContainer } from "./status-widget-suspense"; 7 8 8 9 interface Props { ··· 14 15 <footer className={cn("w-full", className)}> 15 16 <Shell className="grid gap-6"> 16 17 <div className="grid grid-cols-2 gap-6 md:grid-cols-4"> 17 - <div className="order-4 md:order-1"> 18 + <div className="order-4 flex flex-col justify-between gap-3 md:order-1"> 18 19 <StatusWidgetContainer slug="status" /> 20 + <div className="text-right md:text-left"> 21 + <ThemeToggle /> 22 + </div> 19 23 </div> 20 24 <div className="order-1 flex flex-col gap-3 text-sm md:order-2"> 21 25 <p className="text-foreground font-semibold">Community</p>
+3 -3
apps/web/src/components/layout/status-widget-suspense.tsx
··· 5 5 6 6 export function StatusWidgetFallback() { 7 7 return ( 8 - <div className="flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"> 9 - <span className="h-5 w-20 animate-pulse rounded-md bg-gray-600/10" /> 10 - <span className="relative inline-flex h-2 w-2 rounded-full bg-black/10" /> 8 + <div className="border-border flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm"> 9 + <span className="bg-muted h-5 w-20 animate-pulse rounded-md" /> 10 + <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" /> 11 11 </div> 12 12 ); 13 13 }
+1 -1
apps/web/src/components/marketing/faqs.tsx
··· 39 39 <AccordionTrigger>{q}</AccordionTrigger> 40 40 <AccordionContent> 41 41 <div 42 - className="prose prose-sm" 42 + className="prose dark:prose-invert prose-sm" 43 43 dangerouslySetInnerHTML={{ __html: a }} 44 44 /> 45 45 </AccordionContent>
+7 -15
apps/web/src/components/marketing/partners.tsx
··· 1 1 import { ArrowUpRight } from "lucide-react"; 2 2 3 + import { Documenso } from "@/components/svg/documenso"; 4 + import { Hanko } from "@/components/svg/hanko"; 5 + import { Trigger } from "@/components/svg/trigger"; 6 + 3 7 export function Partners() { 4 8 return ( 5 9 <div className="grid gap-4"> ··· 14 18 rel="noreferrer" 15 19 className="group inline-flex items-center justify-center underline underline-offset-4 hover:no-underline" 16 20 > 17 - <img 18 - src="/assets/partners/hanko.svg" 19 - alt="hanko" 20 - className="h-8 w-16 object-contain" 21 - /> 21 + <Hanko className="h-8 w-24" /> 22 22 <ArrowUpRight className="text-muted-foreground group-hover:text-foreground ml-1 h-4 w-4 flex-shrink-0" /> 23 23 </a> 24 24 </div> ··· 29 29 rel="noreferrer" 30 30 className="group inline-flex items-center justify-center underline underline-offset-4 hover:no-underline" 31 31 > 32 - <img 33 - src="/assets/partners/documenso.svg" 34 - alt="hanko" 35 - className="h-8 w-32 object-contain" 36 - /> 32 + <Documenso className="h-8 w-32" /> 37 33 <ArrowUpRight className="text-muted-foreground group-hover:text-foreground ml-1 h-4 w-4 flex-shrink-0" /> 38 34 </a> 39 35 </div> ··· 44 40 rel="noreferrer" 45 41 className="group inline-flex items-center justify-center underline underline-offset-4 hover:no-underline" 46 42 > 47 - <img 48 - src="/assets/partners/triggerdev.svg" 49 - alt="trigger.dev" 50 - className="h-8 w-32 object-contain text-black" 51 - /> 43 + <Trigger className="h-8 w-32" /> 52 44 <ArrowUpRight className="text-muted-foreground group-hover:text-foreground ml-1 h-4 w-4 flex-shrink-0" /> 53 45 </a> 54 46 </div>
+5 -5
apps/web/src/components/status-page/status-check.tsx
··· 15 15 const check = cva("border-border rounded-full border p-2", { 16 16 variants: { 17 17 variant: { 18 - up: "text-green-500 bg-green-500", 19 - down: "text-red-500 bg-red-500", 20 - degraded: "text-yellow-500 bg-yellow-500", 21 - empty: "text-gray-500 bg-gray-500", 22 - incident: "text-yellow-500 bg-yellow-500", 18 + up: "bg-green-500/80 border-green-500", 19 + down: "bg-red-500/80 border-red-500", 20 + degraded: "bg-yellow-500/80 border-yellow-500", 21 + empty: "bg-gray-500/80 border-gray-500", 22 + incident: "bg-yellow-500/80 border-yellow-500", 23 23 }, 24 24 }, 25 25 defaultVariants: {
+80
apps/web/src/components/svg/documenso.tsx
··· 1 + import type { SVGAttributes } from "react"; 2 + 3 + export function Documenso(props: SVGAttributes<SVGSVGElement>) { 4 + return ( 5 + <svg viewBox="0 0 226 32" xmlns="http://www.w3.org/2000/svg" {...props}> 6 + <path 7 + d="M52.9387 28H44.6887V4.72727H53.0069C55.3478 4.72727 57.363 5.19318 59.0524 6.125C60.7418 7.04924 62.041 8.37879 62.9501 10.1136C63.8668 11.8485 64.3251 13.9242 64.3251 16.3409C64.3251 18.7652 63.8668 20.8485 62.9501 22.5909C62.041 24.3333 60.7342 25.6705 59.0296 26.6023C57.3327 27.5341 55.3024 28 52.9387 28ZM49.6092 23.7841H52.7342C54.1887 23.7841 55.4122 23.5265 56.4047 23.0114C57.4047 22.4886 58.1547 21.6818 58.6547 20.5909C59.1622 19.4924 59.416 18.0758 59.416 16.3409C59.416 14.6212 59.1622 13.2159 58.6547 12.125C58.1547 11.0341 57.4084 10.2311 56.416 9.71591C55.4236 9.20076 54.2001 8.94318 52.7456 8.94318H49.6092V23.7841ZM75.0988 28.3409C73.3336 28.3409 71.8071 27.9659 70.5192 27.2159C69.2389 26.4583 68.2503 25.4053 67.5533 24.0568C66.8564 22.7008 66.5079 21.1288 66.5079 19.3409C66.5079 17.5379 66.8564 15.9621 67.5533 14.6136C68.2503 13.2576 69.2389 12.2045 70.5192 11.4545C71.8071 10.697 73.3336 10.3182 75.0988 10.3182C76.8639 10.3182 78.3867 10.697 79.667 11.4545C80.9548 12.2045 81.9473 13.2576 82.6442 14.6136C83.3412 15.9621 83.6897 17.5379 83.6897 19.3409C83.6897 21.1288 83.3412 22.7008 82.6442 24.0568C81.9473 25.4053 80.9548 26.4583 79.667 27.2159C78.3867 27.9659 76.8639 28.3409 75.0988 28.3409ZM75.1215 24.5909C75.9245 24.5909 76.595 24.3636 77.1329 23.9091C77.6707 23.447 78.0761 22.8182 78.3488 22.0227C78.6291 21.2273 78.7692 20.322 78.7692 19.3068C78.7692 18.2917 78.6291 17.3864 78.3488 16.5909C78.0761 15.7955 77.6707 15.1667 77.1329 14.7045C76.595 14.2424 75.9245 14.0114 75.1215 14.0114C74.3109 14.0114 73.6291 14.2424 73.0761 14.7045C72.5306 15.1667 72.1177 15.7955 71.8374 16.5909C71.5647 17.3864 71.4283 18.2917 71.4283 19.3068C71.4283 20.322 71.5647 21.2273 71.8374 22.0227C72.1177 22.8182 72.5306 23.447 73.0761 23.9091C73.6291 24.3636 74.3109 24.5909 75.1215 24.5909ZM94.0571 28.3409C92.2692 28.3409 90.7314 27.9621 89.4435 27.2045C88.1632 26.4394 87.1783 25.3788 86.4889 24.0227C85.8071 22.6667 85.4662 21.1061 85.4662 19.3409C85.4662 17.553 85.8109 15.9848 86.5003 14.6364C87.1973 13.2803 88.1859 12.2235 89.4662 11.4659C90.7465 10.7008 92.2692 10.3182 94.0344 10.3182C95.5571 10.3182 96.8904 10.5947 98.0344 11.1477C99.1783 11.7008 100.084 12.4773 100.75 13.4773C101.417 14.4773 101.784 15.6515 101.853 17H97.2844C97.1556 16.1288 96.8147 15.428 96.2617 14.8977C95.7162 14.3598 95.0003 14.0909 94.1139 14.0909C93.3639 14.0909 92.7086 14.2955 92.148 14.7045C91.595 15.1061 91.1632 15.6932 90.8526 16.4659C90.542 17.2386 90.3867 18.1742 90.3867 19.2727C90.3867 20.3864 90.5382 21.3333 90.8412 22.1136C91.1518 22.8939 91.5874 23.4886 92.148 23.8977C92.7086 24.3068 93.3639 24.5114 94.1139 24.5114C94.667 24.5114 95.1632 24.3977 95.6026 24.1705C96.0495 23.9432 96.417 23.6136 96.7048 23.1818C97.0003 22.7424 97.1935 22.2159 97.2844 21.6023H101.853C101.777 22.9356 101.413 24.1098 100.762 25.125C100.118 26.1326 99.2276 26.9205 98.0912 27.4886C96.9548 28.0568 95.6101 28.3409 94.0571 28.3409ZM115.479 20.5682V10.5455H120.319V28H115.672V24.8295H115.49C115.096 25.8523 114.441 26.6742 113.524 27.2955C112.615 27.9167 111.505 28.2273 110.194 28.2273C109.028 28.2273 108.001 27.9621 107.115 27.4318C106.229 26.9015 105.535 26.1477 105.035 25.1705C104.543 24.1932 104.293 23.0227 104.285 21.6591V10.5455H109.126V20.7955C109.134 21.8258 109.41 22.6402 109.956 23.2386C110.501 23.8371 111.232 24.1364 112.149 24.1364C112.732 24.1364 113.278 24.0038 113.785 23.7386C114.293 23.4659 114.702 23.0644 115.013 22.5341C115.331 22.0038 115.486 21.3485 115.479 20.5682ZM123.525 28V10.5455H128.139V13.625H128.343C128.707 12.6023 129.313 11.7955 130.161 11.2045C131.01 10.6136 132.025 10.3182 133.207 10.3182C134.404 10.3182 135.423 10.6174 136.264 11.2159C137.104 11.8068 137.665 12.6098 137.945 13.625H138.127C138.483 12.625 139.127 11.8258 140.059 11.2273C140.998 10.6212 142.108 10.3182 143.389 10.3182C145.017 10.3182 146.339 10.8371 147.354 11.875C148.377 12.9053 148.889 14.3674 148.889 16.2614V28H144.059V17.2159C144.059 16.2462 143.801 15.5189 143.286 15.0341C142.771 14.5492 142.127 14.3068 141.354 14.3068C140.476 14.3068 139.79 14.5871 139.298 15.1477C138.805 15.7008 138.559 16.4318 138.559 17.3409V28H133.866V17.1136C133.866 16.2576 133.62 15.5758 133.127 15.0682C132.642 14.5606 132.002 14.3068 131.207 14.3068C130.669 14.3068 130.184 14.4432 129.752 14.7159C129.328 14.9811 128.991 15.3561 128.741 15.8409C128.491 16.3182 128.366 16.8788 128.366 17.5227V28H123.525ZM160 28.3409C158.205 28.3409 156.659 27.9773 155.364 27.25C154.076 26.5152 153.084 25.4773 152.387 24.1364C151.69 22.7879 151.341 21.1932 151.341 19.3523C151.341 17.5568 151.69 15.9811 152.387 14.625C153.084 13.2689 154.065 12.2121 155.33 11.4545C156.603 10.697 158.095 10.3182 159.807 10.3182C160.959 10.3182 162.031 10.5038 163.023 10.875C164.023 11.2386 164.894 11.7879 165.637 12.5227C166.387 13.2576 166.97 14.1818 167.387 15.2955C167.803 16.4015 168.012 17.697 168.012 19.1818V20.5114H153.273V17.5114H163.455C163.455 16.8144 163.303 16.197 163 15.6591C162.697 15.1212 162.277 14.7008 161.739 14.3977C161.209 14.0871 160.591 13.9318 159.887 13.9318C159.152 13.9318 158.5 14.1023 157.932 14.4432C157.371 14.7765 156.932 15.2273 156.614 15.7955C156.296 16.3561 156.133 16.9811 156.125 17.6705V20.5227C156.125 21.3864 156.284 22.1326 156.603 22.7614C156.928 23.3902 157.387 23.875 157.978 24.2159C158.568 24.5568 159.269 24.7273 160.08 24.7273C160.618 24.7273 161.11 24.6515 161.557 24.5C162.004 24.3485 162.387 24.1212 162.705 23.8182C163.023 23.5152 163.265 23.1439 163.432 22.7045L167.909 23C167.682 24.0758 167.216 25.0152 166.512 25.8182C165.815 26.6136 164.913 27.2348 163.807 27.6818C162.709 28.1212 161.44 28.3409 160 28.3409ZM175.345 17.9091V28H170.504V10.5455H175.118V13.625H175.322C175.709 12.6098 176.356 11.8068 177.265 11.2159C178.175 10.6174 179.277 10.3182 180.572 10.3182C181.784 10.3182 182.841 10.5833 183.743 11.1136C184.644 11.6439 185.345 12.4015 185.845 13.3864C186.345 14.3636 186.595 15.5303 186.595 16.8864V28H181.754V17.75C181.762 16.6818 181.489 15.8485 180.936 15.25C180.383 14.6439 179.621 14.3409 178.652 14.3409C178 14.3409 177.425 14.4811 176.925 14.7614C176.432 15.0417 176.046 15.4508 175.765 15.9886C175.493 16.5189 175.353 17.1591 175.345 17.9091ZM204.266 15.5227L199.835 15.7955C199.759 15.4167 199.596 15.0758 199.346 14.7727C199.096 14.4621 198.766 14.2159 198.357 14.0341C197.956 13.8447 197.475 13.75 196.914 13.75C196.164 13.75 195.532 13.9091 195.016 14.2273C194.501 14.5379 194.244 14.9545 194.244 15.4773C194.244 15.8939 194.41 16.2462 194.744 16.5341C195.077 16.822 195.649 17.053 196.46 17.2273L199.619 17.8636C201.316 18.2121 202.581 18.7727 203.414 19.5455C204.247 20.3182 204.664 21.3333 204.664 22.5909C204.664 23.7348 204.327 24.7386 203.653 25.6023C202.986 26.4659 202.069 27.1402 200.903 27.625C199.744 28.1023 198.407 28.3409 196.891 28.3409C194.581 28.3409 192.74 27.8598 191.369 26.8977C190.005 25.928 189.206 24.6098 188.971 22.9432L193.732 22.6932C193.876 23.3977 194.225 23.9356 194.778 24.3068C195.331 24.6705 196.039 24.8523 196.903 24.8523C197.751 24.8523 198.433 24.6894 198.948 24.3636C199.471 24.0303 199.736 23.6023 199.744 23.0795C199.736 22.6402 199.55 22.2803 199.187 22C198.823 21.7121 198.263 21.4924 197.505 21.3409L194.482 20.7386C192.778 20.3977 191.509 19.8068 190.675 18.9659C189.85 18.125 189.437 17.053 189.437 15.75C189.437 14.6288 189.74 13.6629 190.346 12.8523C190.96 12.0417 191.819 11.4167 192.925 10.9773C194.039 10.5379 195.342 10.3182 196.835 10.3182C199.039 10.3182 200.774 10.7841 202.039 11.7159C203.312 12.6477 204.054 13.9167 204.266 15.5227ZM214.932 28.3409C213.167 28.3409 211.64 27.9659 210.353 27.2159C209.072 26.4583 208.084 25.4053 207.387 24.0568C206.69 22.7008 206.341 21.1288 206.341 19.3409C206.341 17.5379 206.69 15.9621 207.387 14.6136C208.084 13.2576 209.072 12.2045 210.353 11.4545C211.64 10.697 213.167 10.3182 214.932 10.3182C216.697 10.3182 218.22 10.697 219.5 11.4545C220.788 12.2045 221.781 13.2576 222.478 14.6136C223.175 15.9621 223.523 17.5379 223.523 19.3409C223.523 21.1288 223.175 22.7008 222.478 24.0568C221.781 25.4053 220.788 26.4583 219.5 27.2159C218.22 27.9659 216.697 28.3409 214.932 28.3409ZM214.955 24.5909C215.758 24.5909 216.428 24.3636 216.966 23.9091C217.504 23.447 217.909 22.8182 218.182 22.0227C218.462 21.2273 218.603 20.322 218.603 19.3068C218.603 18.2917 218.462 17.3864 218.182 16.5909C217.909 15.7955 217.504 15.1667 216.966 14.7045C216.428 14.2424 215.758 14.0114 214.955 14.0114C214.144 14.0114 213.462 14.2424 212.909 14.7045C212.364 15.1667 211.951 15.7955 211.671 16.5909C211.398 17.3864 211.262 18.2917 211.262 19.3068C211.262 20.322 211.398 21.2273 211.671 22.0227C211.951 22.8182 212.364 23.447 212.909 23.9091C213.462 24.3636 214.144 24.5909 214.955 24.5909Z" 8 + fill="currentColor" 9 + /> 10 + <path 11 + d="M13.2564 3.34376C12.8462 3.71643 12.3924 4.15417 11.8738 4.66593C11.5454 4.92372 11.1405 5.06921 10.7196 5.0773L8.98205 5.11072L9.48827 4.60449C12.5579 1.53483 14.0928 -6.50545e-08 16 0C17.9072 6.50545e-08 19.4421 1.53483 22.5117 4.60448L23.017 5.10979L21.3391 5.07818C20.8661 5.06927 20.4128 4.88687 20.0654 4.56564L19.0593 3.63519C18.9638 3.54571 18.8706 3.45951 18.7796 3.37649L18.7253 3.32626L18.7244 3.32626C18.3807 3.01468 18.0676 2.74898 17.7726 2.52387C16.9204 1.87364 16.4243 1.72668 16 1.72668C15.5757 1.72668 15.0796 1.87364 14.2274 2.52387C13.9288 2.75173 13.6117 3.02115 13.2631 3.33766L13.2627 3.33767L13.2564 3.34376Z" 12 + fill="currentColor" 13 + /> 14 + <path 15 + d="M28.6234 13.2203C28.5405 13.1294 28.4545 13.0364 28.3652 12.9411L27.4342 11.9344C27.1132 11.5873 26.9308 11.1344 26.9217 10.6617L26.8893 8.98205L27.3955 9.48827C30.4652 12.5579 32 14.0928 32 16C32 17.9072 30.4652 19.4421 27.3955 22.5117L26.8893 23.018L26.9217 21.3383C26.9308 20.8656 27.1132 20.4127 27.4342 20.0656L28.3651 19.0591C28.4544 18.9637 28.5405 18.8706 28.6234 18.7797L28.6737 18.7253V18.7244C28.9853 18.3807 29.251 18.0676 29.4761 17.7726C30.1264 16.9204 30.2733 16.4243 30.2733 16C30.2733 15.5757 30.1264 15.0796 29.4761 14.2274C29.251 13.9324 28.9853 13.6193 28.6737 13.2756V13.2747L28.6234 13.2203Z" 16 + fill="currentColor" 17 + /> 18 + <path 19 + d="M18.7604 28.641C18.8631 28.5475 18.9685 28.45 19.077 28.3483L20.0656 27.4341C20.4129 27.113 20.8659 26.9307 21.3388 26.9217L23.0175 26.8897L22.5117 27.3955C19.4421 30.4652 17.9072 32 16 32C14.0928 32 12.5579 30.4652 9.48828 27.3955L8.98205 26.8893L10.6653 26.9216C11.1359 26.9307 11.5871 27.1115 11.9337 27.43L12.6125 28.0538C13.2322 28.6475 13.7531 29.1142 14.2274 29.4761C15.0796 30.1264 15.5757 30.2733 16 30.2733C16.4243 30.2733 16.9204 30.1264 17.7726 29.4761C18.0712 29.2483 18.3883 28.9788 18.7369 28.6623H18.7373L18.7604 28.641Z" 20 + fill="currentColor" 21 + /> 22 + <path 23 + d="M3.34582 18.7459C3.44863 18.859 3.55638 18.9755 3.66926 19.0957L4.56609 20.0654C4.88718 20.4127 5.06957 20.8657 5.07861 21.3385L5.11072 23.018L4.60449 22.5117C1.53483 19.4421 0 17.9072 0 16C0 14.0928 1.53483 12.5579 4.60448 9.48828L5.11025 8.98251L5.07848 10.6611C5.06952 11.1341 4.88706 11.5874 4.56578 11.9347L3.64116 12.9343C3.54928 13.0324 3.46085 13.1279 3.37575 13.2212L3.32626 13.2747L3.32626 13.2756C3.01468 13.6193 2.74898 13.9324 2.52387 14.2274C1.87364 15.0796 1.72668 15.5757 1.72668 16C1.72668 16.4243 1.87364 16.9204 2.52387 17.7726C2.75178 18.0713 3.02128 18.3885 3.33789 18.7372L3.33789 18.7373L3.34582 18.7459Z" 24 + fill="currentColor" 25 + /> 26 + <path 27 + d="M3.33789 13.2621L4.56578 11.9347C4.85051 11.6269 5.02621 11.2359 5.06873 10.8216C5.07379 10.1391 5.08497 9.54383 5.10959 9.01766L5.11095 8.94563L5.11317 8.94342C5.13584 8.48885 5.16906 8.08652 5.21775 7.72437C5.36059 6.66197 5.60744 6.20728 5.90746 5.90726C6.20748 5.60724 6.66217 5.36039 7.72457 5.21755C8.09344 5.16796 8.50398 5.13441 8.96897 5.11173L8.96975 5.11095L8.99512 5.11046C9.54009 5.08446 10.1595 5.07311 10.8737 5.06816C11.3044 5.02528 11.71 4.83847 12.0234 4.53553L13.2626 3.33769H12.5469C8.20571 3.33769 6.03514 3.33769 4.68651 4.68631C3.33789 6.03494 3.33789 8.20551 3.33789 12.5467V13.2621Z" 28 + fill="currentColor" 29 + /> 30 + <path 31 + d="M3.33789 18.7373V19.4534C3.33789 23.7945 3.33789 25.9651 4.68651 27.3137C6.03514 28.6624 8.20571 28.6624 12.5469 28.6624H19.4536C23.7947 28.6624 25.9653 28.6624 27.3139 27.3137C28.6626 25.9651 28.6626 23.7945 28.6626 19.4534V18.7374L27.4342 20.0656C27.1503 20.3727 26.9748 20.7625 26.9317 21.1756C26.9266 21.8729 26.9151 22.4793 26.8894 23.0138L26.889 23.0302L26.8885 23.0308C26.8659 23.496 26.8323 23.9067 26.7827 24.2757C26.6399 25.3381 26.393 25.7928 26.093 26.0928C25.793 26.3928 25.3383 26.6397 24.2759 26.7825C23.9136 26.8312 23.5111 26.8644 23.0563 26.8871L23.0544 26.889L22.9913 26.8902C22.4627 26.9152 21.8642 26.9264 21.1775 26.9315C20.7637 26.9742 20.3731 27.1498 20.0656 27.4341L18.7373 28.6623L13.2747 28.6623L11.9337 27.43C11.6271 27.1482 11.2387 26.9742 10.8273 26.9316C10.1319 26.9264 9.52698 26.915 8.99344 26.8895L8.96975 26.889L8.96903 26.8883C8.50402 26.8656 8.09345 26.8321 7.72457 26.7825C6.66217 26.6397 6.20748 26.3928 5.90746 26.0928C5.60744 25.7928 5.36059 25.3381 5.21775 24.2757C5.16816 23.9068 5.13461 23.4962 5.11192 23.0312L5.11095 23.0302L5.11034 22.9984C5.08518 22.4679 5.07383 21.867 5.06872 21.1769C5.02595 20.7633 4.85039 20.3729 4.56609 20.0654L3.33789 18.7373Z" 32 + fill="currentColor" 33 + /> 34 + <path 35 + d="M26.9317 10.8243C26.9748 11.2375 27.1502 11.6273 27.4342 11.9344L28.6626 13.2626V12.5467C28.6626 8.20551 28.6626 6.03494 27.3139 4.68631C25.9653 3.33769 23.7947 3.33769 19.4536 3.33769H18.7376L20.0654 4.56564C20.3735 4.85052 20.7648 5.02621 21.1794 5.06854C21.8578 5.07358 22.45 5.08465 22.9738 5.10898L23.0785 5.11095L23.0817 5.11423C23.5261 5.13686 23.9203 5.16976 24.2759 5.21756C25.3383 5.36039 25.793 5.60724 26.093 5.90726C26.393 6.20728 26.6399 6.66197 26.7827 7.72437C26.8323 8.09336 26.8659 8.50406 26.8885 8.96924L26.889 8.96975L26.8894 8.98624C26.9151 9.52079 26.9266 10.1271 26.9317 10.8243Z" 36 + fill="currentColor" 37 + /> 38 + <path 39 + d="M14.6901 8.34998L13.5255 9.33844C13.3177 9.51483 13.0573 9.61738 12.785 9.63007L10.8358 9.72089L11.8522 8.70451C13.814 6.74265 14.795 5.76172 16.0139 5.76172C17.2328 5.76172 18.2138 6.74265 20.1756 8.70451L21.1858 9.71469L19.2093 9.62904C18.9322 9.61703 18.6673 9.51196 18.4572 9.33078L17.578 8.57232C17.2694 8.28187 17.0077 8.05229 16.7689 7.87008C16.2796 7.49679 16.0941 7.48829 16.0139 7.48829C15.9337 7.48829 15.7482 7.49679 15.2589 7.87008C15.2511 7.87603 15.2433 7.88204 15.2355 7.88809L15.2343 7.88808L15.2228 7.89787C15.0589 8.02496 14.8839 8.17426 14.6901 8.34998Z" 40 + fill="currentColor" 41 + /> 42 + <path 43 + d="M24.0665 15.1491C23.7338 14.7285 23.2563 14.2319 22.565 13.5366C22.4519 13.356 22.3868 13.1479 22.3781 12.9322L22.2926 10.8215L23.2969 11.8258C25.2588 13.7877 26.2397 14.7686 26.2397 15.9875C26.2397 17.2065 25.2588 18.1874 23.2969 20.1493L22.2872 21.159L22.3845 19.1417C22.398 18.8614 22.5068 18.5941 22.6927 18.3839L23.4313 17.5494C23.6644 17.3016 23.8582 17.0841 24.0198 16.8843L24.1108 16.7816V16.7693C24.1177 16.7604 24.1246 16.7514 24.1314 16.7425C24.5047 16.2533 24.5132 16.0677 24.5132 15.9875C24.5132 15.9074 24.5047 15.7218 24.1314 15.2326C24.1246 15.2237 24.1177 15.2147 24.1108 15.2057V15.1956L24.0665 15.1491Z" 44 + fill="currentColor" 45 + /> 46 + <path 47 + d="M7.92135 15.2037L9.26779 13.7395C9.45848 13.5321 9.57241 13.2657 9.59063 12.9846L9.66513 11.8352C9.67643 11.4713 9.69512 11.1639 9.72601 10.8959L9.7313 10.8143L9.73663 10.8091C9.73783 10.7998 9.73904 10.7906 9.74027 10.7815C9.82227 10.1716 9.94745 10.0344 10.0041 9.97768C10.0608 9.92098 10.198 9.7958 10.808 9.7138C11.0038 9.68747 11.221 9.66864 11.4674 9.65517L13.1211 9.49202C13.3864 9.46585 13.6361 9.35441 13.8327 9.1744L15.2303 7.89488H13.8069C11.0324 7.89488 9.6452 7.89489 8.78328 8.75681C8.04898 9.49111 7.94025 10.6067 7.92415 12.6365C7.92135 12.9893 7.92135 13.3697 7.92135 13.7805L7.92135 15.2002V15.2037Z" 48 + fill="currentColor" 49 + /> 50 + <path 51 + d="M7.92135 16.7714V16.7765L7.92135 18.1946C7.92135 18.6054 7.92135 18.9858 7.92415 19.3386C7.94025 21.3684 8.04897 22.484 8.78328 23.2183C9.51758 23.9526 10.6332 24.0613 12.663 24.0774C13.0158 24.0802 13.3961 24.0802 13.8069 24.0802H15.2247H16.8011H18.2211C18.6318 24.0802 19.0121 24.0802 19.3648 24.0774C21.3948 24.0613 22.5104 23.9526 23.2448 23.2183C24.1067 22.3564 24.1067 20.9691 24.1067 18.1946V16.7671L22.6718 18.323C22.5283 18.4786 22.4283 18.6673 22.3794 18.8703C22.3767 19.8788 22.3629 20.5801 22.2972 21.1199L22.2965 21.1487L22.2932 21.152C22.2914 21.166 22.2896 21.1798 22.2878 21.1936C22.2058 21.8035 22.0806 21.9407 22.0239 21.9974C21.9672 22.0541 21.83 22.1793 21.2201 22.2613C21.2063 22.2632 21.1924 22.265 21.1784 22.2668L21.175 22.2702L21.1268 22.2731C20.8197 22.3095 20.4606 22.3295 20.0233 22.3405L19.0393 22.4005C18.7592 22.4176 18.4933 22.5297 18.2855 22.7184L16.7857 24.0802H15.218L13.7187 22.6785C13.5213 22.494 13.2694 22.3799 13.002 22.3525C12.8862 22.3521 12.7746 22.3515 12.6669 22.3506C11.8587 22.3441 11.2728 22.3238 10.808 22.2613C10.198 22.1793 10.0608 22.0541 10.0041 21.9974C9.94745 21.9407 9.82227 21.8035 9.74027 21.1936C9.73904 21.1845 9.73783 21.1753 9.73663 21.1661L9.7313 21.1607L9.7308 21.1492L9.72882 21.1031C9.67412 20.6437 9.65634 20.0678 9.65061 19.287L9.642 19.087C9.63969 19.0333 9.63389 18.9802 9.62474 18.9278C9.58465 18.6984 9.48016 18.4838 9.32191 18.31L7.92135 16.7714Z" 52 + fill="currentColor" 53 + /> 54 + <path 55 + d="M22.365 11.9073L22.4459 13.004C22.4663 13.2806 22.5794 13.5423 22.7668 13.7467L24.1067 15.208V13.7805C24.1067 11.006 24.1067 9.61873 23.2448 8.75681C22.3828 7.89489 20.9956 7.89488 18.2211 7.89488H16.7855L18.2234 9.20474C18.4249 9.38831 18.6815 9.49994 18.9532 9.52217L20.6207 9.6586C20.78 9.66807 20.927 9.67995 21.0638 9.69485L21.1871 9.70494L21.1922 9.71012C21.2016 9.71133 21.2109 9.71256 21.2201 9.7138C21.83 9.7958 21.9672 9.92098 22.0239 9.97768C22.0806 10.0344 22.2058 10.1716 22.2878 10.7815C22.3296 11.0925 22.3525 11.4577 22.365 11.9073Z" 56 + fill="currentColor" 57 + /> 58 + <path 59 + d="M9.73619 21.1546L9.7308 21.1492L9.7313 21.1607L9.73663 21.1661L9.73619 21.1546Z" 60 + fill="currentColor" 61 + /> 62 + <path 63 + d="M10.8482 22.2666L12.6669 22.3506C11.8819 22.3443 11.3065 22.325 10.8482 22.2666Z" 64 + fill="currentColor" 65 + /> 66 + <path 67 + d="M9.65897 19.1692C9.65554 19.0873 9.64398 19.0065 9.62474 18.9278C9.63389 18.9802 9.63969 19.0333 9.642 19.087L9.65061 19.287C9.65634 20.0678 9.67412 20.6437 9.72882 21.1031L9.7308 21.1492L9.73619 21.1546L9.65897 19.1692Z" 68 + fill="currentColor" 69 + /> 70 + <path 71 + d="M5.78809 15.9875C5.78809 17.026 6.50011 17.8918 7.92415 19.3386C7.92135 18.9858 7.92135 18.6054 7.92135 18.1946L7.92135 16.7765L7.91833 16.773L7.91834 16.771C7.91096 16.7615 7.90367 16.752 7.89644 16.7425C7.52316 16.2533 7.51466 16.0677 7.51466 15.9875C7.51466 15.9074 7.52316 15.7218 7.89644 15.2326C7.90465 15.2218 7.91295 15.211 7.92135 15.2002L7.92135 13.7805C7.92135 13.3697 7.92135 12.9893 7.92415 12.6365C6.50011 14.0833 5.78809 14.949 5.78809 15.9875Z" 72 + fill="currentColor" 73 + /> 74 + <path 75 + d="M15.2589 24.105C15.252 24.0997 15.2451 24.0944 15.2381 24.089H15.2343L15.2247 24.0802H13.8069C13.3961 24.0802 13.0158 24.0802 12.663 24.0774C14.1097 25.5014 14.9754 26.2134 16.0139 26.2134C17.0524 26.2134 17.9181 25.5014 19.3648 24.0774C19.0121 24.0802 18.6318 24.0802 18.2211 24.0802H16.8011C16.7903 24.0886 16.7796 24.0968 16.7689 24.105C16.2796 24.4783 16.0941 24.4868 16.0139 24.4868C15.9337 24.4868 15.7482 24.4783 15.2589 24.105Z" 76 + fill="currentColor" 77 + /> 78 + </svg> 79 + ); 80 + }
+51
apps/web/src/components/svg/hanko.tsx
··· 1 + import type { SVGAttributes } from "react"; 2 + 3 + export function Hanko(props: SVGAttributes<SVGSVGElement>) { 4 + return ( 5 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 48" {...props}> 6 + <path 7 + fill="currentColor" 8 + d="M36.1,12.9v29.1h-4V26H16.4V30h11.7v2c0,5.1,0,10.2,0,15.2c0,0.3,0,0.6,0.1,0.8c4.4-0.7,8.5-2.6,11.8-5.4V22.1 9 + C39.9,19,39.3,15.7,36.1,12.9z" 10 + /> 11 + <path 12 + fill="currentColor" 13 + d="M28.2,14.1h4V5.4c2.4,0.5,11.4,6.4,11.8,15.7v17.2c2.9-4,4.7-9,4.7-14.3c0-12.1-8.8-22.1-20.4-24 14 + c0,0.2,0,0.5-0.1,0.8L28.2,14.1z" 15 + /> 16 + <path 17 + fill="currentColor" 18 + d="M12.4,35.1V6.1h4V22h15.7V18H20.4v-2c0-5.1,0-10.2,0-15.2c0-0.3,0-0.6-0.1-0.8c-4.4,0.7-8.5,2.6-11.8,5.4v20.4 19 + C8.6,28.9,9.2,32.3,12.4,35.1z" 20 + /> 21 + <path 22 + fill="currentColor" 23 + d="M20.4,33.9h-4v8.7C14.1,42.1,5,36.2,4.7,26.9V9.7C1.7,13.7,0,18.6,0,24c0,12.1,8.8,22.1,20.4,24 24 + c0-0.2,0-0.5,0.1-0.8L20.4,33.9z" 25 + /> 26 + <path 27 + fill="currentColor" 28 + d="M62.3,34.6V13.8h3.2v8.4h2.8v-8.4h3.2v20.8h-3.2v-9.7h-2.8v9.7H62.3z" 29 + /> 30 + <path 31 + fill="currentColor" 32 + d="M84.7,28.3l-1.4-10.4h0L82,28.3H84.7z M78.2,34.6l3-20.8h4.2l3.2,20.8h-3L85,30.9h-3.4l-0.4,3.7H78.2z" 33 + /> 34 + <path 35 + fill="currentColor" 36 + d="M95.1,34.6V13.8h2.5l4.4,12.5l-0.2-5.7v-6.8h2.8v20.8h-2.2l-4.5-12.9l0.2,5.5v7.5H95.1z" 37 + /> 38 + <path 39 + fill="currentColor" 40 + d="M111.8,34.6V13.8h3.2v9.6l3.2-9.6h3.3L118,24.1l3.7,10.5h-3.3l-3.3-9.7v9.7H111.8z" 41 + /> 42 + <path 43 + fill="currentColor" 44 + d="M130.9,31.4c0.2,0.5,0.6,0.7,1.1,0.7s1-0.2,1.1-0.7c0.2-0.5,0.3-1.3,0.3-2.5v-9.7c0-1-0.1-1.7-0.3-2.2 45 + c-0.2-0.5-0.5-0.7-1.1-0.7c-0.5,0-0.9,0.2-1.1,0.7c-0.2,0.5-0.3,1.2-0.3,2.1v9.7C130.7,30,130.8,30.9,130.9,31.4z M135.6,33.3 46 + c-0.7,1-1.9,1.5-3.5,1.5c-1.6,0-2.8-0.5-3.5-1.5c-0.7-1-1.1-2.5-1.1-4.5v-9.5c0-3.8,1.6-5.7,4.7-5.7c1.6,0,2.8,0.5,3.5,1.5 47 + c0.7,1,1.1,2.4,1.1,4.3v9.5C136.7,30.8,136.3,32.3,135.6,33.3z" 48 + /> 49 + </svg> 50 + ); 51 + }
+192
apps/web/src/components/svg/trigger.tsx
··· 1 + import type { SVGAttributes } from "react"; 2 + 3 + export function Trigger(props: SVGAttributes<SVGSVGElement>) { 4 + return ( 5 + <svg viewBox="0 0 751 130" xmlns="http://www.w3.org/2000/svg" {...props}> 6 + <path 7 + d="M195.022 16.2676H135.445H137.799V32.5096H157.858V102.4H174.84V32.5096H195.022V16.2676Z" 8 + fill="currentColor" 9 + ></path> 10 + <path 11 + d="M211.265 51.4587V40.8767H195.391V102.4H211.265V72.9917C211.265 60.0719 221.725 56.3805 229.97 57.3648V39.6463C222.218 39.6463 214.465 43.0916 211.265 51.4587Z" 12 + fill="currentColor" 13 + ></path> 14 + <path 15 + d="M246.954 33.494C252.368 33.494 256.799 29.0644 256.799 23.7734C256.799 18.4824 252.368 13.9297 246.954 13.9297C241.662 13.9297 237.232 18.4824 237.232 23.7734C237.232 29.0644 241.662 33.494 246.954 33.494ZM239.078 102.4H254.953V40.8767H239.078V102.4Z" 16 + fill="currentColor" 17 + ></path> 18 + <path 19 + d="M315.253 40.8768V48.5056C310.946 42.7224 304.301 39.1542 295.563 39.1542C278.089 39.1542 264.921 53.4275 264.921 70.6539C264.921 88.0033 278.089 102.154 295.563 102.154C304.301 102.154 310.946 98.5853 315.253 92.8021V99.4466C315.253 109.167 309.1 114.581 299.132 114.581C289.656 114.581 285.596 110.767 283.011 105.968L269.475 113.72C274.889 123.687 285.472 128.731 298.64 128.731C314.884 128.731 330.758 119.626 330.758 99.4466V40.8768H315.253ZM298.025 87.5112C288.057 87.5112 280.796 80.4975 280.796 70.6539C280.796 60.9332 288.057 53.9196 298.025 53.9196C307.992 53.9196 315.253 60.9332 315.253 70.6539C315.253 80.4975 307.992 87.5112 298.025 87.5112Z" 20 + fill="currentColor" 21 + ></path> 22 + <path 23 + d="M390.936 40.8768V48.5056C386.629 42.7224 379.983 39.1542 371.246 39.1542C353.772 39.1542 340.604 53.4275 340.604 70.6539C340.604 88.0033 353.772 102.154 371.246 102.154C379.983 102.154 386.629 98.5853 390.936 92.8021V99.4466C390.936 109.167 384.783 114.581 374.815 114.581C365.339 114.581 361.278 110.767 358.694 105.968L345.157 113.72C350.572 123.687 361.155 128.731 374.322 128.731C390.566 128.731 406.441 119.626 406.441 99.4466V40.8768H390.936ZM373.707 87.5112C363.739 87.5112 356.479 80.4975 356.479 70.6539C356.479 60.9332 363.739 53.9196 373.707 53.9196C383.675 53.9196 390.936 60.9332 390.936 70.6539C390.936 80.4975 383.675 87.5112 373.707 87.5112Z" 24 + fill="currentColor" 25 + ></path> 26 + <path 27 + d="M432.9 78.1597H479.293C479.663 76.0679 479.909 73.9761 479.909 71.6383C479.909 53.5505 466.987 39.1542 448.775 39.1542C429.454 39.1542 416.287 53.3044 416.287 71.6383C416.287 89.9721 429.331 104.122 450.005 104.122C461.819 104.122 471.048 99.3236 476.832 90.9564L464.034 83.5737C461.327 87.142 456.404 89.726 450.251 89.726C441.883 89.726 435.115 86.2807 432.9 78.1597ZM432.654 65.8551C434.5 57.9802 440.284 53.4274 448.775 53.4274C455.42 53.4274 462.065 56.9958 464.034 65.8551H432.654Z" 28 + fill="currentColor" 29 + ></path> 30 + <path 31 + d="M505.199 51.4587V40.8767H489.324V102.4H505.199V72.9917C505.199 60.0719 515.659 56.3805 523.904 57.3648V39.6463C516.151 39.6463 508.398 43.0916 505.199 51.4587Z" 32 + fill="currentColor" 33 + ></path> 34 + <path 35 + d="M529.934 103.999C535.717 103.999 540.394 99.3235 540.394 93.5404C540.394 87.7572 535.717 83.0815 529.934 83.0815C524.15 83.0815 519.473 87.7572 519.473 93.5404C519.473 99.3235 524.15 103.999 529.934 103.999Z" 36 + fill="currentColor" 37 + ></path> 38 + <path 39 + d="M596.632 16.2676V48.1364C592.202 42.4763 585.679 39.1541 576.696 39.1541C560.206 39.1541 546.67 53.3044 546.67 71.6382C546.67 89.972 560.206 104.122 576.696 104.122C585.679 104.122 592.202 100.8 596.632 95.1399V102.4H612.506V16.2676L596.632 16.2676ZM579.65 88.9876C569.805 88.9876 562.544 81.9741 562.544 71.6382C562.544 61.3024 569.805 54.2887 579.65 54.2887C589.371 54.2887 596.632 61.3024 596.632 71.6382C596.632 81.9741 589.371 88.9876 579.65 88.9876Z" 40 + fill="currentColor" 41 + ></path> 42 + <path 43 + d="M637.98 78.1597H684.373C684.742 76.0679 684.989 73.9761 684.989 71.6383C684.989 53.5505 672.067 39.1542 653.855 39.1542C634.534 39.1542 621.367 53.3044 621.367 71.6383C621.367 89.9721 634.411 104.122 655.085 104.122C666.899 104.122 676.128 99.3236 681.912 90.9564L669.114 83.5737C666.407 87.142 661.484 89.726 655.331 89.726C646.963 89.726 640.195 86.2807 637.98 78.1597ZM637.734 65.8551C639.58 57.9802 645.363 53.4274 653.855 53.4274C660.5 53.4274 667.145 56.9958 669.114 65.8551H637.734Z" 44 + fill="currentColor" 45 + ></path> 46 + <path 47 + d="M732.859 40.8768L717.846 83.9428L702.955 40.8768H685.481L708.862 102.4H726.952L750.333 40.8768H732.859Z" 48 + fill="currentColor" 49 + ></path> 50 + <path 51 + fill-rule="evenodd" 52 + clip-rule="evenodd" 53 + d="M35.664 42.3949L59.4114 1.26865L118.264 103.194H0.558823L24.3062 62.0665L41.1046 71.7643L34.157 83.7971H84.6657L59.4114 40.0612L52.4637 52.094L35.664 42.3949Z" 54 + fill="currentColor" 55 + ></path> 56 + <defs> 57 + <linearGradient 58 + id="paint0_linear_228_1439" 59 + x1="329.674" 60 + y1="150.079" 61 + x2="329.674" 62 + y2="13.9297" 63 + gradientUnits="userSpaceOnUse" 64 + > 65 + <stop stop-color="#41FF54"></stop> 66 + <stop offset="1" stop-color="#E7FF52"></stop> 67 + </linearGradient> 68 + <linearGradient 69 + id="paint1_linear_228_1439" 70 + x1="329.674" 71 + y1="150.079" 72 + x2="329.674" 73 + y2="13.9297" 74 + gradientUnits="userSpaceOnUse" 75 + > 76 + <stop stop-color="#41FF54"></stop> 77 + <stop offset="1" stop-color="#E7FF52"></stop> 78 + </linearGradient> 79 + <linearGradient 80 + id="paint2_linear_228_1439" 81 + x1="329.674" 82 + y1="150.079" 83 + x2="329.674" 84 + y2="13.9297" 85 + gradientUnits="userSpaceOnUse" 86 + > 87 + <stop stop-color="#41FF54"></stop> 88 + <stop offset="1" stop-color="#E7FF52"></stop> 89 + </linearGradient> 90 + <linearGradient 91 + id="paint3_linear_228_1439" 92 + x1="329.674" 93 + y1="150.079" 94 + x2="329.674" 95 + y2="13.9297" 96 + gradientUnits="userSpaceOnUse" 97 + > 98 + <stop stop-color="#41FF54"></stop> 99 + <stop offset="1" stop-color="#E7FF52"></stop> 100 + </linearGradient> 101 + <linearGradient 102 + id="paint4_linear_228_1439" 103 + x1="329.674" 104 + y1="150.079" 105 + x2="329.674" 106 + y2="13.9297" 107 + gradientUnits="userSpaceOnUse" 108 + > 109 + <stop stop-color="#41FF54"></stop> 110 + <stop offset="1" stop-color="#E7FF52"></stop> 111 + </linearGradient> 112 + <linearGradient 113 + id="paint5_linear_228_1439" 114 + x1="329.674" 115 + y1="150.079" 116 + x2="329.674" 117 + y2="13.9297" 118 + gradientUnits="userSpaceOnUse" 119 + > 120 + <stop stop-color="#41FF54"></stop> 121 + <stop offset="1" stop-color="#E7FF52"></stop> 122 + </linearGradient> 123 + <linearGradient 124 + id="paint6_linear_228_1439" 125 + x1="329.674" 126 + y1="150.079" 127 + x2="329.674" 128 + y2="13.9297" 129 + gradientUnits="userSpaceOnUse" 130 + > 131 + <stop stop-color="#41FF54"></stop> 132 + <stop offset="1" stop-color="#E7FF52"></stop> 133 + </linearGradient> 134 + <linearGradient 135 + id="paint7_linear_228_1439" 136 + x1="634.903" 137 + y1="139.717" 138 + x2="651.436" 139 + y2="25.9719" 140 + gradientUnits="userSpaceOnUse" 141 + > 142 + <stop stop-color="#2563EB"></stop> 143 + <stop offset="1" stop-color="#A855F7"></stop> 144 + </linearGradient> 145 + <linearGradient 146 + id="paint8_linear_228_1439" 147 + x1="634.903" 148 + y1="139.717" 149 + x2="651.436" 150 + y2="25.9719" 151 + gradientUnits="userSpaceOnUse" 152 + > 153 + <stop stop-color="#2563EB"></stop> 154 + <stop offset="1" stop-color="#A855F7"></stop> 155 + </linearGradient> 156 + <linearGradient 157 + id="paint9_linear_228_1439" 158 + x1="634.903" 159 + y1="139.717" 160 + x2="651.436" 161 + y2="25.9719" 162 + gradientUnits="userSpaceOnUse" 163 + > 164 + <stop stop-color="#2563EB"></stop> 165 + <stop offset="1" stop-color="#A855F7"></stop> 166 + </linearGradient> 167 + <linearGradient 168 + id="paint10_linear_228_1439" 169 + x1="634.903" 170 + y1="139.717" 171 + x2="651.436" 172 + y2="25.9719" 173 + gradientUnits="userSpaceOnUse" 174 + > 175 + <stop stop-color="#2563EB"></stop> 176 + <stop offset="1" stop-color="#A855F7"></stop> 177 + </linearGradient> 178 + <linearGradient 179 + id="paint11_linear_228_1439" 180 + x1="95.8593" 181 + y1="103.194" 182 + x2="94.7607" 183 + y2="31.2381" 184 + gradientUnits="userSpaceOnUse" 185 + > 186 + <stop stop-color="#41FF54"></stop> 187 + <stop offset="1" stop-color="#E7FF52"></stop> 188 + </linearGradient> 189 + </defs> 190 + </svg> 191 + ); 192 + }
+9
apps/web/src/components/theme-provider.tsx
··· 1 + "use client"; 2 + 3 + import * as React from "react"; 4 + import { ThemeProvider as NextThemesProvider } from "next-themes"; 5 + import type { ThemeProviderProps } from "next-themes/dist/types"; 6 + 7 + export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 + return <NextThemesProvider {...props}>{children}</NextThemesProvider>; 9 + }
+44
apps/web/src/components/theme-toggle.tsx
··· 1 + "use client"; 2 + 3 + import * as React from "react"; 4 + import { useTheme } from "next-themes"; 5 + 6 + import { 7 + Button, 8 + DropdownMenu, 9 + DropdownMenuContent, 10 + DropdownMenuItem, 11 + DropdownMenuTrigger, 12 + } from "@openstatus/ui"; 13 + 14 + import { Icons } from "@/components/icons"; 15 + 16 + export function ThemeToggle() { 17 + const { setTheme } = useTheme(); 18 + 19 + return ( 20 + <DropdownMenu> 21 + <DropdownMenuTrigger asChild> 22 + <Button variant="outline" size="icon"> 23 + <Icons.sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> 24 + <Icons.moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> 25 + <span className="sr-only">Toggle theme</span> 26 + </Button> 27 + </DropdownMenuTrigger> 28 + <DropdownMenuContent align="end"> 29 + <DropdownMenuItem onClick={() => setTheme("light")}> 30 + <Icons.sun className="mr-2 h-4 w-4" /> 31 + <span>Light</span> 32 + </DropdownMenuItem> 33 + <DropdownMenuItem onClick={() => setTheme("dark")}> 34 + <Icons.moon className="mr-2 h-4 w-4" /> 35 + <span>Dark</span> 36 + </DropdownMenuItem> 37 + <DropdownMenuItem onClick={() => setTheme("system")}> 38 + <Icons.laptop className="mr-2 h-4 w-4" /> 39 + <span>System</span> 40 + </DropdownMenuItem> 41 + </DropdownMenuContent> 42 + </DropdownMenu> 43 + ); 44 + }
+4 -4
apps/web/src/components/tracker.tsx
··· 26 26 const tracker = cva("h-10 rounded-full flex-1", { 27 27 variants: { 28 28 variant: { 29 - up: "bg-green-500 data-[state=open]:bg-green-600", 30 - down: "bg-red-500 data-[state=open]:bg-red-600", 31 - degraded: "bg-yellow-500 data-[state=open]:bg-yellow-600", 29 + up: "bg-green-500/90 data-[state=open]:bg-green-500", 30 + down: "bg-red-500/90 data-[state=open]:bg-red-500", 31 + degraded: "bg-yellow-500/90 data-[state=open]:bg-yellow-500", 32 32 empty: "bg-muted-foreground/20 data-[state=open]:bg-muted-foreground/30", 33 - blacklist: "bg-green-400 data-[state=open]:bg-green-600", 33 + blacklist: "bg-green-500/80 data-[state=open]:bg-green-500", 34 34 }, 35 35 }, 36 36 defaultVariants: {
+1 -1
packages/react/src/widget.tsx
··· 36 36 37 37 return ( 38 38 <a 39 - className="inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black" 39 + className="inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white" 40 40 href={href || `https://${slug}.openstatus.dev`} 41 41 target="_blank" 42 42 rel="noreferrer"
+15
pnpm-lock.yaml
··· 236 236 next-plausible: 237 237 specifier: 3.11.1 238 238 version: 3.11.1(next@13.5.3)(react-dom@18.2.0)(react@18.2.0) 239 + next-themes: 240 + specifier: ^0.2.1 241 + version: 0.2.1(next@13.5.3)(react-dom@18.2.0)(react@18.2.0) 239 242 react: 240 243 specifier: 18.2.0 241 244 version: 18.2.0 ··· 10093 10096 next: ^11.1.0 || ^12.0.0 || ^13.0.0 10094 10097 react: ^16.8.0 || ^17.0.0 || ^18.0.0 10095 10098 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 10099 + dependencies: 10100 + next: 13.5.3(@babel/core@7.23.2)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) 10101 + react: 18.2.0 10102 + react-dom: 18.2.0(react@18.2.0) 10103 + dev: false 10104 + 10105 + /next-themes@0.2.1(next@13.5.3)(react-dom@18.2.0)(react@18.2.0): 10106 + resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} 10107 + peerDependencies: 10108 + next: '*' 10109 + react: '*' 10110 + react-dom: '*' 10096 10111 dependencies: 10097 10112 next: 13.5.3(@babel/core@7.23.2)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) 10098 10113 react: 18.2.0