Changeset 1579b4f for frontend/src/components/userProfile/UserListModal.tsx

Timestamp:

02/10/26 21:58:39 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

92db381

Parents:

0808ef2

Message:

refactor artist, collection, listener components to have similar style as other components; refactor some dto-s

File:

• frontend/src/components/userProfile/UserListModal.tsx (modified) (5 diffs)

frontend/src/components/userProfile/UserListModal.tsx

@@ -1 +1 @@
 import { useNavigate } from "react-router-dom";
+import { baseURL } from "../../api/axiosInstance";
 import type { BaseNonAdminUser } from "../../utils/types";
 
@@ -16 +17 @@
 }: ModalProps) => {
         const navigate = useNavigate();
-        const baseURL = import.meta.env.VITE_API_BASE_URL;
 
         return (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-                        <div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
-                                <div className="p-4 border-b flex justify-between items-center">
-                                        <h2 className="text-xl font-bold">{title}</h2>
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+                        <div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
+                                <div className="p-4 border-b border-white/10 flex justify-between items-center">
+                                        <h2 className="text-xl font-bold text-white">{title}</h2>
                                         <button
                                                 onClick={onClose}
-                                                className="text-gray-500 hover:text-black text-2xl cursor-pointer"
+                                                className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
                                         >
                                                 &times;
@@ -38 +38 @@
                                                         <div
                                                                 key={u.username}
-                                                                className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors"
+                                                                className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
                                                         >
                                                                 <div
@@ -47 +47 @@
                                                                         }}
                                                                 >
-                                                                        <div className="w-10 h-10 rounded-full bg-blue-100 overflow-hidden shrink-0 flex items-center justify-center">
+                                                                        <div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
                                                                                 {u.profilePhoto ? (
                                                                                         <img
@@ -55 +55 @@
                                                                                         />
                                                                                 ) : (
-                                                                                        <span className="text-blue-600 font-bold">
+                                                                                        <span className="text-[#1db954] font-bold">
                                                                                                 {u.fullName.charAt(0)}
                                                                                         </span>
                                                                                 )}
                                                                         </div>
-                                                                        <p className="font-semibold text-gray-900">{u.fullName}</p>
+                                                                        <div>
+                                                                                <p className="font-semibold text-white">{u.fullName}</p>
+                                                                                <p className="text-sm text-gray-400">@{u.username}</p>
+                                                                        </div>
                                                                 </div>
 
                                                                 <button
                                                                         onClick={() => onFollowToggle(u.username)}
-                                                                        className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
+                                                                        className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
                                                                                 u.isFollowedByCurrentUser
-                                                                                        ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                                                                                        : "bg-blue-500 text-white hover:bg-blue-600"
+                                                                                        ? "bg-white/10 text-white hover:bg-white/20"
+                                                                                        : "bg-[#1db954] text-black hover:bg-[#1ed760]"
                                                                         }`}
                                                                 >
-                                                                        {u.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
+                                                                        {u.isFollowedByCurrentUser ? "Following" : "Follow"}
                                                                 </button>
                                                         </div>