refactor: clarify url preset form

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -49,6 +49,18 @@ $inner-padding: 1rem;
   border-radius: 3px;
 }
 
+.highlight {
+  font-size: calc(1rem - 2px);
+  color: $orange-500;
+  padding-inline: 0.25rem;
+}
+
+.blockquote {
+  padding-left: 0.5rem;
+  border-left: 2px solid $gray-100;
+  background-color: $white-3;
+}
+
 .error {
   font-size: $inner-section-text-size;
   display: block;

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -74,6 +74,14 @@ export function Description({ children }: { children: ReactNode }) {
   return <div className={style.fieldDescription}>{children}</div>;
 }
 
+export function Highlight({ children }: { children: ReactNode }) {
+  return <code className={style.highlight}>{children}</code>;
+}
+
+export function BlockQuote({ children }: { children: ReactNode }) {
+  return <blockquote className={style.blockquote}>{children}</blockquote>;
+}
+
 export function Error({ children }: { children: ReactNode }) {
   return <div className={style.fieldError}>{children}</div>;
 }

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

@@ -105,12 +105,25 @@ export default function UrlPresetsForm() {
         <Alert status='info' variant='ontime-on-dark-info'>
           <AlertIcon />
           <AlertDescription>
-            URL Presets
+            URL presets are user defined aliases to Ontime URLs
             <br />
             <br />
-            Custom presets allow providing a short name for any ontime URL. <br />
-            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
+            <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>
@@ -130,8 +143,8 @@ export default function UrlPresetsForm() {
             <thead>
               <tr>
                 <th className={style.fit}>Active</th>
-                <th className={style.aliasConstrain}>Preset</th>
-                <th className={style.fullWidth}>URL</th>
+                <th className={style.aliasConstrain}>Preset name</th>
+                <th className={style.fullWidth}>URL segment</th>
                 <th />
               </tr>
             </thead>