frontend-next/src/app/user/page.js

@@ -125,7 +125,7 @@ function UserProfile() {
                   <div>
                     <img
                       src={profileData.pfp}
-                      width="300px"
+                      style={{maxWidth: "350px", maxHeight: "450px"}} 
                       className="relative mx-auto rounded-2xl overflow-hidden"
                     />
                     <div className="font-bold text-[30px]">

frontend-next/src/components/app/friends/dm.js

@@ -44,7 +44,7 @@ export function DM({user,friendObj}) {
                     </div>
                     <div className='col-span-3 cursor-pointer'>
                         <div onClick={() => {openDM(user,friendObj.uid)}}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
+                            <div className='inline-block mr-8'><img src={friendObj.pfp} className='w-[38px] h-[50px]'/></div>
                             <div className='inline-block relative top-[-6px]'>
                                 <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
                                 <div className="">@{friendObj.username}</div>

frontend-next/src/components/app/friends/friends.js

@@ -39,7 +39,7 @@ export function Friend({user,friendObj}) {
                     </div>
                     <div className='col-span-3 cursor-pointer'>
                         <Link href={`/user?uid=${friendObj.uid}`}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
+                            <div className='inline-block mr-8'><img src={friendObj.pfp} className= 'w-[38px] h-[50px]'/></div>
                             <div className='inline-block relative top-[-6px]'>
                                 <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
                                 <div className="">@{friendObj.username}</div>

frontend-next/src/components/app/profile/ProfileEdit.js

@@ -62,7 +62,7 @@ export function ProfileEdit({ profileData, user, onSave }) {
           <div>
             <img
               src={profileData.pfp}
-              width="150px"
+              style={{width: "150px", maxHeight: "400px"}}
               className="relative mx-auto rounded-2xl overflow-hidden"
             />
             Current Profile Picture

frontend-next/src/components/app/profile/ProfilePanel.js

@@ -25,10 +25,10 @@ export function ProfilePanel({user}) {
         <Popover.Button as="div">
           <div className="h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
             <div className="flex items-center pl-1">{user.firstName}</div>
-            <div className="ml-3 rounded-lg">
+            <div className="ml-3 rounded-lg flex items-center">
               <img
                 src={user.pfp}
-                width="40px"
+                style={{maxWidth: "40px", maxHeight: "40px"}}
                 className="relative mx-auto rounded-xl overflow-hidden"
               />
             </div>

frontend-next/src/components/app/sidebar/dm.js

@@ -42,7 +42,7 @@ export function Sidebar({user, chatRoomObj}) {
             <div className="m-2 h-[98%] grid grid-cols-1">
                 <div className="flex place-content-center">
                     <div className="bg-white rounded-lg m-2 shadow-2xl pt-10">
-                        <img src={profileData.pfp} className="w-[80%] relative mx-auto"/>
+                        <img src={profileData.pfp} style={{maxHeight: "800px"}} className="w-[80%] relative mx-auto"/> 
                         <div className="font-bold text-[24px]">{profileData.firstName} {profileData.lastName}</div>
                         @{profileData.username}
                     </div>