diff --git a/package-lock.json b/package-lock.json index b5ccff5..be2e6ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5465,9 +5465,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001538", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz", - "integrity": "sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==", + "version": "1.0.30001542", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz", + "integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==", "dev": true }, "case-sensitive-paths-webpack-plugin": { diff --git a/src/components/ContextButton.tsx b/src/components/ContextButton.tsx index cb60060..4f7ef39 100644 --- a/src/components/ContextButton.tsx +++ b/src/components/ContextButton.tsx @@ -8,8 +8,7 @@ export const ContextButton = styled.button<{ colorType: "primary" | "danger" }>` ${({ theme, colorType, disabled }) => { const color = colorType === "danger" ? theme.colors.error : theme.colors.primary; - const borderColor = - colorType === "danger" ? theme.colors.error : theme.colorSchemas.timeSlotButton.available.border; + const borderColor = colorType === "danger" ? theme.colors.error : theme.colorSchemas.input.border; const borderColorHover = colorType === "danger" ? theme.colors.error : theme.colors.darkGrey; return css` diff --git a/src/components/layout/AppLayoutWrapper.tsx b/src/components/layout/AppLayoutWrapper.tsx index d0b927e..ad8cc1e 100644 --- a/src/components/layout/AppLayoutWrapper.tsx +++ b/src/components/layout/AppLayoutWrapper.tsx @@ -10,7 +10,7 @@ export const Wrapper = styled.div` display: grid; grid-template-columns: 1fr - min(900px, calc(100% - 40px)) + min(980px, calc(100% - 40px)) 1fr; & > * { diff --git a/src/features/service/components/Service/BookService/BookService.tsx b/src/features/service/components/Service/BookService/BookService.tsx index a81acfb..bed756e 100644 --- a/src/features/service/components/Service/BookService/BookService.tsx +++ b/src/features/service/components/Service/BookService/BookService.tsx @@ -7,6 +7,7 @@ import { Column } from "components/layout/Column"; import { useBookDateRange } from "features/service/hooks/useBookDateRange"; import { useBookSlot } from "features/service/hooks/useBookSlot"; import { Form, Formik } from "formik"; +import { getServiceConfigByType } from "helpers/functions"; import { useLocale } from "helpers/hooks/useLocale"; import { convertSourceDateTimeToTargetDateTime } from "helpers/timeFormat"; import _ from "lodash"; @@ -18,9 +19,9 @@ import { useParams } from "react-router-dom"; import { useRecoilState, useRecoilValue } from "recoil"; import { hoursSystemAtom } from "state/atoms"; import { selectedDateRange } from "state/atoms/selectedDateRange"; -import { selectedSlot } from "state/atoms/selectedSlot"; import { selectedSlots } from "state/atoms/selectedSlots"; import { serviceAtom } from "state/atoms/service"; +import { slotsAtom } from "state/atoms/slots"; import { slotsFiltersAtom } from "state/atoms/slotsFilters"; import { timeZoneAtom } from "state/atoms/timeZone"; import { uploadAttachmentsAtom } from "state/atoms/uploadAttachments"; @@ -83,11 +84,11 @@ const BookService = () => { const [searchParams] = useSearchParams(); const locale = useLocale(); const { t } = useTranslation(["forms"]); - const selectedSlotValue = useRecoilValue(selectedSlot); const selectedDateRangeValue = useRecoilValue(selectedDateRange); const selectedSlotsValue = useRecoilValue(selectedSlots); const service = useRecoilValue(serviceAtom)!; const serviceType = service?.viewConfig.displayType; + const serviceConfig = service && getServiceConfigByType({ service }); const { formFields }: { formFields: Array } = service ?? { formFields: [], }; @@ -100,20 +101,22 @@ const BookService = () => { const hoursSystem = useRecoilValue(hoursSystemAtom); const is12HoursSystem = useMemo(() => hoursSystem === HOURS_SYSTEMS.h12, [hoursSystem]); const [, setSelectedSlots] = useRecoilState(selectedSlots); + const slots = useRecoilValue(slotsAtom)!; const isUploading = Object.values(uploadState).filter((item) => item.isLoading).length > 0; const dateFormat = is12HoursSystem ? "iiii dd MMM, h:mm a" : "iiii dd MMM, H:mm"; - const formattedDate = - selectedSlotValue && - convertSourceDateTimeToTargetDateTime({ - date: selectedSlotValue, - targetTimeZone: timeZone, - sourceTimeZone: service.project.localTimeZone, - dateFormat, - locale, - }); + const selectedSlot = slots.find((slot) => slot.slotId === selectedSlotsValue[0])!; + const formattedDate = selectedSlotsValue?.length + ? convertSourceDateTimeToTargetDateTime({ + date: selectedSlot.dateTimeFrom, + targetTimeZone: timeZone, + sourceTimeZone: service.project.localTimeZone, + dateFormat, + locale, + }) + : ""; const checkDisableButton = useCallback(() => { const disabledForSlots = !selectedSlotsValue.length || loading || isUploading; @@ -247,6 +250,7 @@ const BookService = () => { selectedSlotValue: formattedDate, selectedSlotsValue, t, + serviceConfig, })} diff --git a/src/features/service/components/Service/BookService/helpers/getSubmitButtonText.ts b/src/features/service/components/Service/BookService/helpers/getSubmitButtonText.ts index 12e1dc4..0f04bdc 100644 --- a/src/features/service/components/Service/BookService/helpers/getSubmitButtonText.ts +++ b/src/features/service/components/Service/BookService/helpers/getSubmitButtonText.ts @@ -1,20 +1,32 @@ +import { Service } from "models/service"; import { TFunction } from "react-i18next"; type GetSubmitButtonText = ({ selectedSlotValue, selectedSlotsValue, t, + serviceConfig, }: { selectedSlotValue: string; selectedSlotsValue: string[]; t: TFunction<"forms"[]>; + serviceConfig: Service["viewConfig"]["days" | "list" | "calendar"]; }) => string; -export const getSubmitButtonText: GetSubmitButtonText = ({ selectedSlotValue, selectedSlotsValue, t }) => { +export const getSubmitButtonText: GetSubmitButtonText = ({ + selectedSlotValue, + selectedSlotsValue, + t, + serviceConfig, +}) => { const textBase = t("book-free-button"); + const isMultiSelect = serviceConfig.multiSelect; if (selectedSlotValue === "" && !selectedSlotsValue.length) return textBase; - if (selectedSlotValue === "" && selectedSlotsValue.length) return `${textBase} (${selectedSlotsValue.length})`; + if (selectedSlotValue !== "" && selectedSlotsValue.length) { + if (isMultiSelect) return `${textBase} (${selectedSlotsValue.length})`; + return `${textBase}: ${selectedSlotValue}`; + } return `${textBase}: ${selectedSlotValue}`; }; diff --git a/src/features/service/components/Service/BookService/helpers/tests/getSubmitButtonText.test.ts b/src/features/service/components/Service/BookService/helpers/tests/getSubmitButtonText.test.ts index 2d18ef9..fbee2c3 100644 --- a/src/features/service/components/Service/BookService/helpers/tests/getSubmitButtonText.test.ts +++ b/src/features/service/components/Service/BookService/helpers/tests/getSubmitButtonText.test.ts @@ -1,3 +1,4 @@ +import { Service } from "models/service"; import { getSubmitButtonText } from "../"; describe("getSubmitButtonText", () => { @@ -8,21 +9,28 @@ describe("getSubmitButtonText", () => { return ""; }; + const serviceConfigMock = { + multiSelect: false, + } as Service["viewConfig"]["days" | "list" | "calendar"]; + it("returns base text when no selectedSlotValue and selectedSlotsValue", () => { const buttonText = getSubmitButtonText({ selectedSlotValue: "", selectedSlotsValue: [], t: tMock, + serviceConfig: serviceConfigMock, }); expect(buttonText).toBe("Book now"); }); it("returns text with selectedSlotsValue length when no selectedSlotValue", () => { + serviceConfigMock.multiSelect = true; const buttonText = getSubmitButtonText({ - selectedSlotValue: "", + selectedSlotValue: "slot1", selectedSlotsValue: ["slot1", "slot2"], t: tMock, + serviceConfig: serviceConfigMock, }); expect(buttonText).toBe("Book now (2)"); @@ -33,6 +41,7 @@ describe("getSubmitButtonText", () => { selectedSlotValue: "slot1", selectedSlotsValue: [], t: tMock, + serviceConfig: serviceConfigMock, }); expect(buttonText).toBe("Book now: slot1"); diff --git a/src/features/service/components/Service/HoursSystem/HoursSystem.tsx b/src/features/service/components/Service/HoursSystem/HoursSystem.tsx index 3c7225c..bf9ad35 100644 --- a/src/features/service/components/Service/HoursSystem/HoursSystem.tsx +++ b/src/features/service/components/Service/HoursSystem/HoursSystem.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Typography } from "components/Typography"; import { Row } from "components/layout/Row"; -import { useTranslation } from "react-i18next"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { hoursSystemAtom } from "state/atoms"; import styled, { css } from "styled-components"; @@ -9,6 +8,14 @@ import { HOURS_SYSTEMS } from "./enums/HoursSystem.enum"; const Wrapper = styled(Row)` gap: 4px; + border-radius: 4px; + cursor: pointer; + padding: 3px 6px; + + &:hover { + background-color: ${({ theme }) => theme.colors.primaryLight}; + text-decoration: underline; + } `; const HoursSystemButton = styled(Typography)<{ isBold: boolean }>` @@ -17,50 +24,38 @@ const HoursSystemButton = styled(Typography)<{ isBold: boolean }>` ${({ isBold }) => { return css` font-weight: ${isBold ? "700" : "normal"}; - cursor: ${isBold ? "unset" : "pointer"}; - - &:hover { - text-decoration: ${isBold ? "none" : "underline"}; - } + text-decoration: ${isBold ? "underline" : "none"}; `; }} `; export const HoursSystem = () => { - const { t } = useTranslation(); const hoursSystem = useRecoilValue(hoursSystemAtom); const setHoursSystem = useSetRecoilState(hoursSystemAtom); - const handleHoursSystemChange = (hoursSystem: string) => { - localStorage.setItem("HOURS_SYSTEM", hoursSystem); - setHoursSystem(hoursSystem); + const handleHoursSystemChange = () => { + const newHoursSystem = hoursSystem === HOURS_SYSTEMS.h12 ? HOURS_SYSTEMS.h24 : HOURS_SYSTEMS.h12; + localStorage.setItem("HOURS_SYSTEM", newHoursSystem); + setHoursSystem(newHoursSystem); }; return ( - - {`${t( - "format", - )}:`} + handleHoursSystemChange(HOURS_SYSTEMS.h12)} > 12h - - | - handleHoursSystemChange(HOURS_SYSTEMS.h24)} > 24h diff --git a/src/features/service/components/Service/RescheduleService/RescheduleService.tsx b/src/features/service/components/Service/RescheduleService/RescheduleService.tsx index dce5acc..5259225 100644 --- a/src/features/service/components/Service/RescheduleService/RescheduleService.tsx +++ b/src/features/service/components/Service/RescheduleService/RescheduleService.tsx @@ -5,7 +5,7 @@ import { Typography } from "components/Typography"; import { Box } from "components/layout/Box"; import { useLangParam } from "features/i18n/useLangParam"; import { useRescheduleBooking } from "features/service/hooks/useRescheduleBooking"; -import { getPath } from "helpers/functions"; +import { getPath, getServiceConfigByType } from "helpers/functions"; import { useLocale } from "helpers/hooks/useLocale"; import { convertSourceDateTimeToTargetDateTime } from "helpers/timeFormat"; import { BOOKING_FORM_TYPES } from "models/service"; @@ -53,6 +53,7 @@ const RescheduleService = () => { const selectedDateRangeValue = useRecoilValue(selectedDateRange); const selectedSlotsValue = useRecoilValue(selectedSlots); const service = useRecoilValue(serviceAtom)!; + const serviceConfig = service && getServiceConfigByType({ service }); const slot = useRecoilValue(selectedSlotSelector); const { rescheduleBookingMutation, loading } = useRescheduleBooking(); const timeZone = useRecoilValue(timeZoneAtom); @@ -176,6 +177,7 @@ const RescheduleService = () => { selectedSlotValue: formattedDateTo, selectedSlotsValue, t, + serviceConfig, })} diff --git a/src/features/service/components/Service/ServiceCalendarActionRow.tsx b/src/features/service/components/Service/ServiceCalendarActionRow.tsx index 54331c6..35657d6 100644 --- a/src/features/service/components/Service/ServiceCalendarActionRow.tsx +++ b/src/features/service/components/Service/ServiceCalendarActionRow.tsx @@ -23,6 +23,13 @@ const PaginationButton = styled(ContextButton)` height: 36px; width: 36px; display: grid; + border: none; + + &:hover { + border: none; + background: ${({ theme, disabled }) => + disabled ? "transparent" : theme.colorSchemas.timeSlotButton.available.background}; + } & > * { margin: auto; ${({ theme, disabled }) => { diff --git a/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/ServiceCalendarWrapper.tsx b/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/ServiceCalendarWrapper.tsx index dd4a4ef..6ac1802 100644 --- a/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/ServiceCalendarWrapper.tsx +++ b/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/ServiceCalendarWrapper.tsx @@ -30,7 +30,6 @@ const ServiceCalendarWrapper = () => { const [serviceCalendarFilters, setServiceCalendarFilters] = useRecoilState(slotsFiltersAtom); const { t } = useTranslation(); const slotsViewConfig = useRecoilValue(slotsViewConfiguration); - const pageSize = Math.min(slotsViewConfig.maxDaysPerPage, Math.trunc(width / slotsViewConfig.slotsColumnWidth)); const daysToRender = useMemo( () => days.slice(0, pageSize === 0 ? slotsViewConfig.minDaysPerPage : pageSize), diff --git a/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/TimeSlot.tsx b/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/TimeSlot.tsx index 976a870..ffbdfd1 100644 --- a/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/TimeSlot.tsx +++ b/src/features/service/components/Service/ServiceDateTime/ServiceCalendar/TimeSlot.tsx @@ -39,7 +39,7 @@ const TimeSlotButton = styled.button` flex-direction: column; align-items: center; justify-content: center; - padding: 4px 0; + padding: 6px 0; ${({ theme, state, showDuration, showQuantity }) => { const colorSchema = theme.colorSchemas.timeSlotButton[state] as any; @@ -48,8 +48,8 @@ const TimeSlotButton = styled.button` color: ${colorSchema.text}; cursor: ${state === "unavailable" ? "unset" : "pointer"}; border-radius: ${({ theme }) => theme.borderRadius}; - background-color: ${colorSchema.background}; - min-width: ${showDuration ? "96px" : "unset"}; + background-color: ${colorSchema.background} !important; + border: 1px solid ${colorSchema.border}; min-height: ${timeSlotHeight[`${showDuration}-${showQuantity}`] ?? "unset"}; `; }} @@ -58,7 +58,7 @@ const TimeSlotButton = styled.button` ${({ theme, state }) => { const colorSchema = theme.colorSchemas.timeSlotButton[state]; return css` - background-color: ${colorSchema.backgroundHover}; + background-color: ${colorSchema.backgroundHover} !important; `; }} } @@ -74,10 +74,10 @@ interface DummySlotProps { } const dummyTimeSlotHeight: Record = { - "true-true": "70px", - "false-true": "44px", + "true-true": "67px", + "false-true": "47px", "true-false": "54px", - "false-false": "26px", + "false-false": "32px", }; const DummySlotWrapper = styled.div` @@ -150,9 +150,9 @@ const getBaseSlotContent = ( }; const QuantityText = styled(Typography)` - font-size: 10px; - line-height: 12px; - margin: 2px 0; + font-size: 9px; + line-height: 11px; + margin: 2px 0 0; `; const DurationText = styled(Typography)` &.unavailable-time-slot { @@ -165,7 +165,7 @@ const WrapperWithDuration = styled.div` flex-direction: column; em { - line-height: 6px; + line-height: 0px; } `; @@ -212,7 +212,7 @@ const getDurationQuantitySlotContent = ( {slot.quantity > 0 && ( <> - {t("available")} {slot.quantity > 999 ? "999+" : slot.quantity.toFixed(0)} + {slot.quantity > 999 ? "999+" : slot.quantity.toFixed(0)} )} @@ -249,7 +249,7 @@ const getQuantitySlotContent = ( {slot.quantity > 0 && ( <> - {t("available")} {slot.quantity > 999 ? "999+" : slot.quantity.toFixed(0)} + {slot.quantity > 999 ? "999+" : slot.quantity.toFixed(0)} )} diff --git a/src/features/service/components/Service/TimezoneInfo.tsx b/src/features/service/components/Service/TimezoneInfo.tsx index 39a07a4..cfb9830 100644 --- a/src/features/service/components/Service/TimezoneInfo.tsx +++ b/src/features/service/components/Service/TimezoneInfo.tsx @@ -1,11 +1,9 @@ import React from "react"; import { Typography } from "components/Typography"; import { Row } from "components/layout/Row"; -import { useTranslation } from "react-i18next"; import { useRecoilValue } from "recoil"; import { timeZoneAtom } from "state/atoms/timeZone"; import styled from "styled-components"; -import { IconWorld } from "@tabler/icons"; const Wrapper = styled(Row)` /* color: #999999; */ @@ -16,15 +14,10 @@ const Wrapper = styled(Row)` `; const TimezoneInfo = () => { - const { t } = useTranslation(); const timeZone = useRecoilValue(timeZoneAtom); return ( - - {`${t( - "timezone", - )}:`} {timeZone.replace("_", " ")} diff --git a/src/features/service/hooks/useService.ts b/src/features/service/hooks/useService.ts index fa8c61e..a1c9553 100644 --- a/src/features/service/hooks/useService.ts +++ b/src/features/service/hooks/useService.ts @@ -7,6 +7,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { LOADERS, loaderAtom } from "state/atoms/loader"; import { serviceAtom } from "state/atoms/service"; import { serviceSlotsAtom } from "state/atoms/serviceSlots"; +import { slotsAtom } from "state/atoms/slots"; import { slotsFiltersAtom } from "state/atoms/slotsFilters"; import { timeZoneAtom } from "state/atoms/timeZone"; import { slotsFilterSelector } from "state/selectors/slotFilterSelector"; @@ -30,6 +31,7 @@ export const useServiceSlotsState = (serviceId: string) => { const setServiceSlotsLoader = useSetRecoilState(loaderAtom(LOADERS.SERVICE_SLOTS)); const setSlotsFilter = useSetRecoilState(slotsFiltersAtom); + const [, setAllSlots] = useRecoilState(slotsAtom); const fetchTo = `${ addDays(new Date(fetchFrom), maxDaysPerPage - 1) @@ -67,9 +69,10 @@ export const useServiceSlotsState = (serviceId: string) => { useEffect(() => { if (slotsData && slotsData.service) { const { slots } = slotsData.service; + setAllSlots(slots); setServiceSlots(slots); } - }, [slotsData, setServiceSlots]); + }, [slotsData, setServiceSlots, setAllSlots]); useEffect(() => { if (slotsError || slotsData?.service === null) navigate("/"); diff --git a/src/helpers/functions/getServiceConfigByType.ts b/src/helpers/functions/getServiceConfigByType.ts new file mode 100644 index 0000000..d584aae --- /dev/null +++ b/src/helpers/functions/getServiceConfigByType.ts @@ -0,0 +1,16 @@ +import { BOOKING_FORM_TYPES, Service } from "models/service"; + +interface GetServiceConfigByType { + ({ service }: { service: Service }): Service["viewConfig"]["days" | "list" | "calendar"]; +} + +export const getServiceConfigByType: GetServiceConfigByType = ({ service }) => { + const serviceType = service?.viewConfig?.displayType; + const types = { + [BOOKING_FORM_TYPES.DAYS]: "days", + [BOOKING_FORM_TYPES.CALENDAR]: "list", + [BOOKING_FORM_TYPES.LIST]: "calendar", + } as const; + + return service.viewConfig[types[serviceType]]; +}; diff --git a/src/helpers/functions/index.ts b/src/helpers/functions/index.ts index 0200a3a..787b83f 100644 --- a/src/helpers/functions/index.ts +++ b/src/helpers/functions/index.ts @@ -3,3 +3,4 @@ export { getPath } from "./getPath"; export { getIsBrandedPage } from "./getIsBrandedPage"; export { isSameDay } from "./dateTimeHelper"; export { getDatesValue } from "./getDatesValue"; +export { getServiceConfigByType } from "./getServiceConfigByType"; diff --git a/src/models/theme.ts b/src/models/theme.ts index eb47e0f..b9de606 100644 --- a/src/models/theme.ts +++ b/src/models/theme.ts @@ -9,7 +9,8 @@ export type ThemeColors = | "success" | "white" | "warning" - | "primary"; + | "primary" + | "primaryLight"; export interface TypographyTheme { size: string; diff --git a/src/state/atoms/slots.ts b/src/state/atoms/slots.ts new file mode 100644 index 0000000..bd09adf --- /dev/null +++ b/src/state/atoms/slots.ts @@ -0,0 +1,7 @@ +import { Slot } from "models/slots"; +import { atom } from "recoil"; + +export const slotsAtom = atom({ + key: "slots", + default: [], +}); diff --git a/src/state/selectors/slotsViewConfiguration.ts b/src/state/selectors/slotsViewConfiguration.ts index 29e2745..7349e91 100644 --- a/src/state/selectors/slotsViewConfiguration.ts +++ b/src/state/selectors/slotsViewConfiguration.ts @@ -22,9 +22,9 @@ export const slotsViewConfiguration = selector({ const isDateRange = serviceType === BOOKING_FORM_TYPES.CALENDAR; const isEvent = serviceType === BOOKING_FORM_TYPES.LIST; - const maxDaysPerPage = isDateRange || isEvent ? 365 : duration || quantity ? 5 : 7; - const minDaysPerPage = duration || quantity ? 2 : 4; - const slotsColumnWidth = duration || quantity ? 106 : 76; + const maxDaysPerPage = isDateRange || isEvent ? 365 : duration || quantity ? 7 : 7; + const minDaysPerPage = duration || quantity ? 4 : 4; + const slotsColumnWidth = duration || quantity ? 76 : 76; return { showDuration: duration, diff --git a/src/styles/appTheme.ts b/src/styles/appTheme.ts index af670ed..166a6af 100644 --- a/src/styles/appTheme.ts +++ b/src/styles/appTheme.ts @@ -9,6 +9,7 @@ const SUCCESS = "#34A853"; const WHITE = "#FFFFFF"; const WARNING = "#FE852F"; const SECONDARY_DARK = "#E7E7E7"; +const PRIMARY_LIGHT_GRAY = "#F2F2F2"; const appTheme: DefaultTheme = { themeType: "light", @@ -29,6 +30,7 @@ const appTheme: DefaultTheme = { white: WHITE, warning: WARNING, primary: "#333333", + primaryLight: PRIMARY_LIGHT_GRAY, }, colorSchemas: { @@ -86,10 +88,10 @@ const appTheme: DefaultTheme = { }, timeSlotButton: { available: { - background: "#F2F2F2", + background: PRIMARY_LIGHT_GRAY, backgroundActive: WHITE, backgroundHover: "#E5E5E5", - border: "#D9D9D9", + border: "transparent", borderActive: DARK_GRAY, text: DARK, }, @@ -102,16 +104,16 @@ const appTheme: DefaultTheme = { text: DARK_GRAY, }, selected: { - background: DARK, - backgroundActive: DARK, - backgroundHover: DARK, + background: PRIMARY_LIGHT_GRAY, + backgroundActive: PRIMARY_LIGHT_GRAY, + backgroundHover: "#E5E5E5", border: "#333333", borderActive: "#333333", - text: WHITE, + text: DARK, }, }, fileUpload: { - backgroundColor: "#F2F2F2", + backgroundColor: PRIMARY_LIGHT_GRAY, }, }, @@ -173,6 +175,7 @@ const darkTheme: DefaultTheme = { white: DARK, warning: WARNING, primary: "#D9D9D9", + primaryLight: "#3E3E3E", }, colorSchemas: { @@ -234,7 +237,7 @@ const darkTheme: DefaultTheme = { background: "#1E1E1E", backgroundActive: "#F6F6F6", backgroundHover: "#3E3E3E", - border: "#474747", + border: "transparent", borderActive: "#EAEAEA", text: "#F6F6F6", }, @@ -247,12 +250,12 @@ const darkTheme: DefaultTheme = { text: "#999999", }, selected: { - background: "#F6F6F6", + background: "#1E1E1E", backgroundActive: "#F6F6F6", - backgroundHover: "#F6F6F6", - border: "#EAEAEA", + backgroundHover: "#3E3E3E", + border: "#D9D9D9", borderActive: "#EAEAEA", - text: "#333333", + text: "#F6F6F6", }, }, fileUpload: {