[repo] move from Prettier to Oxfmt

.oxfmtrc.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "bracketSameLine": true,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "sortPackageJson": false,
+  "overrides": [
+    {
+      "files": ["apps/portal/**/*.{js,jsx,ts,tsx}"],
+      "options": {
+        "sortTailwindcss": {
+          "config": "apps/portal/tailwind.config.cjs",
+          "functions": ["clsx"]
+        }
+      }
+    }
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    ".vscode",
+    ".next",
+    "build",
+    "dist",
+    "*.tsbuildinfo",
+    "*.gitignore",
+    "*.svg",
+    "*.lock",
+    "*.npmignore",
+    "*.sql",
+    "*.png",
+    "*.jpg",
+    "*.jpeg",
+    "*.gif",
+    "*.ico",
+    "*.sh",
+    "Dockerfile",
+    "Dockerfile.*",
+    ".env",
+    ".env.*",
+    "LICENSE",
+    "*.log",
+    ".DS_Store",
+    ".dockerignore",
+    "*.patch",
+    "*.toml",
+    "*.prisma",
+    "apps/website/experimental/domain/**/*.html"
+  ]
+}

.prettierignore

@@ -1,27 +0,0 @@
-node_modules
-.next
-build
-dist
-*.tsbuildinfo
-*.gitignore
-*.svg
-*.lock
-*.npmignore
-*.sql
-*.png
-*.jpg
-*.jpeg
-*.gif
-*.ico
-*.sh
-Dockerfile
-Dockerfile.*
-.env
-.env.*
-LICENSE
-*.log
-.DS_Store
-.dockerignore
-*.patch
-*.toml
-*.prisma

.prettierrc

@@ -1,7 +0,0 @@
-{
-  "bracketSameLine": true,
-  "printWidth": 80,
-  "proseWrap": "never",
-  "singleQuote": true,
-  "trailingComma": "all"
-}

apps/portal/package.json

@@ -59,7 +59,6 @@
     "autoprefixer": "^10.4.12",
     "csv": "^6.2.2",
     "postcss": "^8.4.16",
-    "prettier-plugin-tailwindcss": "^0.1.13",
     "prisma": "^4.4.0",
     "ts-node": "^10.9.1",
     "typescript": "4.8.3"

apps/portal/src/components/global/AppShell.tsx

