fix: tup-615 inconsistent header spacing - left & vertical (#339)

* feat: tup-615 small header buttons (#338) * feat: tup-615 my account header (#340) * fix: inconsistent header spacing (#341) * fix: tup-615 flexible space above dashboard header (#342) * fix: project ticket grid too much middle space Designers do not intend nor like big gap. It's been around since Portal. But it's been so difficult to fix… until `project-ticket-grid` came. I hadn't noticed the fix was possible until just now. * docs: more css thoughts in comment * docs: more css thoughts in comment * feat: tup-619 c-content block migration (#346) * feat: tup-619 c-content block migration * removed content-block import * feat: tup-623 c-update migration (#348) * migrated c-update to core-styles * removed c-update import * feat: tup-624: added generics/attributes to demo (#345) * feat: tup-624: added generics/attributes to demo * migrated rest of attributes.css to core-styles * removed unnecessary comments in css file for c-button * feat/tup-625: Migrate o-heading-steps to core-styles (#349) * feat/tup-630: Migrate django.cms.blog.app.item (#351) * getting rid of django.cms.blog.app.item.css * removing the import for django.cms.blog.app.item.css * feat/tup-632: Migrate django.cms.picture.css to core-cms (#355) * Migrate c-card fixes to core-styles (#361) Co-authored-by: Wesley Bomar <[email protected]> * Migrated header to Core-Styles (#359) Co-authored-by: Wesley Bomar <[email protected]> * fix: tup-617 c-button font-weight redunant style (#364) * feat(tup-cms): core-cms with core-styles v2.19 * chore: lowercase comment * feat(tup-cms)!: core-cms with core-styles v2.19 WARNING: v2.17.3 causes login form field bug. * feat/tup-634: Migrate pseudo-elements to core-cms (#358) * feat/tup-625: delete u-highlight stylesheet (#352) No need for u-highlight per jira ticket Co-authored-by: Wesley B <[email protected]> * Migrate card list support to core-styles (#360) Co-authored-by: Wesley Bomar <[email protected]> * feat/tup-626: delete o-section from tup-ui (#353) * I believe this has already been merged into core-styles... Padding and Margin seem to be available on prod * remove import of core-styles o-heading-steps.css * feat/tup-633: Migrate lightgallery to core-cms (#357) * feat/tup-633: Migrate lightgallery to core-cms * delete unnecessary import of django.cms.picture.css * feat/tup-629: delete footer (#356) * feat/tup-629: delete footer Footer is already in core-styles and cms * remove unnecessary imports * removing all card--image styles (#365) * chore: tup-616 migrate c-button styles to core-cms (#343) * chore: migrate c-button styles to core-cms TACC/Core-CMS#729 * fix: remove import of file deleted in merge --------- Co-authored-by: Tomas Gonzalez <[email protected]> * feat/tup-622 migrate c-pill to core-styles (#367) * fix: tup-615 prevent too tall proj's-tickets table * feat/tup-640 Delete c-card and c-content-block imports (#368) * feat(tup-cms): core-cms with core-styles v2.20 WARNING: Introduces login form field width bug. (Core-Styles v2.17.3 might be the cause.) * feat(tup-ui): core-styles v2.20 --------- Co-authored-by: Tomas Gonzalez <[email protected]> Co-authored-by: Jake Rosenberg <[email protected]> Co-authored-by: Tomas Gonzalez <[email protected]>
TACC · Nov 14, 2023 · 5b0a2b6 · 5b0a2b6
1 parent 19e785e
commit 5b0a2b6
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 22 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/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css b/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;
   }
 }
 

diff --git a/apps/tup-ui/src/pages/Projects/Projects.tsx b/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>
 );
 

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/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,

diff --git a/libs/tup-components/src/accounts/ManageAccount.module.css b/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 {

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

diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx b/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>
       )}

diff --git a/libs/tup-components/src/tickets/Tickets.tsx b/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>
           }