Feat/tos

app/components/header/menu/index.tsx

@@ -10,6 +10,7 @@ import {
 	ExternalLink,
 	Settings,
 	Compass,
+	ScrollText,
 } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -153,6 +154,23 @@ export default function Menu() {
 							</DropdownMenuItem>
 						</Link>
 					</DropdownMenuGroup>
+					<DropdownMenuGroup>
+						<Link
+							to={
+								'/terms'
+							}
+							target="_blank"
+						>
+							<DropdownMenuItem
+								onSelect={(e) => e.preventDefault()}
+								className="cursor-pointer"
+							>
+								<ScrollText className="mr-2 inline h-5 w-5" />
+								<span> {t('tos')}</span>
+								<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
 					<DropdownMenuSeparator />
 
 					<DropdownMenuGroup>

app/components/markdown-content.tsx

@@ -15,42 +15,113 @@ export function MarkdownContent({
         options={{
           overrides: {
             h1: {
-              component: ({ children }) => (
-                <h1 className="text-3xl font-bold mb-4">{children}</h1>
+              component: ({ children, className, ...props }) => (
+                <h1
+                  className={`mb-4 text-3xl font-bold ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </h1>
               ),
             },
             h2: {
-              component: ({ children }) => (
-                <h2 className="text-2xl font-semibold mb-3">{children}</h2>
+              component: ({ children, className, ...props }) => (
+                <h2
+                  className={`mb-3 mt-8 text-2xl font-semibold ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </h2>
               ),
             },
-            p: {
-              component: ({ children }) => (
-                <p className="mb-3 leading-7">{children}</p>
+            h3: {
+              component: ({ children, className, ...props }) => (
+                <h3
+                  className={`mb-2 mt-6 text-xl font-semibold ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </h3>
               ),
             },
-            a: {
-              component: ({ children, href }) => (
-                <a
-                  href={href}
-                  className="text-blue-600 underline hover:text-blue-800"
-                  target="_blank"
-                  rel="noreferrer"
+            p: {
+              component: ({ children, className, ...props }) => (
+                <p
+                  className={`mb-3 leading-7 ${className ?? ''}`}
+                  {...props}
                 >
                   {children}
-                </a>
+                </p>
               ),
             },
             ul: {
               component: ({ children, className, ...props }) => (
                 <ul
-                  className={`${className ?? ''} list-inside list-disc space-y-1`}
+                  className={`mb-4 list-disc pl-6 ${className ?? ''}`}
                   {...props}
                 >
                   {children}
                 </ul>
               ),
             },
+            ol: {
+              component: ({ children, className, ...props }) => (
+                <ol
+                  className={`mb-4 list-decimal pl-6 ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </ol>
+              ),
+            },
+            li: {
+              component: ({ children, className, ...props }) => (
+                <li
+                  className={`mb-1 leading-7 ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </li>
+              ),
+            },
+            strong: {
+              component: ({ children, className, ...props }) => (
+                <strong
+                  className={`font-semibold ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </strong>
+              ),
+            },
+            hr: {
+              component: ({ className, ...props }) => (
+                <hr className={`my-6 border-border ${className ?? ''}`} {...props} />
+              ),
+            },
+            blockquote: {
+              component: ({ children, className, ...props }) => (
+                <blockquote
+                  className={`my-4 border-l-4 pl-4 italic text-muted-foreground ${className ?? ''}`}
+                  {...props}
+                >
+                  {children}
+                </blockquote>
+              ),
+            },
+            a: {
+              component: ({ children, href, className, ...props }) => (
+                <a
+                  href={href}
+                  className={`underline underline-offset-2 ${className ?? ''}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  {...props}
+                >
+                  {children}
+                </a>
+              ),
+            },
           },
         }}
       >

app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx

@@ -10,7 +10,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
 	}[]
 }
 
-export function EditDviceSidebarNav({
+export function EditDeviceSidebarNav({
 	className,
 	items,
 	...props

app/components/ui/dialog.tsx

@@ -39,8 +39,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideClose?: boolean }
+>(({ className, children, hideClose, ...props }, ref) => (
 	<DialogPortal>
 		<DialogOverlay />
 		<DialogPrimitive.Content
@@ -52,10 +52,12 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
+			{!hideClose &&( 
 			<DialogPrimitive.Close className="absolute right-3 top-3 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
+			)}
 		</DialogPrimitive.Content>
 	</DialogPortal>
 ))