Voting and active timeline

src/components/Projects/StartProjectModal.tsx

@@ -160,7 +160,7 @@ export function StartProjectModal(props: StartProjectModalProps) {
       </div>
 
       <button
-        className="w-full rounded-md bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        className="w-full rounded-md bg-black py-2 text-sm font-medium text-white hover:bg-gray-900"
         onClick={onClose}
       >
         Close

src/components/Projects/StatusStepper/MilestoneStep.tsx

@@ -4,10 +4,20 @@ type MilestoneStepProps = {
   icon: LucideIcon;
   text: string;
   isCompleted?: boolean;
+  isActive?: boolean;
 };
 
 export function MilestoneStep(props: MilestoneStepProps) {
-  const { icon: DisplayIcon, text, isCompleted } = props;
+  const { icon: DisplayIcon, text, isActive = false, isCompleted } = props;
+
+  if (isActive) {
+    return (
+      <span className="flex cursor-default items-center gap-1.5 rounded-md border border-dashed border-current px-1.5 py-0.5 text-sm font-medium text-gray-400">
+        <DisplayIcon size={14} />
+        <span>{text}</span>
+      </span>
+    );
+  }
 
   if (isCompleted) {
     return (
@@ -24,4 +34,4 @@ export function MilestoneStep(props: MilestoneStepProps) {
       <span>{text}</span>
     </span>
   );
-}
+}

src/components/Projects/StatusStepper/ProjectStepper.tsx

@@ -63,9 +63,9 @@ export function ProjectStepper(props: ProjectStepperProps) {
     if (upvotes >= 10) {
       setActiveStep(4);
     } else if (upvotes >= 5) {
-      setActiveStep(4);
-    } else if (submittedAt) {
       setActiveStep(3);
+    } else if (submittedAt) {
+      setActiveStep(2);
     } else if (startedAt) {
       setActiveStep(1);
     }
@@ -155,7 +155,7 @@ export function ProjectStepper(props: ProjectStepperProps) {
             . Follow{' '}
             <button
               className={cn('underline underline-offset-2 hover:text-black', {
-                'text-purple-200 hover:text-white': isSticky,
+                'text-purple-100 hover:text-white': isSticky,
               })}
               onClick={() => {
                 setIsStartingProject(true);
@@ -166,6 +166,32 @@ export function ProjectStepper(props: ProjectStepperProps) {
             to get most out of it.
           </>
         )}
+        {activeStep >= 2 && (
+          <>
+            Congrats on submitting your solution.{' '}
+            <a
+              href={projectStatus.repositoryUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn('underline underline-offset-2 hover:text-black', {
+                'text-purple-100 hover:text-white': isSticky,
+              })}
+            >
+              View your submission
+            </a>{' '}
+            or{' '}
+            <button
+              className={cn('underline underline-offset-2 hover:text-black', {
+                'text-purple-100 hover:text-white': isSticky,
+              })}
+              onClick={() => {
+                setIsSubmittingProject(true);
+              }}
+            >
+              update your submission
+            </button>
+          </>
+        )}
       </div>
 
       <div className="flex min-h-[60px] items-center justify-between gap-3 px-4">
@@ -202,15 +228,25 @@ export function ProjectStepper(props: ProjectStepperProps) {
         />
         <StepperStepSeparator isActive={activeStep > 1} />
         <MilestoneStep
+          isActive={activeStep === 2}
           isCompleted={activeStep > 2}
           icon={Flag}
-          text={'5 upvotes'}
+          text={
+            activeStep == 2
+              ? `${projectStatus.upvotes} / 5 upvotes`
+              : `5 upvotes`
+          }
         />
         <StepperStepSeparator isActive={activeStep > 2} />
         <MilestoneStep
+          isActive={activeStep === 3}
           isCompleted={activeStep > 3}
           icon={Flag}
-          text={'10 upvotes'}
+          text={
+            activeStep == 3
+              ? `${projectStatus.upvotes} / 10 upvotes`
+              : `10 upvotes`
+          }
         />
       </div>
     </div>

src/components/Projects/SubmitProjectModal.tsx

@@ -1,4 +1,5 @@
 import { CheckIcon, CopyIcon, X } from 'lucide-react';
+import { CheckIcon as ReactCheckIcon } from '../ReactIcons/CheckIcon.tsx';
 import { Modal } from '../Modal';
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
@@ -39,9 +40,9 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
   const [repoUrl, setRepoUrl] = useState(defaultRepositoryUrl);
   const [verificationChecks, setVerificationChecks] =
     useState<VerificationChecksType>({
-      repositoryExists: 'pending',
+      repositoryExists: defaultRepositoryUrl ? 'success' : 'pending',
-      readmeExists: 'pending',
+      readmeExists: defaultRepositoryUrl ? 'success' : 'pending',
-      projectUrlExists: 'pending',
+      projectUrlExists: defaultRepositoryUrl ? 'success' : 'pending',
     });
 
   const projectUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}`;
@@ -192,6 +193,17 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
     }
   };
 
+  if (successMessage) {
+    return (
+      <Modal onClose={onClose} bodyClassName="h-auto p-4">
+        <div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12">
+          <ReactCheckIcon additionalClasses={'h-12 text-green-500 w-12'} />
+          <p className="text-lg font-medium">{successMessage}</p>
+        </div>
+      </Modal>
+    );
+  }
+
   return (
     <Modal onClose={onClose} bodyClassName="h-auto p-4">
       <h2 className="mb-2 flex items-center gap-2.5 text-2xl font-semibold">