Revize f22a2126

FIX: colors fix
re #10896

src/components/item/ItemTabBar.tsx

@@ -1 @@
-import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast, Divider } from "native-base";
+import { HStack, CircleIcon, ScrollView, Pressable, Text, VStack, useToast, Divider } from "native-base";
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
 import { Certainty, Concordance } from "../../types/item";
 import LoadingBox from "../loading/LoadingBox";
@@ -74 +74 @@
                     </HStack>
                 </HStack>
             </HStack> */
-            <HStack h="16" backgroundColor={"#F5F4F1"}>
+            <HStack h="16" backgroundColor={"primary.100"}>
                 <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                     {concordances && concordances.length > 0 &&
                         <HStack flex="1" justifyContent="center" width="100%">
@@ -87 +87 @@
                                                     size="2"
                                                     color={CertaintyWithColors[concordances?.[i]?.cert ?? Certainty.Unknown].color}
                                                 />}
-                                                <Text marginLeft={2} color={i == index ? "#654B07" : "#8F6A0A"} bold fontSize={"md"}>
+                                                <Text marginLeft={2} color={i == index ? "primary.500" : "primary.300"} bold fontSize={"md"}>
                                                     {concordances?.[i]?.id}
                                                 </Text>
                                             </HStack>
-                                            {i == index && <Divider color="primary" borderWidth={2} borderRadius={5} width={85} mt={5} />}
+                                            {i == index && <Divider outlineColor={"primary.500"} borderWidth={2} borderRadius={5} width={85} mt={5} />}
                                         </VStack>
 
                                     </Pressable>
@@ -105 +105 @@
                                                 size="2"
                                                 color={CertaintyWithColors[concordances?.[0]?.cert ?? Certainty.Unknown].color}
                                             />}
-                                            <Text marginLeft={2} color={0 == 0 ? "#654B07" : "#8F6A0A"} bold fontSize={"md"}>
+                                            <Text marginLeft={2} color={"primary.500"} bold fontSize={"md"}>
                                                 {concordances?.[0]?.id}
                                             </Text>
                                         </HStack>
-                                        {0 == 0 && <Divider color="#654B07" borderWidth={2} borderRadius={5} width={85} mt={5} />}
+                                        {0 == 0 && <Divider color="primary.500" borderWidth={2} borderRadius={5} width={85} mt={5} />}
                                     </VStack>
 
                                 </Pressable>

src/components/item/ItemView.tsx

