algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 13:13:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

[portal] standardize colors

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-24 10:15:03 +08:00
parent 82f2857667
commit a4e63b8a41
38 changed files with 151 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,8 +85,8 @@ function ProfileJewel() {
{({ active }) => (
<Link
className={clsx(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700',
active ? 'bg-slate-100' : '',
'block px-4 py-2 text-sm text-slate-700',
)}
href={item.href}
onClick={item.onClick}>
@ -178,9 +178,9 @@ export default function AppShell({ children }: Props) {
{/* Content area */}
<div className="flex h-screen flex-1 flex-col overflow-hidden">
<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
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"
onClick={() => setMobileMenuOpen(true)}>
<span className="sr-only">Open sidebar</span>

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

@ -34,7 +34,7 @@ export default function MobileNavigation({
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
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>
<div className="fixed inset-0 z-40 flex">
<Transition.Child

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

@ -9,12 +9,12 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
{stepLabels.map((label, index) => (
<div key={label} className="flex space-x-1">
{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 && (
<p className="text-sm text-gray-400">{'>'}</p>
<p className="text-sm text-slate-400">{'>'}</p>
)}
</div>
))}

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

@ -2,11 +2,11 @@ export default function OffersTitle() {
return (
<>
<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
</h1>
</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
</div>
<div className="items-top flex justify-center text-xl font-normal">

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

@ -36,11 +36,11 @@ export default function OffersProfileSave({
return (
<div className="flex w-full justify-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
</h5>
<p className="mb-2 text-gray-900">We value your privacy.</p>
<p className="mb-5 text-gray-900">
<p className="mb-2 text-slate-900">We value your privacy.</p>
<p className="mb-5 text-slate-900">
To keep you offer profile strictly anonymous, only people who have the
link below can edit it.
</p>
@ -67,7 +67,7 @@ export default function OffersProfileSave({
}}
/>
</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
profile under your user account. It will still only be editable by
you.

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

@ -26,11 +26,11 @@ function YoeSection() {
const backgroundFields = formState.errors.background;
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)
</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">
<FormTextInput
errorMessage={backgroundFields?.totalYoe?.message}
@ -245,10 +245,10 @@ function CurrentJobSection() {
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
</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">
<FormRadioList
defaultValue={JobType.FULLTIME}
@ -282,10 +282,10 @@ function EducationSection() {
const { register } = useFormContext();
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
</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">
<FormSelect
display="block"
@ -319,10 +319,10 @@ function EducationSection() {
export default function BackgroundForm() {
return (
<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
</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
us benchmark your offers.
</h6>

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

@ -62,7 +62,7 @@ function FullTimeOfferDetailsForm({
}, [watchCurrency, index, setValue]);
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">
<FormSelect
display="block"
@ -289,7 +289,7 @@ function InternshipOfferDetailsForm({
const offerFields = formState.errors.offers?.[index];
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">
<FormSelect
display="block"
@ -503,7 +503,7 @@ export default function OfferDetailsForm({
return (
<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
</h5>
<div className="flex w-full justify-center">

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

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

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

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

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

@ -8,9 +8,9 @@ export default function ProfilePhotoHolder({
const sizeMap = { lg: '16', sm: '12' };
return (
<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
className="h-full w-full text-gray-300"
className="h-full w-full text-slate-300"
fill="currentColor"
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" />

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

@ -100,12 +100,12 @@ export default function CommentCard({
</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-col text-sm font-light text-gray-400">{`${timeSinceNow(
<div className="flex flex-col text-sm font-light text-slate-400">{`${timeSinceNow(
createdAt,
)} ago`}</div>
{replyLength > 0 && (
<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}>
{isExpanded ? `Hide replies` : `View replies (${replyLength})`}
</div>

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

@ -13,9 +13,9 @@ export default function OfferTableRow({
return (
<tr
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
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">
{company.name}
</th>
@ -25,7 +25,7 @@ export default function OfferTableRow({
<td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
<td className="space-x-4 py-4 px-6">
<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}`}>
View Profile
</Link>

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

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

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

@ -19,13 +19,13 @@ export default function OffersTablePagination({
<nav
aria-label="Table navigation"
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
<span className="font-semibold text-gray-900">
<span className="font-semibold text-slate-900">
{` ${startNumber} - ${endNumber} `}
</span>
{`of `}
<span className="font-semibold text-gray-900">
<span className="font-semibold text-slate-900">
{pagination.totalItems}
</span>
</span>

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

@ -30,7 +30,7 @@ export default function ContributeQuestionCard({
return (
<div>
<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"
onClick={handleOpenContribute}>
<TextInput

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

@ -48,7 +48,7 @@ export default function ContributeQuestionDialog({
leave="ease-in duration-200"
leaveFrom="opacity-100"
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>
<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">
@ -66,7 +66,7 @@ export default function ContributeQuestionDialog({
<div className="mt-3 w-full sm:mt-0 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900">
className="text-lg font-medium leading-6 text-slate-900">
Contribute question
</Dialog.Title>
<div className="w-full">

2
apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
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}`}>
{cardContent}
{showDeleteButton && (
<div className="invisible self-center fill-red-700 group-hover:visible">
<div className="fill-danger-700 invisible self-center group-hover:visible">
<Button
icon={TrashIcon}
isLabelHidden={true}

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

@ -186,13 +186,13 @@ export default function ContributeQuestionForm({
</div>
<div className="flex gap-x-2">
<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"
onClick={onDiscard}>
Discard
</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}
label="Contribute"
type="submit"

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

@ -14,8 +14,8 @@ export default function ResumeFilterPill({
return (
<button
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',
isSelected ? 'bg-indigo-500 text-white' : 'bg-white text-indigo-500',
'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-primary-500 text-white' : 'text-primary-500 bg-white',
)}
type="button"
onClick={onClick}>

2
apps/portal/src/components/resumes/browse/ResumeListItem.tsx
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="col-span-4">
{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">
<BriefcaseIcon
aria-hidden="true"

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

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

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

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

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

@ -85,7 +85,7 @@ export default function ResumeCommentsList({
return (
<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)}
<div className="w-fit text-lg font-medium">{label}</div>

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

@ -16,10 +16,10 @@ export default function ResumeCommentsSection({
<>
<div className="relative p-2 lg:hidden">
<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 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
</span>
</div>

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

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

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

@ -7,16 +7,16 @@ export function CallToAction() {
<section className="relative overflow-hidden py-32" id="get-started-today">
<Container className="relative">
<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.
</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
engineers in the field.
</p>
<Link href="/resumes/browse">
<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">
Start browsing now
</button>

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

@ -7,7 +7,7 @@ export function Hero() {
<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">
Resume review{' '}
<span className="relative whitespace-nowrap text-indigo-500">
<span className="text-primary-500 relative whitespace-nowrap">
<svg
aria-hidden="true"
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">
<Link href="/resumes/browse">
<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">
Start browsing now
</button>
</Link>
<Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<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">
<svg
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" />
</svg>
<span className="ml-3">Watch video</span>

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

@ -49,7 +49,7 @@ export function PrimaryFeatures() {
return (
<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">
<Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">

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

@ -94,7 +94,7 @@ function QuoteIcon(props: QuoteProps) {
export function Testimonials() {
return (
<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">
<Container>
<div className="mx-auto max-w-2xl md:text-center">

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

@ -36,7 +36,7 @@ export default function ResumeExpandableText({
</span>
{descriptionOverflow && (
<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}>
{isExpanded ? 'See Less' : 'See More'}
</p>

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

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

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

@ -12,7 +12,7 @@ export default function OffersHomePage() {
return (
<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 />
<div className="flex items-start justify-center">
<div className="mt-4 flex items-center">

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

@ -50,7 +50,7 @@ export default function ListPage() {
{lists.map((list) => (
<li
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' : ''
}`}>
<button
@ -83,7 +83,7 @@ export default function ListPage() {
className={`${
active
? '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`}
type="button">
Delete

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

@ -120,12 +120,12 @@ export default function ResumeReviewPage() {
</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">
<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}
</h1>
<div className="flex gap-4">
<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}
type="button"
onClick={onStarButtonClick}>
@ -141,7 +141,7 @@ export default function ResumeReviewPage() {
className={clsx(
detailsQuery.data?.stars.length
? 'text-orange-400'
: 'text-gray-400',
: 'text-slate-400',
)}
/>
)}
@ -154,40 +154,40 @@ export default function ResumeReviewPage() {
</button>
{userIsOwner && (
<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"
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>
)}
</div>
</div>
<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
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}
</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
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}
</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
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}
</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
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, {
addSuffix: true,
@ -195,10 +195,10 @@ export default function ResumeReviewPage() {
</div>
</div>
{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
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
key={detailsQuery.data.additionalInfo}

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

@ -282,11 +282,11 @@ export default function ResumeHomePage() {
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">
<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
</h2>
<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"
onClick={() => setMobileFiltersOpen(false)}>
<span className="sr-only">Close menu</span>
@ -294,9 +294,9 @@ export default function ResumeHomePage() {
</button>
</div>
<form className="mt-4 border-t border-gray-200">
<form className="mt-4 border-t border-slate-200">
<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">
{SHORTCUTS.map((shortcut) => (
<li key={shortcut.name}>
@ -313,12 +313,12 @@ export default function ResumeHomePage() {
<Disclosure
key={filter.id}
as="div"
className="border-t border-gray-200 px-4 py-6">
className="border-t border-slate-200 px-4 py-6">
{({ open }) => (
<>
<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">
<span className="font-medium text-gray-900">
<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-slate-900">
{filter.label}
</span>
<span className="ml-6 flex items-center">
@ -341,7 +341,7 @@ export default function ResumeHomePage() {
{filter.options.map((option) => (
<div
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
label={option.label}
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">
<div className="flex justify-start">
<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
</h3>
<div className="w-100 pt-4 sm:pr-0 md:pr-4">
<form>
<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">
{SHORTCUTS.map((shortcut) => (
<li key={shortcut.name}>
@ -392,19 +392,19 @@ export default function ResumeHomePage() {
</li>
))}
</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
</h3>
{filters.map((filter) => (
<Disclosure
key={filter.id}
as="div"
className="border-b border-gray-200 py-6">
className="border-b border-slate-200 py-6">
{({ open }) => (
<>
<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">
<span className="font-medium text-gray-900">
<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-slate-900">
{filter.label}
</span>
<span className="ml-6 flex items-center">
@ -431,7 +431,7 @@ export default function ResumeHomePage() {
{filter.options.map((option) => (
<div
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
label={option.label}
value={userFilters[filter.id].includes(
@ -483,7 +483,7 @@ export default function ResumeHomePage() {
<div>
<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"
onClick={onSubmitResume}>
Submit Resume
@ -515,7 +515,7 @@ export default function ResumeHomePage() {
</DropdownMenu>
</div>
<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"
onClick={() => setMobileFiltersOpen(true)}>
<span className="sr-only">Filters</span>
@ -524,7 +524,7 @@ export default function ResumeHomePage() {
<div>
<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"
onClick={onSubmitResume}>
Submit Resume

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

@ -318,26 +318,26 @@ export default function SubmitResumeForm({
<div
{...getRootProps()}
className={clsx(
fileUploadError ? 'border-danger-600' : 'border-gray-300',
'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 py-4',
fileUploadError ? 'border-danger-600' : 'border-slate-300',
'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
)}>
<div className="space-y-1 text-center">
{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
className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
onClick={onClickDownload}>
{resumeFile.name}
</p>
)}
<div className="flex items-center text-sm">
<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">
<span className="font-medium">Drop file here</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'}
</span>
<input
@ -352,7 +352,7 @@ export default function SubmitResumeForm({
/>
</label>
</div>
<p className="text-xs text-gray-500">
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p>
</div>

46
apps/portal/src/pages/todos/index.tsx
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="sm:flex sm:items-center">
<div className="sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">Todos</h1>
<p className="mt-2 text-sm text-gray-700">
<h1 className="text-xl font-semibold text-slate-900">Todos</h1>
<p className="mt-2 text-sm text-slate-700">
A list of all Todos added by everyone.
</p>
</div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<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">
Add Todo
</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="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">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr className="divide-x divide-gray-200">
<table className="min-w-full divide-y divide-slate-300">
<thead className="bg-slate-50">
<tr className="divide-x divide-slate-200">
<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">
Description
</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">
Creator
</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">
Last Updated
</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">
Status
</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">
Actions
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-slate-200 bg-white">
{todosQuery.data?.map((todo) => (
<tr key={todo.id} className="divide-x divide-gray-200">
<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pl-6">
<tr key={todo.id} className="divide-x divide-slate-200">
<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pl-6">
{todo.id === currentlyEditingTodo ? (
<form
ref={formRef}
@ -120,7 +120,7 @@ export default function TodoList() {
}}>
<input
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}
name="text"
type="text"
@ -130,19 +130,19 @@ export default function TodoList() {
todo.text
)}
</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}
</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', {
dateStyle: 'long',
timeStyle: 'medium',
})}
</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
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"
onChange={() => {
todoUpdateMutation.mutate({
@ -155,12 +155,12 @@ export default function TodoList() {
}}
/>
</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 && (
<>
{currentlyEditingTodo === todo.id ? (
<a
className="text-indigo-600 hover:text-indigo-900"
className="text-primary-600 hover:text-primary-900"
href="#"
onClick={() => {
setCurrentlyEditingTodo(null);
@ -169,7 +169,7 @@ export default function TodoList() {
</a>
) : (
<a
className="text-indigo-600 hover:text-indigo-900"
className="text-primary-600 hover:text-primary-900"
href="#"
onClick={async () => {
setCurrentlyEditingTodo(todo.id);
@ -178,7 +178,7 @@ export default function TodoList() {
</a>
)}
<a
className="text-indigo-600 hover:text-indigo-900"
className="text-primary-600 hover:text-primary-900"
href="#"
onClick={async () => {
const confirmDelete = window.confirm(

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

@ -27,7 +27,7 @@ export default function TodosCreate() {
</h1>
<form
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) => {
event.preventDefault();
if (!formRef.current) {
@ -52,14 +52,14 @@ export default function TodosCreate() {
}}>
<div className="mt-6">
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-slate-700"
htmlFor="text">
Text
</label>
<div className="mt-1 flex rounded-md shadow-sm">
<input
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"
name="text"
type="text"
@ -71,12 +71,12 @@ export default function TodosCreate() {
<div className="pt-5">
<div className="flex justify-end">
<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">
Cancel
</Link>
<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">
Save
</button>