@campxdev/react-blueprint 1.7.6 → 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/assets/images/svg/index.ts

@@ -5,7 +5,7 @@ import noConnectionImage from './no-connection.svg';
 import serverErrorImage from './server-error.svg';
 import unauthorizedImage from './unauthorized.svg';
 
-export {
+export const Svgs = {
   assignmentImage,
   emptyImage,
   errorImage,

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -1,4 +1,4 @@
-import { serverErrorImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import { CenterBox } from './styles';
@@ -8,7 +8,7 @@ export const InternalServerError = ({ resetBoundary }: any) => {
     <>
       <CenterBox>
         <img
-          src={serverErrorImage}
+          src={Svgs.serverErrorImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -1,4 +1,4 @@
-import { noConnectionImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import { CenterBox } from './styles';
@@ -8,7 +8,7 @@ export const NoInterneConnection = ({ resetBoundary }: any) => {
     <>
       <CenterBox>
         <img
-          src={noConnectionImage}
+          src={Svgs.noConnectionImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { emptyImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { CenterBox } from './styles';
 
@@ -16,7 +16,7 @@ export const NoItemFound = ({
   return (
     <CenterBox>
       <img
-        src={emptyImage}
+        src={Svgs.emptyImage}
         alt="page not found"
         width="350px"
         style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -1,4 +1,4 @@
-import { emptyImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { CenterBox } from './styles';
 
@@ -7,7 +7,7 @@ export const PageNotFound = () => {
     <>
       <CenterBox>
         <img
-          src={emptyImage}
+          src={Svgs.emptyImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/UnAuthorized.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { unauthorizedImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { CenterBox } from './styles';
 
@@ -8,7 +8,7 @@ export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
     <>
       <CenterBox>
         <img
-          src={unauthorizedImage}
+          src={Svgs.unauthorizedImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/Icons/IconComponents/HamburgerMenuIcon.tsx

@@ -0,0 +1,20 @@
+import { useTheme } from '@mui/material';
+
+export const HamburgerMenuIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.800049" width="16" height="1.6" rx="0.8" fill={color} />
+      <rect y="7.19995" width="16" height="1.6" rx="0.8" fill={color} />
+      <rect y="13.6" width="16" height="1.6" rx="0.8" fill={color} />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/ObeIcon.tsx

@@ -11,19 +11,19 @@ export const ObeIcon = ({ size = 16 }) => {
         d="M17.4082 9.35687C17.2428 9.35577 17.0845 9.28958 16.9675 9.1726C16.8505 9.05563 16.7843 8.89729 16.7832 8.73187V6.3402L9.99989 2.9477L3.21655 6.3402V8.73187C3.21546 8.89729 3.14926 9.05563 3.03229 9.1726C2.91531 9.28958 2.75698 9.35577 2.59155 9.35687C2.42613 9.35577 2.26779 9.28958 2.15082 9.1726C2.03384 9.05563 1.96764 8.89729 1.96655 8.73187V5.95687C1.96719 5.84046 2.00029 5.72654 2.06212 5.6279C2.12395 5.52927 2.21206 5.44984 2.31655 5.39853L9.72489 1.6977C9.811 1.65251 9.9068 1.62891 10.0041 1.62891C10.1013 1.62891 10.1971 1.65251 10.2832 1.6977L17.6916 5.3977C17.7949 5.45042 17.8821 5.53019 17.9437 5.62851C18.0053 5.72682 18.0392 5.84002 18.0416 5.95603V8.73103C18.0373 8.89696 17.9689 9.05478 17.8509 9.17144C17.7328 9.28811 17.5742 9.35455 17.4082 9.35687Z"
         fill="#121212"
         stroke="#121212"
-        stroke-width="0.4"
+        strokeWidth="0.4"
       />
       <path
         d="M9.99989 19.5414C9.90426 19.5411 9.81005 19.5182 9.72489 19.4747L2.31655 15.7747C2.21318 15.722 2.12604 15.6423 2.06441 15.5439C2.00277 15.4456 1.96896 15.3324 1.96655 15.2164V12.4414C1.96764 12.276 2.03384 12.1176 2.15082 12.0007C2.26779 11.8837 2.42613 11.8175 2.59155 11.8164C2.75698 11.8175 2.91531 11.8837 3.03229 12.0007C3.14926 12.1176 3.21546 12.276 3.21655 12.4414V14.8331L9.99989 18.2247L16.7832 14.8331V12.4414C16.7832 12.2756 16.8491 12.1167 16.9663 11.9995C17.0835 11.8823 17.2425 11.8164 17.4082 11.8164C17.574 11.8164 17.7329 11.8823 17.8502 11.9995C17.9674 12.1167 18.0332 12.2756 18.0332 12.4414V15.2164C18.0326 15.3328 17.9995 15.4467 17.9377 15.5454C17.8758 15.644 17.7877 15.7234 17.6832 15.7747L10.2749 19.4747C10.1897 19.5182 10.0955 19.5411 9.99989 19.5414Z"
         fill="#121212"
         stroke="#121212"
-        stroke-width="0.4"
+        strokeWidth="0.4"
       />
       <path
         d="M10.0001 14.9078C9.14465 14.9078 8.30845 14.6542 7.59721 14.1789C6.88597 13.7037 6.33162 13.0282 6.00427 12.2379C5.67692 11.4476 5.59127 10.578 5.75815 9.73905C5.92504 8.90008 6.33695 8.12944 6.94181 7.52458C7.54668 6.91972 8.31732 6.5078 9.15629 6.34092C9.99525 6.17404 10.8649 6.25969 11.6552 6.58704C12.4454 6.91438 13.1209 7.46873 13.5962 8.17997C14.0714 8.89122 14.3251 9.72741 14.3251 10.5828C14.3228 11.7292 13.8665 12.828 13.0559 13.6386C12.2452 14.4492 11.1464 14.9056 10.0001 14.9078ZM10.0001 7.50781C9.39187 7.50781 8.79735 7.68816 8.29167 8.02605C7.78599 8.36393 7.39186 8.84418 7.15912 9.40606C6.92638 9.96795 6.86549 10.5862 6.98414 11.1827C7.10279 11.7792 7.39565 12.3271 7.8257 12.7572C8.25574 13.1872 8.80366 13.4801 9.40015 13.5987C9.99664 13.7174 10.6149 13.6565 11.1768 13.4237C11.7387 13.191 12.2189 12.7969 12.5568 12.2912C12.8947 11.7855 13.0751 11.191 13.0751 10.5828C13.0742 9.76754 12.7499 8.98592 12.1734 8.40944C11.5969 7.83295 10.8153 7.5087 10.0001 7.50781Z"
         fill="#121212"
         stroke="#121212"
-        stroke-width="0.4"
+        strokeWidth="0.4"
       />
     </svg>
   );

package/src/components/Assets/Icons/IconComponents/ReportIssueIcon.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from '@mui/material';
+
+export const ReportIssueIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_436_6962)">
+        <path
+          d="M14.6667 15.1666H1.33334C1.201 15.1658 1.07433 15.1128 0.980748 15.0192C0.887168 14.9256 0.834209 14.799 0.833336 14.6666C0.834209 14.5343 0.887168 14.4076 0.980748 14.314C1.07433 14.2205 1.201 14.1675 1.33334 14.1666H14.6667C14.799 14.1675 14.9257 14.2205 15.0193 14.314C15.1128 14.4076 15.1658 14.5343 15.1667 14.6666C15.1658 14.799 15.1128 14.9256 15.0193 15.0192C14.9257 15.1128 14.799 15.1658 14.6667 15.1666Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M14 15.1667H2C1.86766 15.1658 1.74099 15.1128 1.64741 15.0193C1.55383 14.9257 1.50087 14.799 1.5 14.6667V10C1.5 8.27609 2.18482 6.62279 3.40381 5.40381C4.62279 4.18482 6.27609 3.5 8 3.5C9.72391 3.5 11.3772 4.18482 12.5962 5.40381C13.8152 6.62279 14.5 8.27609 14.5 10V14.6667C14.4991 14.799 14.4462 14.9257 14.3526 15.0193C14.259 15.1128 14.1323 15.1658 14 15.1667ZM2.5 14.1667H13.5V10C13.5 8.54131 12.9205 7.14236 11.8891 6.11091C10.8576 5.07946 9.45869 4.5 8 4.5C6.54131 4.5 5.14236 5.07946 4.11091 6.11091C3.07946 7.14236 2.5 8.54131 2.5 10V14.1667Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M8 2.50004C7.86766 2.49917 7.74099 2.44621 7.64741 2.35263C7.55383 2.25905 7.50087 2.13238 7.5 2.00004V1.33337C7.50087 1.20104 7.55383 1.07437 7.64741 0.980786C7.74099 0.887206 7.86766 0.834248 8 0.833374C8.13234 0.834248 8.25901 0.887206 8.35259 0.980786C8.44617 1.07437 8.49913 1.20104 8.5 1.33337V2.00004C8.49913 2.13238 8.44617 2.25905 8.35259 2.35263C8.25901 2.44621 8.13234 2.49917 8 2.50004Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M3.33267 3.83534C3.26698 3.83558 3.20191 3.82273 3.14125 3.79755C3.08058 3.77237 3.02554 3.73535 2.97933 3.68867L2.31267 3.02201C2.21878 2.9283 2.16597 2.80113 2.16584 2.66848C2.16572 2.53583 2.21829 2.40856 2.312 2.31467C2.40571 2.22079 2.53288 2.16797 2.66553 2.16785C2.79818 2.16772 2.92545 2.2203 3.01933 2.31401L3.686 2.98067C3.77899 3.07477 3.83113 3.20172 3.83113 3.33401C3.83113 3.46629 3.77899 3.59325 3.686 3.68734C3.6399 3.73426 3.58491 3.77152 3.52424 3.79693C3.46357 3.82234 3.39844 3.8354 3.33267 3.83534Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M12.666 3.83535C12.6003 3.83558 12.5352 3.82273 12.4746 3.79755C12.4139 3.77237 12.3589 3.73536 12.3127 3.68868C12.2197 3.59459 12.1675 3.46763 12.1675 3.33535C12.1675 3.20306 12.2197 3.07611 12.3127 2.98201L12.9793 2.31535C13.0741 2.22703 13.1995 2.17894 13.329 2.18123C13.4585 2.18352 13.5821 2.23599 13.6737 2.3276C13.7654 2.41921 13.8178 2.5428 13.8201 2.67233C13.8224 2.80187 13.7743 2.92723 13.686 3.02201L13.0193 3.68868C12.9731 3.73536 12.9181 3.77237 12.8574 3.79755C12.7967 3.82273 12.7317 3.83558 12.666 3.83535Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_436_6962">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -57,6 +57,7 @@ import { ExportIcon } from './IconComponents/ExportIcon';
 import { ExportMenuIcon } from './IconComponents/ExportMenuIcon';
 import { FeePaymentIcon } from './IconComponents/FeePaymentIcon';
 import { FilterIcon } from './IconComponents/FilterIcon';
+import { HamburgerMenuIcon } from './IconComponents/HamburgerMenuIcon';
 import { HandoutsIcon } from './IconComponents/HandoutsIcon';
 import { HelpIcon } from './IconComponents/HelpIcon';
 import { HomeIcon } from './IconComponents/HomeIcon';
@@ -93,6 +94,7 @@ import { RedirectIcon } from './IconComponents/RedirectIcon';
 import { RedoIcon } from './IconComponents/RedoIcon';
 import { RegistrationIcon } from './IconComponents/RegistrationsIcon';
 import { RejectIcon } from './IconComponents/RejectIcon';
+import { ReportIssueIcon } from './IconComponents/ReportIssueIcon';
 import { ReportIcon } from './IconComponents/ReportsIcon';
 import { ResourcesIcon } from './IconComponents/ResourcesIcon';
 import { RightIcon } from './IconComponents/RightIcon';
@@ -131,6 +133,7 @@ export const Icons = {
   RedoIcon,
   WhatsappIcon,
   AssignmentIcon,
+  ReportIssueIcon,
   SmsIcon,
   EmailIcon,
   TextLocalIcon,
@@ -243,6 +246,7 @@ export const Icons = {
   OnlineTransactionIcon,
   OpenPaymentsIcon,
   TransactionCardIcon,
+  HamburgerMenuIcon,
   ObeIcon,
   SettlementsIcon,
   DownArrow,

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { Stack, styled, useTheme } from '@mui/material';
+import { Stack, styled } from '@mui/material';
 import {
   DataGrid as MuiDataGrid,
   DataGridProps as MuiDataGridProps,
@@ -38,8 +38,6 @@ export const DataTable = (props: DataTableProps) => {
     }
   };
 
-  const theme = useTheme();
-
   return (
     <MuiDataGrid
       disableColumnFilter

package/src/components/DataDisplay/EmptyIllustration/EmptyIllustration.tsx

@@ -1,5 +1,5 @@
 import { Box, styled, SxProps, TypographyOwnProps } from '@mui/material';
-import { emptyImage } from '../../../assets/images/svg';
+import { Svgs } from '../../../assets/images/svg';
 
 import { Typography } from '../export';
 
@@ -26,7 +26,7 @@ export const EmptyIllustration = ({
     <>
       <CenterBox sx={containerProps}>
         <img
-          src={emptyImage}
+          src={Svgs.emptyImage}
           alt="no-items"
           width={imageSize}
           style={{ margin: '20px' }}

package/src/components/DataDisplay/StatusCard/StatusCard.tsx

@@ -0,0 +1,67 @@
+import { Box, styled, Theme, useTheme } from '@mui/material';
+import { Typography } from '../../export';
+
+export type StatusCardProps = {
+  color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
+  text: string;
+};
+
+export const StatusCard = ({ color, text }: StatusCardProps) => {
+  const theme = useTheme();
+  const { textColor, backgroundColor } = getStatusColor(color, theme);
+  return (
+    <StatusContainer backgroundColor={backgroundColor}>
+      <Typography variant="label2" color={textColor}>
+        {text}
+      </Typography>
+    </StatusContainer>
+  );
+};
+
+const StatusContainer = styled(Box)(
+  ({ backgroundColor }: { backgroundColor: string }) => ({
+    borderRadius: '5px',
+    padding: '4px 12px',
+    backgroundColor,
+  }),
+);
+
+const getStatusColor = (color: string, theme: Theme) => {
+  switch (color) {
+    case 'green':
+      return {
+        textColor: theme.palette.highlight.highlightGreen,
+        backgroundColor: theme.palette.highlight.greenBackground,
+      };
+    case 'red':
+      return {
+        textColor: theme.palette.highlight.highlightRed,
+        backgroundColor: theme.palette.highlight.redBackground,
+      };
+    case 'orange':
+      return {
+        textColor: theme.palette.highlight.highlightOrange,
+        backgroundColor: theme.palette.highlight.orangeBackground,
+      };
+    case 'yellow':
+      return {
+        textColor: theme.palette.highlight.highlightYellow,
+        backgroundColor: theme.palette.highlight.yellowBackground,
+      };
+    case 'blue':
+      return {
+        textColor: theme.palette.highlight.highlightBlue,
+        backgroundColor: theme.palette.highlight.blueBackground,
+      };
+    case 'pink':
+      return {
+        textColor: theme.palette.highlight.highlightPink,
+        backgroundColor: theme.palette.highlight.pinkBackground,
+      };
+    default:
+      return {
+        textColor: theme.palette.highlight.highlightRed,
+        backgroundColor: theme.palette.highlight.redBackground,
+      };
+  }
+};

package/src/components/DataDisplay/export.ts

@@ -7,5 +7,6 @@ export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
 export * from './SidePanel/SidePanel';
+export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';
 export * from './Typography/Typography';

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -69,42 +69,53 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
 
   return (
     <MuiSnackbar open={props.open} onClose={props.onClose} {...props}>
-      <Stack
-        direction="row"
-        borderRadius="5px"
-        justifyContent="space-between"
-        alignItems="flex-start"
-        gap={1}
+      <Box
         sx={{
           height: '90px',
           width: '480px',
-          backgroundColor: getBackGroundColor(props.severity),
+          backgroundColor: theme.palette.surface.paperBackground,
+          borderRadius: '5px',
         }}
       >
-        <Box
+        <Stack
+          height="100%"
+          direction="row"
+          borderRadius="5px"
+          gap="8px"
           sx={{
-            width: '10px',
-            height: '100%',
-            backgroundColor: getColor(props.severity),
-            borderRadius: '5px 0px 0px 5px',
+            backgroundColor: getBackGroundColor(props.severity),
           }}
-        />
-        <Stack width="100%" height="100%" direction={'row'} alignItems="center">
-          <Stack direction="row" gap={1} justifyContent="space-evenly">
-            <Box sx={{ marginTop: '2px' }}>{getIcon(props.severity)}</Box>
-            <Stack direction={'column'}>
-              <Typography variant="subtitle2">
-                {capitalize(props.severity)}
-              </Typography>
-              <Typography variant="body2">{props.message}</Typography>
+        >
+          <Box
+            sx={{
+              width: '10px',
+              height: '100%',
+              backgroundColor: getColor(props.severity),
+              borderRadius: '5px 0px 0px 5px',
+            }}
+          />
+          <Stack
+            width="100%"
+            height="100%"
+            direction={'row'}
+            alignItems="center"
+          >
+            <Stack direction="row" gap={1} justifyContent="space-evenly">
+              <Box sx={{ marginTop: '2px' }}>{getIcon(props.severity)}</Box>
+              <Stack direction={'column'}>
+                <Typography variant="subtitle2">
+                  {capitalize(props.severity)}
+                </Typography>
+                <Typography variant="body2">{props.message}</Typography>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
 
-        <IconButton sx={{ margin: '25px' }} onClick={handleClose}>
-          <Icons.CrossIcon2 />
-        </IconButton>
-      </Stack>
+          <IconButton sx={{ margin: '25px' }} onClick={handleClose}>
+            <Icons.CrossIcon2 />
+          </IconButton>
+        </Stack>
+      </Box>
     </MuiSnackbar>
   );
 };

package/src/components/Input/SingleSelect/components/SingleInput.tsx

@@ -4,6 +4,7 @@ import {
   InputAdornment,
   Autocomplete as MuiAutocomplete,
   Paper,
+  Stack,
 } from '@mui/material';
 import { debounce, startCase } from 'lodash';
 import { SyntheticEvent, useMemo } from 'react';
@@ -124,16 +125,18 @@ export const SingleInput = ({
       renderOption={(props, option: any) => {
         return (
           <Box component="li" {...props} margin="4px 0px" key={option.value}>
-            <Typography variant="subtitle3">
-              {dbLabelProps.useLabelStartCase
-                ? startCase(option.label)
-                : option.label}
-            </Typography>
-            <Typography variant="caption">
-              {dbLabelProps.useSubLabelStartCase
-                ? startCase(option?.subLabel)
-                : option?.subLabel}
-            </Typography>
+            <Stack>
+              <Typography variant="subtitle3">
+                {dbLabelProps.useLabelStartCase
+                  ? startCase(option.label)
+                  : option.label}
+              </Typography>
+              <Typography variant="caption">
+                {dbLabelProps.useSubLabelStartCase
+                  ? startCase(option?.subLabel)
+                  : option?.subLabel}
+              </Typography>
+            </Stack>
           </Box>
         );
       }}

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -1,15 +1,16 @@
-import { Stack } from '@mui/material';
+import { IconButton, Stack, useMediaQuery, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
+import { ReportIssueIcon } from '../../Assets/Icons/IconComponents/ReportIssueIcon';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import UserBox from './AppHeaderActions/UserBox';
-import { StyledHeader } from './styles/styles';
+import { StyledDivider, StyledHeader } from './styles/styles';
 
 export interface AppHeaderProps {
   actions?: ReactNode[];
   appsMenu?: ReactNode;
   clientLogoUrl?: string;
-  clientName: string;
+  clientName?: string;
   userFullName: string;
   designation?: string;
   collapsed: boolean;
@@ -31,9 +32,17 @@ export const AppHeader = ({
   institutionsData,
   showActiveDevices = true,
 }: AppHeaderProps) => {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
+  const handleReportIssue = () => {
+    window.open('https://helpdesk.campx.in/helpdesk/my-tickets', '_blank');
+  };
   return (
     <StyledHeader collapsed={collapsed} className="appHeader">
-      <Typography variant={'subtitle2'}>{clientName}</Typography>
+      <Typography variant={isSmallScreen ? 'subtitle3' : 'subtitle2'}>
+        {clientName}
+      </Typography>
       <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
         {/* <StyledIconButton>
           <a
@@ -45,25 +54,33 @@ export const AppHeader = ({
             <HelpIcon size={20} />
           </a>
         </StyledIconButton> */}
-        <Button
-          variant="outlined"
-          className="reportAnIssue"
-          onClick={() => {
-            window.open(
-              'https://helpdesk.campx.in/helpdesk/my-tickets',
-              '_blank',
-            );
-          }}
-        >
-          <Typography
-            variant="button"
-            sx={{
-              fontWeight: 'bold',
-            }}
+        {isSmallScreen ? (
+          <>
+            <IconButton
+              sx={{ padding: '0px' }}
+              className="reportAnIssue"
+              onClick={handleReportIssue}
+            >
+              <ReportIssueIcon />
+            </IconButton>
+            <StyledDivider flexItem />
+          </>
+        ) : (
+          <Button
+            variant="outlined"
+            className="reportAnIssue"
+            onClick={handleReportIssue}
           >
-            Report an Issue
-          </Typography>
-        </Button>
+            <Typography
+              variant="button"
+              sx={{
+                fontWeight: 'bold',
+              }}
+            >
+              Report an Issue
+            </Typography>
+          </Button>
+        )}
         <UserBox
           fullName={userFullName}
           actions={actions}

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -1,4 +1,4 @@
-import { Box, styled } from '@mui/material';
+import { Box, Divider, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 export const StyledHeader = styled('header')(
@@ -13,9 +13,21 @@ export const StyledHeader = styled('header')(
     justifyContent: 'space-between',
     padding: '0 32px',
     borderRadius: '8px',
+
+    [theme.breakpoints.down('md')]: {
+      height: '50px',
+      minHeight: '50px',
+      padding: '0 12px',
+    },
   }),
 );
 
+export const StyledDivider = styled(Divider)(({ theme }) => ({
+  orientation: 'vertical',
+  margin: '8px 0px',
+  border: `0.5px solid ${theme.palette.border.primary}`,
+}));
+
 export const StyledActionBox = styled(Box)(({ theme }) => ({
   marginRight: '20px',
   display: 'flex',

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -58,6 +58,10 @@ const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
   height: '52px',
   paddingLeft: '12px',
   backgroundColor: theme.palette.surface.defaultBackground,
+
+  [theme.breakpoints.down('md')]: {
+    paddingLeft: '0px',
+  },
 }));
 
 const BreadcrumbLink = styled(Link)(({ theme }) => ({