feat(navbar): new navbar style and bugs fix

kangfenmao · Nov 30, 2023 · df7fd4c · df7fd4c
1 parent 420faca
commit df7fd4c
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 49 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <link href="/public/manifest.json" rel="manifest">
-  <link href="/public/favicon.png" rel="icon" type="image/png" />
+  <link href="/public/logo.png" rel="icon" type="image/png" />
   <link href="/public/icon-ios.png" rel="apple-touch-icon">
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <meta content="yes" name="apple-mobile-web-app-capable">

diff --git a/frontend/public/public/favicon.png → frontend/public/public/logo.png b/frontend/public/public/favicon.png → frontend/public/public/logo.png
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -9,31 +9,38 @@ import '@uiw/react-md-editor/markdown-editor.css'
 import '@uiw/react-markdown-preview/markdown.css'
 import NotesScreen from '@/screens/NotesScreen'
 import TopViewContainer from '@/components/TopView.tsx'
+import Root from '@/components/Root.tsx'
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <HomeScreen />
-  },
-  {
-    path: '/search',
-    element: <SearchScreen />
-  },
-  {
-    path: '/notes',
-    element: <NotesScreen />
-  },
-  {
-    path: '/notes/:id',
-    element: <NoteScreen />
-  },
-  {
-    path: '/notes/:id/edit',
-    element: <EditNoteScreen />
-  },
-  {
-    path: '/new',
-    element: <NewNoteScreen />
+    element: <Root />,
+    children: [
+      {
+        index: true,
+        element: <HomeScreen />
+      },
+      {
+        path: '/search',
+        element: <SearchScreen />
+      },
+      {
+        path: '/notes',
+        element: <NotesScreen />
+      },
+      {
+        path: '/notes/:id',
+        element: <NoteScreen />
+      },
+      {
+        path: '/notes/:id/edit',
+        element: <EditNoteScreen />
+      },
+      {
+        path: '/new',
+        element: <NewNoteScreen />
+      }
+    ]
   }
 ])
 

diff --git a/frontend/src/components/LoadingView.tsx b/frontend/src/components/LoadingView.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 const LoadingView: React.FC = () => {
   return (
     <div className="flex flex-row justify-center py-10">
-      <i className="iconfont icon-loading text-3xl animate-spin opacity-70"></i>
+      <span className="loading loading-ring loading-lg"></span>
     </div>
   )
 }

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -28,7 +28,7 @@ const Navbar: React.FC<Props> = () => {
         zIndex: 100,
         backgroundColor: isHome ? 'transparent' : 'var(--theme-navbar-color)'
       }}>
