msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[resumes][feat] use primary buttons (#441)

Browse Source
pull/443/head
Keane Chan 2 years ago committed by GitHub
parent 635039f118
commit 01b207e52f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 111 additions and 123 deletions
Show Stats Download Patch File Download Diff File

104
apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
Unescape View File

@ -48,64 +48,64 @@ export default function ResumeCommentsList({
}
};
if (commentsQuery.isLoading) {
return (
<div className="col-span-10 pt-4">
<Spinner display="block" size="lg" />
</div>
);
}
return (
<div className="space-y-3">
{commentsQuery.isLoading ? (
<div className="col-span-10 pt-4">
<Spinner display="block" size="lg" />
</div>
) : (
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16">
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => {
return (comment.section as string) === value;
})
: [];
const commentCount = comments.length;
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16">
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => {
return (comment.section as string) === value;
})
: [];
const commentCount = comments.length;
return (
<div key={value} className="space-y-4 pr-4">
{/* CommentHeader Section */}
<div className="text-primary-800 flex items-center space-x-2">
<hr className="flex-grow border-slate-800" />
{renderIcon(value)}
return (
<div key={value} className="space-y-4 pr-4">
{/* CommentHeader Section */}
<div className="text-primary-800 flex items-center space-x-2">
<hr className="flex-grow border-slate-800" />
{renderIcon(value)}
<span className="w-fit text-lg font-medium">{label}</span>
<hr className="flex-grow border-slate-800" />
</div>
<span className="w-fit text-lg font-medium">{label}</span>
<hr className="flex-grow border-slate-800" />
</div>
{/* Comment Section */}
<div
className={clsx(
'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
commentCount ? 'border-slate-300' : 'border-slate-300',
)}>
{commentCount > 0 ? (
comments.map((comment) => {
return (
<ResumeCommentListItem
key={comment.id}
comment={comment}
userId={sessionData?.user?.id}
/>
);
})
) : (
<div className="flex flex-row items-center text-sm">
<ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
{/* Comment Section */}
<div
className={clsx(
'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
commentCount ? 'border-slate-300' : 'border-slate-300',
)}>
{commentCount > 0 ? (
comments.map((comment) => {
return (
<ResumeCommentListItem
key={comment.id}
comment={comment}
userId={sessionData?.user?.id}
/>
);
})
) : (
<div className="flex flex-row items-center text-sm">
<ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
<div className="text-slate-500">
There are no comments for this section yet!
</div>
</div>
)}
<div className="text-slate-500">
There are no comments for this section yet!
</div>
</div>
</div>
);
})}
</div>
)}
)}
</div>
</div>
);
})}
</div>
);
}

55
apps/portal/src/pages/resumes/[resumeId].tsx
Unescape View File

