Merge pull request #1000 from culturecreates/feature/issue-940

Added responsive styles for settings screens

src/components/Accordion/CalendarAccordion/calendarAccordion.css

@@ -141,3 +141,14 @@
 .user-popover-options-active-hover > .selection-item-wrapper {
   background: #eff2ff;
 }
+
+@media screen and (max-width: 480px) {
+  .collapse-wrapper .ant-collapse-header,
+  .collapse-wrapper .user-role-para {
+    font-size: 12px;
+  }
+
+  .collapse-wrapper .ant-collapse-content-box .ant-form-item {
+    margin-bottom: 8px;
+  }
+}

src/components/List/User/ListCard.jsx

@@ -8,7 +8,7 @@ const ListCard = (props) => {
   const { id, actions, listItemHandler, title, description, activityStatus, invitedBy, styles } = props;
   const { t } = useTranslation();
   return (
-    <List.Item className="users-list-item-wrapper" key={id} actions={actions} {...styles}>
+    <List.Item className="users-list-item-wrapper" key={id} extra={actions} {...styles}>
       <List.Item.Meta
         className="user-item-meta"
         title={title}

src/components/List/User/listCard.css

@@ -16,3 +16,9 @@
 .users-list-item-wrapper:hover {
   background-color: #f9faff;
 }
+
+@media screen and (max-width: 480px) {
+  .user-management-wrapper .event-list-wrapper {
+    width: 100%;
+  }
+}

src/components/Modal/ChangePassword/changePassword.css

@@ -1,10 +1,3 @@
-.change-password-modal .ant-form-item-label > label {
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  color: #222732;
-}
-
 .change-password-modal .ant-modal-title {
   color: var(--content-neutral-primary, #222732);
   font-family: Roboto;
@@ -63,13 +56,7 @@
   border-top: 1px solid var(--content-neutral-stroke, #b6c1c9);
   background: var(--background-neutrals-ground, #fff);
   display: flex;
-  width: 500px;
   height: 72px;
-  padding: 16px 16px 16px 307px;
   justify-content: flex-end;
   align-items: center;
 }
-
-.change-password-modal .ant-modal-content{
-  width: 500px;
-}

src/components/Username/Username.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import './username.css';
 
 function Username(props) {
-  const { firstName, lastName, userName } = props;
+  const { userName, ...rest } = props;
 
   return (
-    <span className="event-list-status-userdetail" {...props}>
-      {userName ? userName : `${firstName?.charAt(0)}${lastName}`}
+    <span className="event-list-status-userdetail" {...rest}>
+      {userName ? userName : `${rest?.firstName?.charAt(0)}${rest?.lastName}`}
     </span>
   );
 }

src/components/Username/username.css

@@ -2,4 +2,5 @@
   /* text-decoration: underline; */
   font-weight: 600;
   text-transform: lowercase;
+  overflow-wrap: anywhere;
 }

src/index.css

@@ -48,3 +48,10 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #1b3de6;
 }
+
+@media screen and (max-width: 480px) {
+  .ant-pagination {
+    display: flex;
+    justify-content: center;
+  }
+}

src/pages/Dashboard/AddUser/addUser.css

@@ -124,4 +124,32 @@
 
 .add-user-wrapper .calendar-search .ant-list-item-meta {
   align-items: center !important;
+  width: 100%;
+}
+
+@media screen and (max-width: 480px) {
+  .add-user-wrapper .card-heading-container h5 {
+    font-size: 20px;
+  }
+
+  .add-user-wrapper .ant-input-lg,
+  .add-user-wrapper .ant-select-selection-item,
+  .add-user-wrapper .select-wrapper-dropdown {
+    font-size: 12px;
+  }
+
+  .add-user-wrapper .selection-item-list-wrapper .ant-list-item-meta-content {
+    width: fit-content;
+  }
+
+  .add-user-wrapper .selection-item-list-wrapper .ant-list-item-action {
+    margin: 8px 0px;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .add-user-wrapper .selection-item-list-wrapper {
+    flex-direction: column;
+  }
 }

src/pages/Dashboard/Settings/UserManagement/UserManagement.jsx

@@ -289,7 +289,7 @@ const UserManagement = () => {
   const createTitleHandler = (firstName, lastName, userName) => {
     return (
       <div className="title-wrapper">
-        <span>{firstName + ' ' + lastName}</span>
+        <span className="name">{firstName + ' ' + lastName}</span>
         <img src={bulletIcon} />
         <Username userName={userName} />
       </div>
@@ -414,7 +414,7 @@ const UserManagement = () => {
         <Row justify="space-between" gutter={[24, 16]} style={{ marginBottom: 16 }}>
           <Col flex={'auto'}>
             <Row gutter={[8, 8]} align="middle">
-              <Col flex={'auto'} style={{ marginRight: '24px', maxWidth: 400 }}>
+              <Col flex={'auto'} style={{ marginRight: '24px', maxWidth: 400 }} className="user-search-wrapper">
                 <UserSearch
                   placeholder={t('dashboard.settings.userManagement.searchPlaceholder')}
                   onPressEnter={(e) => onSearchHandler(e)}

src/pages/Dashboard/Settings/UserManagement/userManagement.css

@@ -16,6 +16,15 @@
   line-height: 24px;
 }
 
+.settings-wrapper .title-wrapper > .name {
+  overflow-wrap: anywhere;
+}
+
+.settings-wrapper .title-wrapper .event-list-status-userdetail {
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
 .settings-wrapper .users-list-item-wrapper .invitation-details {
   display: flex;
   gap: 6px;
@@ -145,7 +154,18 @@
   margin-right: 8px;
 }
 
-@media only screen and (max-width: 428px) {
+.user-management-wrapper .ant-list-vertical .user-item-content {
+  width: fit-content;
+  align-items: flex-start;
+}
+
+@media screen and (max-width: 768px) {
+  .user-management-wrapper .users-list-item-wrapper {
+    padding: 24px 0px !important;
+  }
+}
+
+@media only screen and (max-width: 480px) {
   .user-management-wrapper .events-heading-wrapper .events-heading {
     font-size: 24px;
     white-space: normal;
@@ -156,4 +176,16 @@
   .user-management-wrapper .events-heading-wrapper {
     width: 200px;
   }
+
+  .user-management-wrapper .users-list-item-wrapper {
+    padding: 16px 0px !important;
+  }
+
+  .user-management-wrapper .ant-list-vertical .user-item-content .tags-wrapper {
+    width: fit-content;
+  }
+
+  .user-management-wrapper .user-search-wrapper {
+    margin-right: 0px !important;
+  }
 }

src/pages/Dashboard/Settings/WidgetSettings/widgetSettings.css

@@ -164,3 +164,45 @@
   height: 32px;
   width: 68px;
 }
+
+@media screen and (max-width: 480px) {
+  .widget-settings-wrapper .heading {
+    font-size: 20px;
+  }
+
+  .widget-settings .widget-settings-form .ant-form-item-label label,
+  .widget-settings .widget-settings-form .ant-input-lg,
+  .widget-settings .page-description,
+  .widget-settings .ant-select-selector .ant-select-selection-placeholder,
+  .widget-settings .select-wrapper-dropdown .ant-select-item-option,
+  .widget-settings .widget-settings-code-container > span {
+    font-size: 12px;
+  }
+
+  .widget-settings .tags-wrapper {
+    font-size: 10px;
+  }
+
+  .widget-settings .ant-form-item {
+    margin-bottom: 16px;
+  }
+
+  .widget-settings .react-colorful {
+    width: 150px;
+    height: 150px;
+  }
+
+  .widget-settings .widget-settings-code-container .outlined-label {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: center;
+    margin-left: 0px;
+  }
+
+  .widget-settings .widget-settings-code-container .outlined-button {
+    height: 32px;
+    width: 68px;
+  }
+}

src/pages/Dashboard/Settings/settings.css

@@ -28,3 +28,21 @@
   border-bottom: 2px solid var(--content-action-darker, #0f0e98);
   background: var(--background-neutrals-transparent, rgba(255, 255, 255, 0));
 }
+
+.settings-wrapper .ant-tabs > .ant-tabs-nav .ant-tabs-nav-more {
+  display: none;
+}
+
+@media screen and (max-width: 480px) {
+  .settings-wrapper .settings-heading {
+    font-size: 24px;
+  }
+
+  .settings-wrapper .ant-tabs-tab {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: left;
+  }
+}

src/pages/Dashboard/UserReadOnly/UserReadOnly.jsx

@@ -82,7 +82,7 @@ const UserReadOnly = () => {
         <Row className="user-read-only-wrapper" gutter={[0, 32]}>
           <Col span={24}>
             <Row gutter={[32, 24]} className="user-read-only-heading-wrapper">
-              <Col span={24} style={{ paddingRight: '0' }}>
+              <Col span={24}>
                 <Row>
                   <Col flex="auto">
                     <div className="breadcrumb-container">

src/pages/Dashboard/UserReadOnly/userReadOnly.css

@@ -104,3 +104,33 @@
 .user-read-only-card .details-wrapper {
   padding: 24px 0;
 }
+
+@media screen and (max-width: 480px) {
+  .user-read-only-heading-wrapper .read-only-user-heading > h1 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .user-read-only-heading-wrapper .user-status-tag .tags-wrapper {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+  }
+
+  .user-read-only-card .user-read-only-info-label,
+  .user-read-only-card .user-read-only-info-data,
+  .user-read-only-calendar-card .calendar-search {
+    font-size: 12px;
+  }
+
+  .user-read-only-card .user-info-details-card-heading,
+  .user-read-only-calendar-card .user-info-details-card-heading {
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  .user-read-only-card .ant-card-body {
+    gap: 16px;
+  }
+}

src/pages/Dashboard/Users/Users.jsx

@@ -211,7 +211,7 @@ function Users() {
               </Col>
             </Row>
           </Col>
-          <CardEvent required={true}>
+          <CardEvent required={true} marginResponsive="0px">
             <Form
               name="userEdit"
               className="user-edit-form"
@@ -302,6 +302,7 @@ function Users() {
               </Form.Item>
               <CustomModal
                 maskClosable
+                className="change-password-modal"
                 title={
                   <div className="custom-modal-title-wrapper">
                     <span className="custom-modal-title-heading" data-cy="span-change-password">
@@ -311,8 +312,9 @@ function Users() {
                 }
                 open={isModalVisible}
                 onCancel={handleModalCancel}
-                width={500}
+                style={{ maxWidth: '500px', padding: '16px' }}
                 centered
+                width="100%"
                 footer={[
                   <TextButton
                     data-cy="button-user-change-password-cancel"

src/pages/Dashboard/Users/users.css

@@ -71,3 +71,48 @@
   height: 40px;
   align-items: center;
 }
+
+.change-password-modal .ant-form-item-label > label {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  color: #222732;
+}
+
+@media screen and (max-width: 575px) {
+  .user-profile-wrapper .add-event-section-wrapper {
+    padding: 0px;
+  }
+
+  .user-profile-wrapper .add-event-section-col {
+    padding: 0px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .user-profile-wrapper .ant-input-lg,
+  .user-profile-wrapper .ant-select,
+  .user-profile-wrapper .ant-select-open,
+  .user-profile-wrapper .ant-form-item-label > label,
+  .change-password-modal .change-password-modal-body label,
+  .change-password-modal .change-password-modal-body .ant-input-affix-wrapper > .ant-input,
+  .change-password-modal .ant-form-item-label > label {
+    font-size: 12px;
+  }
+
+  .user-profile-wrapper .user-profile-heading h4 {
+    font-size: 24px;
+  }
+
+  .change-password-modal .ant-modal-body {
+    padding: 16px !important;
+  }
+
+  .change-password-modal .ant-input-affix-wrapper-lg {
+    padding: 4px 8px;
+  }
+
+  .change-password-modal .ant-form-item {
+    margin-bottom: 16px;
+  }
+}