-      <div className="flex flex-row items-center justify-between m-auto w-full px-5 max-w-lg sm:max-w-6xl">
+      <div className="flex flex-row items-center justify-between m-auto w-full px-5 ">
         {isHome && <div className="flex-1"></div>}
         {!isHome && (
           <Link to="/" className="flex flex-row items-center">
@@ -41,8 +41,8 @@ const Navbar: React.FC<Props> = () => {
           </Link>
         )}
         {!isHome && (
-          <div className="flex-1 hidden sm:flex">
-            <section className="relative w-full md:w-1/2 ml-4 rounded-md border border-black border-opacity-10 dark:border-white dark:border-opacity-20">
+          <div className="flex-1 hidden sm:flex mx-8">
+            <section className="relative w-full rounded-full border border-black border-opacity-10 dark:border-white dark:border-opacity-20">
               <input
                 type="text"
                 name="keywords"
@@ -63,7 +63,7 @@ const Navbar: React.FC<Props> = () => {
             </section>
           </div>
         )}
-        <span className="flex flex-row items-center ml-5">
+        <div className="flex flex-row items-center">
           <label className="swap swap-rotate opacity-60 hover:opacity-80 transition-opacity">
             {/* this hidden checkbox controls the state */}
             <input
@@ -94,7 +94,7 @@ const Navbar: React.FC<Props> = () => {
               <button className="text-black dark:text-white ml-1">New Note</button>
             </div>
           </Link>
-        </span>
+        </div>
       </div>
     </div>
   )

diff --git a/frontend/src/components/Root.tsx b/frontend/src/components/Root.tsx
@@ -0,0 +1,14 @@
+import { Outlet } from 'react-router-dom'
+import Navbar from '@/components/Navbar.tsx'
+import React from 'react'
+
+const Root: React.FC = () => {
+  return (
+    <div className="flex flex-col flex-1 w-full h-full">
+      <Navbar />
+      <Outlet />
+    </div>
+  )
+}
+
+export default Root
diff --git a/frontend/src/screens/EditNoteScreen/EditNoteScreen.tsx b/frontend/src/screens/EditNoteScreen/EditNoteScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react'
-import Navbar from '@/components/Navbar.tsx'
 import { displayName, isValidFileName } from '@/utils'
 import { isAxiosError } from 'axios'
 import { useBlocker, useNavigate, useParams } from 'react-router-dom'
@@ -96,8 +95,7 @@ const EditNoteScreen: React.FC = () => {
 
   return (
     <main className="w-full">
-      <Navbar />
-      <div className="container mx-auto px-5 pt-20 max-w-lg sm:max-w-6xl flex flex-col flex-1">
+      <div className="container mx-auto px-5 pt-20 sm:max-w-8xl flex flex-col flex-1">
         <div className="flex flex-row items-center mb-4">
           <input
             className="text-2xl sm:text-2xl w-full font-bold line-clamp-1 bg-transparent outline-none"

diff --git a/frontend/src/screens/HomeScreen/HomeScreen.tsx b/frontend/src/screens/HomeScreen/HomeScreen.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import RecentlyNotes from '@/components/RecentlyNotes.tsx'
-import Navbar from '@/components/Navbar.tsx'
 import { useNavigate } from 'react-router-dom'
 import { onSearch as search } from '@/utils'
 
@@ -12,7 +11,6 @@ const HomeScreen: React.FC = () => {
 
   return (
     <main className="flex flex-1">
-      <Navbar />
       <div className="flex flex-col mt-28 sm:m-auto items-center w-full px-5 transition-all duration-150 max-w-xl">
         <div className="flex flex-col items-center">
           <img src="/public/icon-200x200.png" className="w-28" alt="" />

diff --git a/frontend/src/screens/NewNoteScreen/NewNoteScreen.tsx b/frontend/src/screens/NewNoteScreen/NewNoteScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react'
-import Navbar from '@/components/Navbar.tsx'
 import { isValidFileName } from '@/utils'
 import { useBlocker, useNavigate } from 'react-router-dom'
 import MDEditor from '@uiw/react-md-editor'
@@ -80,8 +79,7 @@ const NewNoteScreen: React.FC = () => {
 
   return (
     <main className="w-full">
-      <Navbar />
-      <div className="container mx-auto px-5 pt-20 max-w-lg sm:max-w-6xl">
+      <div className="container mx-auto px-5 pt-20 max-w-8xl">
         <div className="flex flex-row items-center mb-4">
           <input
             className="text-2xl sm:text-2xl w-full font-bold line-clamp-1 bg-transparent outline-none"

diff --git a/frontend/src/screens/NoteScreen/NoteScreen.tsx b/frontend/src/screens/NoteScreen/NoteScreen.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { displayName } from '@/utils'
-import Navbar from '@/components/Navbar.tsx'
 import { isAxiosError } from 'axios'
 import { NoteType } from '@/types'
 import useRequest from '@/hooks/useRequest.ts'
@@ -54,7 +53,6 @@ const NoteScreen: React.FC = () => {
 
   return (
     <main className="w-full">
-      <Navbar />
       <div className="container mx-auto px-5 pt-20 max-w-lg sm:max-w-6xl">
         {loading && !note && <LoadingView />}
         {note && (

diff --git a/frontend/src/screens/NotesScreen/NotesScreen.tsx b/frontend/src/screens/NotesScreen/NotesScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Navbar from '@/components/Navbar.tsx'
 import { NoteType } from '@/types'
 import useRequest from '@/hooks/useRequest.ts'
 import useDebouncedValue from '@/hooks/useDebouncedValue.ts'
@@ -34,7 +33,6 @@ const NotesScreen: React.FC = () => {
 
   return (
     <main className="w-full">
-      <Navbar />
       <div className="container mx-auto px-5 mt-20 max-w-lg sm:max-w-6xl">
         {loading && isEmpty(notes) && <LoadingView />}
         <GroupedNotes data={notes} />

diff --git a/frontend/src/screens/SearchScreen/SearchScreen.tsx b/frontend/src/screens/SearchScreen/SearchScreen.tsx
@@ -1,7 +1,6 @@
 import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import React, { useEffect, useState } from 'react'
 import { displayName, runAsyncFunction } from '@/utils'
-import Navbar from '@/components/Navbar.tsx'
 import { NoteType } from '@/types'
 import './index.css'
 import LoadingView from '@/components/LoadingView.tsx'
@@ -57,19 +56,12 @@ const SearchScreen: React.FC = () => {
 
   return (
     <main className="w-full flex">
-      <Navbar />
       <div className="container mx-auto mt-20 px-5 max-w-lg sm:max-w-6xl flex flex-col flex-1">
         <div className="mb-4 pt-2 text-sm" style={{ color: '#9aa0a6' }}>
           About {notes.length} results ({time.toFixed(6)} seconds)
         </div>
         {isLoading && <LoadingView />}
-        {empty && (
-          <EmptyView
-            title={'No Search Results'}
-            className="flex-1 font-thin"
-            style={{ marginTop: '-10%' }}
-          />
-        )}
+        {empty && <EmptyView title={'No Search Results'} className="flex-1 font-thin mt-20" />}
         {notes.map((note, index) => (
           <div className="mb-5" key={note.id + '_' + index}>
             <Link to={`/notes/${note.id}`}>