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

[portal] standardize colors

Browse Source
pull/421/head
Yangshun Tay 2 years ago
parent 82f2857667
commit a4e63b8a41
38 changed files with 151 additions and 151 deletions
Show Stats Download Patch File Download Diff File

8
apps/portal/src/components/global/AppShell.tsx
Unescape View File

@ -85,8 +85,8 @@ function ProfileJewel() {
{({ active }) => ( {({ active }) => (
<Link <Link
className={clsx( className={clsx(
active ? 'bg-gray-100' : '', active ? 'bg-slate-100' : '',
'block px-4 py-2 text-sm text-gray-700', 'block px-4 py-2 text-sm text-slate-700',
)} )}
href={item.href} href={item.href}
onClick={item.onClick}> onClick={item.onClick}>
@ -178,9 +178,9 @@ export default function AppShell({ children }: Props) {
{/* Content area */} {/* Content area */}
<div className="flex h-screen flex-1 flex-col overflow-hidden"> <div className="flex h-screen flex-1 flex-col overflow-hidden">
<header className="w-full"> <header className="w-full">
<div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white shadow-sm"> <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
<button <button
className="focus:ring-primary-500 border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden" className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
type="button" type="button"
onClick={() => setMobileMenuOpen(true)}> onClick={() => setMobileMenuOpen(true)}>
<span className="sr-only">Open sidebar</span> <span className="sr-only">Open sidebar</span>

2
apps/portal/src/components/global/MobileNavigation.tsx
Unescape View File

@ -34,7 +34,7 @@ export default function MobileNavigation({
leave="transition-opacity ease-linear duration-300" leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0"> leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" /> <div className="fixed inset-0 bg-slate-600 bg-opacity-75" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-40 flex"> <div className="fixed inset-0 z-40 flex">
<Transition.Child <Transition.Child

6
apps/portal/src/components/offers/Breadcrumb.tsx
Unescape View File

@ -9,12 +9,12 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
{stepLabels.map((label, index) => ( {stepLabels.map((label, index) => (
<div key={label} className="flex space-x-1"> <div key={label} className="flex space-x-1">
{index === currentStep ? ( {index === currentStep ? (
<p className="text-sm text-purple-700">{label}</p> <p className="text-primary-700 text-sm">{label}</p>
) : ( ) : (
<p className="text-sm text-gray-400">{label}</p> <p className="text-sm text-slate-400">{label}</p>
)} )}
{index !== stepLabels.length - 1 && ( {index !== stepLabels.length - 1 && (
<p className="text-sm text-gray-400">{'>'}</p> <p className="text-sm text-slate-400">{'>'}</p>
)} )}
</div> </div>
))} ))}

4
apps/portal/src/components/offers/OffersTitle.tsx
Unescape View File

@ -2,11 +2,11 @@ export default function OffersTitle() {
return ( return (
<> <>
<div className="flex items-end justify-center"> <div className="flex items-end justify-center">
<h1 className="mt-16 text-center text-4xl font-bold text-indigo-600"> <h1 className="text-primary-600 mt-16 text-center text-4xl font-bold">
Tech Handbook Offers Repo Tech Handbook Offers Repo
</h1> </h1>
</div> </div>
<div className="mt-2 text-center text-2xl font-normal text-indigo-500"> <div className="text-primary-500 mt-2 text-center text-2xl font-normal">
Reveal profile stories behind offers Reveal profile stories behind offers
</div> </div>
<div className="items-top flex justify-center text-xl font-normal"> <div className="items-top flex justify-center text-xl font-normal">

8
apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
Unescape View File

@ -36,11 +36,11 @@ export default function OffersProfileSave({
return ( return (
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<div className="max-w-2xl text-center"> <div className="max-w-2xl text-center">
<h5 className="mb-6 text-4xl font-bold text-gray-900"> <h5 className="mb-6 text-4xl font-bold text-slate-900">
Save for future edits Save for future edits
</h5> </h5>
<p className="mb-2 text-gray-900">We value your privacy.</p> <p className="mb-2 text-slate-900">We value your privacy.</p>
<p className="mb-5 text-gray-900"> <p className="mb-5 text-slate-900">
To keep you offer profile strictly anonymous, only people who have the To keep you offer profile strictly anonymous, only people who have the
link below can edit it. link below can edit it.
</p> </p>
@ -67,7 +67,7 @@ export default function OffersProfileSave({
}} }}
/> />
</div> </div>
{/* <p className="mb-5 text-gray-900"> {/* <p className="mb-5 text-slate-900">
If you do not want to keep the edit link, you can opt to save this If you do not want to keep the edit link, you can opt to save this
profile under your user account. It will still only be editable by profile under your user account. It will still only be editable by
you. you.

16
apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
Unescape View File

@ -26,11 +26,11 @@ function YoeSection() {
const backgroundFields = formState.errors.background; const backgroundFields = formState.errors.background;
return ( return (
<> <>
<h6 className="mb-2 text-left text-xl font-medium text-gray-400"> <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
Years of Experience (YOE) Years of Experience (YOE)
</h6> </h6>
<div className="mb-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-2 grid grid-cols-3 space-x-3"> <div className="mb-2 grid grid-cols-3 space-x-3">
<FormTextInput <FormTextInput
errorMessage={backgroundFields?.totalYoe?.message} errorMessage={backgroundFields?.totalYoe?.message}
@ -245,10 +245,10 @@ function CurrentJobSection() {
return ( return (
<> <>
<h6 className="mb-2 text-left text-xl font-medium text-gray-400"> <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
Current / Previous Job Current / Previous Job
</h6> </h6>
<div className="mb-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5"> <div className="mb-5">
<FormRadioList <FormRadioList
defaultValue={JobType.FULLTIME} defaultValue={JobType.FULLTIME}
@ -282,10 +282,10 @@ function EducationSection() {
const { register } = useFormContext(); const { register } = useFormContext();
return ( return (
<> <>
<h6 className="mb-2 text-left text-xl font-medium text-gray-400"> <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
Education Education
</h6> </h6>
<div className="mb-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
@ -319,10 +319,10 @@ function EducationSection() {
export default function BackgroundForm() { export default function BackgroundForm() {
return ( return (
<div> <div>
<h5 className="mb-2 text-center text-4xl font-bold text-gray-900"> <h5 className="mb-2 text-center text-4xl font-bold text-slate-900">
Help us better gauge your offers Help us better gauge your offers
</h5> </h5>
<h6 className="text-md mx-10 mb-8 text-center font-light text-gray-600"> <h6 className="text-md mx-10 mb-8 text-center font-light text-slate-600">
This section is mostly optional, but your background information helps This section is mostly optional, but your background information helps
us benchmark your offers. us benchmark your offers.
</h6> </h6>

6
apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
Unescape View File

@ -62,7 +62,7 @@ function FullTimeOfferDetailsForm({
}, [watchCurrency, index, setValue]); }, [watchCurrency, index, setValue]);
return ( return (
<div className="my-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
@ -289,7 +289,7 @@ function InternshipOfferDetailsForm({
const offerFields = formState.errors.offers?.[index]; const offerFields = formState.errors.offers?.[index];
return ( return (
<div className="my-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
@ -503,7 +503,7 @@ export default function OfferDetailsForm({
return ( return (
<div className="mb-5"> <div className="mb-5">
<h5 className="mb-8 text-center text-4xl font-bold text-gray-900"> <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
Fill in your offer details Fill in your offer details
</h5> </h5>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">

2
apps/portal/src/components/offers/profile/EducationCard.tsx
Unescape View File

@ -30,7 +30,7 @@ export default function EducationCard({
)} )}
</div> </div>
{(startDate || endDate) && ( {(startDate || endDate) && (
<div className="font-light text-gray-400"> <div className="font-light text-slate-400">
<p>{`${startDate || 'N/A'} - ${endDate || 'N/A'}`}</p> <p>{`${startDate || 'N/A'} - ${endDate || 'N/A'}`}</p>
</div> </div>
)} )}

6
apps/portal/src/components/offers/profile/OfferCard.tsx
Unescape View File

@ -44,12 +44,12 @@ export default function OfferCard({
</div> </div>
</div> </div>
{!duration && receivedMonth && ( {!duration && receivedMonth && (
<div className="font-light text-gray-400"> <div className="font-light text-slate-400">
<p>{receivedMonth}</p> <p>{receivedMonth}</p>
</div> </div>
)} )}
{duration && ( {duration && (
<div className="font-light text-gray-400"> <div className="font-light text-slate-400">
<p>{`${duration} months`}</p> <p>{`${duration} months`}</p>
</div> </div>
)} )}
@ -83,7 +83,7 @@ export default function OfferCard({
</div> </div>
))} ))}
{totalCompensation && ( {totalCompensation && (
<div className="ml-6 flex flex-row font-light text-gray-400"> <div className="ml-6 flex flex-row font-light text-slate-400">
<p> <p>
Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '} Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
{bonus} {bonus}

4
apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
Unescape View File

@ -8,9 +8,9 @@ export default function ProfilePhotoHolder({
const sizeMap = { lg: '16', sm: '12' }; const sizeMap = { lg: '16', sm: '12' };
return ( return (
<span <span
className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-gray-100`}> className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}>
<svg <svg
className="h-full w-full text-gray-300" className="h-full w-full text-slate-300"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /> <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />

4
apps/portal/src/components/offers/profile/comments/CommentCard.tsx
Unescape View File

@ -100,12 +100,12 @@ export default function CommentCard({
</div> </div>
<div className="mt-2 mb-2 flex flex-row ">{message}</div> <div className="mt-2 mb-2 flex flex-row ">{message}</div>
<div className="flex flex-row items-center justify-start space-x-4 "> <div className="flex flex-row items-center justify-start space-x-4 ">
<div className="flex flex-col text-sm font-light text-gray-400">{`${timeSinceNow( <div className="flex flex-col text-sm font-light text-slate-400">{`${timeSinceNow(
createdAt, createdAt,
)} ago`}</div> )} ago`}</div>
{replyLength > 0 && ( {replyLength > 0 && (
<div <div
className="flex cursor-pointer flex-col text-sm text-purple-600 hover:underline" className="text-primary-600 flex cursor-pointer flex-col text-sm hover:underline"
onClick={handleExpanded}> onClick={handleExpanded}>
{isExpanded ? `Hide replies` : `View replies (${replyLength})`} {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
</div> </div>

6
apps/portal/src/components/offers/table/OffersRow.tsx
Unescape View File

@ -13,9 +13,9 @@ export default function OfferTableRow({
return ( return (
<tr <tr
key={id} key={id}
className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600"> className="border-b bg-white hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-600">
<th <th
className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white" className="whitespace-nowrap py-4 px-6 font-medium text-slate-900 dark:text-white"
scope="row"> scope="row">
{company.name} {company.name}
</th> </th>
@ -25,7 +25,7 @@ export default function OfferTableRow({
<td className="py-4 px-6">{formatDate(monthYearReceived)}</td> <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
<td className="space-x-4 py-4 px-6"> <td className="space-x-4 py-4 px-6">
<Link <Link
className="font-medium text-indigo-600 hover:underline dark:text-indigo-500" className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
href={`/offers/profile/${profileId}`}> href={`/offers/profile/${profileId}`}>
View Profile View Profile
</Link> </Link>

4
apps/portal/src/components/offers/table/OffersTable.tsx
Unescape View File

@ -109,7 +109,7 @@ export default function OffersTable({
function renderHeader() { function renderHeader() {
return ( return (
<thead className="bg-gray-50 text-xs uppercase text-gray-700"> <thead className="bg-slate-50 text-xs uppercase text-slate-700">
<tr> <tr>
{[ {[
'Company', 'Company',
@ -145,7 +145,7 @@ export default function OffersTable({
<Spinner display="block" size="lg" /> <Spinner display="block" size="lg" />
</div> </div>
) : ( ) : (
<table className="w-full text-left text-sm text-gray-500"> <table className="w-full text-left text-sm text-slate-500">
{renderHeader()} {renderHeader()}
<tbody> <tbody>
{offers.map((offer) => ( {offers.map((offer) => (

6
apps/portal/src/components/offers/table/OffersTablePagination.tsx
Unescape View File

@ -19,13 +19,13 @@ export default function OffersTablePagination({
<nav <nav
aria-label="Table navigation" aria-label="Table navigation"
className="flex items-center justify-between p-4"> className="flex items-center justify-between p-4">
<span className="text-sm font-normal text-gray-500"> <span className="text-sm font-normal text-slate-500">
Showing Showing
<span className="font-semibold text-gray-900"> <span className="font-semibold text-slate-900">
{` ${startNumber} - ${endNumber} `} {` ${startNumber} - ${endNumber} `}
</span> </span>
{`of `} {`of `}
<span className="font-semibold text-gray-900"> <span className="font-semibold text-slate-900">
{pagination.totalItems} {pagination.totalItems}
</span> </span>
</span> </span>

2
apps/portal/src/components/questions/ContributeQuestionCard.tsx
Unescape View File

@ -30,7 +30,7 @@ export default function ContributeQuestionCard({
return ( return (
<div> <div>
<button <button
className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-gray-100" className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-slate-100"
type="button" type="button"
onClick={handleOpenContribute}> onClick={handleOpenContribute}>
<TextInput <TextInput

4
apps/portal/src/components/questions/ContributeQuestionDialog.tsx
Unescape View File

@ -48,7 +48,7 @@ export default function ContributeQuestionDialog({
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0"> leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@ -66,7 +66,7 @@ export default function ContributeQuestionDialog({
<div className="mt-3 w-full sm:mt-0 sm:text-left"> <div className="mt-3 w-full sm:mt-0 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-6 text-gray-900"> className="text-lg font-medium leading-6 text-slate-900">
Contribute question Contribute question
</Dialog.Title> </Dialog.Title>
<div className="w-full"> <div className="w-full">

2
apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
Unescape View File

@ -212,7 +212,7 @@ export default function BaseQuestionCard({
className={`group flex gap-4 rounded-md border border-slate-300 bg-white p-4 ${hoverClass}`}> className={`group flex gap-4 rounded-md border border-slate-300 bg-white p-4 ${hoverClass}`}>
{cardContent} {cardContent}
{showDeleteButton && ( {showDeleteButton && (
<div className="invisible self-center fill-red-700 group-hover:visible"> <div className="fill-danger-700 invisible self-center group-hover:visible">
<Button <Button
icon={TrashIcon} icon={TrashIcon}
isLabelHidden={true} isLabelHidden={true}

4
apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
Unescape View File

@ -186,13 +186,13 @@ export default function ContributeQuestionForm({
</div> </div>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
<button <button
className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" className="focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
type="button" type="button"
onClick={onDiscard}> onClick={onDiscard}>
Discard Discard
</button> </button>
<Button <Button
className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-gray-400 sm:ml-3 sm:w-auto sm:text-sm" className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-slate-400 sm:ml-3 sm:w-auto sm:text-sm"
disabled={!canSubmit} disabled={!canSubmit}
label="Contribute" label="Contribute"
type="submit" type="submit"

4
apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
Unescape View File

@ -14,8 +14,8 @@ export default function ResumeFilterPill({
return ( return (
<button <button
className={clsx( className={clsx(
'rounded-xl border border-indigo-500 border-transparent px-2 py-1 text-xs font-medium focus:bg-indigo-500 focus:text-white', 'border-primary-500 focus:bg-primary-500 rounded-xl border border-transparent px-2 py-1 text-xs font-medium focus:text-white',
isSelected ? 'bg-indigo-500 text-white' : 'bg-white text-indigo-500', isSelected ? 'bg-primary-500 text-white' : 'text-primary-500 bg-white',
)} )}
type="button" type="button"
onClick={onClick}> onClick={onClick}>

2
apps/portal/src/components/resumes/browse/ResumeListItem.tsx
Unescape View File

@ -22,7 +22,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
<div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100"> <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
<div className="col-span-4"> <div className="col-span-4">
{resumeInfo.title} {resumeInfo.title}
<div className="mt-2 flex items-center justify-start text-xs text-indigo-500"> <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
<div className="flex"> <div className="flex">
<BriefcaseIcon <BriefcaseIcon
aria-hidden="true" aria-hidden="true"

14
apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
Unescape View File

@ -30,7 +30,7 @@ export default function ResumeCommentListItem({
className={clsx( className={clsx(
'min-w-fit rounded-md bg-white ', 'min-w-fit rounded-md bg-white ',
!comment.parentId && !comment.parentId &&
'w-11/12 border-2 border-indigo-300 p-2 drop-shadow-md', 'border-primary-300 w-11/12 border-2 p-2 drop-shadow-md',
)}> )}>
<div className="flex flex-row space-x-2 p-1 align-top"> <div className="flex flex-row space-x-2 p-1 align-top">
{/* Image Icon */} {/* Image Icon */}
@ -64,14 +64,14 @@ export default function ResumeCommentListItem({
{comment.user.name ?? 'Reviewer ABC'} {comment.user.name ?? 'Reviewer ABC'}
</p> </p>
<p className="text-xs font-medium text-indigo-800"> <p className="text-primary-800 text-xs font-medium">
{isCommentOwner ? '(Me)' : ''} {isCommentOwner ? '(Me)' : ''}
</p> </p>
<ResumeUserBadges userId={comment.user.userId} /> <ResumeUserBadges userId={comment.user.userId} />
</div> </div>
<div className="px-2 text-xs text-gray-600"> <div className="px-2 text-xs text-slate-600">
{comment.createdAt.toLocaleString('en-US', { {comment.createdAt.toLocaleString('en-US', {
dateStyle: 'medium', dateStyle: 'medium',
timeStyle: 'short', timeStyle: 'short',
@ -101,7 +101,7 @@ export default function ResumeCommentListItem({
<> <>
{isCommentOwner && ( {isCommentOwner && (
<button <button
className="px-1 text-xs text-indigo-800 hover:text-indigo-400" className="text-primary-800 hover:text-primary-400 px-1 text-xs"
type="button" type="button"
onClick={() => setIsEditingComment(true)}> onClick={() => setIsEditingComment(true)}>
Edit Edit
@ -110,7 +110,7 @@ export default function ResumeCommentListItem({
{!comment.parentId && ( {!comment.parentId && (
<button <button
className="px-1 text-xs text-indigo-800 hover:text-indigo-400" className="text-primary-800 hover:text-primary-400 px-1 text-xs"
type="button" type="button"
onClick={() => setIsReplyingComment(true)}> onClick={() => setIsReplyingComment(true)}>
Reply Reply
@ -134,7 +134,7 @@ export default function ResumeCommentListItem({
{comment.children.length > 0 && ( {comment.children.length > 0 && (
<div className="min-w-fit space-y-1 pt-2"> <div className="min-w-fit space-y-1 pt-2">
<button <button
className="flex items-center space-x-1 rounded-md text-xs font-medium text-indigo-800 hover:text-indigo-300" className="text-primary-800 hover:text-primary-300 flex items-center space-x-1 rounded-md text-xs font-medium"
type="button" type="button"
onClick={() => setShowReplies(!showReplies)}> onClick={() => setShowReplies(!showReplies)}>
<ChevronUpIcon <ChevronUpIcon
@ -149,7 +149,7 @@ export default function ResumeCommentListItem({
{showReplies && ( {showReplies && (
<div className="flex flex-row"> <div className="flex flex-row">
<div className="relative flex flex-col px-2 py-2"> <div className="relative flex flex-col px-2 py-2">
<div className="flex-grow border-r border-gray-300" /> <div className="flex-grow border-r border-slate-300" />
</div> </div>
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">

6
apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
Unescape View File

@ -84,13 +84,13 @@ export default function ResumeCommentsForm({
return ( return (
<div className="h-[calc(100vh-13rem)] overflow-y-auto"> <div className="h-[calc(100vh-13rem)] overflow-y-auto">
<h2 className="text-xl font-semibold text-gray-800">Add your review</h2> <h2 className="text-xl font-semibold text-slate-800">Add your review</h2>
<p className="text-gray-800"> <p className="text-slate-800">
Please fill in at least one section to submit your review Please fill in at least one section to submit your review
</p> </p>
<form <form
className="w-full space-y-8 divide-y divide-gray-200" className="w-full space-y-8 divide-y divide-slate-200"
onSubmit={handleSubmit(onSubmit)}> onSubmit={handleSubmit(onSubmit)}>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<TextArea <TextArea

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

@ -85,7 +85,7 @@ export default function ResumeCommentsList({
return ( return (
<div key={value} className="mb-4 space-y-4"> <div key={value} className="mb-4 space-y-4">
<div className="flex flex-row items-center space-x-2 text-indigo-800"> <div className="text-primary-800 flex flex-row items-center space-x-2">
{renderIcon(value)} {renderIcon(value)}
<div className="w-fit text-lg font-medium">{label}</div> <div className="w-fit text-lg font-medium">{label}</div>

4
apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
Unescape View File

@ -16,10 +16,10 @@ export default function ResumeCommentsSection({
<> <>
<div className="relative p-2 lg:hidden"> <div className="relative p-2 lg:hidden">
<div aria-hidden="true" className="absolute inset-0 flex items-center"> <div aria-hidden="true" className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" /> <div className="w-full border-t border-slate-300" />
</div> </div>
<div className="relative flex justify-center"> <div className="relative flex justify-center">
<span className="bg-gray-50 px-3 text-lg font-medium text-gray-900"> <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
Reviews Reviews
</span> </span>
</div> </div>

12
apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
Unescape View File

@ -86,12 +86,12 @@ export default function ResumeCommentVoteButtons({
'h-4 w-4', 'h-4 w-4',
commentVotesQuery.data?.userVote?.value === Vote.UPVOTE || commentVotesQuery.data?.userVote?.value === Vote.UPVOTE ||
upvoteAnimation upvoteAnimation
? 'fill-indigo-500' ? 'fill-primary-500'
: 'fill-gray-400', : 'fill-slate-400',
userId && userId &&
!downvoteAnimation && !downvoteAnimation &&
!upvoteAnimation && !upvoteAnimation &&
'hover:fill-indigo-500', 'hover:fill-primary-500',
upvoteAnimation && 'animate-[bounce_0.5s_infinite] cursor-default', upvoteAnimation && 'animate-[bounce_0.5s_infinite] cursor-default',
)} )}
/> />
@ -115,12 +115,12 @@ export default function ResumeCommentVoteButtons({
'h-4 w-4', 'h-4 w-4',
commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE || commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
downvoteAnimation downvoteAnimation
? 'fill-red-500' ? 'fill-danger-500'
: 'fill-gray-400', : 'fill-slate-400',
userId && userId &&
!downvoteAnimation && !downvoteAnimation &&
!upvoteAnimation && !upvoteAnimation &&
'hover:fill-red-500', 'hover:fill-danger-500',
downvoteAnimation && downvoteAnimation &&
'animate-[bounce_0.5s_infinite] cursor-default', 'animate-[bounce_0.5s_infinite] cursor-default',
)} )}

6
apps/portal/src/components/resumes/landing/CallToAction.tsx
Unescape View File

@ -7,16 +7,16 @@ export function CallToAction() {
<section className="relative overflow-hidden py-32" id="get-started-today"> <section className="relative overflow-hidden py-32" id="get-started-today">
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-lg text-center"> <div className="mx-auto max-w-lg text-center">
<h2 className="font-display text-3xl tracking-tight text-gray-900 sm:text-4xl"> <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
Resume review can start right now. Resume review can start right now.
</h2> </h2>
<p className="mt-4 text-lg tracking-tight text-gray-600"> <p className="mt-4 text-lg tracking-tight text-slate-600">
It's free! Take charge of your resume game by learning from the top It's free! Take charge of your resume game by learning from the top
engineers in the field. engineers in the field.
</p> </p>
<Link href="/resumes/browse"> <Link href="/resumes/browse">
<button <button
className="mt-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white" className="bg-primary-500 mt-4 rounded-md py-2 px-3 text-sm font-medium text-white"
type="button"> type="button">
Start browsing now Start browsing now
</button> </button>

8
apps/portal/src/components/resumes/landing/Hero.tsx
Unescape View File

@ -7,7 +7,7 @@ export function Hero() {
<Container className="pb-36 pt-20 text-center lg:pt-32"> <Container className="pb-36 pt-20 text-center lg:pt-32">
<h1 className="font-display mx-auto max-w-4xl text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl"> <h1 className="font-display mx-auto max-w-4xl text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
Resume review{' '} Resume review{' '}
<span className="relative whitespace-nowrap text-indigo-500"> <span className="text-primary-500 relative whitespace-nowrap">
<svg <svg
aria-hidden="true" aria-hidden="true"
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70" className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
@ -26,18 +26,18 @@ export function Hero() {
<div className="mt-10 flex justify-center gap-x-4"> <div className="mt-10 flex justify-center gap-x-4">
<Link href="/resumes/browse"> <Link href="/resumes/browse">
<button <button
className="rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white" className="bg-primary-500 rounded-md py-2 px-3 text-sm font-medium text-white"
type="button"> type="button">
Start browsing now Start browsing now
</button> </button>
</Link> </Link>
<Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<button <button
className="group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:outline-indigo-600 focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600" className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
type="button"> type="button">
<svg <svg
aria-hidden="true" aria-hidden="true"
className="h-3 w-3 flex-none fill-indigo-600 group-active:fill-current"> className="fill-primary-600 h-3 w-3 flex-none group-active:fill-current">
<path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" /> <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
</svg> </svg>
<span className="ml-3">Watch video</span> <span className="ml-3">Watch video</span>

2
apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
Unescape View File

@ -49,7 +49,7 @@ export function PrimaryFeatures() {
return ( return (
<section <section
className="relative overflow-hidden bg-gradient-to-r from-indigo-400 to-indigo-700 pt-20 pb-28 sm:py-32" className="from-primary-400 to-primary-700 relative overflow-hidden bg-gradient-to-r pt-20 pb-28 sm:py-32"
id="features"> id="features">
<Container className="relative"> <Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none"> <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">

2
apps/portal/src/components/resumes/landing/Testimonials.tsx
Unescape View File

@ -94,7 +94,7 @@ function QuoteIcon(props: QuoteProps) {
export function Testimonials() { export function Testimonials() {
return ( return (
<section <section
className="bg-gradient-to-r from-indigo-700 to-indigo-400 py-20 sm:py-32" className="from-primary-700 to-primary-400 bg-gradient-to-r py-20 sm:py-32"
id="testimonials"> id="testimonials">
<Container> <Container>
<div className="mx-auto max-w-2xl md:text-center"> <div className="mx-auto max-w-2xl md:text-center">

2
apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
Unescape View File

@ -36,7 +36,7 @@ export default function ResumeExpandableText({
</span> </span>
{descriptionOverflow && ( {descriptionOverflow && (
<p <p
className="mt-1 cursor-pointer text-xs text-indigo-500 hover:text-indigo-300" className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs"
onClick={onSeeActionClicked}> onClick={onSeeActionClicked}>
{isExpanded ? 'See Less' : 'See More'} {isExpanded ? 'See Less' : 'See More'}
</p> </p>

2
apps/portal/src/pages/_document.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Head, Html, Main, NextScript } from 'next/document';
export default function Document() { export default function Document() {
return ( return (
<Html className="h-full bg-gray-50"> <Html className="h-full bg-slate-50">
<Head /> <Head />
<body className="h-full overflow-hidden"> <body className="h-full overflow-hidden">
<Main /> <Main />

2
apps/portal/src/pages/offers/index.tsx
Unescape View File

@ -12,7 +12,7 @@ export default function OffersHomePage() {
return ( return (
<main className="flex-1 overflow-y-auto"> <main className="flex-1 overflow-y-auto">
<div className="grid-rows grid h-1/2 bg-gray-100"> <div className="grid-rows grid h-1/2 bg-slate-100">
<OffersTitle /> <OffersTitle />
<div className="flex items-start justify-center"> <div className="flex items-start justify-center">
<div className="mt-4 flex items-center"> <div className="mt-4 flex items-center">

4
apps/portal/src/pages/questions/lists.tsx
Unescape View File

@ -50,7 +50,7 @@ export default function ListPage() {
{lists.map((list) => ( {lists.map((list) => (
<li <li
key={list.id} key={list.id}
className={`flex items-center hover:bg-gray-50 ${ className={`flex items-center hover:bg-slate-50 ${
selectedList === list.id ? 'bg-primary-100' : '' selectedList === list.id ? 'bg-primary-100' : ''
}`}> }`}>
<button <button
@ -83,7 +83,7 @@ export default function ListPage() {
className={`${ className={`${
active active
? 'bg-violet-500 text-white' ? 'bg-violet-500 text-white'
: 'text-gray-900' : 'text-slate-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`} } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
type="button"> type="button">
Delete Delete

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

@ -120,12 +120,12 @@ export default function ResumeReviewPage() {
</Head> </Head>
<main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16"> <main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
<div className="flex justify-between"> <div className="flex justify-between">
<h1 className="text-2xl font-semibold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"> <h1 className="text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
{detailsQuery.data.title} {detailsQuery.data.title}
</h1> </h1>
<div className="flex gap-4"> <div className="flex gap-4">
<button <button
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:hover:bg-white" 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-sm hover:bg-slate-50 disabled:hover:bg-white"
disabled={starMutation.isLoading || unstarMutation.isLoading} disabled={starMutation.isLoading || unstarMutation.isLoading}
type="button" type="button"
onClick={onStarButtonClick}> onClick={onStarButtonClick}>
@ -141,7 +141,7 @@ export default function ResumeReviewPage() {
className={clsx( className={clsx(
detailsQuery.data?.stars.length detailsQuery.data?.stars.length
? 'text-orange-400' ? 'text-orange-400'
: 'text-gray-400', : 'text-slate-400',
)} )}
/> />
)} )}
@ -154,40 +154,40 @@ export default function ResumeReviewPage() {
</button> </button>
{userIsOwner && ( {userIsOwner && (
<button <button
className="p h-10 rounded-md border border-gray-300 bg-white py-1 px-2 text-center" className="p h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center"
type="button" type="button"
onClick={onEditButtonClick}> onClick={onEditButtonClick}>
<PencilSquareIcon className="h-6 w-6 text-indigo-600 hover:text-indigo-300" /> <PencilSquareIcon className="text-primary-600 hover:text-primary-300 h-6 w-6" />
</button> </button>
)} )}
</div> </div>
</div> </div>
<div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8"> <div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
<div className="mt-2 flex items-center text-sm text-gray-500"> <div className="mt-2 flex items-center text-sm text-slate-500">
<BriefcaseIcon <BriefcaseIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/> />
{detailsQuery.data.role} {detailsQuery.data.role}
</div> </div>
<div className="flex items-center pt-2 text-sm text-gray-500"> <div className="flex items-center pt-2 text-sm text-slate-500">
<MapPinIcon <MapPinIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/> />
{detailsQuery.data.location} {detailsQuery.data.location}
</div> </div>
<div className="flex items-center pt-2 text-sm text-gray-500"> <div className="flex items-center pt-2 text-sm text-slate-500">
<AcademicCapIcon <AcademicCapIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/> />
{detailsQuery.data.experience} {detailsQuery.data.experience}
</div> </div>
<div className="flex items-center pt-2 text-sm text-gray-500"> <div className="flex items-center pt-2 text-sm text-slate-500">
<CalendarIcon <CalendarIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/> />
{`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, { {`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
addSuffix: true, addSuffix: true,
@ -195,10 +195,10 @@ export default function ResumeReviewPage() {
</div> </div>
</div> </div>
{detailsQuery.data.additionalInfo && ( {detailsQuery.data.additionalInfo && (
<div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-gray-500"> <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-slate-500">
<InformationCircleIcon <InformationCircleIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
/> />
<ResumeExpandableText <ResumeExpandableText
key={detailsQuery.data.additionalInfo} key={detailsQuery.data.additionalInfo}

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

@ -282,11 +282,11 @@ export default function ResumeHomePage() {
leaveTo="translate-x-full"> leaveTo="translate-x-full">
<Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-scroll bg-white py-4 pb-12 shadow-xl"> <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-scroll bg-white py-4 pb-12 shadow-xl">
<div className="flex items-center justify-between px-4"> <div className="flex items-center justify-between px-4">
<h2 className="text-lg font-medium text-gray-900"> <h2 className="text-lg font-medium text-slate-900">
Shortcuts Shortcuts
</h2> </h2>
<button <button
className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400" className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-slate-400"
type="button" type="button"
onClick={() => setMobileFiltersOpen(false)}> onClick={() => setMobileFiltersOpen(false)}>
<span className="sr-only">Close menu</span> <span className="sr-only">Close menu</span>
@ -294,9 +294,9 @@ export default function ResumeHomePage() {
</button> </button>
</div> </div>
<form className="mt-4 border-t border-gray-200"> <form className="mt-4 border-t border-slate-200">
<ul <ul
className="flex flex-wrap justify-start gap-4 px-4 py-3 font-medium text-gray-900" className="flex flex-wrap justify-start gap-4 px-4 py-3 font-medium text-slate-900"
role="list"> role="list">
{SHORTCUTS.map((shortcut) => ( {SHORTCUTS.map((shortcut) => (
<li key={shortcut.name}> <li key={shortcut.name}>
@ -313,12 +313,12 @@ export default function ResumeHomePage() {
<Disclosure <Disclosure
key={filter.id} key={filter.id}
as="div" as="div"
className="border-t border-gray-200 px-4 py-6"> className="border-t border-slate-200 px-4 py-6">
{({ open }) => ( {({ open }) => (
<> <>
<h3 className="-mx-2 -my-3 flow-root"> <h3 className="-mx-2 -my-3 flow-root">
<Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500"> <Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-slate-400 hover:text-slate-500">
<span className="font-medium text-gray-900"> <span className="font-medium text-slate-900">
{filter.label} {filter.label}
</span> </span>
<span className="ml-6 flex items-center"> <span className="ml-6 flex items-center">
@ -341,7 +341,7 @@ export default function ResumeHomePage() {
{filter.options.map((option) => ( {filter.options.map((option) => (
<div <div
key={option.value} key={option.value}
className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500"> className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
<CheckboxInput <CheckboxInput
label={option.label} label={option.label}
value={userFilters[filter.id].includes( value={userFilters[filter.id].includes(
@ -374,13 +374,13 @@ export default function ResumeHomePage() {
<main className="h-[calc(100vh-4rem)] flex-auto overflow-y-scroll px-8 pt-6 pb-4"> <main className="h-[calc(100vh-4rem)] flex-auto overflow-y-scroll px-8 pt-6 pb-4">
<div className="flex justify-start"> <div className="flex justify-start">
<div className="hidden w-1/6 pt-2 lg:block"> <div className="hidden w-1/6 pt-2 lg:block">
<h3 className="text-md font-medium tracking-tight text-gray-900"> <h3 className="text-md font-medium tracking-tight text-slate-900">
Shortcuts Shortcuts
</h3> </h3>
<div className="w-100 pt-4 sm:pr-0 md:pr-4"> <div className="w-100 pt-4 sm:pr-0 md:pr-4">
<form> <form>
<ul <ul
className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-gray-900" className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-slate-900"
role="list"> role="list">
{SHORTCUTS.map((shortcut) => ( {SHORTCUTS.map((shortcut) => (
<li key={shortcut.name}> <li key={shortcut.name}>
@ -392,19 +392,19 @@ export default function ResumeHomePage() {
</li> </li>
))} ))}
</ul> </ul>
<h3 className="text-md font-medium tracking-tight text-gray-900"> <h3 className="text-md font-medium tracking-tight text-slate-900">
Explore these filters Explore these filters
</h3> </h3>
{filters.map((filter) => ( {filters.map((filter) => (
<Disclosure <Disclosure
key={filter.id} key={filter.id}
as="div" as="div"
className="border-b border-gray-200 py-6"> className="border-b border-slate-200 py-6">
{({ open }) => ( {({ open }) => (
<> <>
<h3 className="-my-3 flow-root"> <h3 className="-my-3 flow-root">
<Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-gray-400 hover:text-gray-500"> <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-slate-400 hover:text-slate-500">
<span className="font-medium text-gray-900"> <span className="font-medium text-slate-900">
{filter.label} {filter.label}
</span> </span>
<span className="ml-6 flex items-center"> <span className="ml-6 flex items-center">
@ -431,7 +431,7 @@ export default function ResumeHomePage() {
{filter.options.map((option) => ( {filter.options.map((option) => (
<div <div
key={option.value} key={option.value}
className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500"> className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
<CheckboxInput <CheckboxInput
label={option.label} label={option.label}
value={userFilters[filter.id].includes( value={userFilters[filter.id].includes(
@ -483,7 +483,7 @@ export default function ResumeHomePage() {
<div> <div>
<button <button
className="ml-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white lg:hidden" className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden"
type="button" type="button"
onClick={onSubmitResume}> onClick={onSubmitResume}>
Submit Resume Submit Resume
@ -515,7 +515,7 @@ export default function ResumeHomePage() {
</DropdownMenu> </DropdownMenu>
</div> </div>
<button <button
className="-m-2 text-gray-400 hover:text-gray-500 lg:hidden" className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
type="button" type="button"
onClick={() => setMobileFiltersOpen(true)}> onClick={() => setMobileFiltersOpen(true)}>
<span className="sr-only">Filters</span> <span className="sr-only">Filters</span>
@ -524,7 +524,7 @@ export default function ResumeHomePage() {
<div> <div>
<button <button
className="hidden w-36 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white lg:block" className="bg-primary-500 hidden w-36 rounded-md py-2 px-3 text-sm font-medium text-white lg:block"
type="button" type="button"
onClick={onSubmitResume}> onClick={onSubmitResume}>
Submit Resume Submit Resume

14
apps/portal/src/pages/resumes/submit.tsx
Unescape View File

@ -318,26 +318,26 @@ export default function SubmitResumeForm({
<div <div
{...getRootProps()} {...getRootProps()}
className={clsx( className={clsx(
fileUploadError ? 'border-danger-600' : 'border-gray-300', fileUploadError ? 'border-danger-600' : 'border-slate-300',
'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 py-4', 'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
)}> )}>
<div className="space-y-1 text-center"> <div className="space-y-1 text-center">
{resumeFile == null ? ( {resumeFile == null ? (
<ArrowUpCircleIcon className="m-auto h-10 w-10 text-indigo-500" /> <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
) : ( ) : (
<p <p
className="cursor-pointer underline underline-offset-1 hover:text-indigo-600" className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
onClick={onClickDownload}> onClick={onClickDownload}>
{resumeFile.name} {resumeFile.name}
</p> </p>
)} )}
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<label <label
className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2" className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload"> htmlFor="file-upload">
<span className="font-medium">Drop file here</span> <span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span> <span className="mr-1 ml-1 font-light">or</span>
<span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400"> <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'} {resumeFile == null ? 'Select file' : 'Replace file'}
</span> </span>
<input <input
@ -352,7 +352,7 @@ export default function SubmitResumeForm({
/> />
</label> </label>
</div> </div>
<p className="text-xs text-gray-500"> <p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB PDF up to {FILE_SIZE_LIMIT_MB}MB
</p> </p>
</div> </div>

46
apps/portal/src/pages/todos/index.tsx
Unescape View File

@ -34,14 +34,14 @@ export default function TodoList() {
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8"> <div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="sm:flex sm:items-center"> <div className="sm:flex sm:items-center">
<div className="sm:flex-auto"> <div className="sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">Todos</h1> <h1 className="text-xl font-semibold text-slate-900">Todos</h1>
<p className="mt-2 text-sm text-gray-700"> <p className="mt-2 text-sm text-slate-700">
A list of all Todos added by everyone. A list of all Todos added by everyone.
</p> </p>
</div> </div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"> <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<Link <Link
className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto" className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-auto"
href="/todos/new"> href="/todos/new">
Add Todo Add Todo
</Link> </Link>
@ -54,40 +54,40 @@ export default function TodoList() {
<div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"> <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"> <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table className="min-w-full divide-y divide-gray-300"> <table className="min-w-full divide-y divide-slate-300">
<thead className="bg-gray-50"> <thead className="bg-slate-50">
<tr className="divide-x divide-gray-200"> <tr className="divide-x divide-slate-200">
<th <th
className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pl-6" className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pl-6"
scope="col"> scope="col">
Description Description
</th> </th>
<th <th
className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900" className="px-4 py-3.5 text-left text-sm font-semibold text-slate-900"
scope="col"> scope="col">
Creator Creator
</th> </th>
<th <th
className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900" className="px-4 py-3.5 text-left text-sm font-semibold text-slate-900"
scope="col"> scope="col">
Last Updated Last Updated
</th> </th>
<th <th
className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pr-6" className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pr-6"
scope="col"> scope="col">
Status Status
</th> </th>
<th <th
className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pr-6" className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pr-6"
scope="col"> scope="col">
Actions Actions
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200 bg-white"> <tbody className="divide-y divide-slate-200 bg-white">
{todosQuery.data?.map((todo) => ( {todosQuery.data?.map((todo) => (
<tr key={todo.id} className="divide-x divide-gray-200"> <tr key={todo.id} className="divide-x divide-slate-200">
<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pl-6"> <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pl-6">
{todo.id === currentlyEditingTodo ? ( {todo.id === currentlyEditingTodo ? (
<form <form
ref={formRef} ref={formRef}
@ -120,7 +120,7 @@ export default function TodoList() {
}}> }}>
<input <input
autoFocus={true} autoFocus={true}
className="block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-md border-slate-300 sm:text-sm"
defaultValue={todo.text} defaultValue={todo.text}
name="text" name="text"
type="text" type="text"
@ -130,19 +130,19 @@ export default function TodoList() {
todo.text todo.text
)} )}
</td> </td>
<td className="whitespace-nowrap p-4 text-sm text-gray-500"> <td className="whitespace-nowrap p-4 text-sm text-slate-500">
{todo.user.name} {todo.user.name}
</td> </td>
<td className="whitespace-nowrap p-4 text-sm text-gray-500"> <td className="whitespace-nowrap p-4 text-sm text-slate-500">
{todo.updatedAt.toLocaleString('en-US', { {todo.updatedAt.toLocaleString('en-US', {
dateStyle: 'long', dateStyle: 'long',
timeStyle: 'medium', timeStyle: 'medium',
})} })}
</td> </td>
<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pr-6"> <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pr-6">
<input <input
checked={todo.status === 'COMPLETE'} checked={todo.status === 'COMPLETE'}
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-slate-300"
type="checkbox" type="checkbox"
onChange={() => { onChange={() => {
todoUpdateMutation.mutate({ todoUpdateMutation.mutate({
@ -155,12 +155,12 @@ export default function TodoList() {
}} }}
/> />
</td> </td>
<td className="space-x-4 whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pr-6"> <td className="space-x-4 whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pr-6">
{data?.user?.id === todo.userId && ( {data?.user?.id === todo.userId && (
<> <>
{currentlyEditingTodo === todo.id ? ( {currentlyEditingTodo === todo.id ? (
<a <a
className="text-indigo-600 hover:text-indigo-900" className="text-primary-600 hover:text-primary-900"
href="#" href="#"
onClick={() => { onClick={() => {
setCurrentlyEditingTodo(null); setCurrentlyEditingTodo(null);
@ -169,7 +169,7 @@ export default function TodoList() {
</a> </a>
) : ( ) : (
<a <a
className="text-indigo-600 hover:text-indigo-900" className="text-primary-600 hover:text-primary-900"
href="#" href="#"
onClick={async () => { onClick={async () => {
setCurrentlyEditingTodo(todo.id); setCurrentlyEditingTodo(todo.id);
@ -178,7 +178,7 @@ export default function TodoList() {
</a> </a>
)} )}
<a <a
className="text-indigo-600 hover:text-indigo-900" className="text-primary-600 hover:text-primary-900"
href="#" href="#"
onClick={async () => { onClick={async () => {
const confirmDelete = window.confirm( const confirmDelete = window.confirm(

10
apps/portal/src/pages/todos/new.tsx
Unescape View File

@ -27,7 +27,7 @@ export default function TodosCreate() {
</h1> </h1>
<form <form
ref={formRef} ref={formRef}
className="w-full space-y-8 divide-y divide-gray-200" className="w-full space-y-8 divide-y divide-slate-200"
onSubmit={async (event) => { onSubmit={async (event) => {
event.preventDefault(); event.preventDefault();
if (!formRef.current) { if (!formRef.current) {
@ -52,14 +52,14 @@ export default function TodosCreate() {
}}> }}>
<div className="mt-6"> <div className="mt-6">
<label <label
className="block text-sm font-medium text-gray-700" className="block text-sm font-medium text-slate-700"
htmlFor="text"> htmlFor="text">
Text Text
</label> </label>
<div className="mt-1 flex rounded-md shadow-sm"> <div className="mt-1 flex rounded-md shadow-sm">
<input <input
autoFocus={true} autoFocus={true}
className="block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-md border-slate-300 sm:text-sm"
id="text" id="text"
name="text" name="text"
type="text" type="text"
@ -71,12 +71,12 @@ export default function TodosCreate() {
<div className="pt-5"> <div className="pt-5">
<div className="flex justify-end"> <div className="flex justify-end">
<Link <Link
className="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="focus:ring-primary-500 rounded-md border border-slate-300 bg-white py-2 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2"
href="/todos"> href="/todos">
Cancel Cancel
</Link> </Link>
<button <button
className="ml-3 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 ml-3 inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
type="submit"> type="submit">
Save Save
</button> </button>

Write Preview
Loading…
Cancel
Save