kernel-mcp-server/src/app/layout.tsx at eea78e7d473ea7c35831d55680f951fbccbcf32b · kernel/kernel-mcp-server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { ClerkProvider } from '@clerk/nextjs'
import type { Metadata } from 'next'
import { Inter, IBM_Plex_Mono } from 'next/font/google'
import { ThemeProvider } from 'next-themes'
import './globals.css'

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  display: 'optional',
})

const ibmPlexMono = IBM_Plex_Mono({
  weight: ['400', '500'],
  variable: '--font-ibm-plex-mono',
  subsets: ['latin'],
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Kernel',
  description: 'Authorize access to Kernel platform tools and browser automation capabilities.',
  keywords: [
    'Kernel',
    'MCP',
    'browser automation',
    'AI assistants',
    'OAuth',
  ],
  icons: {
    icon: [
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon.ico' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
    shortcut: '/favicon.ico',
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}): React.ReactElement {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: '#81b300',
          colorText: '#1c2024',
          colorTextSecondary: '#60646c',
          colorBackground: '#f2f0e7',
          colorInputBackground: '#f2f0e7',
          colorInputText: '#1c2024',
          fontFamily: 'var(--font-inter), Inter, sans-serif',
          borderRadius: '0px',
        },
        elements: {
          card: {
            backgroundColor: '#f2f0e7',
            border: '0.5px solid #1c2024',
            borderRadius: '0px',
            boxShadow: 'none',
          },
          formButtonPrimary: {
            backgroundColor: '#1c2024',
            color: '#f2f0e7',
            fontWeight: '250',
            borderRadius: '0px',
            letterSpacing: '0.3px',
            textTransform: 'lowercase' as const,
          },
          formFieldInput: {
            border: '0.5px solid #1c2024',
            borderRadius: '0px',
            backgroundColor: '#f2f0e7',
          },
          footerActionLink: {
            color: '#1c2024',
          },
          headerTitle: {
            textTransform: 'lowercase' as const,
            fontWeight: '250',
            letterSpacing: '0.5px',
          },
          headerSubtitle: {
            textTransform: 'lowercase' as const,
            fontWeight: '250',
            letterSpacing: '0.3px',
          },
          socialButtonsBlockButton: {
            border: '0.5px solid #1c2024',
            borderRadius: '0px',
            textTransform: 'lowercase' as const,
          },
          dividerLine: {
            backgroundColor: '#1c2024',
          },
          identityPreview: {
            border: '0.5px solid #1c2024',
            borderRadius: '0px',
          },
          organizationPreview: {
            border: '0.5px solid #1c2024',
            borderRadius: '0px',
          },
        },
      }}
    >
      <html lang="en" suppressHydrationWarning>
        <body className={`${inter.variable} ${ibmPlexMono.variable} font-sans overscroll-y-none`}>
          <ThemeProvider
            attribute="class"
            defaultTheme="light"
            disableTransitionOnChange
            enableSystem
          >
            <main>{children}</main>
          </ThemeProvider>
        </body>
      </html>
    </ClerkProvider>
  )
}