From 2c3e0bda07e21fefc0c1f5d5701cd7abb2da48a4 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 29 Jul 2024 23:44:02 +0100 Subject: [PATCH] Update UI for the discover page --- .../CustomRoadmap/CustomRoadmapAlert.tsx | 40 +++++++------- .../CustomRoadmap/RoadmapHeader.tsx | 14 ++--- .../DiscoverRoadmapSorting.tsx | 2 +- .../DiscoverRoadmaps/DiscoverRoadmaps.tsx | 55 +++++++++++++++---- .../EmptyDiscoverRoadmaps.tsx | 6 +- .../ExploreAIRoadmap/LoadingRoadmaps.tsx | 2 +- .../ShareOptions/ShareFriendList.tsx | 4 +- .../ShareOptions/ShareOptionsModal.tsx | 2 +- src/components/Tooltip.tsx | 6 +- 9 files changed, 79 insertions(+), 52 deletions(-) diff --git a/src/components/CustomRoadmap/CustomRoadmapAlert.tsx b/src/components/CustomRoadmap/CustomRoadmapAlert.tsx index 12c4119ae..6237f2cb0 100644 --- a/src/components/CustomRoadmap/CustomRoadmapAlert.tsx +++ b/src/components/CustomRoadmap/CustomRoadmapAlert.tsx @@ -1,4 +1,11 @@ -import { BadgeCheck, MessageCircleHeart, PencilRuler } from 'lucide-react'; +import { + BadgeCheck, + Heart, + HeartHandshake, + MessageCircleHeart, + PencilRuler, + Search, +} from 'lucide-react'; import { showLoginPopup } from '../../lib/popup.ts'; import { isLoggedIn } from '../../lib/jwt.ts'; import { useState } from 'react'; @@ -17,14 +24,11 @@ export function CustomRoadmapAlert() { /> )}
-

- Community Roadmap -

-

- This is a custom roadmap made by a community member and is not verified by{' '} - roadmap.sh +

+ This is a custom roadmap made by a community member and is not + verified by roadmap.sh

-
+
Visit Official Roadmaps - · - + + More Community Roadmaps +
diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx index 1c2cab550..ef035c7a1 100644 --- a/src/components/CustomRoadmap/RoadmapHeader.tsx +++ b/src/components/CustomRoadmap/RoadmapHeader.tsx @@ -8,7 +8,7 @@ import { httpDelete, httpPut } from '../../lib/http'; import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; import { useToast } from '../../hooks/use-toast'; import { RoadmapActionButton } from './RoadmapActionButton'; -import { Lock, Shapes } from 'lucide-react'; +import {Lock, Pencil, PenSquare, Shapes} from 'lucide-react'; import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx'; import { CustomRoadmapAlert } from './CustomRoadmapAlert.tsx'; import { CustomRoadmapRatings } from './CustomRoadmapRatings.tsx'; @@ -156,19 +156,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { target="_blank" className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm" > - - Edit Roadmap + + Edit Edit - setIsSharing(true)} onDelete={() => { const confirmation = window.confirm( 'Are you sure you want to delete this roadmap?', diff --git a/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx b/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx index c78daf3ff..3b1c279e0 100644 --- a/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx +++ b/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx @@ -45,7 +45,7 @@ export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) { ref={dropdownRef} > +

+ An unvetted, selected list of community-curated roadmaps

+
+
+ + + Ask us to feature it once you're done! + + + + + + Up-to-date and maintained by the official team + + + Visit our official roadmaps + + +
+
diff --git a/src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx b/src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx index 4969b2ad2..4932db3c7 100644 --- a/src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx +++ b/src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx @@ -20,8 +20,8 @@ export function EmptyDiscoverRoadmaps() { <> {creatingRoadmapModal} -
- +
+

No Roadmaps Found

@@ -41,7 +41,7 @@ export function EmptyDiscoverRoadmaps() { Visit Official Roadmaps diff --git a/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx b/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx index 94640f16c..7d54fa36e 100644 --- a/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx +++ b/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx @@ -4,7 +4,7 @@ export function LoadingRoadmaps() { {new Array(21).fill(0).map((_, index) => (
  • ))} diff --git a/src/components/ShareOptions/ShareFriendList.tsx b/src/components/ShareOptions/ShareFriendList.tsx index 59e8b6366..4c58da83b 100644 --- a/src/components/ShareOptions/ShareFriendList.tsx +++ b/src/components/ShareOptions/ShareFriendList.tsx @@ -206,11 +206,11 @@ export function ShareFriendList(props: ShareFriendListProps) { {friends.length === 0 && !isLoading && (
    -

    +

    You do not have any friends yet.
    {' '}     Invite your friends to share roadmaps with. diff --git a/src/components/ShareOptions/ShareOptionsModal.tsx b/src/components/ShareOptions/ShareOptionsModal.tsx index 72decdae9..35b6e7d5a 100644 --- a/src/components/ShareOptions/ShareOptionsModal.tsx +++ b/src/components/ShareOptions/ShareOptionsModal.tsx @@ -403,7 +403,7 @@ function DiscoveryCheckbox(props: DiscoveryCheckboxProps) { onChange={(e) => setIsDiscoverable(e.target.checked)} /> - Include on discovery page (when launched) + Include on discovery page ); diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 91dbc2768..7720e2b93 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -3,6 +3,7 @@ import { clsx } from 'clsx'; type TooltipProps = { children: ReactNode; + additionalClass?: string; position?: | 'right-center' | 'right-top' @@ -19,7 +20,7 @@ type TooltipProps = { }; export function Tooltip(props: TooltipProps) { - const { children, position = 'right-center' } = props; + const { children, additionalClass = '', position = 'right-center' } = props; let positionClass = ''; if (position === 'right-center') { @@ -52,7 +53,8 @@ export function Tooltip(props: TooltipProps) { {children}