refactor: tweak reusable info component

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;
+  background-color: $gray-1200;
-  border-radius: 2px;
+  border-radius: 3px;
-  font-size: $inner-section-text-size;
+  font-size: $text-body-size;
+  padding: 1rem;
+
+  .content {
+    color: $gray-200;
+  }
 
   svg {
+    align-self: start;
     font-size: 1.5rem;
     color: $info-blue;
   }

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>
   );
 }

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;
+}

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

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'>
+        <Info>
-          <AlertIcon />
+          <p>Control Ontime and share its data with external systems in your workflow.</p>
-          <AlertDescription>
+          <p>- Automations allow Ontime to send its data on lifecycle triggers.</p>
-            Control Ontime and share its data with external systems in your workflow. <br />
+          <p>- OSC Input tells Ontime to listen to messages on the specific port.</p>
-            - Automations allow Ontime to send its data on lifecycle triggers. <br />- OSC Input tells Ontime to listen
+          <br />
-            to messages on the specific port. <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
+          <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
-          </AlertDescription>
+        </Info>
-        </Alert>
       </Panel.Section>
 
       <Panel.Section