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