Day page redesign

src/components/Button/constants.ts → src/components/common/Button/constants.ts

@@ -1,20 +1,15 @@
-import {ButtonSizes, ButtonVariants} from './types';
+import {ButtonVariants} from './types';
 
 export const buttonVariants = {
   [ButtonVariants.primary]:
-    'border-secondaryBackgroundColor bg-mainBackgroundColor hover:border-sky-500 hover:text-sky-500',
+    'border-secondary-background-color bg-mainBackgroundColor hover:border-sky-500 hover:text-sky-500',
   [ButtonVariants.secondary]:
     'border-blue-600 bg-blue-600 hover:text-sky-500 hover:border-sky-500 hover:bg-mainBackgroundColor',
   [ButtonVariants.red]:
     'border-red-400 bg-red-400 hover:text-red-500 hover:border-red-500 hover:bg-mainBackgroundColor',
   [ButtonVariants.primaryBordered]:
-    'border-secondaryBackgroundColor bg-transparent text-secondaryBackgroundColor hover:bg-secondaryBackgroundColor hover:text-white',
+    'border-secondary-background-color bg-transparent text-secondary-background-color hover:bg-secondary-background-color hover:text-white',
   [ButtonVariants.secondaryBordered]: 'border-sky-500 text-sky-500 bg-transparent hover:bg-sky-500 hover:text-white',
   [ButtonVariants.redBordered]: 'border-red-400 text-red-400 bg-transparent hover:bg-red-400 hover:text-white',
-};
-
-export const buttonSizes = {
-  [ButtonSizes.default]: 'text-sm px-3 py-2',
-  [ButtonSizes.medium]: 'text-base px-4 py-3',
-  [ButtonSizes.small]: 'text-xs px-2 py-1',
+  [ButtonVariants.transparent]: 'border-none text-[#3a3a3a] bg-transparent hover:text-white',
 };

src/components/Button/index.tsx → src/components/common/Button/index.tsx

@@ -2,13 +2,12 @@ import {Link} from 'react-router';
 
 import {cx} from '@/services/utils';
 
