Skip to content

Commit

Permalink
Light mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@pontusab
pontusab committed Dec 2, 2023
1 parent c857f64 commit 7be6d86
Show file tree
Hide file tree
Showing 13 changed files with 100 additions and 43 deletions.
2 changes: 0 additions & 2 deletions apps/dashboard/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +0,0 @@


8 changes: 4 additions & 4 deletions apps/dashboard/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
"@novu/headless": "^0.21.0",
"@trigger.dev/nextjs": "^2.2.10",
"@vercel/edge-config": "^0.4.1",
"@vercel/toolbar": "^0.1.5",
"@vercel/toolbar": "^0.1.6",
"@zip.js/zip.js": "^2.7.31",
"change-case": "^5.2.0",
"framer-motion": "^10.16.10",
"framer-motion": "^10.16.12",
"ms": "^2.1.3",
"next": "14.0.3",
"next-international": "^1.1.4",
Expand All @@ -45,8 +45,8 @@
"devDependencies": {
"@midday/tsconfig": "workspace:*",
"@t3-oss/env-nextjs": "^0.7.1",
"@types/node": "^20.10.1",
"@types/react": "^18.2.39",
"@types/node": "^20.10.2",
"@types/react": "^18.2.40",
"@types/react-dom": "^18.2.17",
"typescript": "^5.3.2"
}
Expand Down
14 changes: 7 additions & 7 deletions apps/dashboard/src/app/[locale]/@login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,27 +59,27 @@ export default async function Login() {
<div className="flex min-h-screen justify-center items-center overflow-hidden p-6 md:p-0">
<div className="relative z-20 m-auto flex w-full max-w-[380px] flex-col">
<div className="flex w-full flex-col relative">
<div className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[3px] h-[3px] bg-primary rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "500ms" }}
/>
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "0ms" }}
/>
<div
className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[3px] h-[3px] bg-[#FFD02B] rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "200ms" }}
/>
<div
className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "2s" }}
/>

<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "0ms" }}
/>

