feat(manager-dashboard): complete mapillary image filter inputs

Author: ofr1tz

manager-dashboard/app/Base/styles.css

@@ -122,9 +122,14 @@ p {
     --line-height-relaxed: 1.625;
     --line-height-loose: 2;
 
-
     --shadow-card: 0 2px 4px -2px var(--color-shadow);
 
     --duration-transition-medium: .2s;
 
+    --color-background-hover-light: rgba(0, 0, 0, .04);
+    --width-calendar-date: 2.4rem;
+
+    --opacity-watermark: 0.3;
+    --color-text-disabled: rgba(0, 0, 0, .3);
+
 }

manager-dashboard/app/components/Calendar/CalendarDate/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import RawButton, { Props as RawButtonProps } from '../../RawButton';
+import { ymdToDateString, typedMemo } from '../../../utils/common.tsx';
+
+import styles from './styles.css';
+
+export interface Props {
+    className?: string;
+    year: number;
+    month: number;
+    date: number;
+    currentYear: number;
+    currentMonth: number;
+    activeDate?: string;
+    currentDate: number;
+    onClick?: (year: number, month: number, date: number) => void;
+    elementRef?: RawButtonProps<undefined>['elementRef'];
+    ghost?: boolean;
+}
+
+function CalendarDate(props: Props) {
+    const {
+        className,
+        year,
+        month,
+        date,
+        currentYear,
+        currentMonth,
+        currentDate,
+        onClick,
+        elementRef,
+        activeDate,
+        ghost,
+    } = props;
+
+    const handleClick = React.useCallback(() => {
+        if (onClick) {
+            onClick(year, month, date);
+        }
+    }, [year, month, date, onClick]);
+
+    const dateString = ymdToDateString(year, month, date);
+
+    return (
+        <RawButton
+            elementRef={elementRef}
+            name={date}
+            className={_cs(
+                styles.date,
+                year === currentYear
+                && month === currentMonth
+                && currentDate === date
+                && styles.today,
+                dateString === activeDate && styles.active,
+                ghost && styles.ghost,
+                className,
+            )}
+            onClick={handleClick}
+        >
+            {date}
+        </RawButton>
+
+    );
+}
+
+export default typedMemo(CalendarDate);

manager-dashboard/app/components/Calendar/CalendarDate/styles.css

@@ -0,0 +1,25 @@
+.date {
+    border-radius: 50%;
+    width: var(--width-calendar-date);
+    height: var(--width-calendar-date);
+
+    &.today {
+        color: var(--color-accent);
+        font-weight: var(--font-weight-bold);
+    }
+
+    &:hover {
+        background-color: var(--color-background-hover-light);
+    }
+
+    &.active {
+        background-color: var(--color-accent);
+        color: var(--color-text-on-dark);
+        pointer-events: none;
+    }
+
+    &.ghost {
+        opacity: 0.5;
+    }
+}
+