-import {buttonSizes, buttonVariants} from './constants';
-import {ButtonSizes, TButtonProps, TLinkKindProps} from './types';
+import {buttonVariants} from './constants';
+import {TButtonProps, TLinkKindProps} from './types';
 
 const Button = ({
   variant = 'primary',
   kind = 'button',
-  size = ButtonSizes.default,
   startIcon = null,
   endIcon = null,
   text = '',
@@ -19,21 +18,20 @@ const Button = ({
   const btnContent = (
     <button
       className={cx(
-        'w-auto p-3 flex justify-center items-center gap-2 cursor-pointer border rounded-lg transition duration-500 ease-in-out disabled:hover:border-secondaryBackgroundColor disabled:text-secondaryBackgroundColor disabled:hover:text-secondaryBackgroundColor disabled:cursor-auto',
+        'w-auto p-3 flex justify-center items-center gap-2 cursor-pointer border rounded-lg transition duration-500 ease-in-out disabled:hover:border-secondary-background-color disabled:text-secondary-background-color disabled:hover:text-secondary-background-color disabled:cursor-auto',
         buttonVariants[variant],
-        buttonSizes[size],
         className,
       )}
       {...restProps}>
       <div
         className={cx('flex items-center justify-center w-full', {
           'gap-2': (startIcon || endIcon) && text,
         })}>
-        {startIcon ? <span className="font-normal block truncate">{startIcon}</span> : null}
+        {startIcon ? <span className="font-medium block truncate">{startIcon}</span> : null}
 
-        <span className="font-normal block truncate">{text}</span>
+        <span className="font-medium block truncate">{text}</span>
 
-        {endIcon ? <span className="font-normal block truncate">{endIcon}</span> : null}
+        {endIcon ? <span className="font-medium block truncate">{endIcon}</span> : null}
       </div>
 
       {children}

src/components/Button/types.tsx → src/components/common/Button/types.tsx

@@ -10,12 +10,7 @@ export enum ButtonVariants {
   primaryBordered = 'primary-bordered',
   secondaryBordered = 'secondary-bordered',
   redBordered = 'red-bordered',
-}
-
-export enum ButtonSizes {
-  default = 'default',
-  medium = 'medium',
-  small = 'small',
+  transparent = 'transparent',
 }
 
 type TButton =
@@ -48,7 +43,6 @@ type TButtonKind = TButtonKindProps | TLinkKindProps;
 
 type TButtonType = {
   variant?: `${ButtonVariants}`;
-  size?: ButtonSizes;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
 };

src/components/EventForm/index.tsx → src/components/common/EventForm/index.tsx

@@ -5,13 +5,13 @@ import {useMemo} from 'react';
 import {FormProvider, SubmitHandler, useForm} from 'react-hook-form';
 import {useSelector} from 'react-redux';
 
-import Button from '@/components/Button';
-import DropdownControl from '@/components/formInputs/DropdownControl';
-import InputControl from '@/components/formInputs/InputControl';
-import TextareaControl from '@/components/formInputs/TextareaControl';
-import CheckIcon from '@/icons/CheckIcon';
-import CloseIcon from '@/icons/CloseIcon';
-import EditIcon from '@/icons/EditIcon';
+import Button from '@/components/common/Button';
+import DropdownControl from '@/components/common/formInputs/DropdownControl';
+import InputControl from '@/components/common/formInputs/InputControl';
+import TextareaControl from '@/components/common/formInputs/TextareaControl';
+import CheckIcon from '@/components/ui/icons/CheckIcon';
+import CloseIcon from '@/components/ui/icons/CloseIcon';
+import EditIcon from '@/components/ui/icons/EditIcon';
 import {selectDay, selectMonth, selectYear} from '@/redux/date/selectors';
 import {addEvent, editEvent} from '@/redux/events/eventsSlice';
 import {useAppDispatch} from '@/redux/store';

src/components/EventsList/EventsListItem/index.tsx → src/components/common/EventsList/EventsListItem/index.tsx

@@ -1,13 +1,13 @@
-import {useCallback} from 'react';
+import {memo, useCallback} from 'react';
 
-import Button from '@/components/Button';
-import EventForm from '@/components/EventForm';
-import {FormActionType} from '@/components/EventForm/types';
-import Modal from '@/components/Modal';
+import Button from '@/components/common/Button';
+import EventForm from '@/components/common/EventForm';
+import {FormActionType} from '@/components/common/EventForm/types';
+import Modal from '@/components/common/Modal';
+import BarsIcon from '@/components/ui/icons/BarsIcon';
+import DeleteIcon from '@/components/ui/icons/DeleteIcon';
+import EditIcon from '@/components/ui/icons/EditIcon';
 import {useOpeningItem} from '@/hooks/useOpeningItem';
-import BarsIcon from '@/icons/BarsIcon';
-import DeleteIcon from '@/icons/DeleteIcon';
-import EditIcon from '@/icons/EditIcon';
 import {deleteEvent} from '@/redux/events/eventsSlice';
 import {TEvent} from '@/redux/events/types';
 import {useAppDispatch} from '@/redux/store';
@@ -22,13 +22,20 @@ const EventsListItem = ({event, showItemControls}: {event: TEvent; showItemContr
 
   return (
     <>
-      <div className="relative flex items-center gap-6 max-md:gap-4 rounded-lg px-4 py-3 border border-secondaryBackgroundColor">
-        <div style={{background: event.color}} className="w-2 h-2 rounded-full absolute top-1.5 left-1.5"></div>
-
+      <div
+        className="relative flex items-center gap-6 max-md:gap-4 rounded-lg px-4 py-3"
+        style={{background: `rgb(from ${event.color} r g b / 0.15)`, borderLeft: `2px solid ${event.color}`}}>
         <div className="flex-1">
           <h4 className="text-lg font-semibold">{event.title}</h4>
 
           {event.description && <p className="text-base text-gray-400 line-clamp-3">{event.description}</p>}
+
+          {/* TODO: add correct calendar */}
+          <div
+            className="w-fit text-xs/[1] rounded-[20px] px-1.5 py-1 mt-1.5 font-medium"
+            style={{backgroundColor: 'rgba(74, 108, 247, 0.3)', color: 'rgb(74, 108, 247)'}}>
+            Work
+          </div>
         </div>
 
         {showItemControls && (
@@ -61,4 +68,4 @@ const EventsListItem = ({event, showItemControls}: {event: TEvent; showItemContr
   );
 };
 
-export default EventsListItem;
+export default memo(EventsListItem);

src/components/common/EventsList/index.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import {useLayoutEffect, useRef, useState} from 'react';
+
+import {useEventsList} from '@/hooks/useEventsList';
+
+import EventsListItem from './EventsListItem';
+
+const EventsList = ({
+  date,
+  showItemControls = false,
+  showEventsCount = false,
+}: {
+  date: string;
+  showItemControls?: boolean;
+  showEventsCount?: boolean;
+}) => {
+  const [hasScroll, setHasScroll] = useState(false);
+
+  const events = useEventsList(date);
+  const eventsContainerRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const container = eventsContainerRef.current;
+    if (!container) return;
+
+    const handleResize = () => {
+      setHasScroll(prev => {
+        const next = container.scrollHeight > container.clientHeight;
+        return next === prev ? prev : next;
+      });
+    };
+
+    handleResize();
+
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [events]);
+
+  return (
+    <>
+      {showEventsCount && <p className="text-sm text-[#444444] uppercase mb-2.5">Events · {events?.length}</p>}
+
+      <div
+        ref={eventsContainerRef}
+        className={classNames('flex-1 overflow-y-auto scroll-smooth', {'pr-2.5': hasScroll})}>
+        {/* <div className="flex-1 min-h-screen overflow-y-auto scroll-smooth"> */}
+        {!events?.length ? (
+          <p>no events</p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {events?.map(event => <EventsListItem key={event.id} event={event} showItemControls={showItemControls} />)}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default EventsList;

src/components/Modal/index.tsx → src/components/common/Modal/index.tsx

@@ -20,12 +20,12 @@ const Modal = ({refItem, className, children, onClose}: TModalProps) => {
         <div
           onClick={handleClose}
           className={cn(
-            'fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-secondaryBackgroundColor bg-opacity-80 z-20',
+            'fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-overlay bg-opacity-80 z-[1000]',
             className,
           )}>
           <div
             ref={refItem}
-            className='relative bg-mainBackgroundColor border border-sky-500 rounded-lg md:min-w-96 sm:min-w-56"'>
+            className="relative bg-mainBackgroundColor border border-sky-500 rounded-lg md:min-w-96 sm:min-w-56">
             {children}
           </div>
         </div>,

src/components/common/MonthSmallCalendar/index.tsx

@@ -0,0 +1,51 @@
+import moment from 'moment';
+import {useSelector} from 'react-redux';
+
+import {selectFullDate, selectMonth, selectYear} from '@/redux/date/selectors';
+import {formatDate, generateDatesArray, getDate, getWeekDays} from '@/services/dateUtils';
+import {cx} from '@/services/utils';
+
+const MonthSmallCalendar = () => {
+  const fullDate = useSelector(selectFullDate);
+  const year = useSelector(selectYear);
+  const month = useSelector(selectMonth);
+
+  const dates = generateDatesArray(year as string, month as string);
+  const weekDays = getWeekDays();
+
+  return (
+    <div className="px-4 py-5">
+      <p className="text-[15px] text-[#444444] uppercase mb-[10px] pl-1.5">
+        {month} {year}
+      </p>
+
+      <div className="grid grid-cols-7 gap-[1px]">
+        {weekDays.map(weekday => (
+          <span key={weekday} className="flex flex-1 justify-center px-2 text-sm text-gray-400">
+            {weekday.slice(0, 1)}
+          </span>
+        ))}
+
+        {dates.map(date => {
+          const day = formatDate(getDate(date), 'DD');
+          const currentMonth = formatDate(moment(fullDate), 'M');
+          const dateMonth = formatDate(moment(date), 'M');
+          const currentDate = formatDate(getDate(new Date()), 'YYYY-MM-DD');
+
+          return (
+            <div
+              key={date}
+              className={cx('text-gray-400 text-sm py-[3px] text-center rounded-full', {
+                'text-[#444444]': currentMonth !== dateMonth,
+                'text-white bg-blue-600': currentDate === date,
+              })}>
+              <time dateTime={date}>{day}</time>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MonthSmallCalendar;

src/components/inputs/Dropdown/index.tsx → src/components/common/inputs/Dropdown/index.tsx

@@ -1,8 +1,8 @@
 import {memo, useCallback, useEffect, useRef, useState} from 'react';
 
+import ArrowDown from '@/components/ui/icons/ArrowDown';
+import CheckIcon from '@/components/ui/icons/CheckIcon';
 import {useOpeningItem} from '@/hooks/useOpeningItem';
-import ArrowDown from '@/icons/ArrowDown';
-import CheckIcon from '@/icons/CheckIcon';
 import {cx} from '@/services/utils';
 
 import Button from '../../Button';
@@ -53,7 +53,7 @@ const Dropdown = ({
   return (
     <div className={cx('w-full relative', className)}>
       <Button
-        className={cx('py-2 w-full h-full text-left border-secondaryBackgroundColor z-30', {
+        className={cx('py-2 w-full h-full text-left border-secondary-background-color z-30', {
           'border-sky-500 text-sky-500': isOpen,
         })}
         text={currentValue ? currentValue : placeholder}
@@ -80,16 +80,16 @@ const Dropdown = ({
             className="fixed w-full h-full inset-0 z-20"
           />
 
-          <ul className="absolute mt-1 w-full bg-mainBackgroundColor border border-secondaryBackgroundColor shadow-lg max-h-[220px] rounded-md text-sm ring-opacity-5 overflow-auto focus:outline-none z-30">
+          <ul className="absolute mt-1 w-full bg-mainBackgroundColor border border-secondary-background-color shadow-lg max-h-[220px] rounded-md text-sm ring-opacity-5 overflow-auto focus:outline-none z-30">
             {options.map(option => (
               <li
                 ref={currentValue === option ? activeOptionRef : null}
                 key={option}
                 className={cx(
                   {
-                    'bg-secondaryBackgroundColor': currentValue === option,
+                    'bg-secondary-background-color': currentValue === option,
                   },
-                  'transition-all flex items-center justify-between gap-1 cursor-pointer text-white select-none relative py-2 px-3 hover:bg-secondaryBackgroundColor',
+                  'transition-all flex items-center justify-between gap-1 cursor-pointer text-white select-none relative py-2 px-3 hover:bg-secondary-background-color',
                 )}
                 onClick={() => handleChange(option)}>
                 <span className="font-normal block truncate">{option}</span>