From e121aef51d11cdd8f54878a17d8584361175c006 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 12 Sep 2024 15:47:25 -0400 Subject: [PATCH 1/3] fix MA's styling changes --- .../src/components/Projects/Project.tsx | 12 ++++++++--- .../components/Projects/ProjectTableRow.tsx | 21 ++++++++++--------- .../src/components/Submission/ItemsTable.tsx | 18 ++++++++-------- .../Submission/SubmissionItemTableRow.tsx | 16 +++++--------- .../ProjectCard/ManagementPlan.tsx | 4 ++-- 5 files changed, 36 insertions(+), 35 deletions(-) diff --git a/submit-web/src/components/Projects/Project.tsx b/submit-web/src/components/Projects/Project.tsx index 3061c01c..1010a744 100644 --- a/submit-web/src/components/Projects/Project.tsx +++ b/submit-web/src/components/Projects/Project.tsx @@ -52,7 +52,7 @@ export const Project = ({ accountProject }: ProjectParam) => { @@ -78,13 +78,18 @@ export const Project = ({ accountProject }: ProjectParam) => { - + Active Submissions @@ -101,6 +106,7 @@ export const Project = ({ accountProject }: ProjectParam) => { sx={{ mb: BCDesignTokens.layoutPaddingXsmall, mt: BCDesignTokens.layoutPaddingSmall, + ml: BCDesignTokens.layoutPaddingSmall, }} /> void; } +const border = `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`; export default function ProjectTableRow({ subPackage, @@ -21,9 +22,9 @@ export default function ProjectTableRow({ scope="row" colSpan={6} sx={{ - borderTop: "1px solid #F2F2F2", - borderBottom: "1px solid #F2F2F2", - borderLeft: "1px solid #F2F2F2", + borderTop: border, + borderBottom: border, + borderLeft: border, borderTopLeftRadius: 5, borderBottomLeftRadius: 5, py: BCDesignTokens.layoutPaddingXsmall, @@ -54,8 +55,8 @@ export default function ProjectTableRow({ colSpan={2} align="right" sx={{ - borderTop: "1px solid #F2F2F2", - borderBottom: "1px solid #F2F2F2", + borderTop: border, + borderBottom: border, py: BCDesignTokens.layoutPaddingXsmall, }} > @@ -65,8 +66,8 @@ export default function ProjectTableRow({ colSpan={2} align="right" sx={{ - borderTop: "1px solid #F2F2F2", - borderBottom: "1px solid #F2F2F2", + borderTop: border, + borderBottom: border, py: BCDesignTokens.layoutPaddingXsmall, }} > @@ -76,11 +77,11 @@ export default function ProjectTableRow({ colSpan={2} align="right" sx={{ - borderTop: "1px solid #F2F2F2", + borderTop: border, borderTopRightRadius: 5, borderBottomRightRadius: 5, - borderBottom: "1px solid #F2F2F2", - borderRight: "1px solid #F2F2F2", + borderBottom: border, + borderRight: border, py: BCDesignTokens.layoutPaddingXsmall, }} > diff --git a/submit-web/src/components/Submission/ItemsTable.tsx b/submit-web/src/components/Submission/ItemsTable.tsx index 24edfdf2..17c5bb6b 100644 --- a/submit-web/src/components/Submission/ItemsTable.tsx +++ b/submit-web/src/components/Submission/ItemsTable.tsx @@ -16,6 +16,7 @@ import SwapVertIcon from "@mui/icons-material/SwapVert"; import SubmissionItemTableRow from "./SubmissionItemTableRow"; import { SubmissionItem } from "@/models/SubmissionItem"; import { SubmissionItemTableRow as SubmissionItemTableRowType } from "./types"; +import { mock } from "node:test"; export default function ItemsTable({ submissionItems, @@ -31,15 +32,14 @@ export default function ItemsTable({ setOrder(isAsc ? "desc" : "asc"); setOrderBy(property); }; - const sortedSubmissionItems = submissionItems - .map((subItem) => ({ - id: subItem.id, - name: subItem.type.name, - status: subItem.status, - submitted_by: subItem.submitted_by, - version: subItem.version, - })) - .sort(tableSort(order, orderBy)); + + const mockSubmissionItem = { + id: "1", + name: "Submission 1", + version: "1.0.0", + status: "NEW_SUBMISSION", + }; + const sortedSubmissionItems = [mockSubmissionItem, mockSubmissionItem]; return ( diff --git a/submit-web/src/components/Submission/SubmissionItemTableRow.tsx b/submit-web/src/components/Submission/SubmissionItemTableRow.tsx index 460613af..c4ec1586 100644 --- a/submit-web/src/components/Submission/SubmissionItemTableRow.tsx +++ b/submit-web/src/components/Submission/SubmissionItemTableRow.tsx @@ -18,7 +18,7 @@ type SubmissionItemTableRowProps = { const StyledTableCell = styled(TableCell)(() => ({ borderTop: `1px solid ${BCDesignTokens.themeBlue20}`, borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`, - py: BCDesignTokens.layoutPaddingXsmall, + padding: `${BCDesignTokens.layoutPaddingSmall} !important`, "&:first-of-type": { borderLeft: `1px solid ${BCDesignTokens.themeBlue20}`, borderTopLeftRadius: 5, @@ -54,10 +54,10 @@ export default function SubmissionItemTableRow({ }} > {item.name} @@ -65,18 +65,12 @@ export default function SubmissionItemTableRow({ {item.version ?? "--"} - + - + { { From c8befb1d7c6565e4b69c3887e4e75e45706a1a10 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 12 Sep 2024 15:54:41 -0400 Subject: [PATCH 2/3] revert mock data --- .../src/components/Submission/ItemsTable.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/submit-web/src/components/Submission/ItemsTable.tsx b/submit-web/src/components/Submission/ItemsTable.tsx index 17c5bb6b..dae7bf89 100644 --- a/submit-web/src/components/Submission/ItemsTable.tsx +++ b/submit-web/src/components/Submission/ItemsTable.tsx @@ -16,7 +16,6 @@ import SwapVertIcon from "@mui/icons-material/SwapVert"; import SubmissionItemTableRow from "./SubmissionItemTableRow"; import { SubmissionItem } from "@/models/SubmissionItem"; import { SubmissionItemTableRow as SubmissionItemTableRowType } from "./types"; -import { mock } from "node:test"; export default function ItemsTable({ submissionItems, @@ -33,13 +32,15 @@ export default function ItemsTable({ setOrderBy(property); }; - const mockSubmissionItem = { - id: "1", - name: "Submission 1", - version: "1.0.0", - status: "NEW_SUBMISSION", - }; - const sortedSubmissionItems = [mockSubmissionItem, mockSubmissionItem]; + const sortedSubmissionItems = submissionItems + .map((subItem) => ({ + id: subItem.id, + name: subItem.type.name, + status: subItem.status, + submitted_by: subItem.submitted_by, + version: subItem.version, + })) + .sort(tableSort(order, orderBy)); return ( From bff61a7b19eef93642c75913d0c5fd27dfd804fb Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 12 Sep 2024 16:00:59 -0400 Subject: [PATCH 3/3] setup box shadow medium and make epic theme latest --- submit-web/package-lock.json | 47 +++++++++++++++++-- submit-web/package.json | 2 +- .../components/Shared/ContentBox/index.tsx | 6 ++- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/submit-web/package-lock.json b/submit-web/package-lock.json index 24163514..198933c0 100644 --- a/submit-web/package-lock.json +++ b/submit-web/package-lock.json @@ -18,14 +18,16 @@ "@tanstack/react-router": "^1.45.7", "@tanstack/router-devtools": "^1.45.7", "@tanstack/router-plugin": "^1.45.7", + "@types/react-input-mask": "^3.0.5", "axios": "^1.7.2", - "epic.theme": "^1.0.8", + "epic.theme": "^1.0.11", "keycloak-js": "^25.0.1", "oidc-client-ts": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.52.1", "react-if": "^4.1.5", + "react-input-mask": "^2.0.4", "react-oidc-context": "^3.1.0", "yup": "^1.4.0", "zustand": "^4.5.4" @@ -4059,6 +4061,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-input-mask": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.5.tgz", + "integrity": "sha512-vQ1x6ykwjDrDrJZq1zw5/uQ+nqGHUV6bWscsVZJ/qsNwNXWxZm7KRBHLJ5k6TQt3MHjhpoYHzPH6FwjVSZODHA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -5910,9 +5920,9 @@ } }, "node_modules/epic.theme": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/epic.theme/-/epic.theme-1.0.8.tgz", - "integrity": "sha512-BWgvIcYrjVzeYqnuM+P5PWLjkSuk4am7dGseu5jS0aTqE6C7lAA3759xqUzGee858vQW0vRuwl/UFvcFtEBgDA==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/epic.theme/-/epic.theme-1.0.11.tgz", + "integrity": "sha512-6iTus/GGKOsahZTV2T4dKpwUlXr5H65RhVfp1bxRpVR5RkA4kJ9060obEbVA6xxIr73itRqQ/eM8ZyTTRiC4Vw==", "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -7153,6 +7163,14 @@ "node": ">=10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -9170,6 +9188,19 @@ "react": "^16.x || ^17.x || ^18.x" } }, + "node_modules/react-input-mask": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", + "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==", + "dependencies": { + "invariant": "^2.2.4", + "warning": "^4.0.2" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -10574,6 +10605,14 @@ "node": ">=10" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", diff --git a/submit-web/package.json b/submit-web/package.json index e1d51b44..2737ebff 100644 --- a/submit-web/package.json +++ b/submit-web/package.json @@ -24,7 +24,7 @@ "@tanstack/router-plugin": "^1.45.7", "@types/react-input-mask": "^3.0.5", "axios": "^1.7.2", - "epic.theme": "^1.0.8", + "epic.theme": "latest", "keycloak-js": "^25.0.1", "oidc-client-ts": "^3.0.1", "react": "^18.2.0", diff --git a/submit-web/src/components/Shared/ContentBox/index.tsx b/submit-web/src/components/Shared/ContentBox/index.tsx index da347f48..6835fdfc 100644 --- a/submit-web/src/components/Shared/ContentBox/index.tsx +++ b/submit-web/src/components/Shared/ContentBox/index.tsx @@ -14,7 +14,11 @@ export const ContentBox = ({ ...rest }: ContentBoxProps) => { return ( - +