updates on the ui changes and frully removed the mui and converted into astryx and color change

src/pages/nearle/customers/customers.js

@@ -23,7 +23,6 @@ import {
   useMediaQuery,
   useTheme
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
 import {
   MdPeopleAlt,
   MdOutlinePeopleAlt,
@@ -48,6 +47,8 @@ import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'compon
 import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
 import { getAdminCustomers, updateAdminCustomer } from 'pages/api/doormileApi';
 import { enqueueSnackbar } from 'notistack';
+import { DT, soft, edge } from 'themes/dt/tokens';
+import { AccentAvatar } from 'themes/dt/primitives';
 
 // ============================================================================
 // GET /admin/customers confirmed live: { appcustomerid, createdat, email,
@@ -64,31 +65,8 @@ import { enqueueSnackbar } from 'notistack';
 // not persisted" pattern as `pages/nearle/clients/createCustomer.js`).
 // ============================================================================
 
-const DT = {
-  radiusCard: 14,
-  radiusField: 10,
-  shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
-  shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
-  textPrimary: '#0f172a',
-  textSecondary: '#64748b',
-  textMuted: '#94a3b8',
-  borderSubtle: '#e2e8f0',
-  borderHover: '#cbd5e1',
-  divider: '#f1f5f9',
-  surface: '#ffffff',
-  surfaceAlt: '#f8fafc'
-};
-const a = (c, suffix) => `${c}${suffix}`;
-const soft = (c) => a(c, '18');
-const ring = (c) => a(c, '26');
-const edge = (c) => a(c, '55');
-const BRAND = '#C01227';
-const BRAND_LIGHT = '#D25463';
-const tint = (c) => a(c, '08');
-
-const AccentAvatar = ({ color, size = 24, children }) => (
-  <Avatar sx={{ width: size, height: size, bgcolor: soft(color), color }}>{children}</Avatar>
-);
+const BRAND = '#000000';
+const BRAND_LIGHT = '#3A3A3A';
 
 const custId = (row) => row.appcustomerid;
 const custName = (row) => row.name || '—';
@@ -265,16 +243,6 @@ const Customers = () => {
               onChange={setSearchword}
               onDebouncedChange={setDebouncedSearch}
               placeholder="Search customers (ctrl+k)"
-              sx={{
-                m: 0,
-                width: '100%',
-                borderRadius: 999,
-                bgcolor: tint(BRAND),
-                '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
-                '&:hover fieldset': { borderColor: BRAND },
-                '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 },
-                '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
-              }}
             />
           </Box>
         </Stack>
@@ -528,23 +496,6 @@ const Customers = () => {
                 value={addressInput}
                 onChange={(text) => setAddressInput(text)}
                 onPlaceSelected={handleAddressPlaceSelected}
-                TextFieldProps={{
-                  variant: 'outlined',
-                  InputProps: {
-                    endAdornment: (
-                      <IconButton
-                        onClick={() => {
-                          setAddressInput('');
-                          setPickAddress((p) => ({ ...p, suburb: '', city: '', state: '', postcode: '' }));
-                          setLatLng({ latitude: '', longitude: '' });
-                        }}
-                        size="small"
-                      >
-                        <CloseIcon fontSize="small" />
-                      </IconButton>
-                    )
-                  }
-                }}
               />
             </Grid>
             <Grid item xs={12} sm={6}>