Start project modal updates

feat/project
Kamran Ahmed 6 months ago
parent cb849d70e6
commit 2649e37b27
  1. 2
      .astro/settings.json
  2. 79
      src/components/Projects/StartProjectModal.tsx
  3. 27
      src/components/TeamDropdown/TeamDropdown.tsx

@ -3,6 +3,6 @@
"enabled": false "enabled": false
}, },
"_variables": { "_variables": {
"lastUpdateCheck": 1722461514438 "lastUpdateCheck": 1723855511353
} }
} }

@ -96,7 +96,7 @@ export function StartProjectModal(props: StartProjectModalProps) {
<span className="mr-1.5 font-normal">Project started</span>{' '} <span className="mr-1.5 font-normal">Project started</span>{' '}
<span className="font-semibold">{formattedStartedAt}</span> <span className="font-semibold">{formattedStartedAt}</span>
</p> </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 Start Building
</h2> </h2>
<p className="text-gray-700"> <p className="text-gray-700">
@ -104,49 +104,48 @@ export function StartProjectModal(props: StartProjectModalProps) {
</p> </p>
<div className="my-5 space-y-1.5 marker:text-gray-400"> <div className="my-5 space-y-1.5 marker:text-gray-400">
<div className="flex flex-row items-start gap-2"> <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
<StepLabel label={'1'} /> 1. Create a new public repository on GitHub.
<p className="text-gray-700">Create a repository on GitHub</p> </p>
</div>
<div className="flex flex-row items-start gap-2"> <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
<StepLabel label={'2'} /> 2. Complete the project according to the requirements and push your code
<p className="text-gray-700"> to the GitHub repository.
Complete the task and push it to GitHub </p>
</p>
</div> <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
<div className="flex flex-row items-start gap-2"> 3. Add a README file with instructions to run the project and the{' '}
<StepLabel label={'3'} /> <button
<p className="text-gray-700"> onClick={() => {
Add a readme file with instructions on how to run the project. Make copyText(projectUrl);
sure to include the{' '} }}
<button className="font-semibold"
onClick={() => { >
copyText(projectUrl); {!isCopied && (
}} <span className="text-purple-600">
className="font-semibold" project page URL
> <CopyIcon
project page URL{' '} className="relative -top-px ml-1 inline-block h-4 w-4"
{!isCopied && ( strokeWidth={2.5}
<CopyIcon className="inline-block h-4 w-4" strokeWidth={2.5} /> />
)} </span>
{isCopied && ( )}
{isCopied && (
<>
copied URL
<Check className="inline-block h-4 w-4" strokeWidth={2.5} /> <Check className="inline-block h-4 w-4" strokeWidth={2.5} />
)} </>
</button>{' '} )}
in the readme file. </button>
</p> </p>
</div> <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
<div className="flex flex-row items-start gap-2"> 4. Once done, submit your solution to help the others learn and get feedback
<StepLabel label={'4'} /> from the community.
<p className="text-gray-700"> </p>
Submit your repository URL to help others learn and get feedback
from the community.
</p>
</div>
</div> </div>
<div className="mb-5"> <div className="mb-5">
<p> <p className='text-sm'>
If you get stuck, you can always ask for help in the community{' '} If you get stuck, you can always ask for help in the community{' '}
<a <a
href="https://roadmap.sh/discord" href="https://roadmap.sh/discord"

@ -32,24 +32,6 @@ export function TeamDropdown() {
const user = useAuth(); const user = useAuth();
const { teamId } = useTeamId(); 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 teamList = useStore($teamList);
const currentTeam = useStore($currentTeam); const currentTeam = useStore($currentTeam);
@ -102,15 +84,6 @@ export function TeamDropdown() {
<div className="relative mr-2"> <div className="relative mr-2">
<span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400"> <span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400">
<span>Choose Team</span> <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> </span>
<button <button
className="relative flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100" className="relative flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"

Loading…
Cancel
Save