From f6449a4326c80f971adb93bdb8549dd8a6bc0583 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Mon, 17 Feb 2025 13:55:52 +0100
Subject: [PATCH] refactor: tweak reusable info component

---
 .../common/components/info/Info.module.scss    | 14 +++++++++-----
 .../client/src/common/components/info/Info.tsx | 14 +++++++++++---
 .../ViewParamsEditor.module.scss               |  4 ++++
 .../view-params-editor/ViewParamsEditor.tsx    |  4 +++-
 .../AutomationSettingsForm.tsx                 | 18 +++++++++---------
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/common/components/info/Info.module.scss b/apps/client/src/common/components/info/Info.module.scss
index e981c9f35..51e276e32 100644
--- a/apps/client/src/common/components/info/Info.module.scss
+++ b/apps/client/src/common/components/info/Info.module.scss
@@ -2,14 +2,18 @@
   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;
+  background-color: $gray-1200;
+  border-radius: 3px;
+  font-size: $text-body-size;
+  padding: 1rem;
+
+  .content {
+    color: $gray-200;
+  }
 
   svg {
+    align-self: start;
     font-size: 1.5rem;
     color: $info-blue;
   }
diff --git a/apps/client/src/common/components/info/Info.tsx b/apps/client/src/common/components/info/Info.tsx
index 7449bdeb3..4dbbcd7b4 100644
--- a/apps/client/src/common/components/info/Info.tsx
+++ b/apps/client/src/common/components/info/Info.tsx
@@ -1,13 +1,21 @@
 import { PropsWithChildren } from 'react';
 import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
 
+import { cx } from '../../utils/styleUtils';
+
 import style from './Info.module.scss';
 
-export default function Info({ children }: PropsWithChildren) {
+interface InfoProps {
+  className?: string;
+}
+
+export default function Info(props: PropsWithChildren<InfoProps>) {
+  const { className, children } = props;
+
   return (
-    <div className={style.infoLabel}>
+    <div className={cx([style.infoLabel, className])}>
       <IoAlertCircle />
-      {children}
+      <div>{children}</div>
     </div>
   );
 }
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 a6451ac84..1f6ff63a9 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
@@ -16,3 +16,7 @@
   overflow-y: scroll;
   padding-right: 0.5rem;
 }
+
+.info {
+  margin-bottom: 1rem;
+}
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 8cc0633d6..b1ba81cb2 100644
--- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
+++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
@@ -132,7 +132,9 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
         </DrawerHeader>
 
         <DrawerBody>
-          {viewSettings.overrideStyles && <Info>This view style is being modified by a custom CSS file.</Info>}
+          {viewSettings.overrideStyles && (
+            <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
+          )}
           <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
             {viewOptions.map((section) => (
               <ViewParamsSection
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
index 2357720cd..fa7952a4e 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
@@ -1,9 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
-import { Alert, AlertDescription, AlertIcon, Button, Input, Switch } from '@chakra-ui/react';
+import { Button, Input, Switch } from '@chakra-ui/react';
 
 import { editAutomationSettings } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import Info from '../../../../common/components/info/Info';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -75,14 +76,13 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
       <Panel.Divider />
 
       <Panel.Section>
-        <Alert status='info' variant='ontime-on-dark-info'>
-          <AlertIcon />
-          <AlertDescription>
-            Control Ontime and share its data with external systems in your workflow. <br />
-            - Automations allow Ontime to send its data on lifecycle triggers. <br />- OSC Input tells Ontime to listen
-            to messages on the specific port. <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
-          </AlertDescription>
-        </Alert>
+        <Info>
+          <p>Control Ontime and share its data with external systems in your workflow.</p>
+          <p>- Automations allow Ontime to send its data on lifecycle triggers.</p>
+          <p>- OSC Input tells Ontime to listen to messages on the specific port.</p>
+          <br />
+          <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
+        </Info>
       </Panel.Section>
 
       <Panel.Section