Start project modal updates

feat/project
Kamran Ahmed 6 months ago
parent cb849d70e6
commit 2649e37b27
  1. 2
      .astro/settings.json
  2. 51
      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>
</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> </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={'3'} /> 2. Complete the project according to the requirements and push your code
<p className="text-gray-700"> to the GitHub repository.
Add a readme file with instructions on how to run the project. Make </p>
sure to include the{' '}
<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 <button
onClick={() => { onClick={() => {
copyText(projectUrl); copyText(projectUrl);
}} }}
className="font-semibold" className="font-semibold"
> >
project page URL{' '}
{!isCopied && ( {!isCopied && (
<CopyIcon className="inline-block h-4 w-4" strokeWidth={2.5} /> <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 && ( {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>{' '} </button>
in the readme file.
</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'} />
<p className="text-gray-700">
Submit your repository URL to help others learn and get feedback
from the community. from the community.
</p> </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