From 10e493de99997dee0f2fdbdef697df7386b3c963 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 10 Sep 2024 12:19:20 +0100 Subject: [PATCH] UI changes for dashboard --- src/components/Dashboard/DashboardPage.tsx | 8 ++-- src/components/Dashboard/DashboardTab.tsx | 2 +- .../Dashboard/PersonalDashboard.tsx | 33 ++++++++-------- src/components/ReactIcons/BookEmoji.tsx | 39 +++++++++++++++++++ src/components/ReactIcons/BuildEmoji.tsx | 36 +++++++++++++++++ src/components/ReactIcons/BulbEmoji.tsx | 37 ++++++++++++++++++ src/components/ReactIcons/CheckEmoji.tsx | 6 +++ .../ReactIcons/ConstructionEmoji.tsx | 24 ++++++++++++ 8 files changed, 163 insertions(+), 22 deletions(-) create mode 100644 src/components/ReactIcons/BookEmoji.tsx create mode 100644 src/components/ReactIcons/BuildEmoji.tsx create mode 100644 src/components/ReactIcons/BulbEmoji.tsx create mode 100644 src/components/ReactIcons/CheckEmoji.tsx create mode 100644 src/components/ReactIcons/ConstructionEmoji.tsx diff --git a/src/components/Dashboard/DashboardPage.tsx b/src/components/Dashboard/DashboardPage.tsx index f55370d6e..0dd5789f8 100644 --- a/src/components/Dashboard/DashboardPage.tsx +++ b/src/components/Dashboard/DashboardPage.tsx @@ -54,7 +54,7 @@ export function DashboardPage(props: DashboardPageProps) { return (
-
+
- - )} @@ -98,7 +96,7 @@ export function DashboardPage(props: DashboardPageProps) { label="+ Create Team" isActive={false} href="/team/new" - className="border border-dashed text-gray-600 hover:border-gray-600 hover:text-black" + className="border bg-transparent border-dashed text-gray-500 border-gray-300 text-sm px-3 hover:border-gray-600 hover:text-black" /> )} @@ -119,6 +117,6 @@ export function DashboardPage(props: DashboardPageProps) { function DashboardTabSkeleton() { return ( -
+
); } diff --git a/src/components/Dashboard/DashboardTab.tsx b/src/components/Dashboard/DashboardTab.tsx index 74c4fdec7..c6b345599 100644 --- a/src/components/Dashboard/DashboardTab.tsx +++ b/src/components/Dashboard/DashboardTab.tsx @@ -30,7 +30,7 @@ export function DashboardTab(props: DashboardTabProps) { avatar )} {icon} diff --git a/src/components/Dashboard/PersonalDashboard.tsx b/src/components/Dashboard/PersonalDashboard.tsx index 421d4f2aa..a6a8eb804 100644 --- a/src/components/Dashboard/PersonalDashboard.tsx +++ b/src/components/Dashboard/PersonalDashboard.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, type ReactNode } from 'react'; +import { type JSXElementConstructor, useEffect, useState } from 'react'; import { httpGet } from '../../lib/http'; import type { UserProgress } from '../TeamProgress/TeamProgressPage'; import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions'; @@ -10,6 +10,9 @@ import { RecommendedRoadmaps } from './RecommendedRoadmaps'; import { ProgressStack } from './ProgressStack'; import { useStore } from '@nanostores/react'; import { $accountStreak, type StreakResponse } from '../../stores/streak'; +import { CheckEmoji } from '../ReactIcons/CheckEmoji.tsx'; +import { ConstructionEmoji } from '../ReactIcons/ConstructionEmoji.tsx'; +import { BookEmoji } from '../ReactIcons/BookEmoji.tsx'; type UserDashboardResponse = { name: string; @@ -222,7 +225,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) { )} -
+
{isLoading ? ( <> @@ -233,10 +236,10 @@ export function PersonalDashboard(props: PersonalDashboardProps) { ) : ( <> -
+
{name} ; title: string; description: string; href: string; }; function DashboardCard(props: DashboardCardProps) { - const { icon, title, description, href } = props; + const { icon: Icon, title, description, href } = props; return ( -
- - {icon} - +
+
-
+

{title}

{description}

@@ -330,6 +331,6 @@ function DashboardCard(props: DashboardCardProps) { function DashboardCardSkeleton() { return ( -
+
); } diff --git a/src/components/ReactIcons/BookEmoji.tsx b/src/components/ReactIcons/BookEmoji.tsx new file mode 100644 index 000000000..b4565b253 --- /dev/null +++ b/src/components/ReactIcons/BookEmoji.tsx @@ -0,0 +1,39 @@ +import type { SVGProps } from 'react'; +import React from 'react'; + +export function BookEmoji(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/src/components/ReactIcons/BuildEmoji.tsx b/src/components/ReactIcons/BuildEmoji.tsx new file mode 100644 index 000000000..a6d2f8a49 --- /dev/null +++ b/src/components/ReactIcons/BuildEmoji.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import type { SVGProps } from 'react'; + +export function BuildEmoji(props: SVGProps) { + return ( + + + + + + + + + + + + ); +} diff --git a/src/components/ReactIcons/BulbEmoji.tsx b/src/components/ReactIcons/BulbEmoji.tsx new file mode 100644 index 000000000..f5e344f7a --- /dev/null +++ b/src/components/ReactIcons/BulbEmoji.tsx @@ -0,0 +1,37 @@ +// twitter bulb emoji +import type { SVGProps } from 'react'; + +type BulbEmojiProps = SVGProps; + +export function BulbEmoji(props: BulbEmojiProps) { + return ( + + + + + + + + ); +} diff --git a/src/components/ReactIcons/CheckEmoji.tsx b/src/components/ReactIcons/CheckEmoji.tsx new file mode 100644 index 000000000..629237be3 --- /dev/null +++ b/src/components/ReactIcons/CheckEmoji.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import type { SVGProps } from 'react'; + +export function CheckEmoji(props: SVGProps) { + return (); +} \ No newline at end of file diff --git a/src/components/ReactIcons/ConstructionEmoji.tsx b/src/components/ReactIcons/ConstructionEmoji.tsx new file mode 100644 index 000000000..df9d0e9f8 --- /dev/null +++ b/src/components/ReactIcons/ConstructionEmoji.tsx @@ -0,0 +1,24 @@ +import type { SVGProps } from 'react'; +import React from 'react'; + +export function ConstructionEmoji(props: SVGProps) { + return ( + + + + + + ); +}