fix: tup-615 inconsistent header spacing - left & vertical

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 */

apps/tup-ui/src/pages/Dashboard/Dashboard.module.css

@@ -29,7 +29,7 @@
     grid-template-columns: 0.5fr 0.5fr;
   }
   @media (--x-wide-and-above) {
-    grid-template-columns: 0.65fr 0.35fr;
+    grid-template-columns: 0.6fr 0.4fr;
   }
 }
 .panels > * {
@@ -51,14 +51,14 @@
   display: grid;
   gap: 25px;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 0.5fr 1fr;
   grid-template-areas:
     "projects"
     "tickets";
 
   @media (--wide-and-below) {
     row-gap: 25px;
-    grid-template-rows: auto auto;
+    grid-template-rows: 300px 300px;
   }
 }
 

apps/tup-ui/src/pages/Projects/Projects.tsx

@@ -10,7 +10,9 @@ import styles from './Projects.module.css';
 
 const NewProject = () => (
   <a href="https://submit-tacc.xras.org/" target="_blank" rel="noreferrer">
-    <Button type="primary">+ New Project</Button>
+    <Button type="primary" size="small">
+      + New Project
+    </Button>
   </a>
 );
 

libs/core-components/src/lib/Button/Button.tsx

@@ -28,12 +28,8 @@ type ButtonTypeLinkSize = {
   type?: 'link';
   size?: never;
 };
-type ButtonTypePrimarySize = {
-  type?: 'primary';
-  size?: 'short' | 'medium' | 'long';
-};
 type ButtonTypeOtherSize = {
-  type?: 'secondary' | 'tertiary' | 'active';
+  type?: 'primary' | 'secondary' | 'tertiary' | 'active';
   size?: 'short' | 'medium' | 'long' | 'small';
 };
 
@@ -48,7 +44,7 @@ type ButtonProps = React.PropsWithChildren<{
   attr?: 'button' | 'submit' | 'reset';
   isLoading?: boolean;
 }> &
-  (ButtonTypeLinkSize | ButtonTypePrimarySize | ButtonTypeOtherSize);
+  (ButtonTypeLinkSize | ButtonTypeOtherSize);
 
 const Button: React.FC<ButtonProps> = ({
   children,

libs/tup-components/src/accounts/ManageAccount.module.css

@@ -6,13 +6,11 @@
 .account-header {
     font-size: 2rem;
     border-bottom: 1px solid #707070;
-    padding: 10px;
 }
-.account-header > i {
-    font-size: 32px;
-    margin-bottom: -6px;
+.account-header i {
+    vertical-align: middle;
+    margin-top: -0.25em;
     margin-right: 0.5rem;
-
 }
 
 .account-body {

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 />

libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx

@@ -6,7 +6,7 @@ import styles from './TicketCreateModal.module.css';
 
 const TicketCreateModal: React.FC<
   React.PropsWithChildren<{
-    display: 'secondary' | 'link';
+    display: 'secondary' | 'link' | 'primary';
     size?: 'small';
   }>
 > = ({ children, size, display }) => {
@@ -23,8 +23,8 @@ const TicketCreateModal: React.FC<
 
   return (
     <>
-      {display === 'secondary' && (
-        <Button onClick={() => toggle()} type="secondary" size={size}>
+      {display !== 'link' && (
+        <Button onClick={() => toggle()} type={display} size={size}>
           {children}
         </Button>
       )}

libs/tup-components/src/tickets/Tickets.tsx

@@ -12,7 +12,7 @@ const Tickets: React.FC = () => {
       <section className={styles['tickets-section']}>
         <SectionHeader
           actions={
-            <TicketCreateModal display="secondary">
+            <TicketCreateModal display="secondary" size="small">
               + New Ticket
             </TicketCreateModal>
           }