Merge pull request #113 from emiljohansson/feature/theme-updates

Feature/theme updates
emiljohansson · Dec 27, 2023 · 8daa005 · 8daa005 · vercel · Dec 27, 2023
2 parents 7250e4d + 8bb032b
commit 8daa005
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 269 deletions.
diff --git a/apps/games/src/app/layout.tsx b/apps/games/src/app/layout.tsx
@@ -16,9 +16,7 @@ export default function Layout({ children }: PropsWithChildren<unknown>) {
 	return (
 		<html lang="en">
 			<head></head>
-			<body className={inter.className}>
-				<main>{children}</main>
-			</body>
+			<body className={inter.className}>{children}</body>
 		</html>
 	)
 }
diff --git a/apps/games/src/app/ms/MineSweaper.tsx b/apps/games/src/app/ms/MineSweaper.tsx
@@ -9,15 +9,9 @@ import {
 	useContext,
 	useReducer,
 } from 'react'
+import { MuseoModerno } from 'next/font/google'
 import useInterval from 'lib/hooks/useInterval'
 import { Header, Select, SelectItem } from 'ui'
-import { MuseoModerno } from 'next/font/google'
-
-const myFont = MuseoModerno({
-	weight: '300',
-	subsets: ['latin'],
-	display: 'swap',
-})
 
 enum SelectedDifficulty {
 	loading = 'loading',
@@ -90,6 +84,12 @@ enum Colors {
 	uncheckedOdd = 'antiquewhite',
 }
 
+const myFont = MuseoModerno({
+	weight: '300',
+	subsets: ['latin'],
+	display: 'swap',
+})
+
 const isDebugging = false
 
 const boardStyles = {
@@ -475,9 +475,7 @@ const Board = ({ difficulty }: { difficulty: Difficulty }) => {
 	}, delay)
 
 	return (
-		<div
-			className={`${myFont.className} font-light text-4xl relative select-none`}
-		>
+		<div className={`font-light text-4xl relative select-none`}>
 			{board.map((rows, i) => (
 				<FlexRow key={`row-${i}`} radius={context.radius}>
 					{rows.map(([tile, setTile], j) => (
@@ -569,8 +567,10 @@ export default function MineSweaper() {
 
 	return (
 		<>
-			<Header />
-			<div className="flex mb-3">
+			<header>
+				<Header />
+			</header>
+			<nav className="flex mb-3">
 				<div className="mx-1.5">
 					<Select
 						defaultValue={easy.value}
@@ -602,14 +602,16 @@ export default function MineSweaper() {
 						Restart
 					</button>
 				</div>
-			</div>
-			{selectedDifficulty.type === SelectedDifficulty.loading ? (
-				<></>
-			) : (
-				<BoardContext.Provider value={selectedDifficulty.board}>
-					<Board difficulty={selectedDifficulty.level} />
-				</BoardContext.Provider>
-			)}
+			</nav>
+			<main className={myFont.className}>
+				{selectedDifficulty.type === SelectedDifficulty.loading ? (
+					<></>
+				) : (
+					<BoardContext.Provider value={selectedDifficulty.board}>
+						<Board difficulty={selectedDifficulty.level} />
+					</BoardContext.Provider>
+				)}
+			</main>
 		</>
 	)
 }
diff --git a/apps/games/src/app/ms/layout.tsx b/apps/games/src/app/ms/layout.tsx
@@ -1,8 +1,5 @@
 import type { PropsWithChildren } from 'react'
 
-// import Section from '@/components/Section'
-// import Content from '@/components/Content'
-
 export const metadata = {
 	title: 'Minesweeper',
 	description: 'Play Minesweeper',

diff --git a/apps/next/package.json b/apps/next/package.json
@@ -17,8 +17,6 @@
 	"dependencies": {
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
-		"@preact/signals-core": "1.5.0",
-		"@preact/signals-react": "1.3.7",
 		"@radix-ui/react-accessible-icon": "1.0.2",
 		"@radix-ui/react-label": "1.0.0",
 		"@radix-ui/react-progress": "1.0.0",

diff --git a/apps/next/src/app/layout.tsx b/apps/next/src/app/layout.tsx
@@ -11,7 +11,7 @@ import Image from 'next/image'
 import { sql } from '@vercel/postgres'
 import { Analytics } from '@vercel/analytics/react'
 import { CommandMenu } from './CommandMenu'
-import { ThemeToggle } from './ThemeToggle'
+// import { ThemeToggle } from './ThemeToggle'
 import { HeaderCurrentProject } from './HeaderCurrentProject'
 import { Inter } from 'next/font/google'
 
@@ -114,7 +114,7 @@ export default async function Layout({ children }: PropsWithChildren<unknown>) {
 							initProject={currentProject}
 						/>
 					</div>
-					<ThemeToggle initValue={theme?.value} />
+					{/* <ThemeToggle initValue={theme?.value} /> */}
 				</nav>
 				<main className="flex-1 relative">{children}</main>
 				<CommandMenu projects={projects} />

diff --git a/apps/next/src/app/password-generator/page.tsx b/apps/next/src/app/password-generator/page.tsx
@@ -27,8 +27,8 @@ const Trigger = ({ value, children }: PropsWithChildren<{ value: string }>) => (
       leading-none
       select-none
       cursor-default
-      rounded
-      state-active:bg-primary
+      state-active:border-b-2
+      state-active:border-black-rich
     "
 	>
 		{children}

diff --git a/apps/next/src/app/signals/Content.tsx b/apps/next/src/app/signals/Content.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { signal, computed } from './signals'
+import { signal, computed } from 'lib/hooks/signals'
 
 const count = signal(0)
 const double = computed(() => count.value * 2)

diff --git a/apps/next/src/app/signals/signals.ts b/apps/next/src/app/signals/signals.ts
diff --git a/apps/next/src/app/styles.css b/apps/next/src/app/styles.css
@@ -17,7 +17,7 @@
 	.select {
 		@apply h-10
       px-4
-      rounded;
+      rounded-lg;
 	}
 
 	.btn-primary,
@@ -32,21 +32,25 @@
 	}
 
 	.btn-primary {
-		@apply bg-primary
-      border-primary
-      text-black
-      hover:bg-primary-dark;
+		@apply bg-black-rich
+      border-black-rich
+      text-white
+      hover:bg-gray-dark
+      hover:border-black-800
+			dark:bg-white
+			dark:text-black-rich
+			dark:hover:bg-gray-300;
 	}
 	.btn-secondary {
 		@apply bg-transparent
-      border-gray-600
-      hover:border-black-rich
-      text-gray-600
+			hover:bg-gray-light
+      border-slate-200
+      text-black-rich
       hover:text-black-rich
-      dark:text-gray-400
-      dark:border-gray-400
-      dark:hover:text-white
-      dark:hover:border-white;
+			dark:hover:bg-zinc-800
+      dark:text-white
+      dark:border-gray-600
+      dark:hover:text-white;
 	}
 	.btn-outline {
 		@apply dark:border-zinc-700 hover:bg-slate-100 hover:dark:bg-zinc-900;

diff --git a/apps/oauth-app/package.json b/apps/oauth-app/package.json
@@ -21,7 +21,7 @@
 		"postcss": "8.4.31",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"tailwindcss": "3.2.7",
+		"tailwindcss": "3.4.0",
 		"typescript": "5.0.4"
 	},
 	"devDependencies": {

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
 		"@tailwindcss/typography": "0.5.9",
 		"autoprefixer": "10.4.13",
 		"postcss": "8.4.31",
-		"tailwindcss": "3.2.7"
+		"tailwindcss": "3.4.0"
 	},
 	"devDependencies": {
 		"@cypress-audit/lighthouse": "1.4.2",

diff --git a/apps/next/src/app/signals/hooks.ts → packages/lib/hooks/signals.ts b/apps/next/src/app/signals/hooks.ts → packages/lib/hooks/signals.ts
@@ -1,5 +1,26 @@
-import { Signal, computed, effect } from '@preact/signals-core'
-import { useEffect, useMemo, useRef, useState } from 'react'
+// temporary solution from https://github.com/JonAbrams/signals-react-safe/tree/main
+
+import {} from 'react'
+import { type ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import {
+	Signal,
+	signal,
+	computed,
+	effect,
+	batch,
+	type ReadonlySignal,
+	untracked,
+} from '@preact/signals-core'
+
+export {
+	signal,
+	computed,
+	effect,
+	batch,
+	Signal,
+	type ReadonlySignal,
+	untracked,
+}
 
 export function useSignalValue<T>(signal: Signal<T>): T {
 	const [state, setState] = useState<T>(signal.value)
@@ -40,3 +61,25 @@ export function useSignalEffect(cb: () => void | (() => void)): void {
 		return effect(() => callback.current())
 	}, [])
 }
+
+const ReactElemType = Symbol.for('react.element') // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+
+function SignalValue({ data }: { data: Signal }) {
+	return useSignalValue(data)
+}
+
+Object.defineProperties(Signal.prototype, {
+	$$typeof: { configurable: true, value: ReactElemType },
+	type: { configurable: true, value: SignalValue },
+	props: {
+		configurable: true,
+		get() {
+			return { data: this }
+		},
+	},
+	ref: { configurable: true, value: null },
+})
+
+declare module '@preact/signals-core' {
+	interface Signal extends ReactElement {}
+}
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -9,6 +9,8 @@
 		"test:ci": "npm run test"
 	},
 	"dependencies": {
+		"@preact/signals-core": "1.5.0",
+		"@preact/signals-react": "1.3.7",
 		"next": "14.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"