Prevent operator icons from stretching in operator subscription page

Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1669304

Author: jeff-phillips-18

frontend/__tests__/components/operator-lifecycle-manager/clusterserviceversion.spec.tsx

@@ -120,8 +120,6 @@ describe(ClusterServiceVersionLogo.displayName, () => {
   it('renders logo image from given base64 encoded image string', () => {
     const image: ReactWrapper<React.ImgHTMLAttributes<any>> = wrapper.find('img');
 
-    expect(image.props().height).toEqual('40');
-    expect(image.props().width).toEqual('40');
     expect(image.props().src).toEqual(`data:${testClusterServiceVersion.spec.icon.mediatype};base64,${testClusterServiceVersion.spec.icon.base64data}`);
   });
 
@@ -130,8 +128,6 @@ describe(ClusterServiceVersionLogo.displayName, () => {
     const fallbackImg: ReactWrapper<React.ImgHTMLAttributes<any>> = wrapper.find('img');
 
     expect(fallbackImg.props().src).toEqual(operatorLogo);
-    expect(fallbackImg.props().height).toEqual('40');
-    expect(fallbackImg.props().width).toEqual('40');
   });
 
   it('renders ClusterServiceVersion name and provider from given spec', () => {

frontend/public/components/catalog/_catalog.scss

@@ -86,15 +86,15 @@ $catalog-item-icon-size-sm: 24px;
     max-width: $catalog-item-icon-size-sm;
 
     &[src$=".svg"] {
-      height: $catalog-item-icon-size-sm;
+      width: $catalog-item-icon-size-sm;
     }
 
     &--large {
       max-height: $catalog-item-icon-size-lg;
       max-width: $catalog-item-icon-size-lg;
 
       &[src$=".svg"] {
-        height: $catalog-item-icon-size-lg;
+        width: $catalog-item-icon-size-lg;
       }
     }
   }

frontend/public/components/operator-lifecycle-manager/index.tsx

@@ -240,11 +240,11 @@ export const referenceForProvidedAPI = (desc: CRDDescription | APIServiceDefinit
 
 export const ClusterServiceVersionLogo: React.SFC<ClusterServiceVersionLogoProps> = (props) => {
   const {icon, displayName, provider, version} = props;
+  const imgSrc = _.isEmpty(icon) ? operatorLogo : `data:${icon.mediatype};base64,${icon.base64data}`;
 
   return <div className="co-clusterserviceversion-logo">
-    <div className="co-clusterserviceversion-logo__icon">{ _.isEmpty(icon)
-      ? <img src={operatorLogo} height="40" width="40" />
-      : <img src={`data:${icon.mediatype};base64,${icon.base64data}`} height="40" width="40" /> }
+    <div className="co-clusterserviceversion-logo__icon">
+      <img className="co-catalog-item-icon__img co-catalog-item-icon__img--large" src={imgSrc} />
     </div>
     <div className="co-clusterserviceversion-logo__name">
       <h1 className="co-clusterserviceversion-logo__name__clusterserviceversion">{displayName}</h1>