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/UserProgress/ModalLoader.tsx

@@ -11,9 +11,9 @@ export function ModalLoader(props: ModalLoaderProps) {
   const { isLoading, text, error } = props;
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto flex h-full w-full items-center justify-center">
-        <div className="popup-body relative rounded-lg bg-white p-5 shadow">
+        <div className="popup-body relative rounded-lg bg-white p-5 shadow-sm">
           <div className="flex items-center">
             {isLoading && (
               <>

src/components/UserProgress/UserCustomProgressModal.tsx

@@ -156,12 +156,12 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
   return (
     <div
       id={'user-progress-modal'}
-      className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+      className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
     >
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow-sm`}
         >
           <UserProgressModalHeader
             isLoading={isLoading}

src/components/UserProgress/UserProgressModal.tsx

@@ -208,12 +208,12 @@ export function UserProgressModal(props: ProgressMapProps) {
   return (
     <div
       id={'user-progress-modal'}
-      className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+      className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
     >
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow-sm`}
         >
           <UserProgressModalHeader
             isLoading={isLoading}

src/components/UserProgress/UserProgressModalHeader.tsx

@@ -35,7 +35,7 @@ export function UserProgressModalHeader(props: UserProgressModalHeaderProps) {
       <p
         className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`}
       >
-        <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+        <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
           <span>{progressPercentage}</span>% Done
         </span>
 
@@ -48,7 +48,7 @@ export function UserProgressModalHeader(props: UserProgressModalHeaderProps) {
           isLoading ? 'striped-loader' : ''
         }`}
       >
-        <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+        <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
           <span>{progressPercentage}</span>% Done
         </span>