Make label Clickable

Fix changing URL for selfhosted
Update styling for calendar and thingview

src/utils/TokenManager.jsx

@@ -25,6 +25,7 @@ class ApiManager {
   }
   updateApiURL(url) {
     this.customServerURL = url
+    this.init()
   }
 }
 

src/views/Authorization/LoginSettings.jsx

@@ -1,28 +1,18 @@
-import GoogleIcon from '@mui/icons-material/Google'
+import { Preferences } from '@capacitor/preferences'
 import {
-  Avatar,
   Box,
   Button,
   Container,
-  Divider,
-  IconButton,
   Input,
   Sheet,
   Snackbar,
   Typography,
 } from '@mui/joy'
 import React from 'react'
-import { LoginSocialGoogle } from 'reactjs-social-login'
-import { API_URL, GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config'
-import Logo from '../../Logo'
-import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
-import { Capacitor } from '@capacitor/core'
-import { Settings } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
-import { Preferences } from '@capacitor/preferences'
+import { API_URL } from '../../Config'
-
+import Logo from '../../Logo'
-
+import { apiManager } from '../../utils/TokenManager'
-
 const LoginSettings = () => {
   const [error, setError] = React.useState(null)
   const Navigate = useNavigate()
@@ -30,7 +20,7 @@ const LoginSettings = () => {
   const [serverURL, setServerURL] = React.useState('')
 
   React.useEffect(() => {
-    Preferences.get({ key: 'customServerUrl' }).then((result) => {
+    Preferences.get({ key: 'customServerUrl' }).then(result => {
       setServerURL(result.value || API_URL)
     })
   }, [])
@@ -40,11 +30,7 @@ const LoginSettings = () => {
   }
 
   return (
-    <Container
+    <Container component='main' maxWidth='xs'>
-      component='main'
-      maxWidth='xs'
-
-    >
       <Box
         sx={{
           marginTop: 4,
@@ -80,10 +66,6 @@ const LoginSettings = () => {
             </span>
           </Typography>
 
-
-
-
-              
           <Typography level='body2' alignSelf={'start'} mt={4}>
             Server URL
           </Typography>
@@ -101,10 +83,12 @@ const LoginSettings = () => {
           />
 
           <Typography mt={1} level='body-xs'>
-  Change the server URL to connect to a different server, such as your own self-hosted Donetick server.
+            Change the server URL to connect to a different server, such as your
+            own self-hosted Donetick server.
           </Typography>
           <Typography mt={1} level='body-xs'>
-  Please ensure to include the protocol (http:// or https://) and the port number if necessary (default Donetick port is 2021).
+            Please ensure to include the protocol (http:// or https://) and the
+            port number if necessary (default Donetick port is 2021).
           </Typography>
           <Button
             fullWidth
@@ -117,10 +101,12 @@ const LoginSettings = () => {
               border: 'moccasin',
               borderRadius: '8px',
             }}
-              
             onClick={() => {
               if (serverURL === '') {
-                    Preferences.set({ key: 'customServerUrl', value: API_URL }).then(() => {
+                Preferences.set({
+                  key: 'customServerUrl',
+                  value: API_URL,
+                }).then(() => {
                   Navigate('/login')
                 })
                 return
@@ -129,14 +115,14 @@ const LoginSettings = () => {
                 setError('Invalid server URL')
                 return
               }
-                  Preferences.set({ key: 'customServerUrl', value: serverURL }).then(() => {
+              Preferences.set({
+                key: 'customServerUrl',
+                value: serverURL,
+              }).then(() => {
+                apiManager.updateApiURL(serverURL + '/api/v1')
                 Navigate('/login')
-                  
+              })
-                  }
+            }}
-                )
-                }
-              }
-                 
           >
             Save
           </Button>
@@ -145,7 +131,6 @@ const LoginSettings = () => {
             size='lg'
             variant='soft'
             color='danger'
-
             sx={{
               width: '100%',
 
@@ -153,14 +138,13 @@ const LoginSettings = () => {
               border: 'moccasin',
               borderRadius: '8px',
             }}
-              
             onClick={() => {
-                  Preferences.set({ key: 'customServerUrl', value: API_URL }).then(() => {
+              Preferences.set({ key: 'customServerUrl', value: API_URL }).then(
+                () => {
                   Navigate('/login')
-                  })
+                },
-                }
+              )
-              }
+            }}
-                 
           >
             Cancel and Reset
           </Button>

src/views/Authorization/LoginView.jsx

@@ -140,6 +140,7 @@ const LoginView = () => {
             boxShadow: 'md',
           }}
         >
+          {Capacitor.isNativePlatform() && (
             <IconButton
               //  on top right of the screen:
               sx={{
@@ -155,12 +156,7 @@ const LoginView = () => {
               {' '}
               <Settings />
             </IconButton>
-          {/* <img
+          )}
-            src='/src/assets/logo.svg'
-            alt='logo'
-            width='128px'
-            height='128px'
-          /> */}
           <Logo />
 
           <Typography level='h2'>

src/views/ChoreEdit/ChoreView.jsx

@@ -435,6 +435,7 @@ const ChoreView = () => {
               sx={{
                 p: 2,
                 borderRadius: 'lg',
+                mb: 1,
               }}
             >
               <IconButton

src/views/Chores/ChoreCard.jsx

@@ -194,7 +194,7 @@ const ChoreCard = ({
           setTimeoutId(null)
           setSecondsLeftToCancel(null)
         })
-    }, 3000)
+    }, 2000)
 
     setTimeoutId(id)
   }
@@ -529,9 +529,24 @@ const ChoreCard = ({
                   )}
                   {chore.labelsV2?.map((l, index) => {
                     return (
+                      <div
+                        role='none'
+                        tabIndex={0}
+                        onClick={e => {
+                          e.stopPropagation()
+                          onChipClick({ label: l })
+                        }}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.stopPropagation()
+                            onChipClick({ label: l })
+                          }
+                        }}
+                        style={{ display: 'inline-block', cursor: 'pointer' }} // Make the wrapper clickable
+                        key={`chorecard-${chore.id}-label-${l.id}`}
+                      >
                         <Chip
                           variant='solid'
-                        key={`chorecard-${chore.id}-label-${l.id}`}
                           color='primary'
                           sx={{
                             position: 'relative',
@@ -552,6 +567,7 @@ const ChoreCard = ({
                         >
                           {l?.name}
                         </Chip>
+                      </div>
                     )
                   })}
                 </Box>

src/views/Chores/MyChores.jsx

@@ -426,7 +426,6 @@ const MyChores = () => {
               <Search />
             </IconButton>
           )}
-          <Divider orientation='vertical' />
 
           <IconButtonWithMenu
             title='Group by'
@@ -632,6 +631,7 @@ const MyChores = () => {
                   key={section.name + index}
                   sx={{
                     my: 0,
+                    px: 0,
                   }}
                   expanded={Boolean(openChoreSections[index])}
                 >

src/views/Chores/Sidepanel.jsx

@@ -31,7 +31,7 @@ const Sidepanel = ({ chores }) => {
   }
   return (
     <Sheet
-      variant='outlined'
+      variant='plain'
       sx={{
         p: 2,
         // borderRadius: 'sm',

src/views/Things/ThingsView.jsx

@@ -64,15 +64,15 @@ const ThingCard = ({
 
   return (
     <Card
-      variant='outlined'
+      variant='plain'
       sx={{
-        // display: 'flex',
+        display: 'flex',
-        // flexDirection: 'row', // Change to 'row'
+        flexDirection: 'column',
         justifyContent: 'space-between',
         p: 2,
         boxShadow: 'sm',
-        borderRadius: 8,
+        borderRadius: 20,
-        mb: 1,
+        mb: 2,
       }}
     >
       <Grid container>

src/views/components/AddTaskModal.jsx

@@ -21,6 +21,7 @@ import { CSSTransition } from 'react-transition-group'
 import { UserContext } from '../../contexts/UserContext'
 import useDebounce from '../../utils/Debounce'
 import { CreateChore } from '../../utils/Fetcher'
+import { isPlusAccount } from '../../utils/Helpers'
 import { useLabels } from '../Labels/LabelQueries'
 import LearnMoreButton from './LearnMore'
 const VALID_DAYS = {
@@ -429,16 +430,22 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
       assignedTo: userProfile.id,
       assignStrategy: 'random',
       isRolling: false,
+      notification: false,
       description: description || null,
       labelsV2: [],
       priority: priority || 0,
       status: 0,
+      frequencyType: 'once',
     }
 
     if (frequency) {
       chore.frequencyType = frequency.frequencyType
       chore.frequencyMetadata = frequency.frequencyMetadata
       chore.frequency = frequency.frequency
+      if (isPlusAccount()) {
+        chore.notification = true
+        chore.notificationMetadata = { dueDate: true }
+      }
     }
 
     CreateChore(chore).then(resp => {

src/views/components/CalendarView.jsx

@@ -124,7 +124,7 @@ const CalendarView = ({ chores }) => {
             .map((chore, idx) => (
               <Card
                 key={idx}
-                variant='soft'
+                variant='outlined'
                 onClick={() => {
                   Navigate('/chores/' + chore.id)
                 }}