Fix #140 and add notification type as webhook only

src/views/Settings/NotificationSetting.jsx

@@ -150,18 +150,7 @@ const NotificationSetting = () => {
       <Divider />
       <Typography level='body-md'>Manage your Device Notificaiton</Typography>
 
-      <FormControl
+      <FormControl orientation='horizontal'>
-        orientation='horizontal'
-        sx={{ width: 400, justifyContent: 'space-between' }}
-      >
-        <div>
-          <FormLabel>Device Notification</FormLabel>
-          <FormHelperText sx={{ mt: 0 }}>
-            {Capacitor.isNativePlatform()
-              ? 'Receive notification on your device when a task is due'
-              : 'This feature is only available on mobile devices'}{' '}
-          </FormHelperText>
-        </div>
         <Switch
           disabled={!Capacitor.isNativePlatform()}
           checked={deviceNotification}
@@ -184,15 +173,16 @@ const NotificationSetting = () => {
           }}
           color={deviceNotification ? 'success' : 'neutral'}
           variant={deviceNotification ? 'solid' : 'outlined'}
-          endDecorator={deviceNotification ? 'On' : 'Off'}
+          sx={{ mr: 1 }}
-          slotProps={{
-            endDecorator: {
-              sx: {
-                minWidth: 24,
-              },
-            },
-          }}
         />
+        <div>
+          <FormLabel>Device Notification</FormLabel>
+          <FormHelperText sx={{ mt: 0 }}>
+            {Capacitor.isNativePlatform()
+              ? 'Receive notification on your device when a task is due'
+              : 'This feature is only available on mobile devices'}{' '}
+          </FormHelperText>
+        </div>
       </FormControl>
       {deviceNotification && (
         <Card>
@@ -329,17 +319,9 @@ const NotificationSetting = () => {
         Notificaiton through other platform like Telegram or Pushover
       </Typography>
 
-      <FormControl
+      <FormControl orientation='horizontal'>
-        orientation='horizontal'
-        sx={{ width: 400, justifyContent: 'space-between' }}
-      >
-        <div>
-          <FormLabel>Custom Notification</FormLabel>
-          <FormHelperText sx={{ mt: 0 }}>
-            Receive notification on other platform
-          </FormHelperText>
-        </div>
         <Switch
+          sx={{ mr: 1 }}
           checked={chatID !== 0}
           onClick={event => {
             event.preventDefault()
@@ -360,15 +342,19 @@ const NotificationSetting = () => {
           }}
           color={chatID !== 0 ? 'success' : 'neutral'}
           variant={chatID !== 0 ? 'solid' : 'outlined'}
-          endDecorator={chatID !== 0 ? 'On' : 'Off'}
+          // endDecorator={chatID !== 0 ? 'On' : 'Off'}
           slotProps={{
             endDecorator: {
-              sx: {
+              sx: {},
-                minWidth: 24,
-              },
             },
           }}
         />
+        <div>
+          <FormLabel>Custom Notification</FormLabel>
+          <FormHelperText sx={{ mt: 0 }}>
+            Receive notification on other platform
+          </FormHelperText>
+        </div>
       </FormControl>
       {chatID !== 0 && (
         <Box
@@ -386,6 +372,7 @@ const NotificationSetting = () => {
             <Option value='0'>None</Option>
             <Option value='1'>Telegram</Option>
             <Option value='2'>Pushover</Option>
+            <Option value='3'>Webhook</Option>
           </Select>
           {notificationTarget === '1' && (
             <>

src/views/Settings/Settings.jsx

@@ -357,22 +357,23 @@ const Settings = () => {
                   </Chip>
                 )}
               </FormHelperText>
-              <>
+            </FormControl>
-                {webhookURL !== null && (
+
-                  <Typography level='title-sm'>
+            {webhookURL !== null && (
-                    Webhook URL
+              <Box>
-                    <Input
+                <Typography level='title-sm'>Webhook URL</Typography>
-                      value={webhookURL ? webhookURL : ''}
+                <Input
-                      onChange={e => setWebhookURL(e.target.value)}
+                  value={webhookURL ? webhookURL : ''}
-                      size='lg'
+                  onChange={e => setWebhookURL(e.target.value)}
-                      sx={{
+                  size='lg'
-                        width: '220px',
+                  sx={{
-                        mb: 1,
+                    width: '220px',
-                      }}
+                    mb: 1,
-                    />
+                  }}
-                    <Typography level='body-sm' color='danger'>
+                />
-                      {webhookError}
+                {webhookError && (
-                    </Typography>
+                  <Typography level='body-sm' color='danger'>
+                    {webhookError}
                   </Typography>
                 )}
                 <Button
@@ -391,8 +392,8 @@ const Settings = () => {
                 >
                   Save
                 </Button>
-              </>
+              </Box>
-            </FormControl>
+            )}
           </>
         )}
       </div>