Merge pull request #78 from karelnagel/dev

karelnagel · web-flow · commit 0349d047772c · 2023-04-05T13:15:59.000+03:00
Dev
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "motionly",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "fe-dev": "vite",
diff --git a/landing/app/globals.css b/landing/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/landing/app/layout.tsx b/landing/app/layout.tsx
@@ -1,5 +1,9 @@
 import { Metadata } from "next";
 import "./globals.css";
+import { Inter } from "next/font/google";
+import { Theme } from "~/components/Theme";
+
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Motionly",
@@ -14,7 +18,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body style={inter.style}>
+        <Theme>{children}</Theme>
+      </body>
     </html>
   );
 }
diff --git a/landing/app/page.tsx b/landing/app/page.tsx
@@ -1,11 +1,7 @@
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
-
 export default function Home() {
   return (
-    <main style={inter.style}>
-      <h1>Motionly</h1>
+    <main>
+      <h1 className="bg-base-100">Motionly</h1>
     </main>
   );
 }
diff --git a/landing/components/Theme.tsx b/landing/components/Theme.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode, useEffect, useState } from "react";
+
+export const Theme = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState<"dark" | "light">("light");
+  useEffect(() => {
+    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    setTheme(theme);
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+      setTheme(e.matches ? "dark" : "light");
+    });
+  }, []);
+  return (
+    <div className="min-h-screen bg-base-100 text-base-content" data-theme={theme}>
+      {children}
+    </div>
+  );
+};
diff --git a/landing/package.json b/landing/package.json
@@ -17,6 +17,12 @@
     "next": "13.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tw-colors": "^1.2.0",
     "typescript": "5.0.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.1"
   }
 }
diff --git a/landing/postcss.config.js b/landing/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/landing/tailwind.config.js b/landing/tailwind.config.js
@@ -0,0 +1,46 @@
+const { createThemes } = require('tw-colors');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'primary': {
+          "DEFAULT": "#316fff",
+          "content": "#e8f5ff",
+          '50': '#e8f5ff',
+          '100': '#d5edff',
+          '200': '#b4dbff',
+          '300': '#86c2ff',
+          '400': '#5799ff',
+          '500': '#316fff',
+          '600': '#0e42ff',
+          '700': '#0538fd',
+          '800': '#0835d7',
+          '900': '#11339e',
+          '950': '#0a1c5c',
+        },
+      }
+    },
+  },
+  plugins: [
+    createThemes({
+      light: {
+        "base-100": "#f7f7f7",
+        "base-200": "#e3e3e3",
+        "base-300": "#c8c8c8",
+        "base-content": "#1a1a1a"
+      },
+      dark: {
+        "base-100": "#1a1a1a",
+        "base-200": "#313131",
+        "base-300": "#383838",
+        "base-content": "#f7f7f7"
+      }
+    })
+  ],
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "motionly",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.0.2",`
	`4`	`+ "version": "0.0.3",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"fe-dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,12 @@`
`17`	`17`	`"next": "13.2.4",`
`18`	`18`	`"react": "^18.2.0",`
`19`	`19`	`"react-dom": "^18.2.0",`
	`20`	`+ "tw-colors": "^1.2.0",`
`20`	`21`	`"typescript": "5.0.3"`
	`22`	`+ },`
	`23`	`+ "devDependencies": {`
	`24`	`+ "autoprefixer": "^10.4.13",`
	`25`	`+ "postcss": "^8.4.18",`
	`26`	`+ "tailwindcss": "^3.2.1"`
`21`	`27`	`}`
`22`	`28`	`}`