From d53d2bb41c14666c99e5cf71d65e7fe1f476d649 Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Mon, 25 Sep 2023 17:24:29 +0300 Subject: [PATCH 1/4] style: change 'add hours' cell according to the updated design --- src/app/directory/components/TeamRow.tsx | 15 ++++++++++----- src/app/directory/components/TeamTable.tsx | 6 +++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/app/directory/components/TeamRow.tsx b/src/app/directory/components/TeamRow.tsx index f91af004..d90c1ee4 100644 --- a/src/app/directory/components/TeamRow.tsx +++ b/src/app/directory/components/TeamRow.tsx @@ -10,17 +10,22 @@ interface TeamRowProps { function TeamRow({ teamMember, currentUserId }: TeamRowProps) { return ( - {teamMember.name} + {teamMember.name} {teamMember.discordId} -
+
{teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour} {teamMember.id === currentUserId && ( )}
diff --git a/src/app/directory/components/TeamTable.tsx b/src/app/directory/components/TeamTable.tsx index 6f6cd17a..fd4451e6 100644 --- a/src/app/directory/components/TeamTable.tsx +++ b/src/app/directory/components/TeamTable.tsx @@ -8,10 +8,10 @@ function TeamTable() { return (
{/* head */} - + @@ -22,7 +22,7 @@ function TeamTable() { - + {/* rows */} {teamMembers.map((teamMember) => ( Date: Mon, 25 Sep 2023 17:36:36 +0300 Subject: [PATCH 2/4] style: change some colors according to the updated design --- tailwind.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 4ccdc19e..f2fc82d7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -40,9 +40,9 @@ module.exports = { primary: "#40936D", "primary-focus": "#82D9B1", "primary-content": "#7FB79D", - secondary: "#8FB4CC", - "secondary-focus": "#A6D1ED", - "secondary-content": "#697F8C", + secondary: "#44728B", + "secondary-focus": "#5E7387", + "secondary-content": "#36444D", accent: "#61CCA2", "accent-focus": "#6EE7B7", "accent-content": "#6B9984", From 49f0bae0be24655b8b39c33467818701fd15eb38 Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 26 Sep 2023 13:31:32 +0300 Subject: [PATCH 3/4] feat: make directory responsive --- src/app/directory/components/EditCell.tsx | 29 +++++++++++++ src/app/directory/components/TeamCard.tsx | 43 +++++++++++++++++++ .../components/TeamCardsContainer.tsx | 19 ++++++++ src/app/directory/components/TeamRow.tsx | 25 ++--------- src/app/directory/components/TeamTable.tsx | 6 +-- src/app/directory/components/index.ts | 3 ++ src/app/directory/page.tsx | 7 ++- 7 files changed, 104 insertions(+), 28 deletions(-) create mode 100644 src/app/directory/components/EditCell.tsx create mode 100644 src/app/directory/components/TeamCard.tsx create mode 100644 src/app/directory/components/TeamCardsContainer.tsx diff --git a/src/app/directory/components/EditCell.tsx b/src/app/directory/components/EditCell.tsx new file mode 100644 index 00000000..53a7cb16 --- /dev/null +++ b/src/app/directory/components/EditCell.tsx @@ -0,0 +1,29 @@ +import { PencilSquareIcon } from "@heroicons/react/24/solid"; +import { TeamMember } from "."; +import { Button } from "@/components"; + +interface EditCellProps { + teamMember: TeamMember; + currentUserId: string; +} + +export default function EditCell({ teamMember, currentUserId }: EditCellProps) { + return ( +
+ {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour} + {teamMember.id === currentUserId && ( + + )} +
+ ); +} diff --git a/src/app/directory/components/TeamCard.tsx b/src/app/directory/components/TeamCard.tsx new file mode 100644 index 00000000..125c6366 --- /dev/null +++ b/src/app/directory/components/TeamCard.tsx @@ -0,0 +1,43 @@ +import { EditCell, TeamMember } from "."; + +interface TeamCardProps { + teamMember: TeamMember; + currentUserId: string; +} + +export default function TeamCard({ teamMember, currentUserId }: TeamCardProps) { + return ( +
+
    +
  • + Name + {teamMember.name} +
    • +
  • + Discord ID + {teamMember.discordId} +
    • +
  • + Average Hour/Sprint + +
    • +
  • + Location + {teamMember.location} +
    • +
  • + Timezone + {teamMember.timeZone} +
    • +
  • + Email + {teamMember.email} +
    • +
  • + Position + {teamMember.position} +
    • +
+
+ ); +} diff --git a/src/app/directory/components/TeamCardsContainer.tsx b/src/app/directory/components/TeamCardsContainer.tsx new file mode 100644 index 00000000..fa00fddd --- /dev/null +++ b/src/app/directory/components/TeamCardsContainer.tsx @@ -0,0 +1,19 @@ +import { TeamCard, teamMembers } from "."; + +// Temp: +const currentUserId = "1"; + +export default function TeamCardsContainer() { + return ( +
+ {/* cards */} + {teamMembers.map((teamMember) => ( + + ))} +
+ ); +} diff --git a/src/app/directory/components/TeamRow.tsx b/src/app/directory/components/TeamRow.tsx index d90c1ee4..4a950098 100644 --- a/src/app/directory/components/TeamRow.tsx +++ b/src/app/directory/components/TeamRow.tsx @@ -1,34 +1,17 @@ -import { PencilSquareIcon } from "@heroicons/react/24/solid"; -import { TeamMember } from "."; -import { Button } from "@/components"; +import { EditCell, TeamMember } from "."; interface TeamRowProps { teamMember: TeamMember; currentUserId: string; } -function TeamRow({ teamMember, currentUserId }: TeamRowProps) { +export default function TeamRow({ teamMember, currentUserId }: TeamRowProps) { return ( @@ -37,5 +20,3 @@ function TeamRow({ teamMember, currentUserId }: TeamRowProps) { ); } - -export default TeamRow; diff --git a/src/app/directory/components/TeamTable.tsx b/src/app/directory/components/TeamTable.tsx index fd4451e6..ea25d1c2 100644 --- a/src/app/directory/components/TeamTable.tsx +++ b/src/app/directory/components/TeamTable.tsx @@ -4,9 +4,9 @@ import { TeamRow, teamMembers } from "."; // Temp: const currentUserId = "1"; -function TeamTable() { +export default function TeamTable() { return ( -
+
Name Discord IDPosition
{teamMember.name} {teamMember.discordId} -
- {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour} - {teamMember.id === currentUserId && ( - - )} -
+ 		{teamMember.location} {teamMember.timeZone}
@@ -36,5 +36,3 @@ function TeamTable() { ); } - -export default TeamTable; diff --git a/src/app/directory/components/index.ts b/src/app/directory/components/index.ts index 0ecd173c..83608260 100644 --- a/src/app/directory/components/index.ts +++ b/src/app/directory/components/index.ts @@ -1,3 +1,6 @@ export { default as TeamTable } from "./TeamTable"; export { default as TeamRow } from "./TeamRow"; +export { default as TeamCard } from "./TeamCard"; +export { default as TeamCardsContainer } from "./TeamCardsContainer"; +export { default as EditCell } from "./EditCell"; export * from "./fixtures/MyTeam"; diff --git a/src/app/directory/page.tsx b/src/app/directory/page.tsx index 47471041..1a55b3a5 100644 --- a/src/app/directory/page.tsx +++ b/src/app/directory/page.tsx @@ -1,4 +1,4 @@ -import { TeamTable } from "."; +import { TeamTable, TeamCardsContainer } from "."; import { Banner } from "@/components"; function DirectoryPage() { @@ -10,7 +10,10 @@ function DirectoryPage() { title="Directory" description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!" /> - ; + {/* For screens > 1920px */} + + {/* For screens < 1920px */} + ); } From 4cead3d9f4b2141443425742ae700d1915ea4ccf Mon Sep 17 00:00:00 2001 From: Jane Moroz Date: Tue, 26 Sep 2023 13:40:19 +0300 Subject: [PATCH 4/4] feat: create TeamDirectoryComponent --- src/app/directory/components/TeamDirectory.tsx | 12 ++++++++++++ src/app/directory/components/index.ts | 1 + src/app/directory/page.tsx | 7 ++----- 3 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/app/directory/components/TeamDirectory.tsx diff --git a/src/app/directory/components/TeamDirectory.tsx b/src/app/directory/components/TeamDirectory.tsx new file mode 100644 index 00000000..4d3e02d8 --- /dev/null +++ b/src/app/directory/components/TeamDirectory.tsx @@ -0,0 +1,12 @@ +import { TeamCardsContainer, TeamTable } from "."; + +export default function TeamDirectory() { + return ( + <> + {/* For screens > 1920px */} + + {/* For screens < 1920px */} + + + ); +} diff --git a/src/app/directory/components/index.ts b/src/app/directory/components/index.ts index 83608260..9c89cbb7 100644 --- a/src/app/directory/components/index.ts +++ b/src/app/directory/components/index.ts @@ -3,4 +3,5 @@ export { default as TeamRow } from "./TeamRow"; export { default as TeamCard } from "./TeamCard"; export { default as TeamCardsContainer } from "./TeamCardsContainer"; export { default as EditCell } from "./EditCell"; +export { default as TeamDirectory } from "./TeamDirectory"; export * from "./fixtures/MyTeam"; diff --git a/src/app/directory/page.tsx b/src/app/directory/page.tsx index 1a55b3a5..96f2aec8 100644 --- a/src/app/directory/page.tsx +++ b/src/app/directory/page.tsx @@ -1,4 +1,4 @@ -import { TeamTable, TeamCardsContainer } from "."; +import { TeamDirectory } from "."; import { Banner } from "@/components"; function DirectoryPage() { @@ -10,10 +10,7 @@ function DirectoryPage() { title="Directory" description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!" /> - {/* For screens > 1920px */} - - {/* For screens < 1920px */} - + ); }