@campxdev/shared 1.5.5 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Input/DatePicker.tsx

@@ -16,6 +16,7 @@ export interface IDatePicker {
   onChange: (value: Date) => void
   placeholder?: string
   inputProps?: TextFieldProps
+  size?: 'medium' | 'small'
 }
 
 export default function FormDatePicker({
@@ -26,6 +27,7 @@ export default function FormDatePicker({
   value,
   onChange,
   placeholder,
+  size = 'medium',
   required = false,
   ...rest
 }: IDatePicker) {
@@ -38,6 +40,7 @@ export default function FormDatePicker({
         dateFormat: 'd-m-Y',
         minDate,
         maxDate,
+        allowInput: true,
       }}
       value={value || null}
       render={(
@@ -46,6 +49,7 @@ export default function FormDatePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/Input/DateTimePicker.tsx

@@ -18,6 +18,7 @@ export interface IDateTimePicker {
   placeholder?: string
   inputProps?: TextFieldProps
   enableTime?: boolean
+  size?: 'medium' | 'small'
 }
 
 export default function DateTimePicker({
@@ -32,6 +33,7 @@ export default function DateTimePicker({
   value,
   placeholder,
   enableTime = true,
+  size = 'medium',
   ...rest
 }: IDateTimePicker) {
   return (
@@ -43,6 +45,7 @@ export default function DateTimePicker({
         maxDate,
         minTime,
         maxTime,
+        allowInput: true,
       }}
       onChange={(dates: Date[]) => {
         if (onChange) onChange(dates[0])
@@ -54,6 +57,7 @@ export default function DateTimePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/Input/TimePicker.tsx

@@ -15,6 +15,7 @@ export interface ITimePicker {
   onChange: (value: Date) => void
   placeholder?: string
   inputProps?: TextFieldProps
+  size?: 'medium' | 'small'
 }
 
 export default function TimePicker({
@@ -26,6 +27,7 @@ export default function TimePicker({
   onChange,
   value,
   placeholder,
+  size = 'medium',
   ...rest
 }: ITimePicker) {
   return (
@@ -36,6 +38,7 @@ export default function TimePicker({
         dateFormat: 'h:i K',
         minTime,
         maxTime,
+        allowInput: true,
       }}
       onChange={(dates: Date[]) => {
         if (onChange) onChange(dates[0])
@@ -47,6 +50,7 @@ export default function TimePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,26 +1,13 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  styled,
-  Typography,
-} from '@mui/material'
+import { Box, Button, Dialog, styled, Typography } from '@mui/material'
 import useConfirm from './useConfirm'
 const animatedImage = require('./animation.gif')
+
 const StyledImage = styled((props: any) => (
   <Box>
     <img {...props} />
   </Box>
 ))(({ theme }) => ({
   width: '154px',
-  height: '172px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
   '> img': {
     width: '100%',
     height: '100%',
@@ -37,17 +24,20 @@ const StyledDialogContent = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
 }))
 
-const StyledCancel = styled(Button)(() => ({
-  color: 'rgba(18, 18, 18, 0.5)',
-  border: '0.5px solid #12121280',
-  height: '40px',
-}))
-
 const PopupConfirm = () => {
   const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
   return (
     <Dialog
-      sx={{ zIndex: 1600 }}
+      PaperProps={{
+        elevation: 2,
+        sx: {
+          borderRadius: '10px',
+        },
+      }}
+      sx={{
+        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+        zIndex: 1600,
+      }}
       keepMounted
       maxWidth="sm"
       fullWidth
@@ -56,21 +46,18 @@ const PopupConfirm = () => {
     >
       <StyledDialogContent>
         <Box sx={{ marginBottom: '20px' }}>
-          {' '}
           <StyledImage src={animatedImage} alt="Upload Image" />
         </Box>
 
-        <Typography
-          sx={{ fontSize: '16px', fontFamily: 'Poppins', fontWeight: '500' }}
-        >
+        <Typography variant="h6" sx={{ minHeight: '30px' }}>
           {prompt}
         </Typography>
         <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
-          <StyledCancel variant="text" onClick={cancel}>
+          <Button color="secondary" variant="outlined" onClick={cancel}>
             No, Cancel
-          </StyledCancel>
+          </Button>
           <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
-            Yes, I’m. Sure
+            Yes, I'm. Sure
           </Button>
         </Box>
       </StyledDialogContent>