Migrate to Tailwind 4 + Editor Upgrade (#8465)

* wip

* fix: roadmap editor

* fix: padding

* wip

* fix: remove editor package

* wip

* fix: update pnpm lock

* Add contribution docs

* UI changes for TW4

* Update deployment workflow

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>

src/components/Projects/ListProjectSolutions.tsx

@@ -233,7 +233,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
           </p>
         </div>
         {!isLoading && (
-          <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2">
             <SortProjects
               selectedSort={pageState.sort}
               onSelectSort={(sort) => {

src/components/Projects/ProjectCard.tsx

@@ -46,8 +46,8 @@ export function ProjectCard(props: ProjectCardProps) {
       <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
         {isLoadingStatus ? (
           <>
-            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
-            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-24 animate-pulse rounded-sm bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-gray-200" />{' '}
           </>
         ) : (
           <>

src/components/Projects/ProjectSolutionRow.tsx

@@ -61,7 +61,7 @@ export function ProjectSolutionRow(props: ProjectSolutionRowProps) {
               : '/images/default-avatar.png'
           }
           alt={solution.user.name}
-          className="h-7 w-7 flex-shrink-0 rounded-full sm:h-8 sm:w-8"
+          className="h-7 w-7 shrink-0 rounded-full sm:h-8 sm:w-8"
         />
         <div className="min-w-0 flex-auto">
           <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5">

src/components/Projects/ProjectsPage.tsx

@@ -114,7 +114,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
       <div className="container relative flex flex-col gap-4 sm:flex-row">
         <div
           className={cn(
-            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-gradient-to-l sm:pt-6',
+            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-linear-to-l sm:pt-6',
             {
               'hidden sm:flex': !isFilterOpen,
               'z-50 flex': isFilterOpen,
@@ -171,7 +171,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
             </div>
           </div>
         </div>
-        <div className="flex flex-grow flex-col pb-20 pt-2 sm:pt-6">
+        <div className="flex grow flex-col pb-20 pt-2 sm:pt-6">
           <div className="mb-4 flex items-center justify-between text-sm text-gray-500">
             <h3 className={'flex items-center'}>
               <Box size={15} className="mr-1" strokeWidth={2} />

src/components/Projects/SelectLanguages.tsx

@@ -114,7 +114,7 @@ export function SelectLanguages(props: SelectLanguagesProps) {
   };
 
   return (
-    <div className="relative flex flex-shrink-0">
+    <div className="relative flex shrink-0">
       <div className="relative">
         <button
           className="flex items-center gap-1 rounded-md border border-gray-300 py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900"
@@ -148,7 +148,7 @@ export function SelectLanguages(props: SelectLanguagesProps) {
             <input
               ref={searchInputRef}
               type="text"
-              className="w-full rounded-md border border-gray-200 py-1.5 pl-9 pr-3 text-sm focus:border-gray-300 focus:outline-none"
+              className="w-full rounded-md border border-gray-200 py-1.5 pl-9 pr-3 text-sm focus:border-gray-300 focus:outline-hidden"
               placeholder="Search languages..."
               value={searchQuery}
               onChange={(e) => {

src/components/Projects/SortProjects.tsx

@@ -32,7 +32,7 @@ export function SortProjects(props: SortProjectsProps) {
     sortOptions[0];
 
   return (
-    <div className="relative flex-shrink-0" ref={dropdownRef}>
+    <div className="relative shrink-0" ref={dropdownRef}>
       <button
         className="flex items-center gap-1 rounded-md border border-gray-300 py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900"
         onClick={() => setIsOpen(!isOpen)}

src/components/Projects/StartProjectModal.tsx

@@ -15,7 +15,7 @@ function StepLabel(props: StepLabelProps) {
   const { label } = props;
 
   return (
-    <span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
+    <span className="shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
       {label}
     </span>
   );

src/components/Projects/StatusStepper/StepperStepSeparator.tsx

@@ -9,7 +9,7 @@ export function StepperStepSeparator(props: StepperStepSeparatorProps) {
 
   return (
     <hr
-      className={cn('flex-grow hidden sm:flex border border-gray-300', {
+      className={cn('grow hidden sm:flex border border-gray-300', {
         'border-green-500': isActive,
       })}
     />

src/components/Projects/SubmissionRequirement.tsx

@@ -23,11 +23,11 @@ export function SubmissionRequirement(props: SubmissionRequirementProps) {
       {!isLoading && (
         <>
           {status === 'pending' ? (
-            <CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" />
+            <CircleDashed className="h-4 w-4 shrink-0 text-gray-400" />
           ) : status === 'success' ? (
-            <CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" />
+            <CheckIcon className="h-4 w-4 shrink-0 text-green-800" />
           ) : (
-            <X className="h-4 w-4 flex-shrink-0 text-yellow-800" />
+            <X className="h-4 w-4 shrink-0 text-yellow-800" />
           )}
         </>
       )}

src/components/Projects/SubmitProjectModal.tsx

@@ -273,7 +273,7 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
       <form className="mt-4" onSubmit={handleSubmit}>
         <input
           type="text"
-          className="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-gray-500 focus:outline-none"
+          className="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-gray-500 focus:outline-hidden"
           placeholder="https://github.com/you/solution-repo"
           value={repoUrl}
           onChange={(e) => setRepoUrl(e.target.value)}

src/components/Projects/SubmitSuccessModal.tsx

@@ -33,7 +33,7 @@ export function SubmitSuccessModal(props: SubmitSuccessModalProps) {
             type="text"
             readOnly={true}
             value={projectSolutionUrl}
-            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-none"
+            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-hidden"
             onClick={(e) => {
               e.currentTarget.select();
             }}

src/components/Projects/VoteButton.tsx

@@ -13,7 +13,7 @@ export function VoteButton(props: VoteButtonProps) {
   return (
     <button
       className={cn(
-        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
+        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-hidden',
         {
           'bg-gray-100 text-orange-600 hover:text-orange-700': isActive,
           'bg-transparent text-gray-500 hover:text-black': !isActive,