style: tweaks to settings (#772)

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

@@ -1,3 +1,5 @@
+$inner-padding: 1rem;
+
 .header {
   font-size: 2rem;
   padding-bottom: 0.5rem;
@@ -6,16 +8,24 @@
 }
 
 .subheader {
-  font-size: 1.25rem;
-  padding-bottom: 0.25rem;
+  font-size: 1.5rem;
+  padding-bottom: 0.5rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+.title {
+  font-size: 1.25rem;
+  padding-left: $inner-padding;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .section {
-  margin: 2rem 0;
+  margin-top: 2rem;
   font-size: calc(1rem - 1px);
   max-width: 800px;
 }
@@ -25,7 +35,7 @@
 }
 
 .card {
-  padding: 1rem;
+  padding: 2rem;
   background-color: $white-1;
   border: 1px solid $gray-1100;
   border-radius: 3px;
@@ -37,6 +47,12 @@
   color: $error-red;
 }
 
+.pad {
+  padding: 0 1rem;
+  max-height: 500px;
+  overflow-y: scroll;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;
@@ -64,7 +80,7 @@
 }
 
 .listGroup {
-  padding: 1rem 0;
+  padding: 0.5rem 1rem 0 1rem;
 
   > li:not(:last-child) {
     border-bottom: 1px solid $white-10;
@@ -92,3 +108,8 @@
   font-size: calc(1rem - 2px);
   color: $red-500;
 }
+
+.divider {
+  border-top: 1px solid $white-10;
+  margin: 1rem -2rem;
+}

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

@@ -10,6 +10,10 @@ export function SubHeader({ children }: { children: ReactNode }) {
   return <h3 className={style.subheader}>{children}</h3>;
 }
 
+export function Title({ children }: { children: ReactNode }) {
+  return <h4 className={style.title}>{children}</h4>;
+}
+
 type AllowedTags = 'div' | 'form';
 type SectionProps<C extends AllowedTags> = {
   as?: C;
@@ -29,12 +33,20 @@ export function Paragraph({ children }: { children: ReactNode }) {
   return <p className={style.paragraph}>{children}</p>;
 }
 
-export function Card({ children }: { children: ReactNode }) {
-  return <div className={style.card}>{children}</div>;
+export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
+  return (
+    <div className={style.card} {...props}>
+      {children}
+    </div>
+  );
 }
 
 export function Table({ children }: { children: ReactNode }) {
-  return <table className={style.table}>{children}</table>;
+  return (
+    <div className={style.pad}>
+      <table className={style.table}>{children}</table>
+    </div>
+  );
 }
 
 export function ListGroup({ children }: { children: ReactNode }) {
@@ -62,3 +74,7 @@ export function Description({ children }: { children: ReactNode }) {
 export function Error({ children }: { children: ReactNode }) {
   return <div className={style.fieldError}>{children}</div>;
 }
+
+export function Divider() {
+  return <hr className={style.divider} />;
+}

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -71,36 +71,44 @@ export default function HttpIntegrations() {
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
-      <Panel.Section>
+    <Panel.Section>
+      <Panel.Card>
         <Panel.SubHeader>
-          HTTP settings
+          HTTP
           <div className={style.flex}>
             <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
               Reset
             </Button>
-            <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
+            <Button
+              variant='ontime-filled'
+              size='sm'
+              type='submit'
+              form='http-form'
+              isDisabled={!canSubmit}
+              isLoading={isSubmitting}
+            >
               Save changes
             </Button>
           </div>
         </Panel.SubHeader>
-        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
-            <Switch variant='ontime' size='lg' {...register('enabledOut')} />
-          </Panel.ListItem>
-        </Panel.ListGroup>
-      </Panel.Section>
 
-      <Panel.Section>
-        <Panel.Card>
-          <Panel.SubHeader>
+        <Panel.Section as='form' id='http-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
+          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
+              <Switch variant='ontime' size='lg' {...register('enabledOut')} />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+
+          <Panel.Divider />
+
+          <Panel.Title>
             HTTP Integration
             <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
               New
             </Button>
-          </Panel.SubHeader>
+          </Panel.Title>
           {fields.length > 0 && (
             <Panel.Table>
               <thead>
@@ -166,8 +174,8 @@ export default function HttpIntegrations() {
               </tbody>
             </Panel.Table>
           )}
-        </Panel.Card>
-      </Panel.Section>
+        </Panel.Section>
+      </Panel.Card>
     </Panel.Section>
   );
 }

apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.module.css

@@ -1,12 +1,12 @@
 .fullWidth {
-    width: 100%;
+  width: 100%;
 }
 
 .fitContents {
-    width: max-content !important; /* override chakra */
+  width: max-content !important; /* override chakra */
 }
 
 .flex {
-    display: flex;
-    gap: 1rem;
+  display: flex;
+  gap: 1rem;
 }

apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.tsx

@@ -24,8 +24,10 @@ export default function IntegrationsPanel() {
           </AlertDescription>
         </Alert>
       </Panel.Section>
-      <OscIntegrations />
-      <HttpIntegrations />
+      <Panel.Section>
+        <OscIntegrations />
+        <HttpIntegrations />
+      </Panel.Section>
     </>
   );
 }

apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx

@@ -77,19 +77,27 @@ export default function OscIntegrations() {
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Panel.Section onKeyDown={preventEscape}>
-      <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
-        <Panel.SubHeader>
-          Open Sound Control settings
-          <div className={style.flex}>
-            <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
-              Reset
-            </Button>
-            <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
-              Save changes
-            </Button>
-          </div>
-        </Panel.SubHeader>
+    <Panel.Card>
+      <Panel.SubHeader>
+        Open Sound Control
+        <div className={style.flex}>
+          <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
+            Reset
+          </Button>
+          <Button
+            variant='ontime-filled'
+            size='sm'
+            type='submit'
+            form='osc-form'
+            isDisabled={!canSubmit}
+            isLoading={isSubmitting}
+          >
+            Save changes
+          </Button>
+        </div>
+      </Panel.SubHeader>
+
+      <Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
         {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>
           <Panel.ListItem>
@@ -178,15 +186,16 @@ export default function OscIntegrations() {
             />
           </Panel.ListItem>
         </Panel.ListGroup>
-      </Panel.Section>
 
-      <Panel.Card>
-        <Panel.SubHeader>
-          OSC Integration
+        <Panel.Divider />
+
+        <Panel.Title>
+          OSC Integrations
           <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
-            New
+            Add
           </Button>
-        </Panel.SubHeader>
+        </Panel.Title>
+
         {fields.length > 0 && (
           <Panel.Table>
             <thead>
@@ -253,7 +262,7 @@ export default function OscIntegrations() {
             </tbody>
           </Panel.Table>
         )}
-      </Panel.Card>
-    </Panel.Section>
+      </Panel.Section>
+    </Panel.Card>
   );
 }

apps/client/src/features/app-settings/settingsStore.ts

@@ -30,8 +30,8 @@ export const settingPanels: Readonly<SettingsOption[]> = [
     id: 'integrations',
     label: 'Integrations',
     secondary: [
-      { id: 'integrations__osc', label: 'OSC Integration' },
-      { id: 'integrations__http', label: 'HTTP Integration' },
+      { id: 'integrations__osc', label: 'OSC settings' },
+      { id: 'integrations__http', label: 'HTTP settings' },
     ],
   },
   { id: 'log', label: 'Log', split: true },