Merge pull request #9938 from weseek/fix/picture-size

fix: Picture size

apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -125,7 +125,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                     {isCustomizedLogoUploaded && (
                       <>
                         <p>
-                          <img src={CUSTOMIZED_LOGO} className="picture picture-lg " id="settingBrandLogo" width="64" />
+                          <img src={CUSTOMIZED_LOGO} id="settingBrandLogo" width="64" />
                         </p>
                         <button type="button" className="btn btn-danger" onClick={onClickDeleteBtn}>
                           { t('admin:customize_settings.delete_logo') }

apps/app/src/client/components/Me/ProfileImageSettings.tsx

@@ -11,7 +11,6 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useCurrentUser } from '~/stores-universal/context';
 import { generateGravatarSrc, GRAVATAR_DEFAULT } from '~/utils/gravatar';
 
-
 const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 
@@ -113,7 +112,7 @@ const ProfileImageSettings = (): JSX.Element => {
               </a>
             </div>
           </h5>
-          <img src={generateGravatarSrc(currentUser.email)} className="rounded-pill" width="64" data-vrt-blackout-profile />
+          <img src={generateGravatarSrc(currentUser.email)} className="rounded-pill" width="64" height="64" data-vrt-blackout-profile />
         </div>
 
         <div className="col-md-7 mt-5 mt-md-0">
@@ -138,7 +137,9 @@ const ProfileImageSettings = (): JSX.Element => {
               { t('Current Image') }
             </label>
             <div className="col-md-6 col-lg-8">
-              <p className="mb-0"><img src={uploadedPictureSrc ?? DEFAULT_IMAGE} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>
+              <p className="mb-0">
+                <img src={uploadedPictureSrc ?? DEFAULT_IMAGE} width="64" height="64" className="rounded-circle" id="settingUserPicture" />
+              </p>
               {uploadedPictureSrc && <button type="button" className="btn btn-danger mt-2" onClick={deleteImageHandler}>{ t('Delete Image') }</button>}
             </div>
           </div>

apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx

@@ -12,7 +12,7 @@ export const SidebarBrandLogo = memo((props: SidebarBrandLogoProps) => {
   return isDefaultLogo
     ? <GrowiLogo />
     // eslint-disable-next-line @next/next/no-img-element
-    : (<div><img src="/attachment/brand-logo" alt="custom logo" className="picture picture-lg p-2" id="settingBrandLogo" /></div>);
+    : (<div><img src="/attachment/brand-logo" alt="custom logo" width="48" className="p-1" id="settingBrandLogo" /></div>);
 });
 
 SidebarBrandLogo.displayName = 'SidebarBrandLogo';