Responsiveness

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;

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}

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 ||

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

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}

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,6 +41,17 @@ export function Step2(props: Step2Props) {
           <span className="mr-1">&larr;</span>
           Previous Step
         </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}
@@ -53,6 +64,7 @@ export function Step2(props: Step2Props) {
             <span className="ml-1">&rarr;</span>
           </button>
         </div>
+      </div>
     </>
   );
 }

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

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'

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,12 +81,17 @@ 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"
@@ -97,13 +102,14 @@ export function TeamDropdown() {
               {pendingTeamIds.length}
             </span>
           )}
-        <div className="inline-grid grid-cols-[16px_auto] items-center gap-1.5 mr-1.5">
+          <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
+                    ? `${
+                        import.meta.env.PUBLIC_AVATAR_BASE_URL
                       }/${selectedAvatar}`
                     : '/images/default-avatar.png'
                 }
@@ -147,7 +153,9 @@ export function TeamDropdown() {
                       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>
+                      <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
@@ -167,8 +175,8 @@ export function TeamDropdown() {
             </a>
           </div>
         )}
-
-      <hr class='my-4' />
       </div>
+      <hr class="my-4" />
+    </>
   );
 }

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) => {