implemented dark mode and side navigation

umairayub79 · Sep 21, 2022 · 023f0b4 · 023f0b4
1 parent dff2354
commit 023f0b4
Show file tree

Hide file tree

Showing 19 changed files with 355 additions and 287 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ npm run electron:package:linux
 - [ ] Search History
 - [ ] Copy to Clipboard
 - [ ] Favorites
+- [x] Dark Mode
 
 
 ## Contributing

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sayad-ganj",
-  "version": "0.1.0",
-  "description": "Balochi to Balochi Dictionary",
+  "version": "0.1.1",
+  "description": "Balochi Dictionary",
   "private": true,
   "main": "public/electron.js",
   "homepage": "./",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^1.0.6",
+    "classnames": "^2.3.2",
     "electron-is-dev": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/public/electron.js b/public/electron.js
@@ -7,9 +7,10 @@ const sqlite3 = require('sqlite3');
 
 
 let mainWindow;
+let splashWindow;
 
 
-// Initializing a new database
+// Initializing a new dنatabase
 const database = new sqlite3.Database(
     isDev
         ? path.join(__dirname, '../db/dev.db') // my root folder if in dev mode
@@ -21,16 +22,30 @@ const database = new sqlite3.Database(
             console.log('Database Loaded');
         }
     }
-    
+
 );
 
 function createWindow() {
+    splashWindow = new BrowserWindow({
+        width: 500,
+        height: 300,
+        frame: false,
+        alwaysOnTop: true,
+    });
+    splashWindow.loadFile(
+        isDev
+            ? path.join(app.getAppPath(), './public/splash.html') // Loading it from the public folder for dev
+            : path.join(app.getAppPath(), './build/splash.html')
+    );
+
+    splashWindow.center()
     mainWindow = new BrowserWindow({
         width: 900,
         height: 800,
-        minHeight: 800,
+        minHeight: 700,
         minWidth: 900,
-        frame:false,
+        frame: false,
+        show: false,
         webPreferences: {
             // The preload file where we will perform our app communication
             preload: isDev
@@ -61,22 +76,23 @@ function createWindow() {
         mainWindow.webContents.send("winState", "unmaximized");
     })
 
-    
+
     // In development mode, if the window has loaded, then load the dev tools.
     if (isDev) {
         mainWindow.webContents.on('did-frame-finish-load', () => {
             mainWindow.webContents.openDevTools({ mode: 'detach' });
         });
     }
+
+
+    splashWindow.webContents.once('did-finish-load', function () {
+        setTimeout(() => {
+            splashWindow.close()
+            mainWindow.show()
+    }, 2000);
+    })
 }
 
-// ((OPTIONAL)) Setting the location for the userdata folder created by an Electron app. It default to the AppData folder if you don't set it.
-app.setPath(
-    'userData',
-    isDev
-        ? path.join(app.getAppPath(), 'userdata/') // In development it creates the userdata folder where package.json is
-        : path.join(process.resourcesPath, 'userdata/') // In production it creates userdata folder in the resources folder
-);
 
 // IPC handlers
 
@@ -140,11 +156,11 @@ ipcMain.handle('close-event', () => {
 })
 
 app.on('browser-window-focus', () => {
-    mainWindow.webContents.send('winFocusState','focused')
+    mainWindow.webContents.send('winFocusState', 'focused')
 })
 
 app.on('browser-window-blur', () => {
-    mainWindow.webContents.send('winFocusState','blurred')
+    mainWindow.webContents.send('winFocusState', 'blurred')
 })
 
 // When the app is ready to load

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="bal">
+<html lang="bal" dir="rtl">
 
 <head>
   <meta charset="utf-8" />
@@ -29,7 +29,7 @@
   <title>Sayad Ganj</title>
 </head>
 
-<body dir="rtl">
+<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <!--

diff --git a/public/splash.css b/public/splash.css
@@ -0,0 +1,117 @@
+body {
+  background-color: rgb(59 130 246);
+  color: #fff;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.lds-roller {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 40px 40px;
+}
+
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #fff;
+  margin: -4px 0 0 -4px;
+}
+
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+
+.lds-roller div:nth-child(1):after {
+  top: 63px;
+  left: 63px;
+}
+
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+
+.lds-roller div:nth-child(2):after {
+  top: 68px;
+  left: 56px;
+}
+
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.lds-roller div:nth-child(3):after {
+  top: 71px;
+  left: 48px;
+}
+
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.lds-roller div:nth-child(4):after {
+  top: 72px;
+  left: 40px;
+}
+
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+
+.lds-roller div:nth-child(5):after {
+  top: 71px;
+  left: 32px;
+}
+
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.lds-roller div:nth-child(6):after {
+  top: 68px;
+  left: 24px;
+}
+
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.lds-roller div:nth-child(7):after {
+  top: 63px;
+  left: 17px;
+}
+
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.lds-roller div:nth-child(8):after {
+  top: 56px;
+  left: 12px;
+}
+
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/public/splash.html b/public/splash.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="bal" dir="rtl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sayad Ganj - Splash Screen</title>
+    <link rel="stylesheet" href="splash.css">
+</head>
+
+<body>
+    <h1>سیدگَنج</h1>
+    <h2>بلوچی ءِ اوّلی بزانت بلد</h2>
+    <div class="lds-roller">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,53 @@
-import React from 'react';
+import React,{useState, useEffect} from 'react';
 import {
   Route,
-  Routes
+  Routes,
 } from 'react-router-dom';
 import Home from './components/Home/Home';
+import Navigation from './components/Navigation/Navigation';
 import SearchResults from './components/Search/SearchResults';
 import WordDetail from './components/WordDetail/WordDetail';
 
+const App = () => {
+  const prefersDarkMode = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches
 
-const App = () => (
-  <div className='ُh-[800px] overflow:hidden flex flex-col items-center justify-center'>
-    <div className='h-[550px] mt-[110px] w-screen overflow-auto'>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/search/:query" element={<SearchResults />} />
-        <Route path="/word/:id" element={<WordDetail />} />
-      </Routes>
+  const [isDarkMode, setIsDarkMode] = useState(
+    localStorage.getItem('theme')
+      ? localStorage.getItem('theme') === 'dark'
+      : prefersDarkMode
+        ? true
+        : false
+  )
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [isDarkMode])
+
+  const handleDarkMode = (isDarkMode) => {
+    setIsDarkMode(isDarkMode)
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light')
+  }
+
+  return (
+    <div className='ُmin-h-screen relative'>
+      <div className='min-h-[calc(100vh-28px)] h-[calc(100vh-28px)] absolute top-0 bottom-0 right-0 border-l dark:border-gray-700 w-12'>
+        <Navigation isDarkMode={isDarkMode} handleDarkMode={handleDarkMode}/>
+      </div>
+      <div className='h-[calc(100vh-28px)] absolute top-0 bottom-0 left-0 right-12  overflow-auto'>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/search/:query" element={<SearchResults />} />
+          <Route path="/word/:id" element={<WordDetail />} />
+        </Routes>
+      </div>
     </div>
-  </div>
-);
+  )
+}
 
 export default App;
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -5,6 +5,10 @@ import Searchbar from './Searchbar';
 function Home() {
     return (
         <div className='flex flex-col items-center justify-center'>
+            <div className='flex items-center'>
+            <h1 className='text-5xl dark:text-gray-100 text-blue-500 font-extrabold'>سیدگَنج</h1>
+            <span className='text-xl dark:text-gray-100 text-blue-500'>beta</span>
+            </div>
             <div>
                 <Searchbar />
             </div>

diff --git a/src/components/Home/RandomWord.jsx b/src/components/Home/RandomWord.jsx
@@ -18,7 +18,7 @@ export const RandomWord = () => {
 
     return (
         <div className='m-5 flex flex-col items-center justify-center'>
-            <h2 className='text-2xl'>Random Word</h2>
+            <h2 className='text-2xl dark:text-white'>Random Word</h2>
             {
                loading ? <Skeleton/> :  response ? <Word word={response}/> : '' 
             }

diff --git a/src/components/Home/Searchbar.jsx b/src/components/Home/Searchbar.jsx
@@ -1,4 +1,4 @@
-import React,{useState} from 'react'
+import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom';
 import { SearchIcon } from '@heroicons/react/solid';
 const Searchbar = () => {
@@ -17,15 +17,15 @@ const Searchbar = () => {
     }
     return (
         <div className='flex flex-col items-center justify-center'>
-            <form onSubmit={onFormSubmit} className='flex w-screen m-5 hover:shadow-lg focus-within:shadow-lg max-w-lg rounded-full border px-5 py-3 items-center sm:max-w-xl lg:max-w-2xl'>
+            <form onSubmit={onFormSubmit} className="flex items-center text-gray-900 bg-gray-50 rounded-full border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                 <input
                     onChange={({ target: { value } }) => setWord(value)}
                     value={word}
                     placeholder="لبزءِدرگیجگ ءَ اداں نبشتہ بہ کن اِت"
                     type="text"
-                    className="text-[24px] text-blue-700 leading-8 font-normal flex-grow focus:outline-none" />
+                    className="text-xl p-2 text-gray-900 flex-grow focus:outline-none w-full bg-gray-50 rounded-full  dark:bg-gray-700  dark:placeholder-gray-400 dark:text-white" />
 
-                <button type="submit" className="btn text-blue-500">
+                <button type="submit" className="bg-gray-200 dark:bg-gray-500 text-blue-500 dark:text-gray-200 p-2 rounded-full ring-gray-400 hover:ring-1 focus:outline-none active:ring-gray-400 hover:shadow-md">
                     <SearchIcon className='w-8 h-8' />
                 </button>
             </form>