Merge pull request #874 from culturecreates/bugfix/issue-838

Bugfix/issue 838
culturecreates · Dec 19, 2023 · 4b16fe1 · 4b16fe1
2 parents 1e9a30f + 1ce7c96
commit 4b16fe1
Show file tree

Hide file tree

Showing 20 changed files with 567 additions and 454 deletions.
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,30 @@
+.ant-pagination-item {
+  background-color: #fff;
+  border: none;
+  font-weight: 400;
+}
+
+.ant-pagination-item > a {
+  color: #222732;
+}
+
+.ant-pagination-item-active {
+  border-radius: 4px;
+  background: var(--content-action-default, #1b3de6);
+  font-weight: 700;
+}
+
+.ant-pagination-item-active > a {
+  color: #fff;
+}
+
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link {
+  border: none;
+}
+
+.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
+.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
+  color: #222732;
+  font-size: 12px;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './App.css';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router/index';
 

diff --git a/src/components/Button/AddEvent/addEvent.css b/src/components/Button/AddEvent/addEvent.css
@@ -8,3 +8,7 @@
   font-weight: 600;
   font-size: 16px;
 }
+.add-event-button:hover {
+  background-color: #0f0e98;
+  border-color: #0f0e98;
+}
diff --git a/src/components/Button/Auth/auth.css b/src/components/Button/Auth/auth.css
@@ -22,3 +22,8 @@
   color: #ffffff;
   cursor: pointer;
 }
+
+.login-form-button:hover {
+  background-color: #0f0e98;
+  border-color: #0f0e98;
+}
diff --git a/src/components/Button/Primary/primary.css b/src/components/Button/Primary/primary.css
@@ -9,3 +9,8 @@
   font-size: 16px;
   color: #ffffff;
 }
