updates on the ui design and desing updates

src/pages/nearle/riders/riders.js

@@ -34,9 +34,7 @@ import { useTheme } from '@mui/material/styles';
 var utc = require('dayjs/plugin/utc');
 import dayjs from 'dayjs';
 dayjs.extend(utc);
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateInput } from '@astryxdesign/core/DateInput';
 import {
   MdCheckCircle,
   MdCancel,
@@ -420,8 +418,8 @@ const Riders = () => {
           <LocationAutocomplete
             locaName={locaName}
             setAppId={setAppId}
-            setLocoName={setLocoName}
-
+            setLocoName={setLocoName}
+
             placeholder="Select Zone"
           />
         }
@@ -553,7 +551,7 @@ const Riders = () => {
             <DebounceSearchBar
               value={searchword}
               onChange={setSearchword}
-          <Box sx={{ width: { xs: '100%', sm: 240, lg: 280 }, flex: { xs: '1 1 100%', sm: '0 0 auto' } }}>
+              onDebouncedChange={setDebouncedSearch}
               placeholder="Search riders (ctrl+k)"
             />
           </Box>
@@ -607,27 +605,13 @@ const Riders = () => {
                 <ToggleButton value="scheduled">Scheduled</ToggleButton>
               </ToggleButtonGroup>
             </Stack>
-              >
-                <ToggleButton value="all">All</ToggleButton>
-                <ToggleButton value="scheduled">Scheduled</ToggleButton>
-              </ToggleButtonGroup>
-            </Stack>
-            <Stack direction="row" spacing={1.5} alignItems="center">
-              <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <DatePicker
-                  label="Select Date"
-                  value={historyDate}
-                  onChange={(newValue) => newValue && setHistoryDate(newValue)}
-                  slotProps={{
-                    textField: {
-                      size: 'small',
-                      sx: {
-                        width: 180,
-                        '& .MuiOutlinedInput-root': {
-                          borderRadius: '20px',
-                          '& fieldset': { borderColor: DT.borderSubtle },
-                          '&:hover fieldset': { borderColor: BRAND },
-                          '&.Mui-focused fieldset': { borderColor: BRAND }
+            <Stack direction="row" spacing={1.5} alignItems="center">
+              <DateInput
+                label="Select Date"
+                isLabelHidden
+                size="sm"
+                value={historyDate ? dayjs(historyDate).format('YYYY-MM-DD') : undefined}
+                onChange={(v) => v && setHistoryDate(dayjs(v))}
               />
             </Stack>
           </Stack>