Skip to content

Commit

Permalink
Revision 1: Sponsorship & Participants pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@BryceTobiano
BryceTobiano committed Nov 1, 2023
1 parent 0d9c831 commit 18fdfea
Show file tree
Hide file tree
Showing 11 changed files with 411 additions and 417 deletions.
54 changes: 48 additions & 6 deletions apps/dashboard/components/sponsor-portal/dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { Colors2023 } from '@hibiscus/styles';
import Image from 'next/image';
import { Option } from '@hibiscus/types';
import { Combobox } from '@hibiscus/ui-kit-2023';
import { Colors as SctwColors } from '@hacksc/sctw-ui-kit';

interface Props {
title: string;
options: Option[] | (() => Promise<Option[]>);
Expand Down Expand Up @@ -101,6 +103,28 @@ export function DropDown({
/>
</BlueFilterButton>
)}
{color === 'lightblue' && (
<LightBlueFilterButton onClick={() => setShowOptions(true)}>
<Text>{title}</Text>
<Image
width="20"
height="20"
src={'/dropdown-arrow.svg'}
alt="x-button"
/>
</LightBlueFilterButton>
)}
{color === 'red' && (
<RedFilterButton onClick={() => setShowOptions(true)}>
<Text>{title}</Text>
<Image
width="20"
height="20"
src={'/dropdown-arrow.svg'}
alt="x-button"
/>
</RedFilterButton>
)}
{showOptions && (
<SearchContainer>
<Combobox
Expand Down Expand Up @@ -157,19 +181,37 @@ const PurpleFilterButton = styled(PinkFilterButton)`
`;

const YellowFilterButton = styled(PinkFilterButton)`
background-color: ${Colors2023.YELLOW.DARK};
border: 2px solid ${Colors2023.YELLOW.STANDARD};
background-color: #dcab0f; // aardvark sweater
border: 2px solid ${SctwColors.Yellow.Yuhlow};
&:hover {
background-color: ${Colors2023.YELLOW.STANDARD};
background-color: ${SctwColors.Yellow.Yuhlow};
}
`;

const BlueFilterButton = styled(PinkFilterButton)`
background-color: ${Colors2023.BLUE.DARK};
border: 2px solid ${Colors2023.BLUE.STANDARD};
background-color: ${SctwColors.Blue.Bloo};
border: 2px solid #94b0f8; // Blooberry
&:hover {
background-color: #94b0f8; // Blooberry
}
`;

const LightBlueFilterButton = styled(PinkFilterButton)`
background-color: #94b0f8; // Blooberry
border: 2px solid #fef7e5;
&:hover {
background-color: #fef7e5;
}
`;

const RedFilterButton = styled(PinkFilterButton)`
background-color: ${SctwColors.Red.Redward};
border: 2px solid #ffacab; // Light Redward
&:hover {
background-color: ${Colors2023.BLUE.STANDARD};
background-color: #ffacab; // Light Redward
}
`;
35 changes: 23 additions & 12 deletions apps/dashboard/components/sponsor-portal/hacker-profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Attendee } from '../../common/mock-sponsor';
import { useEffect, useState } from 'react';
import { useHibiscusSupabase } from '@hibiscus/hibiscus-supabase-context';
import { SponsorServiceAPI } from '../../common/api';
import { Heading, BodyText, Colors as SctwColors } from '@hacksc/sctw-ui-kit';

interface Props {
hacker: Attendee;
Expand Down Expand Up @@ -66,13 +67,15 @@ export function HackerProfile({ hacker, companyId, noteOnClick }: Props) {
justifyContent: 'space-between',
}}
>
<BoldText style={{ fontSize: '30px' }}>{hacker.full_name}</BoldText>
<SctwSubheading style={{ fontSize: '30px' }}>
{hacker.full_name}
</SctwSubheading>
</div>
<Text style={{ fontSize: '15px' }}>School: {hacker.school}</Text>
<Text style={{ fontSize: '15px' }}>Major: {hacker.major}</Text>
<Text style={{ fontSize: '15px' }}>
<BodyText style={{ fontSize: '15px' }}>School: {hacker.school}</BodyText>
<BodyText style={{ fontSize: '15px' }}>Major: {hacker.major}</BodyText>
<BodyText style={{ fontSize: '15px' }}>
Grad Year: {hacker.graduation_year}
</Text>
</BodyText>
<div
style={{
width: '100%',
Expand All @@ -81,13 +84,15 @@ export function HackerProfile({ hacker, companyId, noteOnClick }: Props) {
justifyContent: 'space-between',
}}
>
<TitleText style={{ marginTop: '1rem' }}>QUICK NOTES</TitleText>
<SctwSubheading style={{ marginTop: '1rem' }}>
QUICK NOTES
</SctwSubheading>
<StyledButton style={{ marginTop: '0.5rem' }} onClick={noteOnClick}>
<Image width="30" height="30" src={'/note.svg'} alt="note-button" />
</StyledButton>
</div>
<NoteContainer>
<Text>{quickNote !== '' ? quickNote : 'No note found'}</Text>
<BodyText>{quickNote !== '' ? quickNote : 'No note found'}</BodyText>
</NoteContainer>
<div
style={{
Expand All @@ -97,7 +102,7 @@ export function HackerProfile({ hacker, companyId, noteOnClick }: Props) {
marginTop: '2rem',
}}
>
<TitleText>RESUME</TitleText>
<SctwSubheading>RESUME</SctwSubheading>
<div
style={{
display: 'flex',
Expand Down Expand Up @@ -125,7 +130,7 @@ export function HackerProfile({ hacker, companyId, noteOnClick }: Props) {
<Text>No resume found</Text>
)}
</NoteContainer>

{/*
<div
style={{
width: '100%',
Expand All @@ -147,6 +152,7 @@ export function HackerProfile({ hacker, companyId, noteOnClick }: Props) {
)}
</NoteContainer>
</div>
*/}
</Container>
);
}
Expand All @@ -172,15 +178,15 @@ const NoteContainer = styled.div`
justify-content: center;
padding: 10px;
margin-top: 0.5rem;
background-color: ${Colors2023.GRAY.MEDIUM};
background-color: ${SctwColors.Yellow.ArthurSweater};
border-radius: 10px;
border: 3px solid ${Colors2023.GRAY.SHLIGHT};
border: 3px solid ${SctwColors.Yellow.BabyFood};
`;

const StyledButton = styled.button`
display: flex;
cursor: pointer;
background-color: ${Colors2023.GRAY.STANDARD};
background-color: rgba(0, 0, 0, 0);
z-index: 10;
:hover {
Expand All @@ -191,3 +197,8 @@ const StyledButton = styled.button`
opacity: 0.8;
}
`;

const SctwSubheading = styled(Heading)`
font-size: 25px;
font-weight: 500;
`;
29 changes: 23 additions & 6 deletions apps/dashboard/components/sponsor-portal/hacker-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Colors2023 } from '@hibiscus/styles';
import Image from 'next/image';
import { Attendee } from '../../common/mock-sponsor';
import { useState } from 'react';
import { Colors as SctwColors } from '@hacksc/sctw-ui-kit';

interface Props {
user: Attendee;
Expand All @@ -14,6 +15,7 @@ interface Props {
showSaveButton?: boolean;
onNoteClick?;
onSaveClick?;
circleColor?: string;
}

export function HackerTab({
Expand All @@ -25,6 +27,7 @@ export function HackerTab({
showSaveButton,
onNoteClick,
onSaveClick,
circleColor,
}: Props) {
const [isSaved, setSave] = useState(user?.saved);

Expand All @@ -38,7 +41,7 @@ export function HackerTab({
justifyContent: 'flex-start',
}}
>
<Circle />
<Circle style={{ backgroundColor: circleColor }} />
<Text style={{ paddingLeft: '20px', fontSize: '20px' }}>
{user.full_name}
</Text>
Expand Down Expand Up @@ -88,11 +91,16 @@ export function HackerTab({
<Image
width="35"
height="35"
src={'/save-green.svg'}
src={'/save-fill-alt.svg'}
alt="save.svg"
/>
) : (
<Image width="35" height="35" src={'/save.svg'} alt="save.svg" />
<Image
width="35"
height="35"
src={'/save-alt.svg'}
alt="save.svg"
/>
)}
</StyledButton>
)}
Expand All @@ -115,14 +123,13 @@ const Circle = styled.div`
width: 12px;
height: 12px;
border-radius: 50px;
background-color: ${Colors2023.GREEN.LIGHT};
box-shadow: 0px 0px 10px rgba(118, 211, 239, 0.5);
background-color: ${SctwColors.Yellow.BabyFood}; // Default Color
`;

const StyledButton = styled.button`
display: flex;
cursor: pointer;
background-color: ${Colors2023.GRAY.STANDARD};
background-color: rgba(0, 0, 0, 0);
z-index: 10;
:hover {
Expand All @@ -133,3 +140,13 @@ const StyledButton = styled.button`
opacity: 0.8;
}
`;

const SaveIcon = (props) => (
<svg
width="35px"
height="35px"
xmlns="./save.svg"
fill={props.fill}
stroke={props.stroke}
></svg>
);
Loading

0 comments on commit 18fdfea

Please sign in to comment.