@@ -16 +16 @@
 import { RootStackParamList } from "../../pages/Navigation"
 import { select } from "d3"
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
+import RenderHTML from "react-native-render-html"
 
 interface ItemDetailProps {
     item: Item,
@@ -49 +50 @@
                         <VStack>
                             <HStack marginLeft={2.5} alignItems={"center"}>
                                 <VStack flex={1} marginTop={3.5}>
-                                    <Text fontSize={13} color="#4D4D4D">
+                                    <Text fontSize={13} fontWeight={"light"}>
                                         {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                     </Text>
-                                    <Heading marginTop={1} fontSize={18} color="#4D4D4D">
+                                    <Heading marginTop={1} fontSize={18}>
                                         {item.workName}
                                     </Heading>
 
                                 </VStack>
                                 <Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
-                                    <Button variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={1.5} >
-                                        <Text color="#654B07" fontSize={14}>
+                                    <Button variant="outline" backgroundColor={"secondary.500"} borderRadius={8} size="sm" padding={1.5} >
+                                        <Text color="primary.500" fontSize={14}>
                                             {item?.concordances?.[0]?.id}
                                         </Text>
                                     </Button>
@@ -69 +70 @@
 
 
 
-                            <View marginTop={5} backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
+                            <View marginTop={5} backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={2}>
                                 {item.inventoryItem &&
                                     <VStack>
                                         <Text italic>
-                                            <Text color="#654B07" italic fontWeight={"semibold"}>Inventory item: </Text>
+                                            <Text color="primary.500" italic fontWeight={"semibold"}>Inventory item: </Text>
                                             {item.inventoryItem}
                                         </Text>
-                                        <Text italic marginTop="2.5%">
+                                        <Text italic marginTop="2">
                                             {item.searchSubjects != undefined && item?.searchSubjects?.map((subject, index) => (
                                                 subject != "" ?
                                                     item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
@@ -87 +88 @@
                                     </VStack>}
                             </View>
                             {item.fullView && item.images && item.images.length > 0 && (
-                                <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
+                                <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={2}>
 
                                     <Box style={{ backgroundColor: item.images[selectedImage].relationship_type != RelationshipType.IdentifiedArtwork ? "#B3B3B3" : CertaintyWithColors[item.images[selectedImage].cert ?? Certainty.Unknown].color }}
                                         marginTop={2.5} width={Dimensions.get('window').width - 110} alignItems="center" borderTopRadius={10} >
@@ -131 +132 @@
                                 </VStack>
                             )}
                             {item.fullView && (
-                                <View marginTop={5} backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2} marginBottom={5}>
+                                <View marginTop={5} backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={2} marginBottom={5}>
                                     {item.authorName &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Author name: </Text>
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Author name: </Text>
                                                 {item.images?.[selectedImage]?.author}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Title: </Text>
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Title: </Text>
                                                 {item.images?.[selectedImage].title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Institution: </Text>
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Institution: </Text>
                                                 {item.images?.[selectedImage].institution.name && `${item.images?.[selectedImage].institution.name}`}
                                                 {item.images?.[selectedImage].institution.inventoryNumber && `, Inv. No. ${item.images?.[selectedImage].institution.inventoryNumber}`}
                                                 {item.images?.[selectedImage].institution.city && `, ${item.images?.[selectedImage].institution.city}`}
@@ -159 +160 @@
                                     {item.repository &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Repository: </Text>
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Repository: </Text>
                                                 {item.images?.[selectedImage].repository}
                                             </Text>
                                         </HStack>}
                                     {item.images?.[selectedImage].provenance &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Provenance: </Text>
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Provenance: </Text>
                                                 {item.images?.[selectedImage].provenance}
                                             </Text>
                                         </HStack>}
                                     {item.images?.[selectedImage].description &&
                                         <HStack>
                                             <Text marginTop={2.5}>
-                                                <Text color="#654B07" italic fontWeight={"semibold"}>Description: </Text>
-                                                {item.images?.[selectedImage].description}
+                                                <Text color="primary.500" italic fontWeight={"semibold"}>Description: </Text>
                                             </Text>
+                                            <RenderHTML contentWidth={200} source={{html: item.images?.[selectedImage].description}} />
                                         </HStack>}
                                 </View>)}
 
@@ -185 +186 @@
                                     <Button
                                         onPress={() => props.navigation.navigate("Plan", { roomId: item?.room?.id, placeId: undefined })}
                                         variant={"link"}
-                                        backgroundColor={"#F4DFAB"}
+                                        backgroundColor={"secondary.500"}
                                         borderRadius={7}
                                         marginTop={0}
                                         marginBottom={5}
@@ -254 +255 @@
             :
             (<VStack>
                 <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={2.5} marginLeft={2.5} marginRight={2.5}>
-                    <Text fontWeight="semibold" mt={4} ml={2} fontSize="md" color="#4D4D4D">Show related comments</Text>
+                    <Text fontWeight="semibold" mt={4} ml={2} fontSize="md" >Show related comments</Text>
                     <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="lg" marginRight={2} />
                 </Flex>
                 <Box >

src/components/notes/NoteView.tsx

@@ -1 @@
-import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog, ScrollView } from "native-base";
+import {
+    HStack,
+    Box,
+    Text,
+    Image,
+    VStack,
+    Flex,
+    Pressable,
+    DeleteIcon,
+    Button,
+    Center,
+    Avatar,
+    TextArea,
+    AlertDialog,
+    ScrollView,
+    KeyboardAvoidingView
+} from "native-base";
 import { Note } from "../../types/note";
 import { EditIcon } from "../general/Icons";
 import { AVATAR_URL } from "../../api/constants";
 import { useState } from "react";
 import React from "react";
 import NotesListView from "./NotesListView";
+import {Platform} from "react-native"
 
 const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any, parentId?: string, higlighted?: boolean }) => {
     const note = props.note;
@@ -83 +100 @@
     }
 
     return (
-        <HStack style={props.higlighted && { backgroundColor: "#FFF8E1", borderBottomColor: '#FFD54F', borderBottomWidth: 1.5, paddingBottom: 10 }} marginTop={5}>
+
+        <HStack backgroundColor={props.higlighted ? "secondary.50" : "white"} borderBottomColor={props.higlighted ? "secondary.800" : ""}
+                borderBottomWidth={props.higlighted ? 1.5 : 0} paddingBottom={props.higlighted ? 10 : 0} marginTop={5}>
             <Box width="12" height="12" marginTop="2">
                 <Avatar bg={note.noteColor} width={10} height={10} source={{
                     uri: AVATAR_URL + "/" + note.avatarUrl
@@ -100 +119 @@
                     {note.username}
                 </Text>
 
-                <Text italic color="#8F8F8F" fontSize="xs">
+                <Text italic color="trueGray.500" fontSize="xs">
                     {getDateString(note.createdTime)}
                 </Text>
 
@@ -116 +135 @@
 
                     {note.items && note.items.length > 0 &&
                         <Flex marginLeft={1} flex={0}>
-                            <Button p={1} variant="solid" backgroundColor="#F4DFAB" borderRadius={8} size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
-                                <Text color="#654B07" fontSize={12}>
+                            <Button p={1} variant="solid" backgroundColor="secondary.500" borderRadius={8} size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
+                                <Text color="primary.500" fontSize={12}>
                                     {note.items[0]}
                                 </Text>
                             </Button>
@@ -132 +151 @@
                     <Flex direction="row" alignItems="center">
                         {props.handleReply != null &&
                             <Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
-                                <Text color="#8F8F8F">Reply</Text>
+                                <Text color="trueGray.500">Reply</Text>
                             </Pressable>}
                         {!props.parentId && note.replies && note.replies.length > 0 &&
                             <Pressable marginLeft={3} onPress={() => toggleShowReplies()}>
                                 {!showReplies ?
-                                    <Text color="#8F8F8F">{note.replies.length} replies</Text>
+                                    <Text color="trueGray.500">{note.replies.length} replies</Text>
                                     :
-                                    <Text color="#8F8F8F">Hide</Text>
+                                    <Text color="trueGray.500">Hide</Text>
                                 }
 
                             </Pressable>}
@@ -150 +169 @@
                             isEdited &&
                             <>
                                 < Pressable onPress={saveEdit} marginRight={5}>
-                                    <Text color="#8F8F8F">Save</Text>
+                                    <Text color="trueGray.500">Save</Text>
                                 </Pressable>
                                 <Pressable onPress={toggleEdited} marginRight={6}>
-                                    <Text color="#8F8F8F">Cancel</Text>
+                                    <Text color="trueGray.500">Cancel</Text>
                                 </Pressable>
                             </>}
                         {props.handleEdit &&
                             !isEdited &&
                             <Pressable onPress={toggleEdited} marginRight={5}>
-                                <EditIcon color="#8F8F8F" />
+                                <EditIcon color="trueGray.500" />
                             </Pressable>}
                         {props.handleDelete &&
                             <Pressable onPress={deleteClicked}>

src/components/notes/NotesListView.tsx

@@ -1 @@
-import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast } from "native-base";
+import {
+    VStack,
+    Box,
+    Text,
+    HStack,
+    ScrollView,
+    Flex,
+    Button,
+    CloseIcon,
+    IconButton,
+    TextArea,
+    useToast,
+    KeyboardAvoidingView
+} from "native-base";
 import { Note } from "../../types/note";
 import NoteView from "./NoteView";
 import { MessageIcon } from "../general/Icons";
@@ -99 +112 @@
     };
 
     return (
+        <KeyboardAvoidingView
+            h={ {lg: "auto"} }
+            behavior={ "padding" }
+            keyboardVerticalOffset={ 600 }
+            mb={ 2 }
+        >
         <VStack >
             <Box height={props.height - (replyingTo ? 40 : 0) ?? undefined} marginBottom={2}>
                 {/* Notes */}
@@ -146 +165 @@
 
                     {/* Replying to */}
                     {replyingTo != null &&
-                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{ backgroundColor: "#FFF8E1" }}>
+                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} backgroundColor={"secondary.50"}>
                             <Text>Replying to {replyingTo.userName}</Text>
-                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20} />
+                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft={-1} marginRight={20} />
                         </Flex>
                     }
 
@@ -174 +193 @@
             }
             <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
         </VStack >
+        </KeyboardAvoidingView>
     );
 }
 

src/components/plan/CastlePlanView.tsx

@@ -291 +291 @@
             borderWidth={fullScreenMode ? 0 : 1}
         >
             {/* control panel */}
-            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
-                <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
+            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 30 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
+                <Pressable padding={1.5} backgroundColor={"primary.500"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
                     <FullscreenIcon color="white" />
                 </Pressable>
                 {
                     selectedRoom &&
-                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
+                    <Pressable padding={1.5} backgroundColor={"primary.500"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
                         <ExitfullscreenIcon color="white" />
                     </Pressable>
                 }
@@ -354 +354 @@
                                             <Path
                                                 id={"roomList_" + index.toString()}
                                                 d={room.svg_path}  // The path data defining the shape of the room
-                                                fill={selectedRoom && room.id == selectedRoom.id ? "#E6F7FF" : "white"}        // Fill the room shape with no color
+                                                fill={selectedRoom && room.id == selectedRoom.id ? "primary.100" : "white"}        // Fill the room shape with no color
                                                 stroke="#66B2FF"       // Outline color
-                                                strokeWidth={0.3}     // Outline width
+                                                strokeWidth={1.0}     // Outline width
                                                 fillOpacity={selectedRoom && room.id == selectedRoom.id ? 1 : 0.2}
                                             />
                                         )

src/pages/NotesViewPage.tsx

@@ -1 +1 @@
 import React, { useCallback, useEffect, useState } from "react"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
-import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack, useToast } from "native-base"
+import {
+  Box,
+  Button,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Flex,
+  HStack,
+  MinusIcon,
+  Popover,
+  Switch,
+  Text,
+  VStack,
+  useToast,
+  KeyboardAvoidingView
+} from "native-base"
 import { SortOptions } from "../types/general"
 import { Note } from "../types/note"
 import NotesListView from "../components/notes/NotesListView"
@@ -13 +27 @@
 import { ErrorToast } from "../components/toast/ErrorToast"
 import { InfoToast } from "../components/toast/InfoToast"
 
-import { Dimensions } from "react-native";
+import {Dimensions, Platform} from "react-native";
 
 const NotesViewPage = ({ navigation }: DrawerScreenProps<RootStackParamList, 'Notes'>) => {
 
@@ -143 +157 @@
 
 
   return (
-    <Box>
-      <VStack>
-        <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={1} marginLeft={2.5} marginRight={2.5}>
-          <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="#4D4D4D">General comments</Text>
-          <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="lg" marginRight={2} />
-        </Flex>
-        <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={-1} marginLeft={2.5} marginRight={2.5}>
-          <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="#4D4D4D">My comments</Text>
-          <Switch padding={0} isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="lg" marginRight={2} />
-        </Flex>
-        <Popover // @ts-ignore
-          trigger={triggerProps => {
-            return <Button marginLeft={4} marginBottom={2} width={150} backgroundColor="#F4DFAB" {...triggerProps} onPress={() => setIsSortOpen(true)}
-              borderRadius={7}
-              rightIcon={(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (getSortIcon(sortSettings.date != SortOptions.None ? sortSettings.date : sortSettings.items, "xs", "#654B07")) : undefined}
-            >
-              <Text fontSize={14} color="#654B07">
-                Sort {(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (sortSettings.date != SortOptions.None ? "by date" : "by items") : ""}
-              </Text>
-            </Button>;
-          }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
-          <Popover.Content w="48">
-            <Popover.Arrow />
-            <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
-            <Popover.Header><Text fontSize={"md"} color="#654B07">Sort Options</Text></Popover.Header>
-            <Popover.Body>
-              <VStack>
-                <Button size="md" variant="outline" onPress={() => handleSortChanged("items", sortSettings)}
-                  rightIcon={getSortIcon(sortSettings.items, "sm", "#654B07")}
+
+        <Box>
+          <VStack>
+            <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={1} marginLeft={2.5} marginRight={2.5}>
+              <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="primary.500">General comments</Text>
+              <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="md" marginRight={2} />
+            </Flex>
+            <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={0} marginLeft={2.5} marginRight={2.5}>
+              <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="primary.500" >My comments</Text>
+              <Switch padding={0} isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="md" marginRight={2} />
+            </Flex>
+            <Popover // @ts-ignore
+              trigger={triggerProps => {
+                return <Button marginLeft={4} marginBottom={2} width={150} backgroundColor="secondary.500" {...triggerProps} onPress={() => setIsSortOpen(true)}
+                  borderRadius={7}
+                  rightIcon={(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (getSortIcon(sortSettings.date != SortOptions.None ? sortSettings.date : sortSettings.items, "xs", "primary.500")) : undefined}
                 >
-                  Items</Button>
-                <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date", sortSettings)}
-                  rightIcon={getSortIcon(sortSettings.date, "sm", "#654B07")}>
-                  Date</Button>
-              </VStack>
-            </Popover.Body>
-            <Popover.Footer justifyContent="flex-end">
-              <Button.Group space={2}>
-                <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
-                  Cancel
-                </Button>
-                <Button backgroundColor={"#F4DFAB"} onPress={() => { setIsSortOpen(false); getNotes() }}>
-                  <Text color="#654B07">
-                    Save
+                  <Text fontSize={14} color="primary.500">
+                    Sort {(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (sortSettings.date != SortOptions.None ? "by date" : "by items") : ""}
                   </Text>
-                </Button>
-              </Button.Group>
-            </Popover.Footer>
-          </Popover.Content>
-        </Popover>
-        {
-          notesLoading ? (
-            <LoadingBox text="Loading notes" />
-          )
-            :
-            (<NotesListView height={Dimensions.get('window').height - 307} notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
-        }
-
-
-      </VStack>
-    </Box>
+                </Button>;
+              }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
+              <Popover.Content w="48">
+                <Popover.Arrow />
+                <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
+                <Popover.Header><Text fontSize={"md"} color="primary.500">Sort Options</Text></Popover.Header>
+                <Popover.Body>
+                  <VStack>
+                    <Button size="md" variant="outline" onPress={() => handleSortChanged("items", sortSettings)}
+                      rightIcon={getSortIcon(sortSettings.items, "sm", "primary.500")}
+                    >
+                      Items</Button>
+                    <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date", sortSettings)}
+                      rightIcon={getSortIcon(sortSettings.date, "sm", "primary.500")}>
+                      Date</Button>
+                  </VStack>
+                </Popover.Body>
+                <Popover.Footer justifyContent="flex-end">
+                  <Button.Group space={2}>
+                    <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button backgroundColor={"secondary.500"} onPress={() => { setIsSortOpen(false); getNotes() }}>
+                      <Text color="primary.500">
+                        Save
+                      </Text>
+                    </Button>
+                  </Button.Group>
+                </Popover.Footer>
+              </Popover.Content>
+            </Popover>
+            {
+              notesLoading ? (
+                <LoadingBox text="Loading notes" />
+              )
+                :
+                (<NotesListView height={Dimensions.get('window').height - 400} notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
+            }
+
+
+          </VStack>
+        </Box>
   );
 }
 

src/pages/PlanViewPage.tsx

@@ -277 +277 @@
                         }
 
                       }}
-                      backgroundColor={"#654B07"}
+                      backgroundColor={"primary.500"}
                       variant="subtle"
                       borderRadius={10}
                       size={"sm"}