+
+.primary-button:hover {
+  background-color: #0f0e98;
+  border-color: #0f0e98;
+}
diff --git a/src/components/Card/Common/Event.jsx b/src/components/Card/Common/Event.jsx
@@ -3,29 +3,33 @@ import { Row, Col } from 'antd';
 import './event.css';
 
 function Event(props) {
-  const { title, required, hidden } = props;
+  const { title, required, hidden, marginTop } = props;
   return (
-    <Col
-      className="add-event-section-col"
-      flex={'780px'}
-      style={{ display: hidden && 'none', borderRadius: '4px', backgroundColor: '#ffffff', margin: '0 16px' }}>
-      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className="events-content" justify="space-between">
-        <Col flex={'423px'}>
-          <div className="add-event-section-wrapper">
-            {title && (
-              <Row>
-                <Col>
-                  <div className={`add-event-date-wrap ${required && 'title-required'}`} data-cy="section-title">
-                    {title}
-                  </div>
-                </Col>
-              </Row>
-            )}
-            {props?.children[0] ?? props?.children}
-          </div>
-        </Col>
-        <Col flex={'253px'}>
-          <div style={{ width: '100%', marginTop: '35%' }}>{props?.children[1]}</div>
+    <Col span={24}>
+      <Row>
+        <Col
+          className="add-event-section-col"
+          flex={'780px'}
+          style={{ display: hidden && 'none', borderRadius: '4px', backgroundColor: '#ffffff', margin: '0 16px' }}>
+          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className="events-content" justify="space-between">
+            <Col flex={'423px'}>
+              <div className="add-event-section-wrapper">
+                {title && (
+                  <Row>
+                    <Col>
+                      <div className={`add-event-date-wrap ${required && 'title-required'}`} data-cy="section-title">
+                        {title}
+                      </div>
+                    </Col>
+                  </Row>
+                )}
+                {props?.children[0] ?? props?.children}
+              </div>
+            </Col>
+            <Col flex={'253px'}>
+              <div style={{ width: '100%', marginTop: marginTop ? marginTop : '35%' }}>{props?.children[1]}</div>
+            </Col>
+          </Row>
         </Col>
       </Row>
     </Col>

diff --git a/src/components/ChangeType/ChangeType.jsx b/src/components/ChangeType/ChangeType.jsx
@@ -6,24 +6,25 @@ function ChangeType(props) {
   const { primaryIcon, disabled, label, secondaryIcon, promptText, onClick } = props;
   return (
     <div className="change-type-wrapper">
-      <Button
-        type="primary"
-        icon={primaryIcon}
-        disabled={disabled}
-        size="small"
-        className="first-button"
-        onClick={onClick}
-        data-cy="button-select-change-type"
-      />
+      <TooltipStyled title={promptText}>
+        <Button
+          type="primary"
+          icon={primaryIcon}
+          disabled={disabled}
+          size="small"
+          className="first-button"
+          onClick={onClick}
+          data-cy="button-select-change-type"
+        />
+      </TooltipStyled>
+
       <Button
         type="text"
         disabled={disabled}
         className="second-button"
         onClick={onClick}
         data-cy="button-select-change-type">
         {label}
-      </Button>
-      <TooltipStyled title={promptText}>
         <Button
           type="text"
           icon={secondaryIcon}
@@ -32,7 +33,7 @@ function ChangeType(props) {
           className="third-button"
           data-cy="button-select-change-type"
         />
-      </TooltipStyled>
+      </Button>
     </div>
   );
 }

diff --git a/src/components/Dropdown/Calendar/Calendar.jsx b/src/components/Dropdown/Calendar/Calendar.jsx
@@ -50,7 +50,6 @@ function Calendar({ children, allCalendarsData, setPageNumber }) {
       setPageNumber(1);
       sessionStorage.clear();
       setOpen(false);
-      console.log(window.location.origin);
       const origin = window.location.origin;
       const newUrl = `${origin}${PathName.Dashboard}/${key}${PathName.Events}`;
       window.location.href = newUrl;
@@ -68,7 +67,8 @@ function Calendar({ children, allCalendarsData, setPageNumber }) {
       }}
       open={open}
       onOpenChange={handleOpenChange}
-      trigger={['click']}>
+      trigger={['click']}
+      overlayClassName="calendar-dropdown">
       {children}
     </Dropdown>
   );

diff --git a/src/components/Dropdown/EventStatus/EventStatus.jsx b/src/components/Dropdown/EventStatus/EventStatus.jsx
@@ -10,7 +10,7 @@ import { useDeleteEventMutation, useUpdateEventMutation, useUpdateEventStateMuta
 import { useNavigate, useParams } from 'react-router-dom';
 import { PathName } from '../../../constants/pathName';
 const { confirm } = Modal;
-function EventStatusOptions({ children, publishState, creator, eventId, isFeatured, eventData }) {
+function EventStatusOptions({ children, publishState, creator, eventId, isFeatured, eventData, ...rest }) {
   const { t } = useTranslation();
   const { calendarId } = useParams();
   const navigate = useNavigate();
@@ -129,6 +129,7 @@ function EventStatusOptions({ children, publishState, creator, eventId, isFeatur
   return (
     <ProtectedComponents creator={creator}>
       <Dropdown
+        {...rest}
         className="calendar-dropdown-wrapper"
         overlayClassName="event-dropdown-popup"
         overlayStyle={{

diff --git a/src/components/Filter/SearchableCheckbox/searchableCheckbox.css b/src/components/Filter/SearchableCheckbox/searchableCheckbox.css
@@ -18,4 +18,5 @@
   overflow-y: scroll;
   margin-top: 8px;
   overflow-x: hidden;
+  word-break: break-word;
 }
diff --git a/src/components/List/Events/List.jsx b/src/components/List/Events/List.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocation, useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import './list.css';
 import { List, Grid, Dropdown } from 'antd';
@@ -35,6 +35,8 @@ function Lists(props) {
   const [currentCalendarData] = useOutletContext();
   const totalCount = data?.totalCount;
 
+  const [selectedItemId, setSelectedItemId] = useState(null);
+
   const calendar = user?.roles?.filter((calendar) => {
     return calendar?.calendarId === calendarId;
   });
@@ -80,6 +82,10 @@ function Lists(props) {
             (calendar[0]?.role === userRoles.CONTRIBUTOR && eventItem?.creator?.userId != user?.id) ? (
               <Dropdown
                 className="calendar-dropdown-wrapper"
+                onOpenChange={(open) => {
+                  if (open) setSelectedItemId(eventItem?.id);
+                  else setSelectedItemId(null);
+                }}
                 overlayStyle={{
                   minWidth: '150px',
                 }}
@@ -97,19 +103,31 @@ function Lists(props) {
                 }}
                 trigger={['click']}>
                 <span>
-                  <MoreOutlined className="event-list-more-icon" key={index} />
+                  <MoreOutlined
+                    className="event-list-more-icon"
+                    style={{ color: selectedItemId === eventItem?.id && '#1B3DE6' }}
+                    key={index}
+                  />
                 </span>
               </Dropdown>
             ) : (
               <EventStatusOptions
+                onOpenChange={(open) => {
+                  if (open) setSelectedItemId(eventItem?.id);
+                  else setSelectedItemId(null);
+                }}
                 key={index}
                 publishState={eventItem?.publishState}
                 isFeatured={eventItem?.isFeatured}
                 eventData={eventItem}
                 creator={eventItem?.creator}
                 eventId={eventItem?.id}>
                 <span>
-                  <MoreOutlined className="event-list-more-icon" key={index} />
+                  <MoreOutlined
+                    className="event-list-more-icon"
+                    style={{ color: selectedItemId === eventItem?.id && '#1B3DE6' }}
+                    key={index}
+                  />
                 </span>
               </EventStatusOptions>
             ),

diff --git a/src/components/List/Events/list.css b/src/components/List/Events/list.css
@@ -1,6 +1,7 @@
 .event-list-wrapper .event-list-more-icon {
   font-size: 24px;
   cursor: pointer;
+  border-radius: 50%;
 }
 
 .event-list-wrapper .event-list-item-wrapper {
@@ -106,6 +107,9 @@
   background-color: #1b3de6;
   clip-path: polygon(0 0, 0% 100%, 100% 0);
 }
+.event-list-wrapper .event-list-more-icon:hover {
+  background-color: #eff2ff;
+}
 @media only screen and (max-width: 1024px) {
   .event-list-wrapper {
     width: 592px;

diff --git a/src/components/List/SelectionItem/selectionItem.css b/src/components/List/SelectionItem/selectionItem.css
@@ -10,9 +10,11 @@
 }
 .selection-item-list-wrapper {
   padding: 0px;
-  align-items: self-start;
+  align-items: center;
+}
+.selection-item-wrapper .ant-list-item-meta {
+  align-items: center;
 }
-
 .selection-item-wrapper .ant-list-item-meta-title {
   line-height: 1;
 }
@@ -22,6 +24,9 @@
   font-size: 16px;
   color: #222732;
 }
+.selection-item-list-wrapper .ant-list-item-action-split {
+  display: none;
+}
 
 .selection-item-list-wrapper .selection-item-subheading,
 .selection-item-wrapper .selection-item-sub-content {

diff --git a/src/components/Sidebar/Main/Sidebar.jsx b/src/components/Sidebar/Main/Sidebar.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './sidebar.css';
+import { DownOutlined } from '@ant-design/icons';
 import { Layout, Menu } from 'antd';
 import { sidebarItems } from '../../../constants/sidebarItems';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +55,19 @@ function Sidebar(props) {
             />
           </div>
         ),
-        label,
+        label: (
+          <>
+            {label}{' '}
+            <DownOutlined
+              style={{
+                position: 'relative',
+                top: '50%',
+                left: '100%',
+                fontSize: '8px',
+              }}
+            />
+          </>
+        ),
         className: 'sidebar-calendar',
       },
     ];

diff --git a/src/components/Sidebar/Main/sidebar.css b/src/components/Sidebar/Main/sidebar.css
@@ -25,12 +25,14 @@
   margin-top: 24px;
 }
 
-.sidebar-wrapper .sidebar-main-menu .ant-menu-light .ant-menu-item:hover:not(.sidebar-wrapper .sidebar-main-menu .ant-menu-item-selected) {
+.sidebar-wrapper
+  .sidebar-main-menu
+  .ant-menu-light
+  .ant-menu-item:hover:not(.sidebar-wrapper .sidebar-main-menu .ant-menu-item-selected) {
   background-color: #f9faff;
-  color: #1B3DE6
+  color: #1b3de6;
 }
 
-
 .sidebar-wrapper .sidebar-calendar {
   gap: 8px;
   height: 48px;
@@ -53,6 +55,10 @@
   display: grid;
   place-content: center;
 }
+
+.sidebar-calendar-menu .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: #fff;
+}
 @media only screen and (max-width: 600px) {
   .sidebar-wrapper {
     display: none;