add tailwind

This commit is contained in:
Simon Larsen 2023-01-04 20:45:49 +00:00
parent 3171d0589e
commit 73f082a364
7 changed files with 32351 additions and 31717 deletions

View File

@ -1,58 +1,61 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head>
<meta charset="utf-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8" />
<meta name="theme-color" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta name="theme-color" content="#000000" />
name="description" <meta name="description" content="Web site created using create-react-app" />
content="Web site created using create-react-app" <meta http-equiv="X-UA-Compatible" content="IE=edge" />
/> <meta charSet='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charSet='utf-8' /> <meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="slack-app-id" content="ACVBMTPJQ">
<meta name="theme-color" content="#000000"> <meta name="description" content="This is the login page for OneUptime Dashboard">
<meta name="slack-app-id" content="ACVBMTPJQ">
<meta name="description" content="This is the login page for OneUptime Dashboard">
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': <script>(function (w, d, s, l, i) {
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], w[l] = w[l] || []; w[l].push({
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'gtm.start':
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); new Date().getTime(), event: 'gtm.js'
})(window,document,'script','dataLayer','GTM-PKQD5WH');</script> }); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
<!-- End Google Tag Manager --> <!-- End Google Tag Manager -->
<link rel="manifest" href="/accounts/assets/img/favicons/ma"> <link rel="manifest" href="/accounts/assets/img/favicons/ma">
<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png"> <script src="https://cdn.tailwindcss.com"></script>
<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png"> <link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png"> <link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png">
<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5"> <link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#121212"> <link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png"> <meta name="msapplication-TileColor" content="#121212">
<meta name="theme-color" content="#121212"> <meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png">
<script src="/accounts/env.js"></script> <meta name="theme-color" content="#121212">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<script src="/accounts/env.js"></script>
<title>OneUptime Accounts</title> <title>OneUptime Accounts</title>
<!-- Preload light, regular, medium and bold, which are fonts that are used on home --> <!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
<link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@ -61,16 +64,17 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>OneUptime | Account</title> <title>OneUptime | Account</title>
</head> </head>
<body>
<!-- Google Tag Manager (noscript) --> <body class="h-full bg-gray-50">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH" <!-- Google Tag Manager (noscript) -->
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --> <!-- End Google Tag Manager (noscript) -->
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -80,6 +84,18 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="/accounts/dist/bundle.js"></script> <script src="/accounts/dist/bundle.js"></script>
</body> <script>
</html> tailwind.config = {
theme: {
extend: {
colors: {
primary: '#000000'
}
}
}
}
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -1,23 +1,213 @@
import React, { FunctionComponent, ReactElement } from 'react'; import React, { FunctionComponent, ReactElement } from 'react';
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
export interface ComponentProps { // export interface ComponentProps {
leftComponents?: undefined | Array<ReactElement> | ReactElement; // leftComponents?: undefined | Array<ReactElement> | ReactElement;
rightComponents?: undefined | Array<ReactElement> | ReactElement; // rightComponents?: undefined | Array<ReactElement> | ReactElement;
} // }
const Header: FunctionComponent<ComponentProps> = ( // const Header: FunctionComponent<ComponentProps> = (
props: ComponentProps // props: ComponentProps
): ReactElement => { // ): ReactElement => {
// return (
// <React.Fragment>
// <header id="page-topbar">
// <div className="navbar-header">
// <div className="d-flex">{props.leftComponents}</div>
// <div className="d-flex">{props.rightComponents}</div>
// </div>
// </header>
// </React.Fragment>
// );
// };
// export default Header;
const user = {
name: 'Tom Cook',
email: 'tom@example.com',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
const navigation = [
{ name: 'Dashboard', href: '#', current: true },
{ name: 'Team', href: '#', current: false },
{ name: 'Projects', href: '#', current: false },
{ name: 'Calendar', href: '#', current: false },
]
const userNavigation = [
{ name: 'Your Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return ( return (
<React.Fragment> <Disclosure as="header" className="bg-white shadow">
<header id="page-topbar"> {({ open }) => (
<div className="navbar-header"> <>
<div className="d-flex">{props.leftComponents}</div> <div className="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
<div className="d-flex">{props.rightComponents}</div> <div className="relative flex h-16 justify-between">
<div className="relative z-10 flex px-2 lg:px-0">
<div className="flex flex-shrink-0 items-center">
<img
className="block h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt="Your Company"
/>
</div>
</div> </div>
</header> <div className="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0">
</React.Fragment> <div className="w-full sm:max-w-xs">
); <label htmlFor="search" className="sr-only">
}; Search
</label>
export default Header; <div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
<input
id="search"
name="search"
className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
placeholder="Search"
type="search"
/>
</div>
</div>
</div>
<div className="relative z-10 flex items-center lg:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center">
<button
type="button"
className="flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="relative ml-4 flex-shrink-0">
<div>
<Menu.Button className="flex rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block py-2 px-4 text-sm text-gray-700'
)}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
<nav className="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-900 hover:bg-gray-50 hover:text-gray-900',
'rounded-md py-2 px-3 inline-flex items-center text-sm font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</a>
))}
</nav>
</div>
<Disclosure.Panel as="nav" className="lg:hidden" aria-label="Global">
<div className="space-y-1 px-2 pt-2 pb-3">
{navigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className={classNames(
item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-900 hover:bg-gray-50 hover:text-gray-900',
'block rounded-md py-2 px-3 text-base font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Disclosure.Button>
))}
</div>
<div className="border-t border-gray-200 pt-4 pb-3">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={user.imageUrl} alt="" />
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">{user.name}</div>
<div className="text-sm font-medium text-gray-500">{user.email}</div>
</div>
<button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 space-y-1 px-2">
{userNavigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
>
{item.name}
</Disclosure.Button>
))}
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
)
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

62739
Dashboard/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,6 +3,8 @@
"version": "0.1.0", "version": "0.1.0",
"private": false, "private": false,
"dependencies": { "dependencies": {
"@headlessui/react": "^1.7.7",
"@heroicons/react": "^2.0.13",
"@stripe/react-stripe-js": "^1.15.0", "@stripe/react-stripe-js": "^1.15.0",
"@stripe/stripe-js": "^1.44.1", "@stripe/stripe-js": "^1.44.1",
"Common": "file:../Common", "Common": "file:../Common",

View File

@ -34,6 +34,8 @@
<meta name="msapplication-TileColor" content="#121212"> <meta name="msapplication-TileColor" content="#121212">
<meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png"> <meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png">
<meta name="theme-color" content="#121212"> <meta name="theme-color" content="#121212">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<script src="/dashboard/env.js"></script> <script src="/dashboard/env.js"></script>
@ -79,5 +81,10 @@
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="/dashboard/dist/bundle.js"></script> <script src="/dashboard/dist/bundle.js"></script>
<script>
tailwind.config = {
}
</script>
</body> </body>
</html> </html>