fix: Capitalize section titles

cozy · Oct 25, 2023 · 8a02f77 · 8a02f77
1 parent 9207b89
commit 8a02f77
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/src/components/KonnectorErrors.jsx b/src/components/KonnectorErrors.jsx
@@ -189,7 +189,9 @@ export const KonnectorErrors = ({
       </InfosCarrousel>
     </div>
   ) : (
-    <Divider className="u-mv-0">{t('connector.title')}</Divider>
+    <Divider className="u-mv-0" variant="subtitle2">
+      {t('connector.title')}
+    </Divider>
   )
 }
 

diff --git a/src/components/Shortcuts/ShortcutsView.jsx b/src/components/Shortcuts/ShortcutsView.jsx
@@ -12,7 +12,9 @@ export const ShortcutsView = ({ shortcutsDirectories }) => {
           key={directory.name}
           className="shortcuts-list-wrapper u-m-auto u-w-100"
         >
-          <Divider className="u-mv-0">{directory.name}</Divider>
+          <Divider className="u-mv-0" variant="subtitle2">
+            {directory.name}
+          </Divider>
           <div className="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center">
             {directory.shortcuts.map(shortcut => (
               <ShortcutLink key={shortcut.name} file={shortcut} />

diff --git a/src/components/Shortcuts/__snapshots__/ShortcutsView.spec.jsx.snap b/src/components/Shortcuts/__snapshots__/ShortcutsView.spec.jsx.snap
@@ -8,11 +8,11 @@ Object {
       <div
         class="shortcuts-list-wrapper u-m-auto u-w-100"
       >
-        <p
-          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+        <h6
+          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
         >
           List title
-        </p>
+        </h6>
         <div
           class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
         >
@@ -77,11 +77,11 @@ Object {
     <div
       class="shortcuts-list-wrapper u-m-auto u-w-100"
     >
-      <p
-        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+      <h6
+        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
       >
         List title
-      </p>
+      </h6>
       <div
         class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
       >
@@ -203,11 +203,11 @@ Object {
       <div
         class="shortcuts-list-wrapper u-m-auto u-w-100"
       >
-        <p
-          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+        <h6
+          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
         >
           a
-        </p>
+        </h6>
         <div
           class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
         >
@@ -269,11 +269,11 @@ Object {
       <div
         class="shortcuts-list-wrapper u-m-auto u-w-100"
       >
-        <p
-          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+        <h6
+          class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
         >
           c
-        </p>
+        </h6>
         <div
           class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
         >
@@ -338,11 +338,11 @@ Object {
     <div
       class="shortcuts-list-wrapper u-m-auto u-w-100"
     >
-      <p
-        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+      <h6
+        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
       >
         a
-      </p>
+      </h6>
       <div
         class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
       >
@@ -404,11 +404,11 @@ Object {
     <div
       class="shortcuts-list-wrapper u-m-auto u-w-100"
     >
-      <p
-        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+      <h6
+        class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
       >
         c
-      </p>
+      </h6>
       <div
         class="shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center"
       >

diff --git a/src/components/__snapshots__/KonnectorErrors.spec.jsx.snap b/src/components/__snapshots__/KonnectorErrors.spec.jsx.snap
@@ -2,40 +2,40 @@
 
 exports[`KonnectorErrors should hide errors when the konnector or account is missing 1`] = `
 <div>
-  <p
-    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+  <h6
+    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
   >
     My connected services
-  </p>
+  </h6>
 </div>
 `;
 
 exports[`KonnectorErrors should render divider when all errors are muted 1`] = `
 <div>
-  <p
-    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+  <h6
+    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
   >
     My connected services
-  </p>
+  </h6>
 </div>
 `;
 
 exports[`KonnectorErrors should render divider when there are errors but no installed konnector 1`] = `
 <div>
-  <p
-    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+  <h6
+    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
   >
     My connected services
-  </p>
+  </h6>
 </div>
 `;
 
 exports[`KonnectorErrors should render divider when there are no errors 1`] = `
 <div>
-  <p
-    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-body2 MuiTypography-colorTextPrimary"
+  <h6
+    class="MuiTypography-root styles__divider___SuA5q u-mv-0 MuiTypography-subtitle2 MuiTypography-colorTextPrimary"
   >
     My connected services
-  </p>
+  </h6>
 </div>
 `;