@@ -43,7 +43,7 @@ function ProfileJewel() {
     return router.pathname !== loginHref.pathname ? (
       <div className="flex items-center space-x-4">
         <Link
-          className="hover:text-primary-500 text-xs font-medium text-slate-700"
+          className="text-xs font-medium text-slate-700 hover:text-primary-500"
           href={loginHref}>
           Sign In
         </Link>
@@ -78,7 +78,7 @@ function ProfileJewel() {
   return (
     <Menu as="div" className="relative flex-shrink-0">
       <div>
-        <Menu.Button className="focus:ring-primary-500 flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-offset-2">
+        <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
           <span className="sr-only">Open user menu</span>
           {session?.user?.image == null ? (
             <span>TODO: Render some icon</span>
@@ -220,7 +220,7 @@ export default function AppShell({ children }: Props) {
           <header className="sticky top-0 z-10 w-full">
             <div className="relative flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
               <button
-                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"
+                className="border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 md:hidden"
                 type="button"
                 onClick={() => setMobileMenuOpen(true)}>
                 <span className="sr-only">Open sidebar</span>

apps/portal/src/components/global/MobileNavigation.tsx

@@ -47,7 +47,7 @@ export default function MobileNavigation({
             leave="transition ease-in-out duration-300 transform"
             leaveFrom="translate-x-0"
             leaveTo="-translate-x-full">
-            <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
+            <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white pb-4 pt-5">
               <Transition.Child
                 as={Fragment}
                 enter="ease-in-out duration-300"
@@ -56,7 +56,7 @@ export default function MobileNavigation({
                 leave="ease-in-out duration-300"
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0">
-                <div className="absolute top-1 right-0 -mr-14 p-1">
+                <div className="absolute right-0 top-1 -mr-14 p-1">
                   <button
                     className="flex h-12 w-12 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-white"
                     type="button"
@@ -89,7 +89,7 @@ export default function MobileNavigation({
                         key={item.name}
                         className={clsx(
                           'text-slate-700 hover:bg-slate-100',
-                          'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
+                          'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
                         )}
                         href={item.href}>
                         <span>{item.name}</span>
@@ -108,7 +108,7 @@ export default function MobileNavigation({
                         key={item.name}
                         className={clsx(
                           'text-slate-700 hover:bg-slate-100',
-                          'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
+                          'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
                         )}
                         href={item.href}>
                         <item.icon

apps/portal/src/components/global/ProductNavigation.tsx

@@ -33,7 +33,7 @@ export default function ProductNavigation({
   return (
     <nav aria-label="Global" className="flex h-full items-center space-x-8">
       <Link
-        className="hover:text-primary-700 flex items-center gap-2 text-base font-medium"
+        className="flex items-center gap-2 text-base font-medium hover:text-primary-700"
         href={titleHref}>
         <div>
           {logo ?? (
@@ -51,7 +51,7 @@ export default function ProductNavigation({
           const isActive = router.pathname === item.href;
           return item.children != null && item.children.length > 0 ? (
             <Menu key={item.name} as="div" className="relative text-left">
-              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-base font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
+              <Menu.Button className="flex items-center rounded-md text-base font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2">
                 <span>{item.name}</span>
                 <ChevronDownIcon
                   aria-hidden="true"
@@ -96,7 +96,7 @@ export default function ProductNavigation({
             <Link
               key={item.name}
               className={clsx(
-                'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-base text-slate-900',
+                'inline-flex h-full items-center border-y-2 border-t-transparent text-base text-slate-900 hover:text-primary-600',
                 isActive ? 'border-b-primary-500' : 'border-b-transparent',
               )}
               href={item.href}

apps/portal/src/components/offers/JobTypeTabs.tsx

@@ -35,7 +35,7 @@ export default function JobTypeTabs({ value, onChange }: Props) {
                 : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700',
               tabIdx === 0 && 'rounded-l-lg',
               tabIdx === tabs.length - 1 && 'rounded-r-lg',
-              'focus:ring-primary-500 group relative min-w-0 flex-1 overflow-hidden py-3 px-4 text-center font-medium focus:z-10',
+              'group relative min-w-0 flex-1 overflow-hidden px-4 py-3 text-center font-medium focus:z-10 focus:ring-primary-500',
             )}
             type="button"
             onClick={() => {

apps/portal/src/components/offers/admin/OffersHeader.tsx

@@ -28,7 +28,7 @@ export default function OffersHeader({
     <th
       key={header}
       className={clsx(
-        'bg-slate-100 py-3 px-4',
+        'bg-slate-100 px-4 py-3',
         sortType &&
           'hover:cursor-pointer hover:bg-slate-200 active:bg-slate-300',
         header !== 'Company' && 'whitespace-nowrap',

apps/portal/src/components/offers/admin/OffersRow.tsx

@@ -35,31 +35,31 @@ export default function OfferTableRow({
 }: OfferTableRowProps) {
   return (
     <tr key={id} className="divide-x divide-slate-200 border-b bg-white">
-      <td className="space-y-0.5 py-4 px-4" scope="row">
+      <td className="space-y-0.5 px-4 py-4" scope="row">
         <div className="font-medium">{company.name}</div>
         <div className="text-xs text-slate-500">
           {location.cityName} ({location.countryCode})
         </div>
       </td>
-      <td className="py-4 px-4">
+      <td className="px-4 py-4">
         {getLabelForJobTitleType(title as JobTitleType)}
       </td>
-      <td className="py-4 px-4">{totalYoe}</td>
+      <td className="px-4 py-4">{totalYoe}</td>
-      <td className="py-4 px-4">{convertMoneyToString(income)}</td>
+      <td className="px-4 py-4">{convertMoneyToString(income)}</td>
       {jobType === JobType.FULLTIME && (
-        <td className="py-4 px-4">
+        <td className="px-4 py-4">
           {`${convertMoneyToString(baseSalary)} / ${convertMoneyToString(
             bonus,
           )} / ${convertMoneyToString(stocks)}`}
         </td>
       )}
-      <td className="py-4 px-4">{formatDate(monthYearReceived)}</td>
+      <td className="px-4 py-4">{formatDate(monthYearReceived)}</td>
       <td
         className={clsx(
           'sticky right-0 bg-white px-4 py-4 drop-shadow lg:drop-shadow-none',
         )}>
         <Link
-          className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
+          className="font-medium text-primary-600 hover:underline dark:text-primary-500"
           href={`/offers/profile/${profileId}?token=${token}`}>
           View Editable Profile
         </Link>

apps/portal/src/components/offers/admin/OffersTablePagination.tsx

@@ -27,7 +27,7 @@ export default function OffersTablePagination({
   }, []);
 
   return (
-    <nav aria-label="Offers Pagination" className="py-3 px-4">
+    <nav aria-label="Offers Pagination" className="px-4 py-3">
       <div className="grid grid-cols-1 items-center gap-2 md:grid-cols-2">
         <div>
           {!isInitialFetch && (

apps/portal/src/components/offers/features/LeftTextCard.tsx

@@ -23,10 +23,10 @@ export default function LeftTextCard({
 }: LeftTextCardProps) {
   return (
     <div className="items-center lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
-      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-16">
         <div>
           <div>
-            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
+            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-primary-500">
               {icon}
             </span>
           </div>
@@ -37,7 +37,7 @@ export default function LeftTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-primary-500 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
                 href={url}>
                 {buttonLabel}
               </a>

apps/portal/src/components/offers/features/RightTextCard.tsx

@@ -23,10 +23,10 @@ export default function RightTextCard({
 }: RightTextCarddProps) {
   return (
     <div className="items-center lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
-      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
+      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:px-0 lg:py-32">
         <div>
           <div>
-            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
+            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-primary-500">
               {icon}
             </span>
           </div>
@@ -37,7 +37,7 @@ export default function RightTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-primary-500 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
                 href={url}>
                 {buttonLabel}
               </a>

apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx

@@ -75,7 +75,7 @@ export default function OffersProfileSave({
           We value your privacy
         </p>
         <div className="mt-6 max-w-md text-slate-500">
-          <div className="bg-info-50 rounded-lg p-6">
+          <div className="rounded-lg bg-info-50 p-6">
             <p className="sm:tex-base text-sm">
               To keep your offer profile strictly anonymous, it is not linked to
               your user account. Only people who have the link below can edit

apps/portal/src/components/offers/profile/ProfileComments.tsx

@@ -107,7 +107,7 @@ export default function ProfileComments({
     <div className="bh-white h-fit lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
       <div className="border-b border-slate-200 bg-white p-4 lg:sticky lg:top-0">
         <div className="flex justify-end">
-          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
+          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-x-4 md:space-y-0">
             <div className="col-span-1 flex justify-end">
               {isEditable && (
                 <Tooltip tooltipContent="Copy this link to edit your profile later">
@@ -169,7 +169,9 @@ export default function ProfileComments({
             <div>
               <TextArea
                 label={`Comment as ${
-                  isEditable ? profileName : session?.user?.name ?? 'anonymous'
+                  isEditable
+                    ? profileName
+                    : (session?.user?.name ?? 'anonymous')
                 }`}
                 placeholder="Type your comment here"
                 value={currentReply}

apps/portal/src/components/offers/table/OffersHeader.tsx

@@ -28,7 +28,7 @@ export default function OffersHeader({
     <th
       key={header}
       className={clsx(
-        'bg-slate-100 py-3 px-4',
+        'bg-slate-100 px-4 py-3',
         sortType &&
           'hover:cursor-pointer hover:bg-slate-200 active:bg-slate-300',
         header !== 'Company' && 'whitespace-nowrap',

apps/portal/src/components/offers/table/OffersRow.tsx

@@ -35,14 +35,14 @@ export default function OfferTableRow({
 }: OfferTableRowProps) {
   return (
     <tr key={id} className="divide-x divide-slate-200 border-b bg-white">
-      <td className="flex items-center gap-3 space-y-0.5 py-2 px-4" scope="row">
+      <td className="flex items-center gap-3 space-y-0.5 px-4 py-2" scope="row">
         <CompanyProfileImage
           alt={company.name}
           className="hidden h-6 w-6 object-contain sm:block"
           src={company.logoUrl}
         />
         <div>
-          <div className="line-clamp-2 sm:line-clamp-1 font-medium">
+          <div className="line-clamp-2 font-medium sm:line-clamp-1">
             {company.name}
           </div>
           <div className="text-xs text-slate-500">
@@ -50,25 +50,25 @@ export default function OfferTableRow({
           </div>
         </div>
       </td>
-      <td className="py-2 px-4">
+      <td className="px-4 py-2">
         {getLabelForJobTitleType(title as JobTitleType)}
       </td>
-      <td className="py-2 px-4">{totalYoe}</td>
+      <td className="px-4 py-2">{totalYoe}</td>
-      <td className="py-2 px-4">{convertMoneyToString(income)}</td>
+      <td className="px-4 py-2">{convertMoneyToString(income)}</td>
       {jobType === JobType.FULLTIME && (
-        <td className="py-2 px-4">
+        <td className="px-4 py-2">
           {`${convertMoneyToString(baseSalary)} / ${convertMoneyToString(
             bonus,
           )} / ${convertMoneyToString(stocks)}`}
         </td>
       )}
-      <td className="py-2 px-4">{formatDate(monthYearReceived)}</td>
+      <td className="px-4 py-2">{formatDate(monthYearReceived)}</td>
       <td
         className={clsx(
           'sticky right-0 bg-white px-4 py-2 drop-shadow lg:drop-shadow-none',
         )}>
         <Link
-          className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
+          className="font-medium text-primary-600 hover:underline dark:text-primary-500"
           href={`/offers/profile/${profileId}`}>
           View Profile
         </Link>

apps/portal/src/components/offers/table/OffersTablePagination.tsx

@@ -27,7 +27,7 @@ export default function OffersTablePagination({
   }, []);
 
   return (
-    <nav aria-label="Offers Pagination" className="py-3 px-4">
+    <nav aria-label="Offers Pagination" className="px-4 py-3">
       <div className="grid grid-cols-1 items-center gap-2 md:grid-cols-2">
         <div>
           {!isInitialFetch && (

apps/portal/src/components/questions/AddToListDropdown.tsx

@@ -106,7 +106,7 @@ export default function AddToListDropdown({
 
   const CustomMenuButton = ({ children }: PropsWithChildren<unknown>) => (
     <button
-      className="focus:ring-primary-500 inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100"
+      className="inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-slate-100"
       type="button"
       onClick={handleMenuButtonClick}>
       {children}

apps/portal/src/components/questions/ContributeQuestionCard.tsx

@@ -29,7 +29,7 @@ export default function ContributeQuestionCard({
         className="flex w-full flex-1 justify-between gap-2 rounded-md border border-slate-300 bg-white p-4 text-left transition hover:bg-slate-100"
         type="button"
         onClick={handleOpenContribute}>
-        <div className="w-full rounded-md border border-slate-300 bg-slate-100 py-2 px-4 text-slate-400">
+        <div className="w-full rounded-md border border-slate-300 bg-slate-100 px-4 py-2 text-slate-400">
           <p className="font-semibold">
             Just completed your interview? Contribute your questions
           </p>

apps/portal/src/components/questions/LandingComponent.tsx

@@ -67,13 +67,13 @@ export default function LandingComponent({ onLanded }: LandingComponentProps) {
   }, [defaultLocation, location]);
 
   return (
-    <div className="relative pt-6 pb-16 sm:pb-24">
+    <div className="relative pb-16 pt-6 sm:pb-24">
       <main className="mt-8 sm:mt-16">
         <Container>
           <div className="lg:grid lg:grid-cols-12 lg:gap-8">
             <div className="px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:items-center lg:text-left">
               <div>
-                <h1 className="text-primary-600 mt-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+                <h1 className="mt-4 text-4xl font-bold tracking-tight text-primary-600 sm:text-5xl md:text-6xl">
                   Tech Interview Question Bank
                 </h1>
                 <p className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">

apps/portal/src/components/questions/QuestionAggregateBadge.tsx

@@ -55,8 +55,7 @@ export default function QuestionAggregateBadge({
     <>
       <button
         ref={setTriggerRef}
-        className="-my-1 flex items-center rounded-md px-2
+        className="-my-1 flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500 hover:bg-slate-200 hover:text-slate-600"
-                  py-1 text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-600"
         type="button">
         <Icon
           aria-hidden={true}

apps/portal/src/components/questions/VotingButtons.tsx

@@ -56,7 +56,7 @@ export default function VotingButtons({
             size === 'md' && 'h-6 w-6',
             vote?.vote === 'UPVOTE'
               ? 'text-primary-500'
-              : 'hover:text-primary-500 text-slate-400',
+              : 'text-slate-400 hover:text-primary-500',
           )}
         />
       </button>
@@ -79,7 +79,7 @@ export default function VotingButtons({
             size === 'md' && 'h-6 w-6',
             vote?.vote === 'DOWNVOTE'
               ? 'text-danger-500'
-              : 'hover:text-danger-500 text-slate-400',
+              : 'text-slate-400 hover:text-danger-500',
           )}
         />
       </button>

apps/portal/src/components/questions/card/AnswerCard.tsx

@@ -64,9 +64,7 @@ export default function AnswerCard({
         <div className="-ml-2">
           {commentCount !== undefined && (
             <button
-              className="-my-1 flex items-center rounded-md px-2
+              className="-my-1 flex items-center rounded-md px-2 py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
-                  py-1 text-xs font-medium
-                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
               type="button">
               <ChatBubbleLeftRightIcon
                 aria-hidden={true}

apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx

@@ -266,9 +266,7 @@ export default function BaseQuestionCard({
               {showAnswerStatistics && (
                 <div>
                   <button
-                    className="-my-1 flex items-center rounded-md px-2
+                    className="-my-1 flex items-center rounded-md px-2 py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
-                  py-1 text-xs font-medium
-                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
                     type="button">
                     <ChatBubbleBottomCenterTextIcon
                       aria-hidden={true}
@@ -281,9 +279,7 @@ export default function BaseQuestionCard({
               {showReceivedStatistics && (
                 <div>
                   <button
-                    className="-my-1 flex items-center rounded-md px-2
+                    className="-my-1 flex items-center rounded-md px-2 py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
-                  py-1 text-xs font-medium
-                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
                     type="button">
                     <EyeIcon aria-hidden={true} className="mr-2 h-5 w-5" />
                     {receivedCount} received this
@@ -320,12 +316,12 @@ export default function BaseQuestionCard({
     <article
       className={clsx(
         'group flex gap-4 border-slate-200',
-        showHover && 'hover:border-primary-500 transition',
+        showHover && 'transition hover:border-primary-500',
         !hideCard && 'rounded-md border bg-white px-2 py-4 sm:rounded-lg',
       )}>
       {cardContent}
       {showDeleteButton && (
-        <div className="fill-danger-700 invisible	self-center group-hover:visible">
+        <div className="invisible self-center fill-danger-700 group-hover:visible">
           <Button
             icon={TrashIcon}
             isLabelHidden={true}

apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx

@@ -118,7 +118,7 @@ export default function ContributeQuestionForm({
           rows={5}
           {...register('questionContent')}
         />
-        <h2 className="text-md text-primary-800 font-semibold">
+        <h2 className="text-md font-semibold text-primary-800">
           Additional information
         </h2>
         <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
@@ -193,10 +193,7 @@ export default function ContributeQuestionForm({
           </div>
         </div>
 
-        <h2
+        <h2 className="text-lg font-semibold text-primary-900">
-          className="text-primary-900
-        text-lg font-semibold
-        ">
           Are these questions the same as yours?
         </h2>
         <Button
@@ -250,7 +247,7 @@ export default function ContributeQuestionForm({
             )}
         </div>
         <div
-          className="bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
+          className="flex w-full flex-col gap-y-2 bg-primary-50 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
           style={{
             // Hack to make the background bleed outside the container
             clipPath: 'inset(0 -100vmax)',

apps/portal/src/components/questions/layout/BackButtonLayout.tsx

@@ -13,7 +13,7 @@ export default function BackButtonLayout({
   children,
 }: BackButtonLayoutProps) {
   return (
-    <Container className="flex flex-col gap-4 pt-4 pb-12" variant="sm">
+    <Container className="flex flex-col gap-4 pb-12 pt-4" variant="sm">
       <div>
         <Button
           addonPosition="start"

apps/portal/src/components/resumes/ResumePdf.tsx

@@ -57,7 +57,7 @@ export default function ResumePdf({ url }: Props) {
               width={pageWidth}
             />
           </div>
-          <div className="absolute top-2 right-5 hidden hover:block group-hover:block">
+          <div className="absolute right-5 top-2 hidden hover:block group-hover:block">
             <Button
               className="rounded-r-none focus:ring-0 focus:ring-offset-0"
               disabled={pageWidth === 450}

apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx

@@ -13,14 +13,7 @@ export default function ResumeUserBadge({
 }: Props) {
   return (
     <div className="group relative flex items-center justify-center">
-      <div
+      <div className="absolute top-7 z-10 hidden h-36 w-48 flex-col justify-center gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg after:absolute after:left-1/2 after:top-[-11%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-slate-200 after:border-t-transparent after:drop-shadow-sm after:content-[''] group-hover:flex">
-        className="absolute top-7 z-10 hidden h-36 w-48 flex-col justify-center
-        gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
-
-        after:absolute after:left-1/2 after:top-[-11%] after:-translate-x-1/2
-        after:border-8 after:border-x-transparent after:border-t-transparent
-        after:border-b-slate-200 after:drop-shadow-sm after:content-['']
-        group-hover:flex">
         <Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
         <div className="flex h-20 flex-col justify-evenly px-2">
           <p className="font-medium">{title}</p>

apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx

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

apps/portal/src/components/resumes/browse/ResumeListItem.tsx

@@ -47,7 +47,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
                 {resumeInfo.isResolved ? 'Reviewed' : 'Unreviewed'}
               </p>
             </div>
-            <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
+            <div className="mt-2 flex items-center justify-start text-xs text-primary-500">
               <div className="flex">
                 <BriefcaseIcon
                   aria-hidden="true"

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -47,7 +47,7 @@ export default function ResumeCommentListItem({
               {comment.user.name ?? 'Reviewer ABC'}
             </p>
             {isCommentOwner && (
-              <span className="bg-primary-100 text-primary-800 rounded-md py-0.5 px-1 text-xs">
+              <span className="rounded-md bg-primary-100 px-1 py-0.5 text-xs text-primary-800">
                 Me
               </span>
             )}

apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx

@@ -115,7 +115,7 @@ export default function ResumeCommentsForm({
   };
 
   return (
-    <div className="overflow-y-auto py-8 px-4">
+    <div className="overflow-y-auto px-4 py-8">
       <h2 className="text-xl font-medium text-slate-800">
         Contribute a review
       </h2>

apps/portal/src/components/resumes/landing/Hero.tsx

@@ -7,10 +7,10 @@ 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="text-primary-500 relative whitespace-nowrap">
+        <span className="relative whitespace-nowrap text-primary-500">
           <svg
             aria-hidden="true"
-            className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
+            className="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70"
             preserveAspectRatio="none"
             viewBox="0 0 418 42">
             <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />

apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx

@@ -49,7 +49,7 @@ export function PrimaryFeatures() {
 
   return (
     <section
-      className="from-primary-400 to-primary-700 relative overflow-hidden bg-gradient-to-r pt-20 pb-28 sm:py-32"
+      className="relative overflow-hidden bg-gradient-to-r from-primary-400 to-primary-700 pb-28 pt-20 sm:py-32"
       id="features">
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
@@ -69,7 +69,7 @@ export function PrimaryFeatures() {
                     <div
                       key={feature.title}
                       className={clsx(
-                        'group relative rounded-full lg:rounded-r-none lg:rounded-l-xl lg:p-6',
+                        'group relative rounded-full lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
                           ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
                           : 'hover:bg-white/10 lg:hover:bg-white/5',
@@ -77,13 +77,13 @@ export function PrimaryFeatures() {
                       <h3>
                         <Tab
                           className={clsx(
-                            'rounded-full py-1 px-4',
+                            'rounded-full px-4 py-1',
                             'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
                             selectedIndex === featureIndex
                               ? 'text-blue-600 lg:text-white'
                               : 'text-blue-100 hover:text-white lg:text-white',
                           )}>
-                          <span className="absolute inset-0 rounded-full lg:rounded-r-none lg:rounded-l-xl" />
+                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
                           <div className="font-bold">{feature.title}</div>
                         </Tab>
                       </h3>
@@ -104,7 +104,7 @@ export function PrimaryFeatures() {
                 {features.map((feature) => (
                   <Tab.Panel key={feature.title} unmount={false}>
                     <div className="relative sm:px-6 lg:hidden">
-                      <div className="absolute -inset-x-4 top-[-6.5rem] bottom-[-4.25rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
+                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
                       <p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
                         {feature.description}
                       </p>

apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx

@@ -36,7 +36,7 @@ export default function ResumeExpandableText({
       </span>
       {descriptionOverflow && (
         <button
-          className="text-primary-500 hover:text-primary-600 text-xs font-medium"
+          className="text-xs font-medium text-primary-500 hover:text-primary-600"
           type="button"
           onClick={onSeeActionClicked}>
           {isExpanded ? 'See Less' : 'See More'}

apps/portal/src/components/shared/MonthYearPicker.tsx

@@ -143,7 +143,7 @@ export default function MonthYearPicker({
         </div>
       </div>
       {errorMessage && (
-        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+        <p className="mt-2 text-sm text-danger-600" id={errorId}>
           {errorMessage}
         </p>
       )}

apps/portal/src/components/shared/loginPageHref.ts

@@ -4,7 +4,7 @@ export default function loginPageHref(redirectUrl?: string) {
     query: {
       callbackUrl:
         typeof window !== 'undefined'
-          ? redirectUrl ?? window.location.href
+          ? (redirectUrl ?? window.location.href)
           : null,
     },
   };

apps/portal/src/mappers/offers-mappers.ts

@@ -93,8 +93,8 @@ const analysisOfferDtoMapper = (
     profileName,
     title:
       offer.jobType === JobType.FULLTIME
-        ? offer.offersFullTime?.title ?? ''
+        ? (offer.offersFullTime?.title ?? '')
-        : offer.offersIntern?.title ?? '',
+        : (offer.offersIntern?.title ?? ''),
     totalYoe: background?.totalYoe ?? -1,
   };
 
@@ -909,8 +909,8 @@ const userProfileOfferDtoMapper = (
     monthYearReceived: offer.monthYearReceived,
     title:
       offer.jobType === JobType.FULLTIME
-        ? offer.offersFullTime?.title ?? ''
+        ? (offer.offersFullTime?.title ?? '')
-        : offer.offersIntern?.title ?? '',
+        : (offer.offersIntern?.title ?? ''),
   };
 
   if (

apps/portal/src/pages/404.tsx

@@ -60,23 +60,23 @@ export default function Example() {
               You may be trying to access the following services
             </h2>
             <ul
-              className="mt-4 divide-y divide-slate-200 border-t border-b border-slate-200"
+              className="mt-4 divide-y divide-slate-200 border-b border-t border-slate-200"
               role="list">
               {links.map((link) => (
                 <li
                   key={link.href}
                   className="relative flex items-start space-x-4 py-6">
                   <div className="flex-shrink-0">
-                    <span className="bg-primary-50 flex h-12 w-12 items-center justify-center rounded-lg">
+                    <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-50">
                       <link.icon
                         aria-hidden="true"
-                        className="text-primary-700 h-6 w-6"
+                        className="h-6 w-6 text-primary-700"
                       />
                     </span>
                   </div>
                   <div className="min-w-0 flex-1">
                     <h3 className="text-base font-medium text-slate-900">
-                      <span className="focus-within:ring-primary-500 rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+                      <span className="rounded-sm focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2">
                         <Link className="focus:outline-none" href={link.href}>
                           <span
                             aria-hidden="true"
@@ -101,7 +101,7 @@ export default function Example() {
             </ul>
             <div className="mt-8">
               <Link
-                className="text-primary-600 hover:text-primary-500 text-base font-medium"
+                className="text-base font-medium text-primary-600 hover:text-primary-500"
                 href="/">
                 Or go back home
                 <span aria-hidden="true"> &rarr;</span>

apps/portal/src/pages/index.tsx

@@ -39,7 +39,7 @@ export default function HomePage() {
             <Container>
               <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
                 <span className="block">Tech Interview Handbook</span>
-                <span className="text-primary-600 block">Portal</span>
+                <span className="block text-primary-600">Portal</span>
               </h1>
               <p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
                 Suite of products to help you get better at technical

apps/portal/src/pages/login.tsx

@@ -24,7 +24,7 @@ export default function LoginPage({
 
   return (
     <div className="flex w-full justify-center">
-      <div className="flex min-h-full flex-col justify-center py-12 px-6 lg:px-8">
+      <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <img
             alt="Tech Interview Handbook"

apps/portal/src/pages/offers/about.tsx

@@ -60,7 +60,7 @@ export default function AboutPage() {
                 Thank you for using our platform! Feel free to submit your
                 feedback / feature request / bug report
                 <a
-                  className="text-primary-600 hover:text-primary-500 ml-1"
+                  className="ml-1 text-primary-600 hover:text-primary-500"
                   href="https://docs.google.com/forms/d/e/1FAIpQLScbhjhlCdcmu9SGyASevqrqLl_HOr4W1B_bpTXUgs78yClr_w/viewform?usp=send_form"
                   rel="noreferrer"
                   target="_blank">
@@ -79,7 +79,7 @@ export default function AboutPage() {
                 {people.map((person) => (
                   <li key={person.name}>
                     <div className="space-y-4 sm:grid sm:grid-cols-4 sm:gap-6 sm:space-y-0 lg:gap-8">
-                      <div className="aspect-w-2 aspect-h-2 h-0">
+                      <div className="aspect-h-2 aspect-w-2 h-0">
                         <img
                           alt={person.name}
                           className="rounded-lg object-cover shadow-lg"

apps/portal/src/pages/offers/admin.tsx

@@ -69,7 +69,7 @@ export default function OffersHomePage({
           </Link>
           . ⭐
         </Banner>
-        <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
+        <div className="flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 text-primary-600 sm:text-lg">
           <span>
             <MapPinIcon className="flex h-7 w-7" />
           </span>
@@ -90,10 +90,10 @@ export default function OffersHomePage({
             }}
           />
         </div>
-        <div className="bg-slate-100 py-16 px-4">
+        <div className="bg-slate-100 px-4 py-16">
           <div>
             <div>
-              <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
+              <h1 className="text-center text-4xl font-bold text-primary-600 sm:text-5xl">
                 Tech Offers Repo (Admin)
               </h1>
             </div>
@@ -102,7 +102,7 @@ export default function OffersHomePage({
               offers.
             </div>
           </div>
-          <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
+          <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-x-4 sm:space-y-0 sm:text-lg">
             <span>Viewing offers for</span>
             <div className="flex items-center space-x-4">
               <JobTitlesTypeahead

apps/portal/src/pages/offers/features.tsx

@@ -91,7 +91,7 @@ export default function LandingPage() {
         <main>
           {/* Hero section */}
           <div className="relative h-full">
-            <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+            <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
               <img
                 alt="Tech Offers Repo"
                 className="mx-auto mb-8 w-auto"
@@ -99,7 +99,7 @@ export default function LandingPage() {
               />
               <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
                 <span>Choosing offers </span>
-                <span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
+                <span className="-mb-1 mr-2 bg-gradient-to-r from-primary-600 to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
                   made easier
                 </span>
               </h1>
@@ -115,7 +115,7 @@ export default function LandingPage() {
                     Get started
                   </a>
                   <a
-                    className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
+                    className="flex items-center justify-center rounded-md border border-transparent bg-primary-500 px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
                     href="https://www.youtube.com/watch?v=e4g1lS6zWGA&feature=youtu.be">
                     Promo Video
                   </a>
@@ -125,7 +125,7 @@ export default function LandingPage() {
           </div>
 
           {/* Alternating Feature Sections */}
-          <div className="relative overflow-hidden pt-16 pb-32">
+          <div className="relative overflow-hidden pb-32 pt-16">
             <div
               aria-hidden="true"
               className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"
@@ -181,12 +181,12 @@ export default function LandingPage() {
           </div>
 
           {/* Gradient Feature Section */}
-          <div className="to-primary-600 bg-gradient-to-r from-purple-800">
+          <div className="bg-gradient-to-r from-purple-800 to-primary-600">
-            <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
+            <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pb-24 sm:pt-20 lg:max-w-7xl lg:px-8 lg:pt-24">
               <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
                 Your privacy is our priority.
               </h2>
-              <p className="text-primary-100 mt-4 flex flex-row justify-center text-lg">
+              <p className="mt-4 flex flex-row justify-center text-lg text-primary-100">
                 All offer profiles are anonymized and we do not store
                 information about your personal identity.
               </p>
@@ -205,7 +205,7 @@ export default function LandingPage() {
                       <h3 className="text-lg font-medium text-white">
                         {feature.name}
                       </h3>
-                      <p className="text-primary-100 mt-2 text-base">
+                      <p className="mt-2 text-base text-primary-100">
                         {feature.description}
                       </p>
                     </div>
@@ -217,16 +217,16 @@ export default function LandingPage() {
 
           {/* CTA Section */}
           <div className="bg-white">
-            <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
+            <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
               <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                 <span className="block">Ready to get started?</span>
-                <span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent">
+                <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-primary-600 bg-clip-text pb-1 text-transparent">
                   Create your own offer profile today.
                 </span>
               </h2>
-              <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
+              <div className="mt-6 space-y-4 sm:flex sm:space-x-5 sm:space-y-0">
                 <a
-                  className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                  className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-primary-500 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
                   href={OFFERS_SUBMIT_URL}>
                   Get Started
                 </a>
@@ -239,7 +239,7 @@ export default function LandingPage() {
           <h2 className="sr-only" id="footer-heading">
             Footer
           </h2>
-          <div className="mx-auto max-w-7xl px-4 pt-0 pb-8 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-7xl px-4 pb-8 pt-0 sm:px-6 lg:px-8">
             <div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
               <div className="flex space-x-6 md:order-2">
                 {footerNavigation.social.map((item) => (

apps/portal/src/pages/offers/index.tsx

@@ -73,7 +73,7 @@ export default function OffersHomePage({
           </Link>
           . ⭐
         </Banner>
-        <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
+        <div className="flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 text-primary-600 sm:text-lg">
           <span>
             <MapPinIcon className="flex h-7 w-7" />
           </span>
@@ -96,10 +96,10 @@ export default function OffersHomePage({
             }}
           />
         </div>
-        <div className="bg-slate-100 py-16 px-4">
+        <div className="bg-slate-100 px-4 py-16">
           <div>
             <div>
-              <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
+              <h1 className="text-center text-4xl font-bold text-primary-600 sm:text-5xl">
                 Tech Offers Repo
               </h1>
             </div>
@@ -108,7 +108,7 @@ export default function OffersHomePage({
               offers.
             </div>
           </div>
-          <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
+          <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-x-4 sm:space-y-0 sm:text-lg">
             <span>Viewing offers for</span>
             <div className="flex items-center space-x-4">
               <JobTitlesTypeahead

apps/portal/src/pages/offers/profile/[offerProfileId].tsx

@@ -235,7 +235,7 @@ export default function OfferProfile() {
           </div>
         </div>
         <div
-          className="bg-white lg:fixed lg:right-0 lg:bottom-0 lg:w-1/3"
+          className="bg-white lg:fixed lg:bottom-0 lg:right-0 lg:w-1/3"
           style={{ top: 64 }}>
           <ProfileComments
             isDisabled={deleteMutation.isLoading}

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -336,7 +336,7 @@ export default function QuestionPage() {
                 rows={5}
               />
             </div>
-            <div className="mt-3 mb-1 flex justify-end">
+            <div className="mb-1 mt-3 flex justify-end">
               <Button
                 disabled={!isDirty || !isValid}
                 label="Contribute"

apps/portal/src/pages/questions/about.tsx

@@ -60,7 +60,7 @@ export default function AboutPage() {
                 Thank you for using our platform! Feel free to submit your
                 feedback / feature request / bug report
                 <a
-                  className="text-primary-600 hover:text-primary-500 ml-1"
+                  className="ml-1 text-primary-600 hover:text-primary-500"
                   href="https://forms.gle/BPbhrcXWcFvCbvvv8"
                   rel="noreferrer"
                   target="_blank">
@@ -79,7 +79,7 @@ export default function AboutPage() {
                 {people.map((person) => (
                   <li key={person.name}>
                     <div className="space-y-4 sm:grid sm:grid-cols-4 sm:gap-6 sm:space-y-0 lg:gap-8">
-                      <div className="aspect-w-2 aspect-h-2 h-0">
+                      <div className="aspect-h-2 aspect-w-2 h-0">
                         <img
                           alt={person.name}
                           className="rounded-lg object-cover shadow-lg"

apps/portal/src/pages/questions/browse.tsx

@@ -508,7 +508,7 @@ export default function QuestionsBrowsePage() {
       <main>
         <QuestionContainer className="relative flex" variant="sm">
           <section className="min-h-0 flex-1 overflow-auto">
-            <div className="my-4 mx-auto flex flex-col items-stretch justify-start gap-6 sm:px-4">
+            <div className="mx-auto my-4 flex flex-col items-stretch justify-start gap-6 sm:px-4">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   const { cityId, countryId, stateId } = data.location;

apps/portal/src/pages/questions/lists.tsx

@@ -88,7 +88,7 @@ export default function ListPage() {
               onClick={() => {
                 setSelectedListIndex(index);
               }}>
-              <p className="text-primary-700 text-md p-3 pl-6 font-medium">
+              <p className="text-md p-3 pl-6 font-medium text-primary-700">
                 {list.name}
               </p>
             </button>
@@ -98,7 +98,7 @@ export default function ListPage() {
                   <Menu.Button className="inline-flex w-full justify-center rounded-md p-2 text-sm font-medium text-white">
                     <EllipsisVerticalIcon
                       aria-hidden="true"
-                      className="hover:text-primary-700 mr-1 h-5 w-5 text-violet-400"
+                      className="mr-1 h-5 w-5 text-violet-400 hover:text-primary-700"
                     />
                   </Menu.Button>
                 </div>

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -388,7 +388,7 @@ export default function ResumeReviewPage() {
                       className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                     />
                     <button
-                      className="hover:text-primary-800 underline"
+                      className="underline hover:text-primary-800"
                       type="button"
                       onClick={() =>
                         onInfoTagClick({
@@ -404,7 +404,7 @@ export default function ResumeReviewPage() {
                       className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                     />
                     <button
-                      className="hover:text-primary-800 underline"
+                      className="underline hover:text-primary-800"
                       type="button"
                       onClick={() =>
                         onInfoTagClick({
@@ -421,7 +421,7 @@ export default function ResumeReviewPage() {
                       className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                     />
                     <button
-                      className="hover:text-primary-800 underline"
+                      className="underline hover:text-primary-800"
                       type="button"
                       onClick={() =>
                         onInfoTagClick({

apps/portal/src/pages/resumes/about.tsx

@@ -45,10 +45,10 @@ export default function AboutUsPage() {
               <div className="flex justify-center text-2xl font-bold">
                 <div className="font-display sm:text-md mx-auto max-w-xl text-2xl font-medium italic tracking-tight text-slate-500">
                   Resume reviews{' '}
-                  <span className="text-primary-500 relative whitespace-nowrap">
+                  <span className="relative whitespace-nowrap text-primary-500">
                     <svg
                       aria-hidden="true"
-                      className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
+                      className="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70"
                       preserveAspectRatio="none"
                       viewBox="0 0 418 42">
                       <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
@@ -86,7 +86,7 @@ export default function AboutUsPage() {
               <p className="text-lg text-slate-500">
                 Submit your feedback
                 <a
-                  className="text-primary-600 hover:text-primary-500 ml-1"
+                  className="ml-1 text-primary-600 hover:text-primary-500"
                   href="https://docs.google.com/forms/d/e/1FAIpQLSf-eCK4ybgewGDCoyStGdpi7e0EativtWU1Iq0HW3evdLEfwQ/viewform?usp=send_form"
                   rel="noreferrer"
                   target="_blank">
@@ -106,7 +106,7 @@ export default function AboutUsPage() {
                 {people.map((person) => (
                   <li key={person.name}>
                     <div className="space-y-4 sm:grid sm:grid-cols-4 sm:gap-6 sm:space-y-0 lg:gap-8">
-                      <div className="aspect-w-2 aspect-h-2 h-0">
+                      <div className="aspect-h-2 aspect-w-2 h-0">
                         <img
                           alt={person.name}
                           className="rounded-lg object-cover shadow-lg"

apps/portal/src/pages/resumes/index.tsx

@@ -454,7 +454,7 @@ export default function ResumeHomePage() {
                       <Disclosure
                         key={filter.id}
                         as="div"
-                        className="border-t border-slate-200 px-4 pt-6 pb-4"
+                        className="border-t border-slate-200 px-4 pb-4 pt-6"
                         defaultOpen={isFiltersOpen[filter.id]}>
                         {({ open }) => (
                           <>
@@ -534,7 +534,7 @@ export default function ResumeHomePage() {
 
       <main className="h-full flex-auto px-8 pb-4">
         <div className="flex justify-start">
-          <div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block">
+          <div className="fixed bottom-0 top-0 mt-24 hidden w-64 overflow-auto lg:block">
             {/* Quick Access Section */}
             <h3 className="text-md font-medium tracking-tight text-gray-900">
               Quick access
@@ -563,7 +563,7 @@ export default function ResumeHomePage() {
                     <Disclosure
                       key={filter.id}
                       as="div"
-                      className="border-b border-slate-200 pt-6 pb-4"
+                      className="border-b border-slate-200 pb-4 pt-6"
                       defaultOpen={isFiltersOpen[filter.id]}>
                       {({ open }) => (
                         <>
@@ -639,7 +639,7 @@ export default function ResumeHomePage() {
             </div>
           </div>
           <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
-            <div className="lg:border-grey-200 z-1 sticky top-16 flex flex-wrap items-center justify-between bg-slate-50 pt-6 pb-2 lg:border-b">
+            <div className="lg:border-grey-200 z-1 sticky top-16 flex flex-wrap items-center justify-between bg-slate-50 pb-2 pt-6 lg:border-b">
               <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none xl:pb-0">
                 <div>
                   <Tabs

apps/portal/src/pages/resumes/submit.tsx

@@ -370,7 +370,7 @@ export default function SubmitResumeForm({
                         fileUploadError
                           ? 'border-danger-600'
                           : 'border-slate-300',
-                        'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-50 py-4 px-4 text-center',
+                        'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-50 px-4 py-4 text-center',
                       )}>
                       <input
                         {...register('file', { required: true })}
@@ -383,20 +383,20 @@ export default function SubmitResumeForm({
                         type="file"
                       />
                       {resumeFile == null ? (
-                        <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
+                        <ArrowUpCircleIcon className="m-auto h-10 w-10 text-primary-500" />
                       ) : (
                         <p
-                          className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
+                          className="cursor-pointer underline underline-offset-1 hover:text-primary-600"
                           onClick={onClickDownload}>
                           {resumeFile.name}
                         </p>
                       )}
                       <label
-                        className="focus-within:ring-primary-500 cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+                        className="cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500 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="ml-1 mr-1 font-light">or</span>
-                        <span className="text-primary-600 hover:text-primary-400 font-medium">
+                        <span className="font-medium text-primary-600 hover:text-primary-400">
                           {resumeFile == null ? 'Select file' : 'Replace file'}
                         </span>
                       </label>
@@ -405,7 +405,7 @@ export default function SubmitResumeForm({
                       </p>
                     </div>
                     {fileUploadError && (
-                      <p className="text-danger-600 text-sm">
+                      <p className="text-sm text-danger-600">
                         {fileUploadError}
                       </p>
                     )}

apps/portal/src/pages/settings.tsx

@@ -55,7 +55,7 @@ function SettingsForm({
                 name: name ? name : undefined,
               });
             }}>
-            <div className="grid grid-cols-1 gap-y-8 gap-x-4 sm:grid-cols-6">
+            <div className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-6">
               <div className="sm:col-span-3">
                 <TextInput
                   description="This name will be used across the entire platform"

apps/portal/src/pages/test__.tsx

@@ -34,7 +34,7 @@ export default function HomePage() {
 
   return (
     <main className="mx-auto max-w-5xl flex-1 overflow-y-auto py-24">
-      <h1 className="text-primary-600 text-center text-4xl font-bold">
+      <h1 className="text-center text-4xl font-bold text-primary-600">
         Test Page
       </h1>
       <div className="mt-8 grid grid-cols-2 gap-8">

apps/portal/src/pages/todos/index.tsx

@@ -39,9 +39,9 @@ export default function TodoList() {
               A list of all Todos added by everyone.
             </p>
           </div>
-          <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
             <Link
-              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"
+              className="inline-flex items-center justify-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:w-auto"
               href="/todos/new">
               Add Todo
             </Link>
@@ -51,7 +51,7 @@ export default function TodoList() {
           <div>Loading...</div>
         ) : (
           <div className="mt-8 flex flex-col">
-            <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="-mx-4 -my-2 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-slate-300">
@@ -120,7 +120,7 @@ export default function TodoList() {
                                 }}>
                                 <input
                                   autoFocus={true}
-                                  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"
+                                  className="block w-full min-w-0 flex-1 rounded-md border-slate-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                                   defaultValue={todo.text}
                                   name="text"
                                   type="text"
@@ -142,7 +142,7 @@ export default function TodoList() {
                           <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pr-6">
                             <input
                               checked={todo.status === 'COMPLETE'}
-                              className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-slate-300"
+                              className="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
                               type="checkbox"
                               onChange={() => {
                                 todoUpdateMutation.mutate({

apps/portal/src/pages/todos/new.tsx

@@ -59,7 +59,7 @@ export default function TodosCreate() {
                 <div className="mt-1 flex rounded-md shadow-sm">
                   <input
                     autoFocus={true}
-                    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"
+                    className="block w-full min-w-0 flex-1 rounded-md border-slate-300 focus:border-primary-500 focus:ring-primary-500 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="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"
+                    className="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 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                     href="/todos">
                     Cancel
                   </Link>
                   <button
-                    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"
+                    className="ml-3 inline-flex justify-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                     type="submit">
                     Save
                   </button>

apps/portal/src/ui/Banner/Banner.tsx

@@ -14,11 +14,11 @@ export default function Banner({ children, size = 'md', onHide }: Props) {
   return (
     <div
       className={clsx(
-        'bg-primary-600 relative',
+        'relative bg-primary-600',
         size === 'sm' && 'text-sm',
         size === 'xs' && 'text-xs',
       )}>
-      <div className="mx-auto max-w-7xl py-2 px-3 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl px-3 py-2 sm:px-6 lg:px-8">
         <div
           className={clsx('text-center sm:px-16', onHide != null && 'pr-16')}>
           <p className="font-medium text-white">{children}</p>
@@ -27,13 +27,13 @@ export default function Banner({ children, size = 'md', onHide }: Props) {
           <div
             className={clsx(
               'absolute inset-y-0 right-0 flex items-start sm:items-start',
-              size === 'md' && 'pt-2 pr-2',
+              size === 'md' && 'pr-2 pt-2',
-              size === 'sm' && 'pt-2 pr-2',
+              size === 'sm' && 'pr-2 pt-2',
-              size === 'xs' && 'pt-1.5 pr-2',
+              size === 'xs' && 'pr-2 pt-1.5',
             )}>
             <button
               className={clsx(
-                'hover:bg-primary-400 flex rounded-md focus:outline-none focus:ring-2 focus:ring-white',
+                'flex rounded-md hover:bg-primary-400 focus:outline-none focus:ring-2 focus:ring-white',
                 size === 'md' && 'p-1',
                 size === 'sm' && 'p-0.5',
                 size === 'xs' && 'p-0.5',

apps/portal/src/ui/Button/Button.tsx

@@ -150,11 +150,11 @@ export default function Button({
 
   const commonProps = {
     'aria-controls': ariaControls ?? undefined,
-    'aria-label': isLabelHidden ? ariaLabel ?? label : undefined,
+    'aria-label': isLabelHidden ? (ariaLabel ?? label) : undefined,
     children,
     className: clsx(
       display === 'block' ? 'flex w-full justify-center' : 'inline-flex',
-      'whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'items-center whitespace-nowrap border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
       disabled ? variantDisabledClasses[variant] : variantClasses[variant],
       disabled && 'pointer-events-none',
       isLabelHidden ? iconOnlySizeClasses[size] : sizeClasses[size],

apps/portal/src/ui/CheckboxInput/CheckboxInput.tsx

@@ -89,7 +89,7 @@ function CheckboxInput(
         </div>
       </div>
       {errorMessage && (
-        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+        <p className="mt-2 text-sm text-danger-600" id={errorId}>
           {errorMessage}
         </p>
       )}

apps/portal/src/ui/CheckboxList/CheckboxList.tsx

@@ -36,7 +36,7 @@ export default function CheckboxList({
         className={clsx(
           'space-y-2',
           orientation === 'horizontal' &&
-            'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+            'sm:flex sm:items-center sm:space-x-10 sm:space-y-0',
         )}
         role="group">
         {children}

apps/portal/src/ui/Collapsible/Collapsible.tsx

@@ -17,13 +17,13 @@ export default function Collapsible({ children, defaultOpen, label }: Props) {
           <Disclosure.Button className="-mx-2.5 box-content flex w-full justify-between rounded-lg px-2.5 py-2 text-left text-sm font-medium text-slate-900 hover:bg-slate-100 focus:outline-none focus-visible:ring focus-visible:ring-slate-500 focus-visible:ring-opacity-75">
             <ChevronDownIcon
               className={clsx(
-                'mr-1 -ml-1 h-5 w-5 text-slate-500',
+                '-ml-1 mr-1 h-5 w-5 text-slate-500',
                 open && 'rotate-180 transform',
               )}
             />
             <span className="flex-1">{label}</span>
           </Disclosure.Button>
-          <Disclosure.Panel className="w-full pt-1 pb-2 text-sm text-gray-500">
+          <Disclosure.Panel className="w-full pb-2 pt-1 text-sm text-gray-500">
             {children}
           </Disclosure.Panel>
         </>

apps/portal/src/ui/Dialog/Dialog.tsx

@@ -50,7 +50,7 @@ export default function Dialog({
               leave="ease-in duration-200"
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <HeadlessDialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              <HeadlessDialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div>
                   {TopIcon != null && (
                     <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">

apps/portal/src/ui/DropdownMenu/DropdownMenu.tsx

@@ -83,7 +83,7 @@ export default function DropdownMenu({
         <Menu.Items
           className={clsx(
             alignmentClasses[align],
-            'ring-primary-500 absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+            'absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-primary-500 ring-opacity-5 focus:outline-none',
           )}>
           <div className="py-1">{children}</div>
         </Menu.Items>

apps/portal/src/ui/DropdownMenu/DropdownMenuItem.tsx

@@ -23,7 +23,7 @@ export default function DropdownMenuItem({
           className: clsx(
             isSelected ? 'font-medium text-slate-900' : 'text-slate-500',
             active && 'bg-slate-100',
-            'block px-4 py-2 text-sm w-full text-left',
+            'block w-full px-4 py-2 text-left text-sm',
           ),
           onClick,
         };

apps/portal/src/ui/Pagination/Pagination.tsx

@@ -24,9 +24,9 @@ function PaginationPage({
     <button
       aria-current={isCurrent}
       className={clsx(
-        'focus:ring-primary-500 focus:border-primary-500 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20 focus:outline-none focus:ring-1',
+        'relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500',
         isCurrent
-          ? 'border-primary-500 bg-primary-50 text-primary-600 z-10'
+          ? 'z-10 border-primary-500 bg-primary-50 text-primary-600'
           : 'border-slate-300 bg-white text-slate-500 hover:bg-slate-50',
       )}
       disabled={isCurrent}
@@ -113,7 +113,7 @@ export default function Pagination({
           'relative inline-flex items-center rounded-l-md border border-slate-300 px-2 py-2 text-sm font-medium focus:z-20',
           isPrevButtonDisabled
             ? 'text-slate-300'
-            : 'focus:ring-primary-500 focus:border-primary-500 bg-white text-slate-500 hover:bg-slate-50 focus:outline-none focus:ring-1',
+            : 'bg-white text-slate-500 hover:bg-slate-50 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500',
         )}
         disabled={isPrevButtonDisabled}
         type="button"
@@ -129,7 +129,7 @@ export default function Pagination({
           'relative inline-flex items-center rounded-r-md border border-slate-300 px-2 py-2 text-sm font-medium focus:z-20',
           isNextButtonDisabled
             ? 'text-slate-300'
-            : 'focus:ring-primary-500 focus:border-primary-500 bg-white text-slate-500 hover:bg-slate-50 focus:outline-none focus:ring-1',
+            : 'bg-white text-slate-500 hover:bg-slate-50 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500',
         )}
         disabled={isNextButtonDisabled}
         type="button"

apps/portal/src/ui/RadioList/RadioList.tsx

@@ -61,7 +61,7 @@ export default function RadioList<T>({
           className={clsx(
             'space-y-2',
             orientation === 'horizontal' &&
-              'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+              'sm:flex sm:items-center sm:space-x-10 sm:space-y-0',
           )}
           role="radiogroup">
           {children}

apps/portal/src/ui/RadioList/RadioListItem.tsx

@@ -34,7 +34,7 @@ export default function RadioListItem<T>({
             context?.value != null ? value === context?.value : undefined
           }
           className={clsx(
-            'text-primary-600 focus:ring-primary-500 h-4 w-4 border-slate-300',
+            'h-4 w-4 border-slate-300 text-primary-600 focus:ring-primary-500',
             disabled && 'bg-slate-100',
           )}
           defaultChecked={

apps/portal/src/ui/Select/Select.tsx

@@ -113,7 +113,7 @@ function Select<T>(
         ))}
       </select>
       {errorMessage && (
-        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+        <p className="mt-2 text-sm text-danger-600" id={errorId}>
           {errorMessage}
         </p>
       )}

apps/portal/src/ui/SlideOut/SlideOut.tsx

@@ -84,7 +84,7 @@ export default function SlideOut({
               <div className="flex items-center justify-between px-4">
                 <h2 className="text-lg font-medium text-slate-900">{title}</h2>
                 <button
-                  className="focus:ring-primary-500 -mr-2 flex h-10 w-10 items-center justify-center rounded-full p-2 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset"
+                  className="-mr-2 flex h-10 w-10 items-center justify-center rounded-full p-2 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
                   type="button"
                   onClick={() => onClose?.()}>
                   <span className="sr-only">Close menu</span>

apps/portal/src/ui/Tabs/Tabs.tsx

@@ -29,8 +29,8 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
               className: clsx(
                 isSelected
                   ? 'bg-primary-100 text-primary-700'
-                  : 'hover:bg-slate-100 text-slate-500 hover:text-slate-700',
+                  : 'text-slate-500 hover:bg-slate-100 hover:text-slate-700',
-                'px-3 py-2 font-medium text-sm rounded-md',
+                'rounded-md px-3 py-2 text-sm font-medium',
               ),
               onClick: onChange != null ? () => onChange(tab.value) : undefined,
               role: 'tab',

apps/portal/src/ui/Toast/Toast.tsx

@@ -26,7 +26,7 @@ function ToastIcon({ variant }: Readonly<{ variant: ToastVariant }>) {
   switch (variant) {
     case 'success':
       return (
-        <CheckIcon aria-hidden="true" className="text-success-500 h-6 w-6" />
+        <CheckIcon aria-hidden="true" className="h-6 w-6 text-success-500" />
       );
     case 'failure':
       return (

apps/portal/src/ui/Typeahead/Typeahead.tsx

@@ -193,7 +193,7 @@ export default function Typeahead({
                   textSizes[textSize],
                 )}>
                 {options.length === 0 && query !== '' ? (
-                  <div className="relative cursor-default select-none py-2 px-4 text-slate-700">
+                  <div className="relative cursor-default select-none px-4 py-2 text-slate-700">
                     {noResultsMessage}
                   </div>
                 ) : (
@@ -202,7 +202,7 @@ export default function Typeahead({
                       key={option.id}
                       className={({ active }) =>
                         clsx(
-                          'relative cursor-default select-none py-2 px-4 text-slate-500',
+                          'relative cursor-default select-none px-4 py-2 text-slate-500',
                           active && 'bg-slate-100',
                         )
                       }
@@ -238,7 +238,7 @@ export default function Typeahead({
         </div>
       </Combobox>
       {errorMessage && (
-        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+        <p className="mt-2 text-sm text-danger-600" id={errorId}>
           {errorMessage}
         </p>
       )}

apps/portal/src/utils/questions/withHref.tsx

@@ -10,7 +10,7 @@ const withHref = <Props extends Record<string, unknown>>(
 
     return (
       <a
-        className="ring-primary-500 rounded-md focus:ring-2 focus-visible:outline-none active:bg-slate-100"
+        className="rounded-md ring-primary-500 focus:ring-2 focus-visible:outline-none active:bg-slate-100"
         href={href}>
         <Component {...(others as unknown as Props)} />
       </a>

apps/website/blog/2022-07-09-getting-a-tech-job-as-an-undergraduate.md

@@ -24,7 +24,6 @@ In most companies, the resume stage is the most important as it is the first sta
 2. As far as possible, <strong>attend career talks</strong> by your favorite companies because hiring managers are there and you can get some feedback about your resume. It is indeed helpful because you know what to look out for when applying.
 
 3. Keep your sentences short and sweet, else you are out of the game.
-
    - <strong>Good example:</strong> "Developed a full-stack website that garnered positive responses from faculty and administration about course visualization." You need not provide tech stacks and let alone, links here. The sentence here is short and sweet and all in past tense.
 
    - <strong>Bad example:</strong> "Was a project manager for two projects- AI_ducation as well as the lift project for ALEF. Helped day-to-day operations by communicating with clients in Mandarin to map business requirements to technical requirements.". Over here, the sentence is long and things can be <strong>separated out into points</strong>. Furthermore, it does not describe the outcome of the project enough to say <strong>"Why should you be hired?"</strong>.
@@ -44,7 +43,6 @@ I am about to recommend relevant sections to go in sequentially and how to syste
 2. Go to your Glassdoor page and pick out some of the past relevant interview questions that your company has done to get a gauge of what to expect. If you are unable to do those past questions, I suggest revising a good amount about the common topics. One common topic is array and hash table design. You can refer to the [coding interview rubrics section](/coding-interview-rubrics/) get to know your interview rubrics. It helps and you know what to do.
 
 3. Know and try various techniques for each LeetCode question. It's not purely about variety but more about if you were to even come back to the same question, will you be able to give a more optimal solution? If you don't know where to get started especially when solving problems in general refer to this [coding interview techniques section](/coding-interview-techniques/).
-
    - Start with a whiteboard or pen and paper. Show your thought process.
    - In most companies, if you were to show your thought process while doing, interviewers tend to favour candidates who do this. If you are not confident, start thinking that you are explaining and teaching a 12 year old child about how to solve this question.
    - Code it out and write your own test cases. Get used to the HackerRank or LeetCode IDEs.

apps/website/src/css/custom.css

@@ -25,9 +25,10 @@
   --ifm-color-primary-lighter: #8a8adf;
   --ifm-color-primary-lightest: #afafe9;
 
-  --ifm-font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont,
+  --ifm-font-family-base:
-    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
   --ifm-font-size-base: 16px;
 
   --ifm-footer-padding-vertical: 3rem;

package.json

@@ -16,13 +16,14 @@
     "dev:ui": "turbo dev --filter=storybook... --filter=ui...",
     "dev:website": "turbo dev --filter=website...",
     "dev:all": "turbo dev --no-cache --parallel --continue",
-    "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,md,mdx}\"",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
     "lint": "turbo lint",
     "test": "turbo test",
     "tsc": "turbo tsc"
   },
   "devDependencies": {
-    "prettier": "^2.7.1",
+    "oxfmt": "^0.41.0",
     "turbo": "1.5.6"
   },
   "engines": {