Add size class for Avatar and RoundPlaceholder (#4539)

app/assets/stylesheets/application.bootstrap.scss

@@ -553,7 +553,6 @@ input[type="range"]:focus::-moz-range-thumb {
   }
 }
 
-
 // Table Placeholders length
 .sm-td-placeholder {
   min-width: 100px;
@@ -570,3 +569,19 @@ input[type="range"]:focus::-moz-range-thumb {
 .xl-td-placeholder {
   min-width: 300px;
 }
+
+// Circles & Avatars
+.small-circle {
+  width: 40px;
+  height: 40px;
+}
+
+.medium-circle {
+  width: 100px;
+  height: 100px;
+}
+
+.large-circle {
+  width: 150px;
+  height: 150px;
+}

app/javascript/components/admin/manage_users/BannedPendingRow.jsx

@@ -22,7 +22,7 @@ export default function BannedPendingRow({ user, pendingTable }) {
       <td className="border-end-0">
         <Stack direction="horizontal">
           <div className="me-2">
-            <Avatar avatar={user.avatar} radius={40} />
+            <Avatar avatar={user.avatar} size="small" />
           </div>
           <Stack>
             <span className="text-dark fw-bold"> {user.name} </span>

app/javascript/components/admin/manage_users/ManageUserRow.jsx

@@ -27,7 +27,7 @@ export default function ManageUserRow({ user }) {
       <td className="border-end-0">
         <Stack direction="horizontal">
           <div className="me-2">
-            <Avatar avatar={user.avatar} radius={40} />
+            <Avatar avatar={user.avatar} size="small" />
           </div>
           <Stack>
             <span className="text-dark fw-bold"> {user.name} </span>

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -155,7 +155,7 @@ export default function RoomJoin() {
             </Col>
             <Col>
               <Stack direction="vertical" gap={3}>
-                <Avatar className="d-block ms-auto me-auto" avatar={publicRoom?.data.owner_avatar} radius={100} />
+                <Avatar className="d-block ms-auto me-auto" avatar={publicRoom?.data.owner_avatar} size="medium" />
                 <h5 className="text-center">{publicRoom?.data.owner_name}</h5>
               </Stack>
             </Col>

app/javascript/components/rooms/room/shared_access/SharedAccess.jsx

@@ -51,7 +51,7 @@ export default function SharedAccess() {
                       <tr key={user.id} className="align-middle">
                         <td>
                           <Stack direction="horizontal" className="py-2">
-                            <Avatar avatar={user.avatar} radius={40} />
+                            <Avatar avatar={user.avatar} size="small" />
                             <h6 className="text-brand mb-0 ps-3"> {user.name} </h6>
                           </Stack>
                         </td>

app/javascript/components/rooms/room/shared_access/SharedAccessList.jsx

@@ -55,7 +55,7 @@ export default function SharedAccessList({ users }) {
                 <Row className="border-bottom py-3" key={user.id}>
                   <Col>
                     <Stack direction="horizontal">
-                      <Avatar avatar={user.avatar} radius={40} />
+                      <Avatar avatar={user.avatar} size="small" />
                       <h6 className="text-brand mb-0 ps-3"> {user.name} </h6>
                     </Stack>
                   </Col>

app/javascript/components/rooms/room/shared_access/forms/SharedAccessForm.jsx

@@ -48,7 +48,7 @@ export default function SharedAccessForm({ handleClose }) {
                                 className="pe-3"
                                 {...register('shared_users')}
                               />
-                              <Avatar avatar={user.avatar} radius={40} />
+                              <Avatar avatar={user.avatar} size="small" />
                               <h6 className="text-brand mb-0 ps-3"> {user.name} </h6>
                             </Stack>
                           </td>

app/javascript/components/shared_components/Header.jsx

@@ -47,7 +47,7 @@ export default function Header() {
         </Navbar.Brand>
 
         <Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0">
-          <Avatar avatar={currentUser?.avatar} radius={40} />
+          <Avatar avatar={currentUser?.avatar} size="small" />
         </Navbar.Toggle>
 
         {/* /!* Visible only on mobile *!/ */}
@@ -78,7 +78,7 @@ export default function Header() {
         {/* Not visible on mobile */}
         <div className="justify-content-end d-none d-sm-block">
           <div className="d-inline-block">
-            <Avatar avatar={currentUser?.avatar} radius={40} />
+            <Avatar avatar={currentUser?.avatar} size="small" />
           </div>
           <NavDropdown title={currentUser?.name} id="nav-user-dropdown" className="d-inline-block" align="end">
             <NavDropdown.Item as={Link} to="/profile">

app/javascript/components/shared_components/utilities/Placeholder.jsx

+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { Placeholder as BootstrapPlaceholder } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
-export default function Placeholder({ width, size, className }) {
+export default function Placeholder({ width, size, ...props }) {
   return (
     <BootstrapPlaceholder className="ps-0" animation="glow">
-      <BootstrapPlaceholder xs={width} size={size} className={className} bg="secondary" />
+      <BootstrapPlaceholder xs={width} size={size} bg="secondary" {...props} />
     </BootstrapPlaceholder>
   );
 }
@@ -13,9 +14,4 @@ export default function Placeholder({ width, size, className }) {
 Placeholder.propTypes = {
   width: PropTypes.number.isRequired,
   size: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
-
-Placeholder.defaultProps = {
-  className: '',
 };

app/javascript/components/shared_components/utilities/RoundPlaceholder.jsx

+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { Placeholder } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
-export default function RoundPlaceholder({ radius, className }) {
+export default function RoundPlaceholder({ size, ...props }) {
+  const circleClass = `rounded-circle ${size}-circle`;
+
   return (
     <Placeholder animation="glow">
-      <Placeholder style={{ height: radius, width: radius, borderRadius: '50%' }} className={className} bg="secondary" />
+      <Placeholder className={circleClass} bg="secondary" {...props} />
     </Placeholder>
   );
 }
 
 RoundPlaceholder.propTypes = {
-  radius: PropTypes.number.isRequired,
-  className: PropTypes.string,
-};
-
-RoundPlaceholder.defaultProps = {
-  className: '',
+  size: PropTypes.string.isRequired,
 };

app/javascript/components/users/user/Avatar.jsx

+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/jsx-no-bind */
 import React, { useState } from 'react';
 import Image from 'react-bootstrap/Image';
 import PropTypes from 'prop-types';
-import { Placeholder } from 'react-bootstrap';
+import RoundPlaceholder from '../../shared_components/utilities/RoundPlaceholder';
 
-export default function Avatar({ avatar, radius, className }) {
+export default function Avatar({ avatar, size, ...props }) {
   const [isLoaded, setIsLoaded] = useState(false);
+  const avatarSizeClass = `${size}-circle`;
 
   function onLoad() {
     setIsLoaded(true);
   }
 
   return (
-    <>
+    <div {...props}>
       <Image
         src={avatar}
         roundedCircle="true"
-        width={radius}
-        height={radius}
-        className={className}
+        className={avatarSizeClass}
         style={{ display: isLoaded ? '' : 'none' }}
         onLoad={onLoad}
       />
       {!isLoaded && (
-      <Placeholder animation="glow" className="mb-3">
-        <Placeholder style={{ height: radius, width: radius, borderRadius: '50%' }} />
-      </Placeholder>
+        <RoundPlaceholder size={size} />
       )}
-    </>
+    </div>
   );
 }
 
 Avatar.propTypes = {
   avatar: PropTypes.string.isRequired,
-  radius: PropTypes.number.isRequired,
-  className: PropTypes.string,
-};
-
-Avatar.defaultProps = {
-  className: '',
+  size: PropTypes.string.isRequired,
 };

app/javascript/components/users/user/SetAvatar.jsx

@@ -48,7 +48,7 @@ export default function SetAvatar({ user }) {
           <div className="avatar-icon-circle float-end position-absolute rounded-circle">
             <FolderPlusIcon className="hi-s" />
           </div>
-          <Avatar avatar={user?.avatar} radius={150} />
+          <Avatar avatar={user?.avatar} size="large" />
         </div>
         <input
           id="avatarUpload"