remove 48x48 library icons (#7126)

frontend/src/components/dirent-detail/lib-details.js

@@ -14,7 +14,7 @@ import { CellType } from '../../metadata/constants';
 const LibDetail = React.memo(({ currentRepoInfo, onClose }) => {
   const [isLoading, setLoading] = useState(true);
   const [repo, setRepo] = useState({});
-  const libIconUrl = useMemo(() => Utils.getLibIconUrl(currentRepoInfo, true), [currentRepoInfo]);
+  const libIconUrl = useMemo(() => Utils.getLibIconUrl(currentRepoInfo), [currentRepoInfo]);
   const filesField = useMemo(() => ({ type: CellType.NUMBER, name: gettext('Files') }), []);
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
   const creatorField = useMemo(() => ({ type: CellType.CREATOR, name: gettext('Creator') }), []);

frontend/src/components/search/search-result-item.js

@@ -22,7 +22,7 @@ class SearchResultItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl(true);
+    let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl();
     let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name);
     let showName = item.repo_name + '/' + item.link_content;
     showName = showName.endsWith('/') ? showName.slice(0, showName.length - 1) : showName;

frontend/src/components/search/search-result-library.js

@@ -11,7 +11,7 @@ function SearchResultLibrary(props) {
       onClick={() => onClick(item)}
       ref={ref => props.setRef(ref)}
     >
-      <img className='lib-item-img' src={Utils.getDefaultLibIconUrl(true)} alt="" />
+      <img className='lib-item-img' src={Utils.getDefaultLibIconUrl()} alt="" />
       <div className="item-content d-flex justify-content-between align-items-center ellipsis">{item.name}</div>
     </li>
   );

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -19,7 +19,7 @@ import toaster from '../toast';
 import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
-import { GRID_MODE, LIST_MODE } from '../dir-view-mode/constants';
+import { LIST_MODE } from '../dir-view-mode/constants';
 import TransferDialog from '../dialog/transfer-dialog';
 
 dayjs.extend(relativeTime);
@@ -144,10 +144,8 @@ class SharedRepoListItem extends React.Component {
   };
 
   getRepoComputeParams = () => {
-    const { repo, currentViewMode } = this.props;
-
-    const useBigLibraryIcon = currentViewMode == GRID_MODE;
-    const iconUrl = Utils.getLibIconUrl(repo, useBigLibraryIcon);
+    const { repo } = this.props;
+    const iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
     let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -21,7 +21,7 @@ import MylibRepoMenu from './mylib-repo-menu';
 import RepoAPITokenDialog from '../../components/dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
-import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
+import { LIST_MODE } from '../../components/dir-view-mode/constants';
 import { userAPI } from '../../utils/user-api';
 
 const propTypes = {
@@ -297,8 +297,7 @@ class MylibRepoListItem extends React.Component {
   renderPCUI = () => {
     const { isStarred } = this.state;
     const { repo, currentViewMode = LIST_MODE } = this.props;
-    let useBigLibraryIcon = currentViewMode == GRID_MODE;
-    let iconUrl = Utils.getLibIconUrl(repo, useBigLibraryIcon);
+    let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
     let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
     return currentViewMode == LIST_MODE ? (

frontend/src/pages/org-admin/libraries/org-all-repos.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { Utils } from '../../../utils/utils';
 import { orgAdminAPI } from '../../../utils/org-admin-api';
-import { gettext, siteRoot, mediaUrl, orgID } from '../../../utils/constants';
+import { gettext, siteRoot, orgID } from '../../../utils/constants';
 import toaster from '../../../components/toast/index';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
@@ -198,19 +198,6 @@ class RepoItem extends React.Component {
     this.props.onDeleteRepo(this.props.repo);
   };
 
-  renderLibIcon = (repo) => {
-    let href;
-    let iconTitle;
-    if (repo.encrypted) {
-      href = mediaUrl + 'img/lib/48/lib-encrypted.png';
-      iconTitle = gettext('Encrypted library');
-    } else {
-      href = mediaUrl + 'img/lib/48/lib.png';
-      iconTitle = gettext('Read-Write library');
-    }
-    return <img src={href} title={iconTitle} alt={iconTitle} width="24" />;
-  };
-
   renderRepoOwnerHref = (repo) => {
     let href;
     if (repo.isDepartmentRepo) {
@@ -241,10 +228,13 @@ class RepoItem extends React.Component {
   render() {
     let { repo } = this.props;
     let isOperationMenuShow = this.state.showMenu;
+    let iconTitle = repo.encrypted ? gettext('Encrypted library') : gettext('Read-Write library');
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-          <td>{this.renderLibIcon(repo)}</td>
+          <td>
+            <img src={Utils.getLibIconUrl(repo)} title={iconTitle} alt={iconTitle} width="24" />
+          </td>
           <td>{repo.repoName}</td>
           <td>{`${repo.file_count} / ${Utils.bytesToSize(repo.size)}`}</td>
           <td>{repo.repoID}</td>

frontend/src/pages/org-admin/org-group-repos.js

@@ -165,7 +165,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td>
-            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
+            <img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
           <td>{repo.name}</td>
           <td>{Utils.bytesToSize(repo.size)}</td>

frontend/src/pages/org-admin/org-user-repos.js

@@ -161,7 +161,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td>
-            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
+            <img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
           <td>{repo.repo_name}</td>
           <td>{Utils.bytesToSize(repo.size)}</td>

frontend/src/pages/org-admin/org-user-shared-repos.js

@@ -99,7 +99,7 @@ class Item extends Component {
     return (
       <tr>
         <td>
-          <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
+          <img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
         </td>
         <td>{repo.repo_name}</td>
         <td>{repo.owner_name}</td>

frontend/src/pages/search/search-results.js

@@ -27,7 +27,7 @@ class ResultsItem extends React.Component {
   render() {
     let item = this.props.item;
     let linkContent = decodeURI(item.fullpath).substring(1);
-    let folderIconUrl = linkContent ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl(true);
+    let folderIconUrl = linkContent ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl();
     let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name);
 
     if (item.thumbnail_url !== '') {

frontend/src/pages/shared-libs/item.js

@@ -11,7 +11,7 @@ import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
-import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
+import { LIST_MODE } from '../../components/dir-view-mode/constants';
 
 dayjs.extend(relativeTime);
 
@@ -173,8 +173,7 @@ class Item extends Component {
 
     const { isStarred } = this.state;
     const { data, currentViewMode = LIST_MODE } = this.props;
-    const useBigLibraryIcon = currentViewMode == GRID_MODE;
-    data.icon_url = Utils.getLibIconUrl(data, useBigLibraryIcon);
+    data.icon_url = Utils.getLibIconUrl(data);
     data.icon_title = Utils.getLibIconTitle(data);
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';

frontend/src/pages/starred/starred.js

@@ -270,7 +270,7 @@ class Item extends Component {
   render() {
     const { data: item } = this.props;
     if (item.path === '/') {
-      item.item_icon_url = Utils.getDefaultLibIconUrl(false);
+      item.item_icon_url = Utils.getDefaultLibIconUrl();
     } else {
       item.item_icon_url = item.is_dir ? Utils.getFolderIconUrl(false) : Utils.getFileIconUrl(item.obj_name);
     }

frontend/src/utils/utils.js

@@ -348,17 +348,12 @@ export const Utils = {
     return isIE || isIE11;
   },
 
-  getDefaultLibIconUrl: function (isBig) {
-    let size = Utils.isHiDPI() ? 48 : 24;
-    size = isBig ? 256 : size;
-    let icon_name = 'lib.png';
-    return mediaUrl + 'img/lib/' + size + '/' + icon_name;
+  getDefaultLibIconUrl: function () {
+    return mediaUrl + 'img/lib/256/lib.png';
   },
 
-  getLibIconUrl: function (repo, isBig) {
+  getLibIconUrl: function (repo) {
     let permission = repo.permission || repo.share_permission; // Compatible with regular repo and repo shared
-    let size = Utils.isHiDPI() ? 48 : 24;
-    size = isBig ? 256 : size;
 
     let icon_name = 'lib.png';
     if (repo.encrypted) {
@@ -381,7 +376,7 @@ export const Utils = {
       icon_name = 'lib-readonly.png';
     }
 
-    return mediaUrl + 'img/lib/' + size + '/' + icon_name;
+    return mediaUrl + 'img/lib/256/' + icon_name;
   },
 
   getDirentIcon: function (dirent, isBig) {