Feature/better ux edit recurring (#588)

* rename .env.example file with .env

* Set text color of selected today in date-picker to white

* make new recurring event darker

* change alert to toast

* .env.example file added

* update my .env.example file

* Remove .env.example from repo

* new changes for better-ux-edit-recurring

* deleting isRecurring on web.event.types.ts file

Author: Amumug

packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx

@@ -6,6 +6,7 @@ import React, {
   memo,
   useMemo,
 } from "react";
+import { toast } from "react-toastify";
 import { Priorities } from "@core/constants/core.constants";
 import {
   DATA_EVENT_ELEMENT_ID,
@@ -34,6 +35,8 @@ interface Props {
   isDragging: boolean;
   isPlaceholder: boolean;
   isResizing: boolean;
+  isRecurring: boolean;
+  isInPast: boolean;
   measurements: Measurements_Grid;
   onEventMouseDown: (event: Schema_GridEvent, e: MouseEvent) => void;
   onScalerMouseDown: (
@@ -47,6 +50,7 @@ interface Props {
 const _GridEvent = (
   {
     event: _event,
+
     isDraft,
     isDragging,
     isPlaceholder,
@@ -83,6 +87,7 @@ const _GridEvent = (
     allDay: event.isAllDay || false,
     className: isDraft ? "active" : undefined,
     height: position.height || 0,
+    isRecurring,
     isDragging,
     isInPast,
     isPlaceholder,
@@ -93,7 +98,7 @@ const _GridEvent = (
     onMouseDown: (e: MouseEvent) => {
       if (isRecurring) {
         console.log(event);
-        alert("Can't edit recurring events (yet)");
+        toast("Can't edit recurring events (yet)");
         e.stopPropagation();
         return;
       }
@@ -140,7 +145,7 @@ const _GridEvent = (
                 showResizeCursor={!isPlaceholder && !isResizing && !isDragging}
                 onMouseDown={(e) => {
                   if (isRecurring) {
-                    alert("Can't edit recurring events (yet)");
+                    toast("Can't edit recurring events (yet)");
                     e.stopPropagation();
                     return;
                   }

packages/web/src/views/Calendar/components/Event/styled.ts

@@ -15,6 +15,7 @@ interface StyledEventProps {
   hoverColor?: string;
   isDragging: boolean;
   isInPast: boolean;
+  isRecurring: boolean;
   isResizing: boolean;
   isPlaceholder: boolean;
   isOptimistic: boolean;
@@ -52,7 +53,8 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
 })<StyledEventProps>`
   background-color: ${(props) => props.backgroundColor};
   border-radius: 2px;
-  filter: brightness(${({ isInPast }) => (isInPast ? 0.7 : null)});
+  filter: ${({ isRecurring, isInPast }) =>
+    isRecurring || isInPast ? "brightness(0.7)" : "brightness(1)"};
   height: ${({ height }) => height}px;
   left: ${(props) => props.left}px;
   opacity: ${(props) => props.opacity};

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx

@@ -1,5 +1,6 @@
 import dayjs from "dayjs";
 import React, { MouseEvent, memo } from "react";
+import { toast } from "react-toastify";
 import { Priorities } from "@core/constants/core.constants";
 import { DATA_EVENT_ELEMENT_ID } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
@@ -49,13 +50,14 @@ const AllDayEvent = ({
     isInPast: dayjs().isAfter(dayjs(event.endDate)),
     isPlaceholder,
     isOptimistic,
+    isRecurring,
     isResizing: false,
     left: position.left,
     lineClamp: 1,
     onMouseDown: (e: MouseEvent) => {
       if (isRecurring) {
         console.log(event);
-        alert("Can't edit recurring events (yet)");
+        toast("Can't edit recurring events (yet)");
         e.stopPropagation();
         return;
       }