Expand Down
5 changes: 3 additions & 2 deletions apps/website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@
"@vercel/analytics": "^1.1.1",
"next": "14.0.2",
"next-international": "^1.1.4",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"sharp": "^0.33.0"
},
"devDependencies": {
"@midday/tsconfig": "workspace:*",
"@types/node": "^20.10.1",
"@types/react": "^18.2.39",
"@types/node": "^20.10.2",
"@types/react": "^18.2.40",
"@types/react-dom": "^18.2.17"
}
}
Binary file added apps/website/public/overview-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/public/search-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/public/tracking-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/public/transactions-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion apps/website/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ThemeProvider } from "@/components/theme-provider";
import "@/styles/globals.css";
import "@midday/ui/globals.css";
import { cn } from "@midday/ui/utils";
Expand All @@ -24,7 +25,9 @@ export default function Layout({ children }: { children: ReactElement }) {
return (
<html lang="en" className="dark whitespace-pre-line">
<body className={cn(fontSans.variable, "bg-background")}>
{children}
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
<Analytics />
</body>
</html>
Expand Down
7 changes: 2 additions & 5 deletions apps/website/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,15 @@ export function Header() {
const t = useScopedI18n("header");

return (
<header
className="pt-4 pb-4 md:pt-10 md:pb-5 flex justify-between px-5 lg:px-10 backdrop-filter backdrop-blur-2xl z-[999]"
style={{ background: "rgba(18, 18, 18,.8)" }}
>
<header className="pt-4 pb-4 md:pt-10 md:pb-5 flex justify-between px-5 lg:px-10">
<Link href="/" title="Midday">
<Icons.Logo />
</Link>

<Link href="https://app.midday.ai">
<button
type="button"
className="relative rounded-lg overflow-hidden p-[1px]"
className="relative rounded-lg overflow-hidden dark:p-[1px] border border-primary dark:border-0"
style={{
background:
"linear-gradient(-45deg, rgba(235,248,255,.18) 0%, #848f9c 50%, rgba(235,248,255,.18) 100%)",
Expand Down
93 changes: 71 additions & 22 deletions apps/website/src/components/startpage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@ import { Icons } from "@midday/ui/icons";
import { Loader2 } from "lucide-react";
import Image from "next/image";
import mobile from "public/mobile.png";
import overviewLight from "public/overview-light.png";
import overview from "public/overview.png";
import searchLight from "public/search-light.png";
import search from "public/search.png";
import trackingLight from "public/tracking-light.png";
import tracking from "public/tracking.png";
import transactionsLight from "public/transactions-light.png";
import transactions from "public/transactions.png";
import { useState } from "react";
import { useFormStatus } from "react-dom";
Expand All @@ -21,15 +25,15 @@ function SubmitButton() {
if (pending) {
return (
<div className="absolute top-1 right-0">
<Loader2 className="absolute w-4 h-4 mr-3 text-black animate-spin top-2.5 right-2" />
<Loader2 className="absolute w-4 h-4 mr-3 text-base animate-spin top-2.5 right-2" />
</div>
);
}

return (
<button
type="submit"
className="absolute right-2 h-7 bg-white top-2 px-4 rounded-md font-medium text-sm z-10 text-black"
className="absolute right-2 h-7 bg-primary top-2 px-4 rounded-md font-medium text-sm z-10 text-primary-foreground"
>
{t("join")}
</button>
Expand All @@ -45,10 +49,12 @@ export function StartPage() {
<Header />
<div className="px-5 lg:px-10">
<div className="text-center mt-16 md:mt-20">
<div className="pb-4 bg-gradient-to-r from-white via-white to-[#848484] inline-block text-transparent bg-clip-text">
<div className="pb-4 bg-gradient-to-r from-primary dark:via-primary dark:to-[#848484] to-[#000] inline-block text-transparent bg-clip-text">
<h1 className="font-medium pb-1 text-5xl">{t("title")}</h1>
</div>
<p className="text-[#B0B0B0]">{t("description")}</p>
<p className="text-[#696969] dark:text-[#B0B0B0]">
{t("description")}
</p>
</div>

<div className="flex justify-center mt-8">
Expand Down Expand Up @@ -85,7 +91,7 @@ export function StartPage() {
autoComplete="email"
aria-label="Email address"
required
className="bg-[#1A1A1A] font-sm text-primary outline-none py-1 px-3 w-[360px] placeholder-[#606060] rounded-lg h-11"
className="bg-background font-sm text-primary outline-none py-1 px-3 w-[360px] placeholder-[#606060] rounded-lg h-11 border border-color-[#DCDAD2]"
/>
<SubmitButton />
</fieldset>
Expand Down Expand Up @@ -134,54 +140,54 @@ export function StartPage() {
</div>
</div>

<div className="w-[1px] h-[1px] bg-white rounded-full absolute top-[35%] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[35%] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[44%] left-[10%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[44%] left-[10%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "500ms" }}
/>
<div
className="w-[1px] h-[1px] bg-white rounded-full absolute top-[41%] left-[15%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[41%] left-[15%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "0ms" }}
/>
<div
className="w-[2px] h-[2px] bg-white rounded-full absolute top-[39%] left-[25%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[2px] h-[2px] bg-primary invisible md:visible rounded-full absolute top-[39%] left-[25%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "700ms" }}
/>
<div
className="w-[5px] h-[5px] bg-[#22FF66] rounded-full absolute top-[34%] left-[30%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-[#22FF66] rounded-full invisible md:visible absolute top-[34%] left-[30%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "1s" }}
/>
<div
className="w-[1px] h-[1px] bg-white rounded-full absolute top-[45%] left-[44%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[45%] left-[44%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "400ms" }}
/>

<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[54%] right-[5%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[54%] right-[5%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "2s" }}
/>
<div
className="w-[3px] h-[3px] bg-[#8306FF] rounded-full absolute top-[60%] right-[10%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[3px] h-[3px] bg-[#8306FF] rounded-full invisible md:visible absolute top-[60%] right-[10%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "4s" }}
/>
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[50%] right-[20%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[50%] right-[20%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "200ms" }}
/>
<div
className="w-[2px] h-[2px] bg-white rounded-full absolute top-[59%] right-[27%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[2px] h-[2px] bg-primary invisible md:visible rounded-full absolute top-[59%] right-[27%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "50ms" }}
/>
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[40%] right-[24%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[40%] right-[24%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "10ms" }}
/>
<div
className="w-[3px] h-[3px] bg-white rounded-full absolute top-[53%] right-[32%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[3px] h-[3px] bg-primary invisible md:visible rounded-full absolute top-[53%] right-[32%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "100ms" }}
/>
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[50%] right-[40%] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[50%] right-[40%] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "190ms" }}
/>

Expand All @@ -204,7 +210,20 @@ export function StartPage() {
src={overview}
alt="Midday | Overview"
width={993}
className="hidden md:block"
className="hidden dark:md:block dark:block"
height={645}
style={{
objectFit: "contain",
}}
/>

<Image
quality={100}
loading="eager"
src={overviewLight}
alt="Midday | Overview"
width={993}
className="hidden md:block dark:hidden"
height={645}
style={{
objectFit: "contain",
Expand All @@ -217,7 +236,16 @@ export function StartPage() {
alt="Midday | Search"
width={638}
height={260}
className="absolute left-[50%] -ml-[319px] z-10 bottom-[70px] hidden md:block"
className="absolute left-[50%] -ml-[319px] z-10 bottom-0 hidden dark:md:block dark:block"
/>

<Image
quality={100}
src={searchLight}
alt="Midday | Search"
width={638}
height={260}
className="absolute left-[50%] -ml-[319px] z-10 bottom-0 hidden md:block dark:hidden"
/>

<Image
Expand All @@ -226,12 +254,21 @@ export function StartPage() {
alt="Midday | Tracking"
width={360}
height={268}
className="absolute right-[20%] z-10 bottom-[240px] hidden md:block"
className="absolute right-[20%] z-10 bottom-[240px] hidden dark:md:block dark:block"
/>

<Image
quality={100}
className="absolute right-0 bottom-0 hidden md:block"
src={trackingLight}
alt="Midday | Tracking"
width={360}
height={268}
className="absolute right-[22%] z-10 bottom-[180px] hidden md:block dark:hidden"
/>

<Image
quality={100}
className="absolute right-0 bottom-0 hidden dark:md:block dark:block"
src={transactions}
alt="Midday | Transactions"
width={993}
Expand All @@ -240,6 +277,18 @@ export function StartPage() {
objectFit: "contain",
}}
/>

<Image
quality={100}
className="absolute right-0 bottom-0 hidden md:block dark:hidden"
src={transactionsLight}
alt="Midday | Transactions"
width={993}
height={645}
style={{
objectFit: "contain",
}}
/>
</div>
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions apps/website/src/components/theme-provider.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
import * as React from "react";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
Binary file modified bun.lockb
View file
Binary file not shown.

0 comments on commit 7be6d86

Please sign in to comment.