Feat: Fix issue #47 - added some more UI polish

strapi · Dec 5, 2024 · ab33b72 · ab33b72
1 parent eefe6ae
commit ab33b72
Show file tree

Hide file tree

Showing 19 changed files with 603 additions and 240 deletions.
diff --git a/backend/config/admin.js b/backend/config/admin.js
@@ -2,7 +2,6 @@ const GoogleStrategy = require("passport-google-oauth2");
 
 const verify = (request, accessToken, refreshToken, profile, done) => {
   if (profile && profile.email && profile.email.endsWith("@strapi.io")) {
-    console.log(profile);
     done(null, {
       email: profile.email,
       firstname: profile.given_name,

diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/strapi.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Learn Strapi | Strapi LMS</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@strapi/blocks-react-renderer": "^1.0.1",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.52.2",
     "@tanstack/react-query-devtools": "^5.52.2",
     "@tanstack/react-router": "^1.35.6",
@@ -50,18 +51,18 @@
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^1.5.0",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.1",
     "prettier-plugin-tailwindcss": "^0.6.1",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.16",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-tsconfig-paths": "^4.3.2"

diff --git a/frontend/src/components/CourseCards.tsx b/frontend/src/components/CourseCards.tsx
@@ -78,7 +78,7 @@ export const CourseCards: React.FC<CourseCardsProps> = React.memo(
                   <div className="absolute left-3 top-3 flex flex-wrap gap-2">
                     {course.categories.map((category) => {
                       return (
-                        <p className="strapi-brand rounded-2xl p-1 px-3 text-sm font-semibold">
+                        <p key={category.id} className="strapi-brand rounded-2xl p-1 px-3 text-sm font-semibold text-white">
                           {category.name}
                         </p>
                       );

diff --git a/frontend/src/components/Drawer.tsx b/frontend/src/components/Drawer.tsx
@@ -18,7 +18,7 @@ const Drawer: React.FC = () => {
   return (
     <div
       id="drawer-navigation"
-      className="fixed flex h-screen w-64 flex-col overflow-y-auto rounded-tr-3xl bg-white pb-4 pl-4 pt-12 dark:bg-gray-800"
+      className="fixed flex h-screen w-64 flex-col overflow-y-auto rounded-tr-3xl border bg-white pb-4 pl-4 pt-12 dark:bg-gray-800"
     >
       <div className="flex flex-wrap justify-center">
         <Link to="/dashboard">
@@ -47,56 +47,71 @@ const Drawer: React.FC = () => {
           </li>
           <li>
             <Link
-              to="/"
+              to="/categories"
               className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
             >
-              <Goal />
-              <span className="ml-3">Goals</span>
+              <Boxes />
+              <span className="ml-3">Categories</span>
             </Link>
           </li>
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
-              <Boxes />
-              <span className="ml-3">Catalogue</span>
+              <Goal />
+              <div className="flex flex-col">
+                <span className="ml-3">Goals</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
               <LineChart />
-              <span className="ml-3">Surveys</span>
+              <div className="flex flex-col">
+                <span className="ml-3">Surveys</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
               <Network />
-              <span className="ml-3">Organization</span>
+              <div className="flex flex-col">
+                <span className="ml-3">Organization</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
               <LibraryBig />
-              <span className="ml-3">Resources</span>
+              <div className="flex flex-col">
+                <span className="ml-3">Resources</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
               <MessageCircleWarning />
-              <span className="ml-3">Reports</span>
+              <div className="flex flex-col">
+                <span className="ml-3">Reports</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
         </ul>
@@ -106,7 +121,7 @@ const Drawer: React.FC = () => {
         <ul className="space-y-2 font-medium">
           <li>
             <Link
-              to="/"
+              to={import.meta.env.VITE_STRAPI_ADMIN_URL}
               className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
             >
               <Cog />
@@ -116,10 +131,13 @@ const Drawer: React.FC = () => {
           <li>
             <Link
               to="/"
-              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:[&.active]:bg-gray-700"
+              className="group flex items-center rounded-l-3xl p-2 pl-4 text-gray-900 opacity-55 dark:text-white dark:[&.active]:bg-gray-700"
             >
               <HelpCircle />
-              <span className="ml-3">Help</span>
+              <div className="flex flex-col">
+                <span className="ml-3">Help</span>
+                <span className="ml-3 text-xs">Coming soon</span>
+              </div>
             </Link>
           </li>
         </ul>

diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,44 +1,44 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "src/lib/utils"
+import { cn } from "src/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,32 +65,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-800",
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -112,9 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -124,7 +124,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -135,26 +135,26 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,8 +165,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -177,9 +177,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -197,4 +197,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/frontend/src/interfaces/auth.ts b/frontend/src/interfaces/auth.ts
@@ -1,6 +1,4 @@
 import { Course, UserCourseStatus } from "@/interfaces/course";
-import { createContext } from "react";
-
 /**
  * User interface
  */