PROD-1075 #comment update layout; #time 3h

Author: brooketopcoder

src/lib/content-layout/ContentLayout.module.scss

@@ -4,7 +4,6 @@
     @include content-height;
     padding: 0;
     display: grid;
-    background-color: $tc-white;
     grid-template-columns: 1fr;
     justify-content: center;
 
@@ -14,7 +13,6 @@
 
         .content-inner {
             flex: 1;
-            background-color: $tc-white;
             max-width: $xl-max-content;
             padding: 0;
         }

src/lib/content-layout/ContentLayout.tsx

@@ -7,14 +7,15 @@ import styles from './ContentLayout.module.scss'
 
 export interface ContentLayoutProps {
     children?: ReactNode
+    contentClass?: string
     title: string
     titleClass?: string
 }
 
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
 
     return (
-        <div className={classNames(styles.content)}>
+        <div className={classNames(styles.content, props.contentClass)}>
 
             <div className={styles['content-outer']}>
 

src/lib/styles/_cards.scss

@@ -9,6 +9,7 @@
 
     .card-title {
         @include font-weight-semi-bold;
+        @include font-barlow;
         text-transform: uppercase;
     }
 }

src/utils/settings/Settings.module.scss

@@ -1,5 +1,9 @@
-.page-header {
+.content {
     background: url('./profile-settings-background.svg');
+    background-size: 100% 100%;
+}
+
+.page-header {
     padding: 48px 180px;
 
     h1 {

src/utils/settings/Settings.tsx

@@ -31,6 +31,7 @@ const Settings: FC<{}> = () => {
 
     return (
         <ContentLayout
+            contentClass={styles.content}
             title={SETTINGS_TITLE}
             titleClass={classNames('font-tc-white', styles['page-header'])}
         >
@@ -51,15 +52,15 @@ const Settings: FC<{}> = () => {
                 <div className={styles['page-content']}>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Basic Information
-                        </span>
+                        <div className='card-title'>
+                            Basic Information
+                        </div>
                     </div>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Reset Password
-                        </span>
+                        <div className='card-title'>
+                            Reset Password
+                        </div>
                     </div>
 
                 </div>