fix: inconsistent header spacing (#341)

TACC · Oct 10, 2023 · 34a7322 · 34a7322
1 parent 5b00457
commit 34a7322
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
@@ -19,6 +19,13 @@
   --global-space--section-bottom: 30px;
   --global-space--section-left: 20px;
   --global-space--section-right: 30px;
+  /* NOTE: Unexpectedly required to apply the above var changes */
+  /* HELP: Why isn't Core-Styles `--global-space--section` auto-updated? */
+  --global-space--section:
+    var(--global-space--section-top)
+    var(--global-space--section-right)
+    var(--global-space--section-bottom)
+    var(--global-space--section-left);
 }
 
 /* To stretch application height to available space */

diff --git a/libs/tup-components/src/accounts/ManageAccount.module.css b/libs/tup-components/src/accounts/ManageAccount.module.css
@@ -6,9 +6,8 @@
 .account-header {
     font-size: 2rem;
     border-bottom: 1px solid #707070;
-    padding: 10px 0;
 }
-.account-header > i {
+.account-header i {
     vertical-align: middle;
     margin-top: -0.25em;
     margin-right: 0.5rem;

diff --git a/libs/tup-components/src/accounts/ManageAccount.tsx b/libs/tup-components/src/accounts/ManageAccount.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Button } from '@tacc/core-components';
+import { Icon, Button, SectionHeader } from '@tacc/core-components';
 import { useProfile } from '@tacc/tup-hooks';
 import { AccountMfa } from './ManageAccountMfa';
 import styles from './ManageAccount.module.css';
@@ -94,12 +94,12 @@ const ManageAccount: React.FC = () => {
   return (
     <section>
       <article className={styles['account-layout']}>
-        <header className={styles['account-header']}>
+        <SectionHeader className={styles['account-header']} isNestedHeader>
           <Icon name="user" />
           <span>
             {data?.firstName} {data?.lastName}
           </span>
-        </header>
+        </SectionHeader>
         <div className={styles['account-body']}>
           <section>
             <ManageUser />