From 2649e37b27865655f65e39372622d8dd1b5ae41a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 17 Aug 2024 03:17:00 +0100
Subject: [PATCH] Start project modal updates

---
 .astro/settings.json                          |  2 +-
 src/components/Projects/StartProjectModal.tsx | 79 +++++++++----------
 src/components/TeamDropdown/TeamDropdown.tsx  | 27 -------
 3 files changed, 40 insertions(+), 68 deletions(-)

diff --git a/.astro/settings.json b/.astro/settings.json
index 4e5c9dc23..76d2425cb 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1722461514438
+		"lastUpdateCheck": 1723855511353
 	}
 }
\ No newline at end of file
diff --git a/src/components/Projects/StartProjectModal.tsx b/src/components/Projects/StartProjectModal.tsx
index f6b4392de..69212ee6e 100644
--- a/src/components/Projects/StartProjectModal.tsx
+++ b/src/components/Projects/StartProjectModal.tsx
@@ -96,7 +96,7 @@ export function StartProjectModal(props: StartProjectModalProps) {
         <span className="mr-1.5 font-normal">Project started</span>{' '}
         <span className="font-semibold">{formattedStartedAt}</span>
       </p>
-      <h2 className="mb-0.5 mt-5 text-2xl font-semibold text-gray-800">
+      <h2 className="mb-1 mt-5 text-2xl font-semibold text-gray-800">
         Start Building
       </h2>
       <p className="text-gray-700">
@@ -104,49 +104,48 @@ export function StartProjectModal(props: StartProjectModalProps) {
       </p>
 
       <div className="my-5 space-y-1.5 marker:text-gray-400">
-        <div className="flex flex-row items-start gap-2">
-          <StepLabel label={'1'} />
-          <p className="text-gray-700">Create a repository on GitHub</p>
-        </div>
-        <div className="flex flex-row items-start gap-2">
-          <StepLabel label={'2'} />
-          <p className="text-gray-700">
-            Complete the task and push it to GitHub
-          </p>
-        </div>
-        <div className="flex flex-row items-start gap-2">
-          <StepLabel label={'3'} />
-          <p className="text-gray-700">
-            Add a readme file with instructions on how to run the project. Make
-            sure to include the{' '}
-            <button
-              onClick={() => {
-                copyText(projectUrl);
-              }}
-              className="font-semibold"
-            >
-              project page URL{' '}
-              {!isCopied && (
-                <CopyIcon className="inline-block h-4 w-4" strokeWidth={2.5} />
-              )}
-              {isCopied && (
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          1. Create a new public repository on GitHub.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          2. Complete the project according to the requirements and push your code
+          to the GitHub repository.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          3. Add a README file with instructions to run the project and the{' '}
+          <button
+            onClick={() => {
+              copyText(projectUrl);
+            }}
+            className="font-semibold"
+          >
+            {!isCopied && (
+              <span className="text-purple-600">
+                project page URL
+                <CopyIcon
+                  className="relative -top-px ml-1 inline-block h-4 w-4"
+                  strokeWidth={2.5}
+                />
+              </span>
+            )}
+            {isCopied && (
+              <>
+                copied URL
                 <Check className="inline-block h-4 w-4" strokeWidth={2.5} />
-              )}
-            </button>{' '}
-            in the readme file.
-          </p>
-        </div>
-        <div className="flex flex-row items-start gap-2">
-          <StepLabel label={'4'} />
-          <p className="text-gray-700">
-            Submit your repository URL to help others learn and get feedback
-            from the community.
-          </p>
-        </div>
+              </>
+            )}
+          </button>
+        </p>
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          4. Once done, submit your solution to help the others learn and get feedback
+          from the community.
+        </p>
       </div>
 
       <div className="mb-5">
-        <p>
+        <p className='text-sm'>
           If you get stuck, you can always ask for help in the community{' '}
           <a
             href="https://roadmap.sh/discord"
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index e4979d72b..9d6c1c82e 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -32,24 +32,6 @@ export function TeamDropdown() {
   const user = useAuth();
   const { teamId } = useTeamId();
 
-  const [shouldShowTeamsIndicator, setShouldShowTeamsIndicator] =
-    useState(false);
-
-  useEffect(() => {
-    // Show team dropdown "New" indicator to first 3 refreshes
-    const viewedTeamsCount = localStorage.getItem('viewedTeamsCount');
-    const viewedTeamsCountNumber = parseInt(viewedTeamsCount || '0', 10);
-    const shouldShowTeamIndicator = viewedTeamsCountNumber < 5;
-
-    setShouldShowTeamsIndicator(shouldShowTeamIndicator);
-    if (shouldShowTeamIndicator) {
-      localStorage.setItem(
-        'viewedTeamsCount',
-        (viewedTeamsCountNumber + 1).toString(),
-      );
-    }
-  }, []);
-
   const teamList = useStore($teamList);
   const currentTeam = useStore($currentTeam);
 
@@ -102,15 +84,6 @@ export function TeamDropdown() {
       <div className="relative mr-2">
         <span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400">
           <span>Choose Team</span>
-
-          {shouldShowTeamsIndicator && (
-            <span className="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
-              <span className="relative flex items-center">
-                <span className="relative rounded-full bg-gray-200 p-1 text-xs" />
-                <span className="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
-              </span>
-            </span>
-          )}
         </span>
         <button
           className="relative flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"