From 35148cb8a3ed6fe5bfa3efdaff6e6935c60356dd Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 28 Jul 2023 18:46:36 +0100
Subject: [PATCH] Responsiveness

---
 src/components/AccountSidebar.astro           |  22 +--
 src/components/CreateTeam/CreateTeamForm.tsx  |  10 +-
 src/components/CreateTeam/RoadmapSelector.tsx |   2 +-
 src/components/CreateTeam/Step0.tsx           |   6 +-
 src/components/CreateTeam/Step1.tsx           |   2 +-
 src/components/CreateTeam/Step2.tsx           |  38 ++--
 src/components/CreateTeam/Step3.tsx           |   8 +-
 .../Navigation/AccountDropdown.astro          |   8 +
 src/components/TeamDropdown/TeamDropdown.tsx  | 170 +++++++++---------
 src/components/TeamSidebar.tsx                |   2 +-
 10 files changed, 148 insertions(+), 120 deletions(-)

diff --git a/src/components/AccountSidebar.astro b/src/components/AccountSidebar.astro
index 1fac87fcc..93553f3ec 100644
--- a/src/components/AccountSidebar.astro
+++ b/src/components/AccountSidebar.astro
@@ -66,17 +66,17 @@ const sidebarLinks = [
     id='settings-menu-dropdown'
     class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
   >
-    <!--<li>-->
-    <!--  <a-->
-    <!--    href='/team'-->
-    <!--    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${-->
-    <!--      activePageId === 'team' ? 'bg-slate-100' : ''-->
-    <!--    }`}-->
-    <!--  >-->
-    <!--    <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />-->
-    <!--    Teams-->
-    <!--  </a>-->
-    <!--</li>-->
+    <li>
+      <a
+        href='/team'
+        class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+          activePageId === 'team' ? 'bg-slate-100' : ''
+        }`}
+      >
+        <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
+        Teams
+      </a>
+    </li>
     {
       sidebarLinks.map((sidebarLink) => {
         const isActive = activePageId === sidebarLink.id;
diff --git a/src/components/CreateTeam/CreateTeamForm.tsx b/src/components/CreateTeam/CreateTeamForm.tsx
index 88a4f87d3..a00b1e152 100644
--- a/src/components/CreateTeam/CreateTeamForm.tsx
+++ b/src/components/CreateTeam/CreateTeamForm.tsx
@@ -190,14 +190,14 @@ export function CreateTeamForm() {
   }
 
   return (
-    <div className={'mx-auto max-w-[700px] py-6'}>
-      <div className={'mb-8 flex flex-col items-center'}>
-        <h1 className={'text-4xl font-bold'}>Create Team</h1>
-        <p className={'mt-2 text-gray-500'}>
+    <div className={'mx-auto max-w-[700px] py-1 md:py-6'}>
+      <div className={'mb-3 md:mb-8 pb-3 md:pb-0 border-b md:border-b-0 flex flex-col items-start md:items-center'}>
+        <h1 className={'text-xl md:text-4xl font-bold'}>Create Team</h1>
+        <p className={'mt-1 md:mt-2 text-sm md:text-base text-gray-500'}>
           Complete the steps below to create your team
         </p>
       </div>
-      <div className="mb-8 mt-8 flex w-full">
+      <div className="mb-8 mt-8 hidden sm:flex w-full">
         <Stepper
           activeIndex={stepIndex}
           completeSteps={completedSteps}
diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 5e278de1e..7dc6d630a 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -163,7 +163,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       )}
 
       {teamResourceConfig.length > 0 && (
-        <div className="mt-4 grid grid-cols-3 flex-wrap gap-2.5">
+        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 flex-wrap gap-2.5">
           {teamResourceConfig.map(({ resourceId, removed: removedTopics }) => {
             const roadmapTitle =
               allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title ||
diff --git a/src/components/CreateTeam/Step0.tsx b/src/components/CreateTeam/Step0.tsx
index 16ad19114..c583de641 100644
--- a/src/components/CreateTeam/Step0.tsx
+++ b/src/components/CreateTeam/Step0.tsx
@@ -70,7 +70,7 @@ export function Step0(props: Step0Props) {
 
   return (
     <>
-      <div className={'flex flex-row gap-3'}>
+      <div className={'flex flex-col sm:flex-row gap-3'}>
         {validTeamTypes.map((validTeamType) => (
           <button
             className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-12 ${
@@ -100,11 +100,11 @@ export function Step0(props: Step0Props) {
       {/*Error message*/}
       {error && <div className="mt-4 text-sm text-red-500">{error}</div>}
 
-      <div className="mt-4 flex flex-row items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
         <a
           href="/account"
           className={
-            'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500'
+            'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500 text-center'
           }
         >
           Cancel
diff --git a/src/components/CreateTeam/Step1.tsx b/src/components/CreateTeam/Step1.tsx
index 2df45c47d..8eaaa53a9 100644
--- a/src/components/CreateTeam/Step1.tsx
+++ b/src/components/CreateTeam/Step1.tsx
@@ -237,7 +237,7 @@ export function Step1(props: Step1Props) {
         </div>
       )}
 
-      <div className="mt-4 flex flex-row items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col md:flex-row items-center justify-between gap-2">
         <button
           type="button"
           onClick={onBack}
diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx
index 71b1aa600..ae340d521 100644
--- a/src/components/CreateTeam/Step2.tsx
+++ b/src/components/CreateTeam/Step2.tsx
@@ -17,7 +17,7 @@ export function Step2(props: Step2Props) {
     <>
       <div className="mt-4 flex w-full flex-col">
         <div className="mb-1 mt-2">
-          <h2 className="mb-1.5 text-2xl font-bold">Select Roadmaps</h2>
+          <h2 className="mb-1 md:mb-1.5 text-lg md:text-2xl font-bold">Select Roadmaps</h2>
           <p className="text-sm text-gray-700">
             You can always add and customize your roadmaps later.
           </p>
@@ -30,7 +30,7 @@ export function Step2(props: Step2Props) {
         />
       </div>
 
-      <div className="mt-4 flex flex-row items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
         <button
           type="button"
           onClick={onBack}
@@ -41,17 +41,29 @@ export function Step2(props: Step2Props) {
           <span className="mr-1">&larr;</span>
           Previous Step
         </button>
-        <button
-          type="submit"
-          disabled={teamResourceConfig.length === 0}
-          onClick={onNext}
-          className={
-            'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
-          }
-        >
-          Next Step
-          <span className="ml-1">&rarr;</span>
-        </button>
+
+        <div className={'flex gap-2'}>
+          <button
+            type="button"
+            onClick={onNext}
+            className={
+              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto'
+            }
+          >
+            Skip for Now
+          </button>
+          <button
+            type="submit"
+            disabled={teamResourceConfig.length === 0}
+            onClick={onNext}
+            className={
+              'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
+            }
+          >
+            Next Step
+            <span className="ml-1">&rarr;</span>
+          </button>
+        </div>
       </div>
     </>
   );
diff --git a/src/components/CreateTeam/Step3.tsx b/src/components/CreateTeam/Step3.tsx
index 320b0ba4f..39e1e6b5b 100644
--- a/src/components/CreateTeam/Step3.tsx
+++ b/src/components/CreateTeam/Step3.tsx
@@ -76,7 +76,7 @@ export function Step3(props: Step3Props) {
   return (
     <form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}>
       <div class="mb-1 mt-2">
-        <h2 class="mb-2 text-2xl font-bold">Invite your Team</h2>
+        <h2 class="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
         <p class="text-sm text-gray-700">
           Use the form below to invite your team members to your team. You can
           also invite them later.
@@ -85,7 +85,7 @@ export function Step3(props: Step3Props) {
       <div className="mt-4 flex flex-col gap-1">
         {users.map((user, userCounter) => {
           return (
-            <div className="flex flex-row gap-2" key={user.id}>
+            <div className="flex flex-col sm:flex-row gap-2" key={user.id}>
               <input
                 ref={userCounter === users.length - 1 ? emailInputRef : null}
                 autofocus={true}
@@ -163,7 +163,7 @@ export function Step3(props: Step3Props) {
         </div>
       )}
 
-      <div className="mt-4 flex flex-row items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col sm:flex-row items-stretch md:items-center justify-between gap-2">
         <button
           type="button"
           onClick={onBack}
@@ -179,7 +179,7 @@ export function Step3(props: Step3Props) {
             type="button"
             onClick={onNext}
             className={
-              'rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
+              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
             }
           >
             Skip for Now
diff --git a/src/components/Navigation/AccountDropdown.astro b/src/components/Navigation/AccountDropdown.astro
index 527b774a6..5bf41d382 100644
--- a/src/components/Navigation/AccountDropdown.astro
+++ b/src/components/Navigation/AccountDropdown.astro
@@ -30,6 +30,14 @@ import Icon from '../AstroIcon.astro';
           Profile
         </a>
       </li>
+      <li class='px-1'>
+        <a
+          href='/team'
+          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+        >
+          Teams
+        </a>
+      </li>
       <li class='px-1'>
         <button
           class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index 4038da0d4..f150afb9c 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -9,7 +9,7 @@ import { $currentTeam, $teamList } from '../../stores/team';
 import { useStore } from '@nanostores/preact';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useToast } from '../../hooks/use-toast';
-import type {ValidTeamType} from "../CreateTeam/Step0";
+import type { ValidTeamType } from '../CreateTeam/Step0';
 
 const allowedStatus = ['invited', 'joined', 'rejected'] as const;
 export type AllowedMemberStatus = (typeof allowedStatus)[number];
@@ -81,94 +81,102 @@ export function TeamDropdown() {
   if (
     !user?.email.endsWith('@insightpartners.com') &&
     !user?.email.endsWith('@roadmap.sh') &&
-    !['arikchangma@gmail.com', 'kamranahmed.se@gmail.com', 'stephen.chetcuti@gmail.com'].includes(user?.email!)
+    ![
+      'arikchangma@gmail.com',
+      'kamranahmed.se@gmail.com',
+      'stephen.chetcuti@gmail.com',
+    ].includes(user?.email!)
   ) {
     return null;
   }
 
   return (
-    <div className="relative mr-2">
-      <button
-        className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
-        onClick={() => setShowDropdown(!showDropdown)}
-      >
-        {pendingTeamIds.length > 0 && (
-          <span className="absolute -left-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
-            {pendingTeamIds.length}
-          </span>
-        )}
-        <div className="inline-grid grid-cols-[16px_auto] items-center gap-1.5 mr-1.5">
-          {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
-          {!isLoading && (
-            <img
-              src={
-                selectedAvatar
-                  ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL
-                  }/${selectedAvatar}`
-                  : '/images/default-avatar.png'
-              }
-              alt=""
-              className="h-4 w-4 rounded-full object-cover"
-            />
-          )}
-          <span className="truncate">
-            {!isLoading && selectedLabel}
-            {isLoading && 'Loading ..'}
-          </span>
-        </div>
-        <img alt={'show dropdown'} src={ChevronDown} className="h-4 w-4" />
-      </button>
-
-      {showDropdown && (
-        <div
-          ref={dropdownRef}
-          className="absolute top-full z-50 mt-2 w-full rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+    <>
+      <div className="relative mr-2">
+        <button
+          className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
+          onClick={() => setShowDropdown(!showDropdown)}
         >
-          <ul>
-            <li>
-              <a
-                className="flex w-full cursor-pointer items-center gap-2 truncate rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
-                href="/account"
-              >
-                <span className="truncate">Personal Account</span>
-              </a>
-            </li>
-            {teamList.map((team) => {
-              let pageLink = '';
-              if (team.status === 'invited') {
-                pageLink = `/respond-invite?i=${team.memberId}`;
-              } else if (team.status === 'joined') {
-                pageLink = `/team/progress?t=${team._id}`;
-              }
+          {pendingTeamIds.length > 0 && (
+            <span className="absolute -left-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
+              {pendingTeamIds.length}
+            </span>
+          )}
+          <div className="mr-1.5 inline-grid grid-cols-[16px_auto] items-center gap-1.5">
+            {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
+            {!isLoading && (
+              <img
+                src={
+                  selectedAvatar
+                    ? `${
+                        import.meta.env.PUBLIC_AVATAR_BASE_URL
+                      }/${selectedAvatar}`
+                    : '/images/default-avatar.png'
+                }
+                alt=""
+                className="h-4 w-4 rounded-full object-cover"
+              />
+            )}
+            <span className="truncate">
+              {!isLoading && selectedLabel}
+              {isLoading && 'Loading ..'}
+            </span>
+          </div>
+          <img alt={'show dropdown'} src={ChevronDown} className="h-4 w-4" />
+        </button>
 
-              return (
-                <li>
-                  <a
-                    className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
-                    href={`${pageLink}`}
-                  >
-                    <span className="flex-grow min-w-0 truncate">{team.name}</span>
-                    {pendingTeamIds.includes(team._id) && (
-                      <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
-                        Invite
-                      </span>
-                    )}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-          <a
-            className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded bg-gray-100 p-2 text-sm font-medium text-slate-800 hover:opacity-90"
-            href="/team/new"
+        {showDropdown && (
+          <div
+            ref={dropdownRef}
+            className="absolute top-full z-50 mt-2 w-full rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
           >
-            <span>+</span>
-            <span>New Team</span>
-          </a>
-        </div>
-      )}
+            <ul>
+              <li>
+                <a
+                  className="flex w-full cursor-pointer items-center gap-2 truncate rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  href="/account"
+                >
+                  <span className="truncate">Personal Account</span>
+                </a>
+              </li>
+              {teamList.map((team) => {
+                let pageLink = '';
+                if (team.status === 'invited') {
+                  pageLink = `/respond-invite?i=${team.memberId}`;
+                } else if (team.status === 'joined') {
+                  pageLink = `/team/progress?t=${team._id}`;
+                }
 
-      <hr class='my-4' />
-    </div>
+                return (
+                  <li>
+                    <a
+                      className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                      href={`${pageLink}`}
+                    >
+                      <span className="min-w-0 flex-grow truncate">
+                        {team.name}
+                      </span>
+                      {pendingTeamIds.includes(team._id) && (
+                        <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
+                          Invite
+                        </span>
+                      )}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+            <a
+              className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded bg-gray-100 p-2 text-sm font-medium text-slate-800 hover:opacity-90"
+              href="/team/new"
+            >
+              <span>+</span>
+              <span>New Team</span>
+            </a>
+          </div>
+        )}
+      </div>
+      <hr class="my-4" />
+    </>
   );
 }
diff --git a/src/components/TeamSidebar.tsx b/src/components/TeamSidebar.tsx
index 7c26a4238..a678858ca 100644
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@@ -76,7 +76,7 @@ export const TeamSidebar: FunctionalComponent<{
                 }`}
               >
                 <img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
-                Teams
+                Personal Account / Teams
               </a>
             </li>
             {sidebarLinks.map((sidebarLink) => {