update src/components/Avatar/ProfileInfo/index.js and src/components/Avatar/index.js

src/components/Avatar/ProfileInfo/index.js

@@ -9,8 +9,8 @@ const ProfileInfo = ({ name, role }) => {
         alt="profile-pic"
       />
       <div className="mx-4">
-        <p className="text-[#0F0543] font-sansbold text-sm">{name}</p>
+        <p className="text-primaryText font-bold text-sm">{name}</p>
-        <span className="text-[#0F0543] text-xs">{role}</span>
+        <span className="text-primaryText text-xs">{role}</span>
       </div>
       {/* dropdown */}
       <button

src/components/Avatar/index.js

@@ -14,7 +14,7 @@ function Avatar() {
   return (
     <div className="w-full flex flex-col items-center">
       <select
-        className="mb-10 w-20 bg-gray-200"
+        className="mb-10 w-20 bg-surface border border-surfaceBorder"
         onChange={(e) => setType(e.target.value)}
       >
         {Object.keys(list).map((option, index) => (