Refactor <View layout="centered" />

Author: martpie

src/components/Setting.module.css

@@ -1,5 +1,5 @@
 .settingSection {
-  padding-bottom: 16px;
+  margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 4px;

src/elements/SettingsNav.module.css

@@ -1,11 +1,11 @@
 .nav {
   display: flex;
   flex-direction: column;
+  gap: 32px;
 }
 
 .navLink {
   display: inline-block;
-  padding: 15px;
   color: var(--text);
   font-weight: bold;
   text-decoration: none;

src/elements/View.module.css

@@ -8,9 +8,13 @@
 }
 
 .centered {
-  display: flex;
+  display: grid;
+  grid-template-columns: 500px;
   justify-content: center;
-  scrollbar-gutter: stable;
+}
+
+.centeredViewContent {
+  position: relative;
 }
 
 .hasPadding {

src/elements/View.tsx

@@ -35,6 +35,14 @@ export default function View(props: Props) {
     );
   }
 
+  if (props.layout === 'centered') {
+    return (
+      <div className={cx(viewClassNames, contentClassNames)}>
+        <div className={styles.centeredViewContent}>{props.children}</div>
+      </div>
+    );
+  }
+
   return (
     <div className={cx(viewClassNames, contentClassNames)}>
       {props.children}

src/routes/settings.about.tsx

@@ -26,7 +26,7 @@ function ViewSettingsAbout() {
   const { t } = useLingui();
 
   return (
-    <div className="setting setting-about">
+    <>
       <Setting.Section>
         <Setting.Title>
           <Trans>About Museeks</Trans>
@@ -121,6 +121,6 @@ function ViewSettingsAbout() {
           </ExternalButton>
         </Flexbox>
       </Setting.Section>
-    </div>
+    </>
   );
 }

src/routes/settings.audio.tsx

@@ -20,7 +20,7 @@ function ViewSettingsAudio() {
   const { t } = useLingui();
 
   return (
-    <div className="setting setting-audio">
+    <>
       <Setting.Section>
         <Setting.Input
           label={t`Playback rate`}
@@ -54,6 +54,6 @@ function ViewSettingsAudio() {
           onChange={useInvalidateCallback(SettingsAPI.toggleFollowPlayingTrack)}
         />
       </Setting.Section>
-    </div>
+    </>
   );
 }

src/routes/settings.module.css

@@ -1,11 +1,5 @@
-.settingsNav {
-  padding: 0 30px;
-  width: 170px;
-  margin-left: -150px;
-}
-
-.settingsContent {
-  padding: 10px 15px;
-  width: 400px;
-  max-width: calc(100% - 170px);
+.nav {
+  position: absolute;
+  right: 100%;
+  margin-right: 60px;
 }

src/routes/settings.tsx

@@ -36,7 +36,7 @@ export const Route = createFileRoute('/settings')({
 function ViewSettings() {
   return (
     <View hasPadding layout="centered">
-      <div className={styles.settingsNav}>
+      <div className={styles.nav}>
         <SettingsNav>
           <SettingsNavLink to="/settings/library">
             <Trans>Library</Trans>
@@ -53,9 +53,7 @@ function ViewSettings() {
         </SettingsNav>
       </div>
 
-      <div className={styles.settingsContent}>
-        <Outlet />
-      </div>
+      <Outlet />
     </View>
   );
 }

src/routes/settings.ui.tsx

@@ -21,7 +21,7 @@ function ViewSettingsUI() {
   const invalidate = useInvalidate();
 
   return (
-    <div className="setting setting-interface">
+    <>
       <Setting.Section>
         <Setting.Select
           label={t`Theme`}
@@ -117,7 +117,7 @@ function ViewSettingsUI() {
           onChange={useInvalidateCallback(SettingsAPI.toggleSleepBlocker)}
         />
       </Setting.Section>
-    </div>
+    </>
   );
 }