Changing init page

src/components/Chat/MessageComponents/ChatSources.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { FileInfoWithContent } from 'electron/main/filesystem/types'
 import { DBEntry } from 'electron/main/vector-database/schema'
 import posthog from 'posthog-js'
-import { Card, CardDescription } from '@/components/ui/card'
+import { CardDescription } from '@/components/ui/card'
 import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card'
 import { useContentContext } from '@/contexts/ContentContext'
 import MarkdownRenderer from '@/components/Common/MarkdownRenderer'
-
+import { Card, ScrollView, CardFooter, YStack, CardHeader } from 'tamagui'
 
 interface ChatSourcesProps {
   contextItems: FileInfoWithContent[] | DBEntry[]
@@ -58,12 +58,9 @@ const ChatSources: React.FC<ChatSourcesProps> = ({ contextItems }) => {
             <HoverCardTrigger>
               <Card
                 className="flex h-10 w-28 shrink-0 cursor-pointer items-center justify-center bg-secondary"
-                hoverStyle={{
-                  shadowRadius: "$4",
-                }}
                 onClick={() => handleOpenContent(getItemPath(contextItem))}
               >
-                <CardDescription className="overflow-hidden break-all px-1 text-center text-xs">
+                <CardDescription className="overflow-hidden break-all text-center text-xs">
                   {truncateName(getItemName(contextItem), 20)}
                 </CardDescription>
               </Card>

src/components/Common/IndexingProgress.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { YStack, H2, SizableText } from 'tamagui'
 
 import CircularProgress from '@mui/material/CircularProgress'
 
@@ -30,10 +31,10 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({ indexingProgress })
 
   return (
     <ReorModal isOpen onClose={() => {}} hideCloseButton>
-      <div className="mx-3 mb-3 mt-2 h-[100px] w-[500px]">
-        <h6 className="my-2 text-2xl font-semibold text-white">
+      <YStack className="mx-3 mb-3 mt-2 h-[100px] w-[500px]">
+        <H2 marginY={2} fontWeight="semi-bold" fontSize="xl" color="$gray13">
           {indexingProgress === 0 ? 'Initializing vector database...' : 'Indexing files...'}
-        </h6>
+        </H2>
         <div
           className={`mb-2 h-4 w-full overflow-hidden rounded-full border-2 border-gray-400 ${
             indexingProgress !== 0 ? 'bg-neutral-800' : ''
@@ -46,14 +47,14 @@ const IndexingProgress: React.FC<IndexingProgressProps> = ({ indexingProgress })
         </div>
         <div className="flex">
           {indexingProgress === 0 && (
-            <CircularProgress size={20} thickness={7} style={{ color: 'white' }} className="mr-2" />
+            <CircularProgress size={20} thickness={7} className="mr-2" />
           )}
 
-          <span className="text-sm font-semibold text-white">
+          <SizableText fontSize={14} color="$gray13">
             {indexingProgress > 0 && <>{Math.round(indexingProgress * 100)}% -</>} {eta}
-          </span>
+          </SizableText>
         </div>
-      </div>
+      </YStack>
     </ReorModal>
   )
 }

src/components/Settings/EmbeddingSettings/InitialEmbeddingSettings.tsx

@@ -5,6 +5,7 @@ import { EmbeddingModelConfig } from 'electron/main/electron-store/storeConfig'
 
 import NewRemoteEmbeddingModelModal from './modals/NewRemoteEmbeddingModel'
 import EmbeddingModelSelect from './EmbeddingModelSelect'
+import { XStack, YStack, SizableText } from 'tamagui'
 
 interface InitialEmbeddingModelSettingsProps {
   setErrorMsg: (msg: string) => void
@@ -47,16 +48,16 @@ const InitialEmbeddingModelSettings: React.FC<InitialEmbeddingModelSettingsProps
   }
 
   return (
-    <div className="flex w-full items-center justify-between rounded bg-dark-gray-c-three">
-      <div className="flex flex-col">
-        <p className="mb-0 text-gray-100">Embedding Model</p>{' '}
-        <p className="text-xs text-gray-400">
+    <XStack className="flex w-full items-center justify-between rounded">
+      <YStack className="flex flex-col">
+        <SizableText color="$gray13" fontWeight={600} fontSize={16}>Embedding Model</SizableText>
+        <SizableText color="$black" fontSize={12} fontWeight={300} marginTop="$2">
           Choose a recommended model or a{' '}
           <a className="underline" onClick={() => setShowNewEmbeddingModelModal(true)}>
             custom embedding model
           </a>
-        </p>
-      </div>
+        </SizableText>
+      </YStack>
       <div className="w-[150px]">
         <EmbeddingModelSelect
           selectedModel={selectedModel}
@@ -74,7 +75,7 @@ const InitialEmbeddingModelSettings: React.FC<InitialEmbeddingModelSettingsProps
           updateEmbeddingModels()
         }}
       />
-    </div>
+    </XStack>
   )
 }
 

src/components/Settings/InitialSettingsSinglePage.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { Button } from '@material-tailwind/react'
-
+import { YStack, H3, SizableText, XStack } from 'tamagui'
 import ReorModal from '../Common/Modal'
 
 import DirectorySelector from './DirectorySelector'
@@ -27,31 +27,31 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({ readyForInd
 
   return (
     <ReorModal isOpen onClose={() => {}} hideCloseButton>
-      <div className="ml-2 mr-4 w-[620px] py-3">
-        <div className="ml-2 mt-0 h-[450px]  ">
-          <h2 className="mb-0 text-center text-2xl font-semibold text-white">Welcome to the Reor Project</h2>
-          <p className="mt-2 text-center text-gray-100">
+      <YStack className="ml-2 mr-4 w-[620px] py-3">
+        <YStack className="ml-2 mt-0 h-[450px]  ">
+          <H3 color="$gray13" fontWeight="semi-bold" className="mb-0 text-center text-2xl">Welcome to the Reor Project</H3>
+          <SizableText color="$gray11" fontWeight={400} marginTop="$4" textAlign="center">
             Reor is a private AI personal knowledge management tool. Each note will be saved as a markdown file to a
             vault directory on your machine.
-          </p>
-          <div className="mt-10 flex items-center justify-between border-0 border-b-2 border-solid border-neutral-700 pb-4">
-            <div className="w-80 flex-col">
-              <p className="m-0 text-gray-100">Vault Directory</p>
-              <p className="m-0 pt-1 text-xs text-gray-100 opacity-40">
+          </SizableText>
+          <XStack className="mt-10 flex items-center justify-between border-0 border-b-2 border-solid border-neutral-700 pb-4">
+            <YStack className="w-80 flex-col">
+              <SizableText color="$gray13" fontWeight={600} fontSize={16}>Vault Directory</SizableText>
+              <SizableText color="$black" fontSize={14} fontWeight={300} className="m-0 pt-1">
                 Your vault directory doesn&apos;t need to be empty. Only markdown files will be indexed.
-              </p>
-            </div>
+              </SizableText>
+            </YStack>
             <div className="flex-col">
               <DirectorySelector setErrorMsg={setDirectoryErrorMsg} />
               {showError && directoryErrorMsg && <p className="text-xs text-red-500">{directoryErrorMsg}</p>}
             </div>
-          </div>
+          </XStack>
           <div className="mt-2 border-0 border-b-2 border-solid border-neutral-700 pb-2">
             <InitialEmbeddingModelSettings setErrorMsg={setEmbeddingErrorMsg} />
             {showError && embeddingErrorMsg && <p className="text-xs text-red-500">{embeddingErrorMsg}</p>}
           </div>
           <InitialSetupLLMSettings />
-        </div>
+        </YStack>
         <div className="flex justify-end">
           <Button
             className="mb-3 mt-4 h-10  w-[80px] cursor-pointer border-none bg-blue-500 px-2 py-0 text-center hover:bg-blue-600"
@@ -61,7 +61,7 @@ const InitialSetupSinglePage: React.FC<OldInitialSettingsProps> = ({ readyForInd
             Next
           </Button>
         </div>
-      </div>
+      </YStack>
     </ReorModal>
   )
 }

src/components/TitleBar/NavigationButtons.tsx

@@ -7,6 +7,7 @@ import { removeFileExtension } from '@/lib/file'
 import '../../styles/history.scss'
 import { useFileContext } from '@/contexts/FileContext'
 import { useContentContext } from '@/contexts/ContentContext'
+import { YStack, XStack, View, Text } from 'tamagui'
 
 const NavigationButtons: React.FC = () => {
   const [showMenu, setShowMenu] = useState<string>('')
@@ -91,27 +92,29 @@ const NavigationButtons: React.FC = () => {
     return (
       showMenu !== '' &&
       menuChild.length > 0 && (
-        <div
-          ref={ref}
-          // eslint-disable-next-line tailwindcss/no-custom-classname
-          className="history-menu"
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          style={{
-            left: `${offsetLeft}px`,
-            top: `${offsetTop + offsetHeight}px`,
-          }}
-        >
-          <ul>
-            {menuChild.map((pathOrChatID) => (
-              <li key={pathOrChatID}>
-                <div key={pathOrChatID} onClick={() => goSelected(pathOrChatID)}>
-                  {removeFileExtension(pathOrChatID.replace(/\\/g, '/').split('/').pop() || '')}
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
+      <View
+        ref={ref}
+        tabIndex={0}
+        position="absolute"
+        left={offsetLeft}
+        top={offsetTop + offsetHeight}
+      >
+        <YStack>
+          {menuChild.map((pathOrChatID) => (
+            <XStack
+              key={pathOrChatID}
+              padding="$3"
+              cursor="pointer"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              onPress={() => goSelected(pathOrChatID)}
+            >
+              <Text>
+                {removeFileExtension(pathOrChatID.replace(/\\/g, '/').split('/').pop() || '')}
+              </Text>
+            </XStack>
+          ))}
+        </YStack>
+      </View>
       )
     )
   }

src/components/TitleBar/TitleBar.tsx

@@ -3,7 +3,8 @@ import { BsChatLeftDots, BsChatLeftDotsFill } from 'react-icons/bs'
 import NavigationButtons from './NavigationButtons'
 import ExternalLink from '../Common/ExternalLink'
 import { useChatContext } from '@/contexts/ChatContext'
-import { XStack } from 'tamagui'
+import { XStack, SizableText } from 'tamagui'
+import { MessageSquareMore, MessageSquareOff } from '@tamagui/lucide-icons'
 
 export const titleBarHeight = '30px'
 
@@ -32,19 +33,23 @@ const TitleBar: React.FC = () => {
         className="electron-no-drag mt-[0.5px] flex items-center justify-end"
         style={platform === 'win32' ? { marginRight: '8.5rem' } : { marginRight: '0.3rem' }}
       >
-        <ExternalLink href="https://forms.gle/8H4GtEcE6MBnNAUa7" className="decoration-gray-200">
-          <span className="mr-2 cursor-pointer text-sm text-gray-200 hover:text-gray-300">Feedback</span>
+        <ExternalLink href="https://forms.gle/8H4GtEcE6MBnNAUa7" className="cursor-pointer">
+          <SizableText 
+            color="$gray13" 
+            fontSize={14} 
+            className="mr-2"
+          >Feedback</SizableText>
         </ExternalLink>
         {showChatbot ? (
-          <BsChatLeftDotsFill
-            className="electron-no-drag mr-1 mt-[0.2rem] -scale-x-100 cursor-pointer p-[2px] text-gray-100"
-            size={22}
+          <MessageSquareOff
+            className="electron-no-drag mr-1 mt-[0.2rem] ml-1 -scale-x-100 cursor-pointer p-[2px] text-gray-100"
+            size={19}
             title="Hide Similar Files"
             onClick={() => setShowChatbot((show) => !show)}
           />
         ) : (
-          <BsChatLeftDots
-            className="electron-no-drag mr-1 mt-[0.2rem] -scale-x-100 cursor-pointer p-[2px] text-gray-100"
+          <MessageSquareMore
+            className="electron-no-drag mr-1 mt-[0.2rem ml-1 -scale-x-100 cursor-pointer p-[2px] text-gray-100"
             size={22}
             title="Show Chatbot"
             onClick={() => setShowChatbot((show) => !show)}