feat(ui): add warning in view params when styles are overriden (#1384)

* feat: add warning in view params when styles are overriden

* refactor: style tweaks

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

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;

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) {
         </DrawerHeader>
 
         <DrawerBody>
+          {viewSettings.overrideStyles && (
+            <div className={style.infoLabel}>
+              <IoAlertCircle />
+              This view style is being modified by a custom CSS file. <br />
+            </div>
+          )}
           <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
             {viewOptions.map((option) => {
               if (isSection(option)) {

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;