Updated routes layout

Author: pnicolli

packages/cmsui/routes/auth/login.tsx

@@ -44,14 +44,14 @@ export default function Login() {
   const actionResult = useActionData<typeof action>();
 
   return (
-    <div className="mx-4 flex h-screen flex-1 flex-col justify-center">
+    <main className="mx-4 flex h-screen flex-1 flex-col justify-center">
       <div
         className={`
           flex flex-col items-center
           sm:mx-auto sm:w-full sm:max-w-md
         `}
       >
-        <div className="flex h-32 w-32 flex-col items-center rounded-full bg-quanta-sapphire p-8">
+        <div className="bg-quanta-sapphire flex h-32 w-32 flex-col items-center rounded-full p-8">
           <img src={ploneSvg} alt="" />
         </div>
         <h2
@@ -93,6 +93,6 @@ export default function Login() {
           </Form>
         </div>
       </div>
-    </div>
+    </main>
   );
 }

packages/cmsui/routes/controlpanel.tsx

@@ -117,59 +117,60 @@ export default function SingleControlPanel() {
           <Back />
         </Button>
       </Plug>
-
-      <Container width="default" className="route-controlpanel">
-        <h1 className="documentFirstHeading">
-          {controlpanel.title || 'a control panel'}
-        </h1>
-        <form>
-          {schema.fieldsets.map((fieldset: ControlPanelFieldset) => (
-            <Accordion defaultExpandedKeys={['default']} key={fieldset.id}>
-              <AccordionItem id={fieldset.id} key={fieldset.id}>
-                <AccordionItemTrigger>{fieldset.title}</AccordionItemTrigger>
-                <AccordionPanel>
-                  {(fieldset.fields as DeepKeys<ControlPanelSchema>[]).map(
-                    (schemaField, index) => (
-                      <form.AppField
-                        name={schemaField}
-                        key={index}
-                        // eslint-disable-next-line react/no-children-prop
-                        children={(field) => (
-                          <field.Quanta
-                            {...schema.properties[schemaField]}
-                            className="mb-4"
-                            label={schema.properties[field.name].title}
-                            name={field.name}
-                            defaultValue={field.state.value}
-                            required={
-                              schema.required.indexOf(schemaField) !== -1
-                            }
-                            error={field.state.meta.errors}
-                            formAtom={formAtom}
-                          />
-                        )}
-                      />
-                    ),
-                  )}
-                </AccordionPanel>
-              </AccordionItem>
-            </Accordion>
-          ))}
-          <Plug pluggable="toolbar-top" id="edit-save-button">
-            <Button
-              aria-label={t('cmsui.save')}
-              type="submit"
-              // Trigger the TS form submission
-              onPress={() => form.handleSubmit()}
-              variant="primary"
-              accent
-              size="L"
-            >
-              <Checkbox />
-            </Button>
-          </Plug>
-        </form>
-      </Container>
+      <main>
+        <Container width="default" className="route-controlpanel">
+          <h1 className="documentFirstHeading">
+            {controlpanel.title || 'a control panel'}
+          </h1>
+          <form>
+            {schema.fieldsets.map((fieldset: ControlPanelFieldset) => (
+              <Accordion defaultExpandedKeys={['default']} key={fieldset.id}>
+                <AccordionItem id={fieldset.id} key={fieldset.id}>
+                  <AccordionItemTrigger>{fieldset.title}</AccordionItemTrigger>
+                  <AccordionPanel>
+                    {(fieldset.fields as DeepKeys<ControlPanelSchema>[]).map(
+                      (schemaField, index) => (
+                        <form.AppField
+                          name={schemaField}
+                          key={index}
+                          // eslint-disable-next-line react/no-children-prop
+                          children={(field) => (
+                            <field.Quanta
+                              {...schema.properties[schemaField]}
+                              className="mb-4"
+                              label={schema.properties[field.name].title}
+                              name={field.name}
+                              defaultValue={field.state.value}
+                              required={
+                                schema.required.indexOf(schemaField) !== -1
+                              }
+                              error={field.state.meta.errors}
+                              formAtom={formAtom}
+                            />
+                          )}
+                        />
+                      ),
+                    )}
+                  </AccordionPanel>
+                </AccordionItem>
+              </Accordion>
+            ))}
+            <Plug pluggable="toolbar-top" id="edit-save-button">
+              <Button
+                aria-label={t('cmsui.save')}
+                type="submit"
+                // Trigger the TS form submission
+                onPress={() => form.handleSubmit()}
+                variant="primary"
+                accent
+                size="L"
+              >
+                <Checkbox />
+              </Button>
+            </Plug>
+          </form>
+        </Container>
+      </main>
     </InitAtoms>
   );
 }

packages/cmsui/routes/controlpanels.tsx

@@ -35,7 +35,7 @@ export default function ControlPanels() {
   const navigate = useNavigate();
   const { t } = useTranslation();
   return (
-    <>
+    <main>
       <Plug pluggable="toolbar-top" id="button-back">
         <Button aria-label="back" size="L" onPress={() => navigate('/')}>
           <Back />
@@ -46,6 +46,6 @@ export default function ControlPanels() {
         <ControlPanelsList controlpanels={controlpanels ?? []} />
         <VersionOverview {...systemInformation} />
       </Container>
-    </>
+    </main>
   );
 }