diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss index efe885c52..6de2400e0 100644 --- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss +++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss @@ -1,6 +1,6 @@ .drawerFooter { display: flex; - justify-content: end; + justify-content: end; gap: $section-spacing; button { @@ -8,6 +8,23 @@ } } +.infoLabel { + display: flex; + align-items: center; + gap: $element-spacing; + padding: 1rem; + margin-bottom: 1rem; + + background-color: $gray-1100; + border-radius: 2px; + font-size: $inner-section-text-size; + + svg { + font-size: 1.5rem; + color: $info-blue; + } +} + .label { font-size: $inner-section-text-size; color: $label-gray; diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx index d7e0bac5b..65363e08c 100644 --- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx +++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx @@ -11,6 +11,9 @@ import { DrawerOverlay, useDisclosure, } from '@chakra-ui/react'; +import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle'; + +import useViewSettings from '../../../common/hooks-query/useViewSettings'; import ParamInput from './ParamInput'; import { isSection, ViewOption } from './types'; @@ -87,6 +90,8 @@ interface EditFormDrawerProps { // TODO: this is a good candidate for memoisation, but needs the paramFields to be stable export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) { const [searchParams, setSearchParams] = useSearchParams(); + const { data: viewSettings } = useViewSettings(); + const { isOpen, onClose, onOpen } = useDisclosure(); useEffect(() => { @@ -127,6 +132,12 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) { + {viewSettings.overrideStyles && ( +
+ + This view style is being modified by a custom CSS file.
+
+ )}
{viewOptions.map((option) => { if (isSection(option)) { diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index 6af795b74..46cb5962b 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -12,6 +12,7 @@ $action-text-color: $blue-400; $ontime-color: #ff7597; $error-red: $red-500; $warning-orange: $orange-500; +$info-blue: $blue-500; $opacity-disabled: 0.4; $active-red: $red-700;