From 5b0a2b60515b55f64d556f178fd98448e9446a30 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 14 Nov 2023 17:11:01 -0600 Subject: [PATCH] fix: tup-615 inconsistent header spacing - left & vertical (#339) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Migrated header to Core-Styles (#359) Co-authored-by: Wesley Bomar * 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 <62723358+wesleyboar@users.noreply.github.com> * Migrate card list support to core-styles (#360) Co-authored-by: Wesley Bomar * 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 https://github.com/TACC/Core-CMS/pull/729 * fix: remove import of file deleted in merge --------- Co-authored-by: Tomas Gonzalez * 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 <63771558+R-Tomas-Gonzalez@users.noreply.github.com> Co-authored-by: Jake Rosenberg Co-authored-by: Tomas Gonzalez --- apps/tup-ui/src/main.global.css | 7 +++++++ apps/tup-ui/src/pages/Dashboard/Dashboard.module.css | 6 +++--- apps/tup-ui/src/pages/Projects/Projects.tsx | 4 +++- libs/core-components/src/lib/Button/Button.tsx | 8 ++------ libs/tup-components/src/accounts/ManageAccount.module.css | 8 +++----- libs/tup-components/src/accounts/ManageAccount.tsx | 6 +++--- .../src/tickets/TicketCreateModal/TicketCreateModal.tsx | 6 +++--- libs/tup-components/src/tickets/Tickets.tsx | 2 +- 8 files changed, 25 insertions(+), 22 deletions(-) diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css index 52124877e..fa739a14f 100644 --- 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 index a68ff202a..1d0af2d13 100644 --- 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 index 4af9301d1..46e8c6550 100644 --- 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 = () => ( - + ); diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx index 41b833057..b6faae02a 100644 --- 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 = ({ children, diff --git a/libs/tup-components/src/accounts/ManageAccount.module.css b/libs/tup-components/src/accounts/ManageAccount.module.css index a7edcdd8d..ac7e3446e 100644 --- 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 index 860027efe..2946c5f72 100644 --- 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 (
-
+ {data?.firstName} {data?.lastName} -
+
diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx index a6a56ea9d..5d4a18acd 100644 --- 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' && ( - )} diff --git a/libs/tup-components/src/tickets/Tickets.tsx b/libs/tup-components/src/tickets/Tickets.tsx index 257d16225..58e5b76ff 100644 --- a/libs/tup-components/src/tickets/Tickets.tsx +++ b/libs/tup-components/src/tickets/Tickets.tsx @@ -12,7 +12,7 @@ const Tickets: React.FC = () => {
+ + New Ticket }