Merge pull request #89 from sjdonado/auto-darkmode

Auto darkmode
sjdonado · May 8, 2024 · 4f8273f · 4f8273f
2 parents c0024be + ae156fd
commit 4f8273f
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 14 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -9,20 +9,15 @@ jobs:
  build:
  name: Build
  runs-on: ubuntu-latest
-
  steps:
  - uses: actions/checkout@v4
  - uses: oven-sh/setup-bun@v1
-
  - name: Install dependencies
  run: bun install
-
  - name: Build
  run: bun run build
-
  - name: Install Firebase CLI
  run: bun install -g firebase-tools
-
  - name: Deploy to Firebase
  env:
  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

diff --git a/README.md b/README.md
@@ -3,7 +3,8 @@
 
 ![Uptime Badge](https://uptime.donado.co/api/badge/4/uptime/24) ![Uptime Badge](https://uptime.donado.co/api/badge/4/ping/24)
 
-<img width="2032" alt="Screenshot 2024-05-05 at 00 52 13" src="https://github.com/sjdonado/monocuco/assets/27580836/6dc68821-e206-4f6a-8d8f-2d8482d519a2">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 01" src="https://github.com/sjdonado/monocuco/assets/27580836/ff3e7242-6133-4469-98c8-aa83f1bb0617">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 12" src="https://github.com/sjdonado/monocuco/assets/27580836/6f30a3b9-69b8-4c03-a492-20d9d036b5cf">
 
 ## ¿Cómo contribuir?
 
@@ -294,3 +295,4 @@ Agrega la nueva palabra directamente en el archivo `src/data.json`, asegurate de
 
 ## Agradecimientos
 - Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)
+ Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,7 +36,7 @@ const App = function App() {
  const emptyResults = results.length === 0;
 
  return (
- <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 p-4">
+ <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 bg-gray-50 p-4 dark:bg-gray-900 dark:text-gray-300">
  <GithubButtons />
  <div className="flex flex-col items-center">
  <Header />

diff --git a/src/components/LazyLoadingSearchResults.tsx b/src/components/LazyLoadingSearchResults.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense, startTransition, useEffect, useState } from 'react';
 
 import WordCard from './WordCard';
 
@@ -24,15 +24,15 @@ export default function LazyLoadingSearchResults({
  firstResults.length + lazyLoaded.length !== results.length ||
  (results.length > CHUNK_SIZE && lazyLoaded.length === 0)
  ) {
- setTimeout(() => {
+ startTransition(() => {
  setLazyLoaded(
  results
  .slice(CHUNK_SIZE, results.length)
  .map((result) => (
  <WordCard key={result.id} word={result.word} currentWord={currentWord} />
  )),
  );
- }, 100);
+ });
  }
  }, [results, currentWord, firstResults, lazyLoaded]);
 

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -31,15 +31,15 @@ function Input({ onSearch, word }: { onSearch: (value: string) => void; word: st
  <input
  ref={inputRef}
  type="text"
- className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none"
+ className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none dark:border-gray-700 dark:bg-gray-900"
  autoComplete="off"
  autoCapitalize="off"
  autoCorrect="off"
  onChange={(e) => onSearch(e.target.value)}
  placeholder="Buscar palabra"
  value={word}
  />
- <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400">
+ <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400 bg-white dark:border-gray-700 dark:bg-gray-900">
  <MagnifyingGlassIcon className="mr-4 w-5 text-gray-400" />
  </div>
  </div>

diff --git a/src/components/WordCard.tsx b/src/components/WordCard.tsx
@@ -25,10 +25,10 @@ export default function WordCard({ word, currentWord }: Props) {
  );
 
  return (
- <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border p-4 text-center lg:w-[672px] lg:max-w-2xl">
+ <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border bg-white p-4 text-center lg:w-[672px] lg:max-w-2xl dark:border-gray-700 dark:bg-gray-900">
  <div className="flex w-full flex-col gap-2">
  {synonyms.length > 0 && (
- <div className="flex justify-end text-sm">Sin. {highlightText(synonyms, 'px-2')}</div>
+ <div className="flex justify-end text-sm">Sin. {highlightText(synonyms)}</div>
  )}
  {highlightText(word.text, 'h-full text-3xl')}
  <span className="mx-auto w-20 border-t-2 border-red-400" />