Notifications

Author: simmmpleweb

src/components/fields/SwitchField.js

@@ -5,7 +5,7 @@ import {
   FormLabel,
   Switch,
   Text,
-  useColorModeValue,
+  useColorModeValue
 } from "@chakra-ui/react";
 // Custom components
 import React from "react";
@@ -22,82 +22,81 @@ export default function Default(props) {
     fontSize,
     ...rest
   } = props;
+  let [checked, setChecked] = React.useState(isChecked);
   const textColorPrimary = useColorModeValue("secondaryGray.900", "white");
   return (
-    <Box w='100%' fontWeight='500' {...rest}>
+    <Box w="100%" fontWeight="500" {...rest}>
       {reversed ? (
-        <Flex align='center' borderRadius='16px'>
-          {isChecked && onChange ? (
+        <Flex align="center" borderRadius="16px">
+          {isChecked ? (
             <Switch
-              isChecked={isChecked}
+              isChecked={checked}
               id={id}
-              variant='main'
-              colorScheme='brandScheme'
-              size='md'
-              onChange={onChange}
+              variant="main"
+              colorScheme="brandScheme"
+              size="md"
+              onChange={() => setChecked(!checked)}
             />
           ) : (
             <Switch
               id={id}
-              variant='main'
-              colorScheme='brandScheme'
-              size='md'
+              variant="main"
+              colorScheme="brandScheme"
+              size="md"
             />
           )}
           <FormLabel
-            ms='15px'
+            ms="15px"
             htmlFor={id}
             _hover={{ cursor: "pointer" }}
-            direction='column'
-            mb='0px'
-            maxW={textWidth ? textWidth : "75%"}>
-            <Text
-              color={textColorPrimary}
-              fontSize='md'
-              fontWeight='500'>
+            direction="column"
+            mb="0px"
+            maxW={textWidth ? textWidth : "75%"}
+          >
+            <Text color={textColorPrimary} fontSize="md" fontWeight="500">
               {label}
             </Text>
             <Text
-              color='secondaryGray.600'
-              fontSize={fontSize ? fontSize : "md"}>
+              color="secondaryGray.600"
+              fontSize={fontSize ? fontSize : "md"}
+            >
               {desc}
             </Text>
           </FormLabel>
         </Flex>
       ) : (
-        <Flex justify='space-between' align='center' borderRadius='16px'>
+        <Flex justify="space-between" align="center" borderRadius="16px">
           <FormLabel
             htmlFor={id}
             _hover={{ cursor: "pointer" }}
-            direction='column'
-            maxW={textWidth ? textWidth : "75%"}>
-            <Text
-              color={textColorPrimary}
-              fontSize='md'
-              fontWeight='500'>
+            direction="column"
+            maxW={textWidth ? textWidth : "75%"}
+          >
+            <Text color={textColorPrimary} fontSize="md" fontWeight="500">
               {label}
             </Text>
             <Text
-              color='secondaryGray.600'
-              fontSize={fontSize ? fontSize : "md"}>
+              color="secondaryGray.600"
+              fontSize={fontSize ? fontSize : "md"}
+            >
               {desc}
             </Text>
           </FormLabel>
           {isChecked && onChange ? (
             <Switch
               isChecked={isChecked}
               id={id}
-              variant='main'
-              colorScheme='brandScheme'
-              size='md'
+              variant="main"
+              colorScheme="brandScheme"
+              size="md"
               onChange={onChange}
             />
           ) : (
             <Switch
               id={id}
-              variant='main'
-              colorScheme='brandScheme'
-              size='md'
+              variant="main"
+              colorScheme="brandScheme"
+              size="md"
             />
           )}
         </Flex>

src/views/admin/profile/components/Notifications.js

@@ -10,87 +10,91 @@ export default function Notifications(props) {
   // Chakra Color Mode
   const textColorPrimary = useColorModeValue("secondaryGray.900", "white");
   return (
-    <Card mb='20px' {...rest}>
-      <Flex align='center' w='100%' justify='space-between' mb='30px'>
+    <Card mb="20px" mt="40px" mx="auto" maxW="410px" {...rest}>
+      <Flex align="center" w="100%" justify="space-between" mb="30px">
         <Text
           color={textColorPrimary}
-          fontWeight='bold'
-          fontSize='2xl'
-          mb='4px'>
+          fontWeight="bold"
+          fontSize="2xl"
+          mb="4px"
+        >
           Notifications
         </Text>
         <Menu />
       </Flex>
       <SwitchField
         isChecked={true}
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='1'
-        label='Item update notifications'
+        fontSize="sm"
+        mb="20px"
+        id="1"
+        label="Item update notifications"
       />
       <SwitchField
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='2'
-        label='Item comment notifications'
+        fontSize="sm"
+        mb="20px"
+        id="2"
+        label="Item comment notifications"
       />
       <SwitchField
+        isChecked={true}
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='3'
-        label='Buyer review notifications'
+        fontSize="sm"
+        mb="20px"
+        id="3"
+        label="Buyer review notifications"
       />
       <SwitchField
+        isChecked={true}
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='4'
-        label='Rating reminders notifications'
+        fontSize="sm"
+        mb="20px"
+        id="4"
+        label="Rating reminders notifications"
       />
       <SwitchField
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='5'
-        label='Meetups near you notifications'
+        fontSize="sm"
+        mb="20px"
+        id="5"
+        label="Meetups near you notifications"
       />
       <SwitchField
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='6'
-        label='Company news notifications'
+        fontSize="sm"
+        mb="20px"
+        id="6"
+        label="Company news notifications"
       />
       <SwitchField
+        isChecked={true}
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='7'
-        label='New launches and projects'
+        fontSize="sm"
+        mb="20px"
+        id="7"
+        label="New launches and projects"
       />
       <SwitchField
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='8'
-        label='Monthly product changes'
+        fontSize="sm"
+        mb="20px"
+        id="8"
+        label="Monthly product changes"
       />
       <SwitchField
+        isChecked={true}
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='9'
-        label='Subscribe to newsletter'
+        fontSize="sm"
+        mb="20px"
+        id="9"
+        label="Subscribe to newsletter"
       />
       <SwitchField
         reversed={true}
-        fontSize='sm'
-        mb='20px'
-        id='10'
-        label='Email me when someone follows me'
+        fontSize="sm"
+        id="10"
+        label="Email me when someone follows me"
       />
     </Card>
   );