Merge pull request #3 from ruralad/ui

UI update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "notedown",
   "private": true,
-  "version": "0.0.2-alpha",
+  "version": "0.0.3-alpha",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,6 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@fontsource/open-sans": "^4.5.14",
     "@tauri-apps/api": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src-tauri/tauri.conf.json

@@ -7,8 +7,8 @@
     "withGlobalTauri": false
   },
   "package": {
-    "productName": "Notedown",
-    "version": "0.0.2"
+    "productName": "Notedown - Alpha",
+    "version": "0.0.3"
   },
   "tauri": {
     "allowlist": {

src/App.tsx

@@ -10,11 +10,11 @@ const App: React.FC = () => {
     <main className="relative w-full h-screen flex flex-col">
       <div
         data-tauri-drag-region
-        className="absolute h-8 w-full z-20 text-gray-400"
+        className="h-10 w-full text-gray-400 bg-zinc-700"
       >
         <TitleBar />
       </div>
-      <div className="relative w-full h-full flex pt-8">
+      <div className="relative w-full h-full flex">
         {!!showDirectory && <DirectorySection />}
         <ContentSection />
       </div>

src/components/ContentSection/index.tsx

@@ -39,21 +39,11 @@ const ContentSection: React.FC = () => {
   };
 
   return (
-    <section className="w-full h-full relative bg-gray-900 p-5 text-white">
-      {!!activeNote && (
-        <p
-          title={UiStore.showDirectory ? `Hide Directory` : `Show Directory`}
-          className="absolute text-2xl hover:cursor-pointer z-10 top-0"
-          onClick={() => UiStore.setShowDirectory()}
-        >
-          {UiStore.showDirectory ? <>&larr;</> : <>&rarr;</>}
-        </p>
-      )}
-
+    <section className="w-full h-full relative bg-zinc-900 p-5 text-white">
       {!!editor && (
         <div className="h-full relative">
           <input
-            className="outline-none bg-gray-900 text-3xl py-4"
+            className="outline-none bg-zinc-900 text-3xl font-medium py-4"
             onChange={(e) => setHeading(e.target.value)}
             onBlur={updateHeading}
             value={heading}

src/components/DirectorySection/Header.tsx

@@ -21,7 +21,7 @@ const Header: React.FC = () => {
       <h1 className="text-2xl">All Notes</h1>
       <p
         onClick={createNote}
-        className="py-1 px-2 rounded-md hover:bg-gray-100 hover:cursor-pointer"
+        className="py-1 px-2 rounded-md hover:bg-zinc-700 hover:cursor-pointer"
       >
         new
       </p>

src/components/DirectorySection/Notes.tsx

@@ -21,7 +21,7 @@ const Notes: React.FC = () => {
         allNotes.map((v, i) => {
           return (
             <p
-              className="p-1 m-1 hover:bg-gray-100 hover:cursor-pointer rounded-md "
+              className="p-1 m-1 hover:bg-zinc-700 hover:cursor-pointer rounded-md "
               key={v.name}
               onClick={() => setActiveNote(v.name as string)}
             >

src/components/DirectorySection/index.tsx

@@ -3,7 +3,7 @@ import Notes from "./Notes";
 
 const DirectorySection: React.FC = () => {
   return (
-    <section className="w-1/3 h-full bg-white text-black p-5">
+    <section className="w-1/3 h-full bg-zinc-800 text-white p-5">
       <Header />
       <Notes />
     </section>

src/components/TitleBar/index.tsx

@@ -1,10 +1,14 @@
 import { appWindow } from "@tauri-apps/api/window";
 import { useEffect, useState } from "react";
 import { AiOutlineMinus } from "react-icons/ai";
+import { BiSquare } from "react-icons/bi";
 import { CgClose } from "react-icons/cg";
-import { RxSquare } from "react-icons/rx";
+import { RiFocusFill } from "react-icons/ri";
+import { TbFocus } from "react-icons/tb";
+import { useUiStore } from "../../store/UiStore";
 const TitleBar = () => {
   const [fullscreen, setFullscreen] = useState<boolean>();
+  const UiStore = useUiStore();
 
   useEffect(() => {
     appWindow.isMaximized().then((fullscreenStatus) => {
@@ -13,43 +17,61 @@ const TitleBar = () => {
   }, []);
 
   return (
-    <div className="right-0 flex absolute">
-      <div
-        className="grid place-items-center w-8 h-8 hover:bg-slate-800 hover:cursor-pointer"
-        onClick={() => appWindow.minimize()}
-      >
-        <AiOutlineMinus />
+    <div className="w-full h-full flex justify-between items-center">
+      <div className="h-full flex items-center pl-3">
+        <div
+          className="grid place-items-center w-8 h-8 p-2 rounded-lg hover:bg-zinc-600"
+          onClick={() => UiStore.setShowDirectory()}
+          title={
+            UiStore.showDirectory
+              ? "Switch to Focus Mode"
+              : "Switch to Normal Mode"
+          }
+        >
+          {UiStore.showDirectory ? (
+            <TbFocus size={16} />
+          ) : (
+            <RiFocusFill size={16} />
+          )}
+        </div>
       </div>
-      {fullscreen ? (
+      <div className="flex h-full">
         <div
-          className="grid place-items-center w-8 h-8 hover:bg-slate-800 hover:cursor-pointer"
-          onClick={() => {
-            appWindow.unmaximize();
-            setFullscreen(!fullscreen);
-          }}
+          className="grid place-items-center w-10 h-full hover:bg-gray-900"
+          onClick={() => appWindow.minimize()}
         >
-          {" "}
-          <RxSquare />
+          <AiOutlineMinus />
         </div>
-      ) : (
+        {!!fullscreen ? (
+          <div
+            className="grid place-items-center w-10 h-full hover:bg-gray-800"
+            onClick={() => {
+              appWindow.unmaximize();
+              setFullscreen(!fullscreen);
+            }}
+          >
+            <BiSquare size={13} />
+          </div>
+        ) : (
+          <div
+            className="grid place-items-center w-10 h-full hover:bg-gray-800"
+            onClick={() => {
+              appWindow.maximize();
+              setFullscreen(!fullscreen);
+            }}
+          >
+            {" "}
+            <BiSquare size={13} />
+          </div>
+        )}
+
         <div
-          className="grid place-items-center w-8 h-8 hover:bg-slate-800 hover:cursor-pointer"
-          onClick={() => {
-            appWindow.maximize();
-            setFullscreen(!fullscreen);
-          }}
+          className="grid place-items-center w-10 h-full hover:bg-red-900"
+          onClick={() => appWindow.close()}
         >
           {" "}
-          <RxSquare />
+          <CgClose size={15} />
         </div>
-      )}
-
-      <div
-        className="grid place-items-center w-8 h-8 hover:bg-slate-800 hover:cursor-pointer"
-        onClick={() => appWindow.close()}
-      >
-        {" "}
-        <CgClose />
       </div>
     </div>
   );

src/main.tsx

@@ -1,3 +1,4 @@
+import "@fontsource/open-sans";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";

src/styles/main.css

@@ -3,12 +3,12 @@
   -webkit-tap-highlight-color: transparent;
   margin: 0;
   padding: 0;
-  transition: all 0.5s ease;
 }
 
 body {
   background-color: #1e1e1e;
   color: white;
+  font-family: "Open Sans", sans-serif;
 }
 
 ::-webkit-scrollbar {