Merge pull request #307 from reorproject/styling-fixes

Styling fixes
reorproject · Jul 11, 2024 · 54de01d · 54de01d
2 parents cbe9280 + a7b3084
commit 54de01d
Show file tree

Hide file tree

Showing 21 changed files with 42 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reor-project",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "productName": "Reor",
   "main": "dist-electron/main/index.js",
   "description": "An AI note-taking app that runs models locally.",

diff --git a/src/components/Common/IndexingProgress.tsx b/src/components/Common/IndexingProgress.tsx
@@ -48,7 +48,7 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({
           }`}
         >
           <div
-            className="bg-blue-400 h-full transition-all duration-300 ease-out"
+            className="bg-blue-600 h-full transition-all duration-300 ease-out"
             style={{ width: `${indexingProgress * 100}%` }}
           ></div>
         </div>

diff --git a/src/components/Common/Select.tsx b/src/components/Common/Select.tsx
@@ -66,7 +66,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
         onClick={toggleDropdown}
       >
         {centerText ? <span></span> : null}
-        <span className="pl-6 text-[13px] text-gray-100">{selectedValue}</span>
+        <span className="pl-2 pr-2 text-[13px] text-gray-100">
+          {selectedValue}
+        </span>
         <span
           className="transform transition-transform mr-2"
           style={{ transform: isOpen ? "rotate(180deg)" : "none" }}

diff --git a/src/components/File/NewDirectory.tsx b/src/components/File/NewDirectory.tsx
@@ -91,7 +91,7 @@ const NewDirectoryComponent: React.FC<NewDirectoryComponentProps> = ({
           placeholder="Directory Name"
         />
         <Button
-          className="bg-orange-700 mt-3 mb-2 border-none h-10 hover:bg-orange-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+          className="bg-blue-500 mt-3 mb-2 border-none h-10 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
           onClick={sendNewDirectoryMsg}
           placeholder={""}
         >

diff --git a/src/components/File/NewNote.tsx b/src/components/File/NewNote.tsx
@@ -78,7 +78,7 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
         />
 
         <Button
-          className="bg-orange-700 mt-3 mb-2 border-none h-10 hover:bg-orange-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+          className="bg-blue-500 mt-3 mb-2 border-none h-10 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
           onClick={sendNewNoteMsg}
           placeholder=""
         >

diff --git a/src/components/File/RenameDirectory.tsx b/src/components/File/RenameDirectory.tsx
@@ -110,7 +110,7 @@ const RenameDirModal: React.FC<RenameDirModalProps> = ({
           placeholder="New directory Name"
         />
         <Button
-          className="bg-orange-700 mt-3 mb-2 border-none h-10 hover:bg-orange-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+          className="bg-blue-600 mt-3 mb-2 border-none h-10 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
           onClick={sendDirRename}
           placeholder={""}
           disabled={isUpdatingDirName}

diff --git a/src/components/File/RenameNote.tsx b/src/components/File/RenameNote.tsx
@@ -110,7 +110,7 @@ const RenameNoteModal: React.FC<RenameNoteModalProps> = ({
           placeholder="New Note Name"
         />
         <Button
-          className="bg-orange-700 mt-3 mb-2 border-none h-10 hover:bg-orange-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+          className="bg-blue-500 mt-3 mb-2 border-none h-10 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
           onClick={sendNoteRename}
           placeholder={""}
         >

diff --git a/src/components/Flashcard/FlashcardsCore.tsx b/src/components/Flashcard/FlashcardsCore.tsx
@@ -42,7 +42,7 @@ export const FlashcardCore = ({
             flipDirection="vertical"
           >
             <Button
-              className="bg-orange-900  mt-3 mb-2 border-none rounded-md 
+              className="bg-blue-600  mt-3 mb-2 border-none rounded-md 
             cursor-pointer w-full h-full
             text-center text-lg normal-case"
               onClick={() =>
@@ -81,7 +81,7 @@ export const FlashcardCore = ({
           <div className="flex items-center justify-around w-50 mt-6">
             <Button
               className="bg-slate-700 border-none h-10 w-20 text-center
-          hover:bg-orange-900 cursor-pointer
+          hover:bg-blue-600 cursor-pointer
 
           disabled:pointer-events-none
           disabled:opacity-25"
@@ -96,7 +96,7 @@ export const FlashcardCore = ({
 
             <Button
               className="bg-slate-700 border-none h-10 w-20 text-center
-          hover:bg-orange-900 cursor-pointer
+          hover:bg-blue-600 cursor-pointer
 
           disabled:pointer-events-none
           disabled:opacity-25"

diff --git a/src/components/Settings/AnalyticsSettings.tsx b/src/components/Settings/AnalyticsSettings.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from "react";
 
 import { Button } from "@material-tailwind/react";
@@ -35,8 +34,9 @@ const AnalyticsSettings: React.FC<AnalyticsSettingsProps> = () => {
     <div className="w-full bg-dark-gray-c-three rounded pb-7 ">
       <h2 className="text-2xl font-semibold mb-0 text-white">Analytics</h2>{" "}
       <p className="text-gray-200 text-sm mb-2 mt-5">
-        Reor tracks anonymous usage data to help improve the app. We never share this personal data. This is solely to track which features are
-        popular. You can disable this at any time:
+        Reor tracks anonymous usage data to help improve the app. We never share
+        this personal data. This is solely to track which features are popular.
+        You can disable this at any time:
       </p>
       <Switch
         checked={isAnalyticsEnabled}
@@ -55,7 +55,7 @@ const AnalyticsSettings: React.FC<AnalyticsSettingsProps> = () => {
             // variant="contained"
             placeholder={""}
             onClick={handleSave}
-            className="bg-orange-700 w-[150px] border-none h-8 hover:bg-orange-900 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
+            className="bg-blue-500 w-[150px] border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
           >
             Save
           </Button>

diff --git a/src/components/Settings/DirectorySelector.tsx b/src/components/Settings/DirectorySelector.tsx
@@ -40,7 +40,7 @@ const DirectorySelector: React.FC<DirectorySelectorProps> = ({
   return (
     <div className="flex flex-col items-end">
       <Button
-        className="bg-blue-300 border-none h-10 hover:bg-blue-400 cursor-pointer w-[140px] text-center pt-0 pb-0 pr-2 pl-2"
+        className="bg-blue-500 border-none h-10 hover:bg-blue-600 cursor-pointer w-[140px] text-center pt-0 pb-0 pr-2 pl-2"
         onClick={handleDirectorySelection}
         placeholder={""}
       >

diff --git a/src/components/Settings/EmbeddingSettings/modals/NewEmbeddingModelBothTypes.tsx b/src/components/Settings/EmbeddingSettings/modals/NewEmbeddingModelBothTypes.tsx
@@ -76,14 +76,14 @@ const NewEmbeddingModelModalBothTypes: React.FC<
         </p>
         <div className="flex">
           <Button
-            className="bg-orange-700 border-none h-8 hover:bg-orange-900 cursor-pointer w-[180px] text-center pt-0 pb-0 pr-2 pl-2 mt-1 mr-2"
+            className="bg-blue-600 border-none h-8 hover:bg-blue-600 cursor-pointer w-[180px] text-center pt-0 pb-0 pr-2 pl-2 mt-1 mr-2"
             onClick={handleModelDirectorySelection}
             placeholder=""
           >
             Attach Local Model
           </Button>
           <Button
-            className="bg-orange-700 border-none h-8 hover:bg-orange-900 cursor-pointer w-[180px] text-center pt-0 pb-0 pr-2 pl-2 mt-1"
+            className="bg-blue-600 border-none h-8 hover:bg-blue-600 cursor-pointer w-[180px] text-center pt-0 pb-0 pr-2 pl-2 mt-1"
             onClick={() => {
               setIsRepoModalOpen(true);
             }}
@@ -100,7 +100,7 @@ const NewEmbeddingModelModalBothTypes: React.FC<
           embedding model. Check out{" "}
           <ExternalLink href="https://www.reorproject.org/docs/documentation/embedding">
             this guide
-          </ExternalLink>
+          </ExternalLink>{" "}
           for more info.{" "}
         </p>
 
@@ -134,7 +134,7 @@ const NewEmbeddingModelModalBothTypes: React.FC<
               embedding model.
             </p> */}
             <Button
-              className="bg-orange-700 border-none h-8 hover:bg-orange-900 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
+              className="bg-blue-500 border-none h-8 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
               onClick={() => {
                 if (huggingfaceRepo) handleSaveHuggingFaceRepo();
               }}

diff --git a/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewLocalEmbeddingModel.tsx
@@ -103,14 +103,14 @@ const NewLocalEmbeddingModelModal: React.FC<
         )}
         <div className="flex justify-between gap-3 pb-2">
           <Button
-            className="bg-transparent border-2 border-blue-300 h-8 hover:bg-blue-400 cursor-pointer w-full text-center pt-0 pb-0 pr-2 pl-2 mt-3 rounded"
+            className="bg-transparent border-2 border-blue-300 h-8 hover:bg-blue-600 cursor-pointer w-full text-center pt-0 pb-0 pr-2 pl-2 mt-3 rounded"
             onClick={onClose}
             placeholder=""
           >
             Discard
           </Button>
           <Button
-            className="bg-blue-400 h-8 hover:bg-transparent border-2 border-blue-800 cursor-pointer w-full text-center pt-0 pb-0 pr-2 pl-2 mt-3 rounded"
+            className="bg-blue-600 h-8 hover:bg-transparent border-2 border-blue-800 cursor-pointer w-full text-center pt-0 pb-0 pr-2 pl-2 mt-3 rounded"
             onClick={saveModelConfigToElectronStore}
             placeholder=""
           >

diff --git a/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx b/src/components/Settings/EmbeddingSettings/modals/NewRemoteEmbeddingModel.tsx
@@ -77,7 +77,7 @@ const NewRemoteEmbeddingModelModal: React.FC<
 
         <div className="w-full flex justify-end pb-2">
           <Button
-            className="bg-blue-300 border-none h-8 hover:bg-blue-400 cursor-pointer w-[120px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
+            className="bg-blue-500 border-none h-8 hover:bg-blue-600 cursor-pointer w-[120px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
             onClick={saveModelConfigToElectronStore}
             placeholder=""
           >

diff --git a/src/components/Settings/GeneralSettings.tsx b/src/components/Settings/GeneralSettings.tsx
@@ -71,7 +71,7 @@ const GeneralSettings: React.FC<GenSettingsProps> = () => {
             // variant="contained"
             placeholder={""}
             onClick={handleSave}
-            className="bg-orange-700 w-[150px] border-none h-8 hover:bg-orange-900 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
+            className="bg-blue-500 w-[150px] border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
           >
             Save
           </Button>
@@ -135,7 +135,7 @@ const GeneralSettings: React.FC<GeneralSettingsProps> = () => {
             // variant="contained"
             placeholder={""}
             onClick={handleSave}
-            className="bg-orange-700 w-[150px] border-none h-8 hover:bg-orange-900 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
+            className="bg-blue-500 w-[150px] border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
           >
             Save
           </Button>

diff --git a/src/components/Settings/InitialSettingsSinglePage.tsx b/src/components/Settings/InitialSettingsSinglePage.tsx
@@ -45,9 +45,7 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({
           </p>
           <div className="flex justify-between items-center mt-10 border-b-2 border-solid border-neutral-700 border-0 pb-4">
             <div className="flex-col w-80">
-              <p className="text-gray-100 m-0">
-                Choose your vaut directory here:
-              </p>
+              <p className="text-gray-100 m-0">Vault Directory</p>
               <p className="text-xs text-gray-100 w-50 m-0 pt-1 opacity-40">
                 Your vault directory doesn&apos;t need to be empty. Only
                 markdown files will be indexed.
@@ -71,7 +69,7 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({
         </div>
         <div className="flex justify-end">
           <Button
-            className="bg-blue-300 mt-4 mb-3  border-none h-10 hover:bg-blue-400 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
+            className="bg-blue-500 mt-4 mb-3  border-none h-10 hover:bg-blue-600 cursor-pointer w-[80px] text-center pt-0 pb-0 pr-2 pl-2"
             onClick={handleNext}
             placeholder=""
           >

diff --git a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
@@ -37,6 +37,7 @@ const DefaultLLMSelector: React.FC<DefaultLLMSelectorProps> = ({
       options={modelOptions}
       selectedValue={defaultLLM}
       onChange={handleDefaultModelChange}
+      centerText={true}
     />
   );
 };

diff --git a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx b/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
@@ -47,11 +47,14 @@ const LLMSettingsContent: React.FC<LLMSettingsContentProps> = ({
   ];
 
   return (
-    <div>
+    <div className="w-[500px] p-5">
       <h2 className="font-semibold mb-4 text-white">LLM</h2>
       {llmConfigs.length > 0 && (
         <div className="flex justify-between items-center w-full gap-5 border-b-2 border-solid border-neutral-700 border-0 pb-2">
-          <h4 className="text-gray-200 text-center font-normal">Default LLM</h4>
+          {/* <h4 className="text-gray-200 text-center font-normal">Default LLM</h4> */}
+          <div className="flex-col">
+            <p className="mt-5 text-gray-100">Default LLM</p>
+          </div>
           <div className="mb-1 w-[140px]">
             <DefaultLLMSelector
               onModelChange={handleModelChange}
@@ -65,6 +68,7 @@ const LLMSettingsContent: React.FC<LLMSettingsContentProps> = ({
       <LLMOptionRow
         title="Local LLM"
         buttonText="Add New Local LLM"
+        description="Attach a local LLM. Reor will download the model for you."
         onClick={() => openModal("newLocalModel")}
       />
       <LLMOptionRow
@@ -121,7 +125,9 @@ const LLMOptionRow: React.FC<{
       <p className="mt-5 text-gray-100">
         {title}
         {description && (
-          <p className="text-gray-200 text-xs mt-2">{description}</p>
+          <p className="text-xs text-gray-100 w-50 m-0 pt-1 opacity-40">
+            {description}
+          </p>
         )}
       </p>
     </div>

diff --git a/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/CloudLLMSetup.tsx
@@ -83,7 +83,7 @@ const CloudLLMSetupModal: React.FC<CloudLLMSetupModalProps> = ({
         </p>
 
         <Button
-          className="bg-blue-300  border-none h-8 hover:bg-blue-400 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mt-1 w-[80px]"
+          className="bg-blue-500  border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mt-1 w-[80px]"
           onClick={handleSave}
           placeholder=""
         >

diff --git a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
@@ -106,7 +106,7 @@ const NewOllamaModelModal: React.FC<NewOllamaModelModalProps> = ({
 
         <div className="pb-2 flex justify-end">
           <Button
-            className="bg-blue-300 border-none h-8 hover:bg-blue-400 cursor-pointer w-[100px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
+            className="bg-blue-500 border-none h-8 hover:bg-blue-600 cursor-pointer w-[100px] text-center pt-0 pb-0 pr-2 pl-2 mt-3"
             onClick={downloadSelectedModel}
             placeholder=""
           >

diff --git a/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx b/src/components/Settings/LLMSettings/modals/RemoteLLMSetup.tsx
@@ -129,7 +129,7 @@ const RemoteLLMSetupModal: React.FC<RemoteLLMModalProps> = ({
 
         <div className="pb-2 flex justify-end">
           <Button
-            className="bg-blue-300 border-none h-8 hover:bg-blue-400 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mt-3 w-[80px]"
+            className="bg-blue-500 border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mt-3 w-[80px]"
             onClick={handleSave}
             placeholder=""
           >

diff --git a/src/components/Settings/TextGenerationSettings.tsx b/src/components/Settings/TextGenerationSettings.tsx
@@ -137,7 +137,7 @@ const TextGenerationSettings: React.FC<TextGenerationSettingsProps> = () => {
             // variant="contained"
             placeholder={""}
             onClick={handleSave}
-            className="bg-orange-700 w-[150px] border-none h-8 hover:bg-orange-900 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
+            className="bg-blue-500 w-[150px] border-none h-8 hover:bg-blue-600 cursor-pointer text-center pt-0 pb-0 pr-2 pl-2 mb-0 mr-4 mt-2"
           >
             Save
           </Button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({ @@
               }`}
             >
               <div
-                className="bg-blue-400 h-full transition-all duration-300 ease-out"
+                className="bg-blue-600 h-full transition-all duration-300 ease-out"
                 style={{ width: `${indexingProgress * 100}%` }}
               ></div>
             </div>
@@ Expand Down @@