Add skip button for teams

src/components/CreateTeam/Step2.tsx

@@ -41,6 +41,18 @@ export function Step2(props: Step2Props) {
           <span className="mr-1">&larr;</span>
           Previous Step
         </button>
+        <div className={'flex gap-2'}>
+          {teamResourceConfig.length === 0 && (
+            <button
+              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'
+              }
+            >
+              Skip for Now
+            </button>
+          )}
           <button
             type="submit"
             disabled={teamResourceConfig.length === 0}
@@ -53,6 +65,7 @@ export function Step2(props: Step2Props) {
             <span className="ml-1">&rarr;</span>
           </button>
         </div>
+      </div>
     </>
   );
 }

src/components/TeamDropdown/TeamDropdown.tsx

@@ -155,12 +155,6 @@ export function TeamDropdown() {
                         Invite
                       </span>
                     )}
-
-                    {team.roadmaps.length === 0 && (
-                      <span className="flex rounded-md bg-gray-500 px-2 text-xs text-white">
-                        Draft
-                      </span>
-                    )}
                   </a>
                 </li>
               );

src/components/TeamSidebar.tsx

@@ -8,13 +8,14 @@ import MapIcon from '../icons/map.svg';
 import GroupIcon from '../icons/group.svg';
 import { useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
-import { $canManageCurrentTeam } from '../stores/team';
+import { $canManageCurrentTeam, $currentTeam } from '../stores/team';
+import { WarningIcon } from './ReactIcons/WarningIcon';
 
 export const TeamSidebar: FunctionalComponent<{
   activePageId: string;
 }> = ({ activePageId, children }) => {
   const [menuShown, setMenuShown] = useState(false);
-  const canManageCurrentTeam = useStore($canManageCurrentTeam);
+  const currentTeam = useStore($currentTeam);
 
   const { teamId } = useTeamId();
 
@@ -30,6 +31,7 @@ export const TeamSidebar: FunctionalComponent<{
       href: `/team/roadmaps?t=${teamId}`,
       id: 'roadmaps',
       icon: MapIcon,
+      hasWarning: currentTeam?.roadmaps?.length === 0,
     },
     {
       title: 'Members',
@@ -120,7 +122,8 @@ export const TeamSidebar: FunctionalComponent<{
                           : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                       }`}
                     >
-                      <span class="flex flex-grow items-center">
+                      <span class="flex flex-grow items-center justify-between">
+                        <span className="flex">
                           <img
                             alt="menu icon"
                             src={sidebarLink.icon}
@@ -128,6 +131,13 @@ export const TeamSidebar: FunctionalComponent<{
                           />
                           {sidebarLink.title}
                         </span>
+                        {sidebarLink.hasWarning && (
+                          <span class="relative mr-1 flex items-center">
+                            <span class="relative rounded-full bg-red-200 p-1 text-xs" />
+                            <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-red-400 p-1 text-xs" />
+                          </span>
+                        )}
+                      </span>
                     </a>
                   </li>
                 );