@ -3,7 +3,7 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import Error from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { signIn, useSession } from 'next-auth/react';
import { useSession } from 'next-auth/react';
import { useState } from 'react';
import {
AcademicCapIcon,
@ -142,24 +142,21 @@ export default function ResumeReviewPage() {
const renderReviewButton = () => {
if (session === null) {
return (
<div className=" flex h-10 justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-[400] hover:cursor-pointer hover:bg-slate-50">
<a
href="/api/auth/signin"
onClick={(event) => {
event.preventDefault();
signIn();
}}>
Sign in to join discussion
</a>
</div>
<Button
className="h-10 shadow-md"
display="block"
href="/api/auth/signin"
label="Sign in to join discussion"
variant="primary"
/>
);
}
return (
<Button
className="h-10 py-2 shadow-md"
className="h-10 shadow-md"
display="block"
label="Add your review"
variant="tertiary"
variant="primary"
onClick={() => setShowCommentsForm(true)}
/>
);
@ -209,14 +206,15 @@ export default function ResumeReviewPage() {
</h1>
<div className="flex gap-3 xl:pr-4">
{userIsOwner && (
<button
className="h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center shadow-md hover:bg-slate-50"
type="button"
onClick={onEditButtonClick}>
<PencilSquareIcon className="text-primary-600 h-6 w-6" />
</button>
<Button
addonPosition="start"
className="h-10 shadow-md"
icon={PencilSquareIcon}
label="Edit"
variant="tertiary"
onClick={onEditButtonClick}
/>
)}
<button
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 disabled:hover:bg-white"
disabled={starMutation.isLoading || unstarMutation.isLoading}
@ -239,13 +237,12 @@ export default function ResumeReviewPage() {
/>
)}
</div>
Star
{detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
</span>
<span className="relative -ml-px inline-flex">
{detailsQuery.data?._count.stars}
</span>
</button>
<div className="hidden xl:block">{renderReviewButton()}</div>
</div>
</div>
@ -326,21 +323,17 @@ export default function ResumeReviewPage() {
<ResumePdf url={detailsQuery.data.url} />
</div>
<div className="grow">
<div className="relative p-2 xl:hidden">
<div
aria-hidden="true"
className="absolute inset-0 flex items-center">
<div className="w-full border-t border-slate-300" />
</div>
<div className="relative flex justify-center">
<div className="mb-6 space-y-4 xl:hidden">
{renderReviewButton()}
<div className="flex items-center space-x-2">
<hr className="flex-grow border-slate-300" />
<span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
Reviews
</span>
<hr className="flex-grow border-slate-300" />
</div>
</div>
<div className="mb-4 xl:hidden">{renderReviewButton()}</div>
{showCommentsForm ? (
<ResumeCommentsForm
resumeId={resumeId as string}

75
apps/portal/src/pages/resumes/browse.tsx
Unescape View File

@ -10,6 +10,7 @@ import {
XMarkIcon,
} from '@heroicons/react/24/outline';
import {
Button,
CheckboxInput,
CheckboxList,
DropdownMenu,
@ -540,16 +541,14 @@ export default function ResumeHomePage() {
onChange={onTabChange}
/>
</div>
<div>
<button
className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden"
type="button"
onClick={onSubmitResume}>
Submit Resume
</button>
</div>
<Button
className="lg:hidden"
label="Submit Resume"
variant="primary"
onClick={onSubmitResume}
/>
</div>
<div className="flex flex-wrap items-center justify-start gap-8">
<div className="flex flex-wrap items-center justify-start gap-6">
<div className="w-64">
<TextInput
isLabelHidden={true}
@ -562,37 +561,33 @@ export default function ResumeHomePage() {
onChange={setSearchValue}
/>
</div>
<div>
<DropdownMenu
align="end"
label={
SORT_OPTIONS.find(({ value }) => value === sortOrder)
?.label
}>
{SORT_OPTIONS.map(({ label, value }) => (
<DropdownMenu.Item
key={value}
isSelected={sortOrder === value}
label={label}
onClick={() => setSortOrder(value)}></DropdownMenu.Item>
))}
</DropdownMenu>
</div>
<button
className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
type="button"
onClick={() => setMobileFiltersOpen(true)}>
<span className="sr-only">Filters</span>
<FunnelIcon aria-hidden="true" className="h-6 w-6" />
</button>
<div>
<button
className="bg-primary-500 hidden w-36 rounded-md py-2 px-3 text-sm font-medium text-white lg:block"
type="button"
onClick={onSubmitResume}>
Submit Resume
</button>
</div>
<Button
className="lg:hidden"
icon={FunnelIcon}
isLabelHidden={true}
label="Filters"
variant="tertiary"
onClick={() => setMobileFiltersOpen(true)}
/>
<DropdownMenu
align="end"
label={
SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
}>
{SORT_OPTIONS.map(({ label, value }) => (
<DropdownMenu.Item
key={value}
isSelected={sortOrder === value}
label={label}
onClick={() => setSortOrder(value)}></DropdownMenu.Item>
))}
</DropdownMenu>
<Button
className="hidden lg:block"
label="Submit Resume"
variant="primary"
onClick={onSubmitResume}
/>
</div>
</div>
{isFetchingResumes ? (

Write Preview
Loading…
Cancel
Save