refactor: migrate chakra alert to custom component

apps/client/src/common/components/external-link/ExternalLink.tsx

@@ -14,7 +14,6 @@ interface ExternalLinkProps {
 
 export default function ExternalLink(props: ExternalLinkProps) {
   const { href, inline, children } = props;
-  const classes = cx([style.link, inline ? style.inline : null]);
 
   const handleClick = (event: MouseEvent) => {
     event.preventDefault();
@@ -22,8 +21,14 @@ export default function ExternalLink(props: ExternalLinkProps) {
   };
 
   return (
-    <a href='#!' target='_blank' rel='noreferrer' className={classes} onClick={handleClick}>
-      {children} <IoOpenOutline />
+    <a
+      href='#!'
+      target='_blank'
+      rel='noreferrer'
+      className={cx([style.link, inline && style.inline])}
+      onClick={handleClick}
+    >
+      {children} <IoOpenOutline style={{ fontSize: '1em' }} />
     </a>
   );
 }

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -1,16 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  Button,
-  IconButton,
-  Input,
-  Radio,
-  RadioGroup,
-  Select,
-} from '@chakra-ui/react';
+import { Button, IconButton, Input, Radio, RadioGroup, Select } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { Automation, AutomationDTO, HTTPOutput, isHTTPOutput, isOSCOutput, OSCOutput } from 'ontime-types';
@@ -18,6 +8,7 @@ import { Automation, AutomationDTO, HTTPOutput, isHTTPOutput, isOSCOutput, OSCOu
 import { addAutomation, editAutomation, testOutput } 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 Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
@@ -291,13 +282,10 @@ export default function AutomationForm(props: AutomationFormProps) {
 
       <div className={style.innerColumn}>
         <h3>Outputs</h3>
-        <Alert status='info' variant='ontime-on-dark-info'>
-          <AlertIcon />
-          <AlertDescription>
-            Automation outputs can be used to send data from Ontime to external software.
-            <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
-          </AlertDescription>
-        </Alert>
+        <Info>
+          Automation outputs can be used to send data from Ontime to external software.
+          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
+        </Info>
 
         {fieldOutputs.map((output, index) => {
           if (isOSCOutput(output)) {

apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { Alert, AlertDescription, AlertIcon, Button, IconButton, Input, Switch } from '@chakra-ui/react';
+import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
@@ -10,6 +10,7 @@ import { postUrlPresets } from '../../../../common/api/urlPresets';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import Info from '../../../../common/components/info/Info';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { handleLinks } from '../../../../common/utils/linkUtils';
@@ -108,32 +109,29 @@ export default function UrlPresetsForm() {
           </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
-        <Alert status='info' variant='ontime-on-dark-info'>
-          <AlertIcon />
-          <AlertDescription>
-            URL presets are user defined aliases to Ontime URLs
-            <br />
-            <br />
-            <b>Preset Name</b> <br />
-            The alias for the URL. This will be the URL you will be calling. eg: <br />
-            <Panel.BlockQuote>
-              Preset name <Panel.Highlight>cam3</Panel.Highlight> called as{' '}
-              <Panel.Highlight>http://localhost:4001/cam3</Panel.Highlight>
-            </Panel.BlockQuote>
-            <br />
-            <b>URL Segment</b> <br />
-            The corresponding alias path and configuration parameters. eg: <br />
-            <Panel.BlockQuote>
-              URL segment <Panel.Highlight>backstage?hidePast=true&stopCycle=true</Panel.Highlight> corresponds to
-              complete URL
-              <Panel.Highlight>http://localhost:4001/backstage?hidePast=true&stopCycle=true</Panel.Highlight>
-            </Panel.BlockQuote>
-            <br />
-            You will need to save the changes before the presets are functional.
-            <br />
-            <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
-          </AlertDescription>
-        </Alert>
+        <Info>
+          URL presets are user defined aliases to Ontime URLs
+          <br />
+          <br />
+          <b>Preset Name</b> <br />
+          The alias for the URL. This will be the URL you will be calling. eg: <br />
+          <Panel.BlockQuote>
+            Preset name <Panel.Highlight>cam3</Panel.Highlight> called as{' '}
+            <Panel.Highlight>http://localhost:4001/cam3</Panel.Highlight>
+          </Panel.BlockQuote>
+          <br />
+          <b>URL Segment</b> <br />
+          The corresponding alias path and configuration parameters. eg: <br />
+          <Panel.BlockQuote>
+            URL segment <Panel.Highlight>backstage?hidePast=true&stopCycle=true</Panel.Highlight> corresponds to
+            complete URL
+            <Panel.Highlight>http://localhost:4001/backstage?hidePast=true&stopCycle=true</Panel.Highlight>
+          </Panel.BlockQuote>
+          <br />
+          You will need to save the changes before the presets are functional.
+          <br />
+          <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
+        </Info>
         <Panel.Section>
           <Panel.Loader isLoading={isLoading} />
           <Panel.Title>

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Alert, AlertDescription, AlertIcon, Button } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { CustomField, CustomFieldLabel } from 'ontime-types';
 
 import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
 import ExternalLink from '../../../../../common/components/external-link/ExternalLink';
+import Info from '../../../../../common/components/info/Info';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
 import { customFieldsDocsUrl } from '../../../../../externals';
 import * as Panel from '../../../panel-utils/PanelUtils';
@@ -55,20 +56,17 @@ export default function CustomFields() {
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
-          <Alert status='info' variant='ontime-on-dark-info'>
-            <AlertIcon />
-            <AlertDescription>
-              Custom fields allow for additional information to be added to an event.
-              <br />
-              <br />
-              This data is not used by Ontime, but provides place for cueing or department specific information (eg.
-              light, sound, camera).
-              <br />
-              <br />
-              Custom fields can be used width the Integrations feature using the generated key.
-              <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
-            </AlertDescription>
-          </Alert>
+          <Info>
+            Custom fields allow for additional information to be added to an event.
+            <br />
+            <br />
+            This data is not used by Ontime, but provides place for cueing or department specific information (eg.
+            light, sound, camera).
+            <br />
+            <br />
+            Custom fields can be used width the Integrations feature using the generated key.
+            <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
+          </Info>
         </Panel.Section>
         <Panel.Section>
           {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -1,15 +1,17 @@
 import { useEffect } from 'react';
 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 { ViewSettings } from 'ontime-types';
 
 import { maybeAxiosError } from '../../../../common/api/utils';
 import { postViewSettings } from '../../../../common/api/viewSettings';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import Info from '../../../../common/components/info/Info';
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
+import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
@@ -85,16 +87,19 @@ export default function ViewSettingsForm() {
           </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
-        <Alert status='info' variant='ontime-on-dark-info'>
-          <AlertIcon />
-          <AlertDescription>
-            You can the Ontime views or customise its styles by modifying the provided CSS file. <br />
-            The CSS file is in the user directory at {`${info.publicDir}/user/styles/override.css`}
-            <br />
-            <br />
-            <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
-          </AlertDescription>
-        </Alert>
+        <Info>
+          You can the Ontime views or customise its styles by modifying the provided CSS file.
+          <br />
+          {!isOntimeCloud && (
+            <>
+              <br />
+              The loaded CSS file is in the user directory at{' '}
+              <Panel.BlockQuote>{`${info.publicDir}/user/styles/override.css`}</Panel.BlockQuote>
+              <br />
+            </>
+          )}
+          <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
+        </Info>
         <Panel.Section>
           <Panel.Loader isLoading={isLoading} />
           <Panel.ListGroup>

apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx

@@ -1,27 +0,0 @@
-import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
-
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import EditorSettingsForm from './EditorSettingsForm';
-
-export default function InterfacePanel() {
-  return (
-    <>
-      <Panel.Header>Interface</Panel.Header>
-      <Panel.Section>
-        <Alert status='info' variant='ontime-on-dark-info'>
-          <AlertIcon />
-          <AlertDescription>
-            Interface settings
-            <br />
-            <br />
-            These concern settings that are applied to this user in this browser.
-            <br />
-            It will not affect other users or other browsers.
-          </AlertDescription>
-        </Alert>
-      </Panel.Section>
-      <EditorSettingsForm />
-    </>
-  );
-}

apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx

@@ -1,21 +1,17 @@
-import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
-
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import Info from '../../../../common/components/info/Info';
 const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadsheet-gsheet/';
 
 export default function GSheetInfo() {
   return (
-    <Alert status='info' variant='ontime-on-dark-info'>
-      <AlertIcon />
-      <AlertDescription>
-        Ontime allows you to synchronize your rundown with a Google Sheet.
-        <br />
-        <br />
-        To enable this feature, you will need to generate tokens in your Google account and provide them to Ontime.
-        <br />
-        Once set up, you will be able to synchronize data between Ontime and your Google Sheet. <br />
-        <ExternalLink href={googleSheetDocsUrl}>See the docs</ExternalLink>
-      </AlertDescription>
-    </Alert>
+    <Info>
+      Ontime allows you to synchronize your rundown with a Google Sheet.
+      <br />
+      <br />
+      To enable this feature, you will need to generate tokens in your Google account and provide them to Ontime.
+      <br />
+      Once set up, you will be able to synchronize data between Ontime and your Google Sheet. <br />
+      <ExternalLink href={googleSheetDocsUrl}>See the docs</ExternalLink>
+    </Info>
   );
 }