refactor: settings layout

ROADMAP.md

@@ -4,23 +4,22 @@ A list of "things" to improve
 
 ## Soon
 - [ ] make filters a dropdown overlay
-- [ ] theme: restore ability to toggle theme (DARK and System)
 - [ ] clear out all TODOs in this project
-- [ ] fix root of `findDOMNode is deprecated and will be removed in the next major release.` console error
 - [ ] improve product mapping coverage
 - [ ] re-enable handful of skipped unit tests
-- [ ] improve product mapping coverage
 
 ## Later
 - [ ] advanced feature for Bitbucket "Your Work" queue
 - [ ] use graphql codegen to help with client types
 - [ ] atlaskit progress bar
 - [ ] ongoing refactor to replace any local html (divs+classNames) with atlaskit primitives
-- [ ] use atlaskit/tokens for colors
+- [ ] use atlaskit/tokens for colors (and dark mode control)
 - [ ] create "update available" menubar icon set
 - [ ] shrink app bundle size by moving dependencies around and adjusting files filter
 - [ ] user defined sorting of inbox when grouped by product
 - [ ] use secure local storage
+- [ ] fix `findDOMNode is deprecated and will be removed in the next major release.` console error - depends on update to InlineMessage ADS component
+
 
 # Atlassian Roadmap
 - https://www.atlassian.com/wac/roadmap/cloud?&search=Atlassian%20Home

src/routes/Settings.tsx

@@ -42,14 +42,14 @@ export const SettingsRoute: FC = () => {
     <div className="flex h-screen flex-col" data-testid="settings">
       <Header fetchOnBack>Settings</Header>
 
-      <div className="flex flex-col flex-grow overflow-x-auto px-8">
-        <Stack space="space.400">
-          <AppearanceSettings />
-          <NotificationSettings />
-          <SystemSettings />
+      <div className="flex flex-col flex-grow overflow-x-auto">
+        <Box paddingInline="space.400" paddingBlockEnd="space.200">
+          <Stack space="space.200">
+            <AppearanceSettings />
+            <NotificationSettings />
+            <SystemSettings />
 
-          <Inline alignInline="center">
-            <Box paddingBlockEnd="space.400">
+            <Inline alignInline="center">
               <Button
                 aria-haspopup="dialog"
                 appearance="danger"
@@ -115,11 +115,10 @@ export const SettingsRoute: FC = () => {
                   </Modal>
                 )}
               </ModalTransition>
-            </Box>
-          </Inline>
-        </Stack>
+            </Inline>
+          </Stack>
+        </Box>
       </div>
-
       <SettingsFooter />
     </div>
   );