feat: add bodyClassName prop to SettingsContentLayout and apply topicsBottomSpacer style in TopicSettings

Author: medyo

src/components/Layout/SettingsContentLayout/SettingsContentLayout.tsx

@@ -1,17 +1,20 @@
+import clsx from 'clsx'
 import './settingsContentLayout.css'
 
 type SettingsContentLayoutProps = {
   title: string
   description: string
   children: React.ReactNode
   actions?: React.ReactNode
+  bodyClassName?: string
 }
 
 export const SettingsContentLayout = ({
   title,
   description,
   actions,
   children,
+  bodyClassName,
 }: SettingsContentLayoutProps) => {
   return (
     <div className="settingsContent">
@@ -23,7 +26,7 @@ export const SettingsContentLayout = ({
 
         {actions && <div className="actions">{actions}</div>}
       </header>
-      <main className="settingsBody scrollable">{children}</main>
+      <main className={clsx('settingsBody scrollable', bodyClassName)}>{children}</main>
     </div>
   )
 }

src/components/Layout/SettingsContentLayout/settingsContentLayout.css

@@ -63,6 +63,11 @@
     cursor: pointer;
   }
 }
+
+.topicsBottomSpacer {
+  margin-bottom: 80px;
+  padding-bottom: 24px;
+}
 .settingsContent header {
   display: flex;
   justify-content: space-between;

src/features/settings/components/TopicSettings.tsx

@@ -59,6 +59,7 @@ export const TopicSettings = () => {
 
   return (
     <SettingsContentLayout
+      bodyClassName="topicsBottomSpacer"
       title="Followed Topics"
       description={`Your feed will be tailored by following the technologies you are interested in.`}>
       {userSelectedTags.length > 0 ? (