render SVG in the card header when height and width are not set (open…

…datahub-io#869) * render SVG in the card header when height and width are not set * update brand
strangiato · Oct 18, 2023 · 25a4582 · 25a4582
1 parent 96ee8b8
commit 25a4582
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 deletions.
diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
@@ -16,6 +16,10 @@ html, body, #root {
     opacity: 1;
     color: var(--pf-global--icon--Color--light);
   }
+  &__brand {
+    height: 36px;
+    width: 100%;
+  }
 }
 // specificity targeting form elements to override --pf-global--FontSize--md
 .pf-c-page, .pf-c-modal-box {

diff --git a/frontend/src/app/Header.tsx b/frontend/src/app/Header.tsx
@@ -31,9 +31,11 @@ const Header: React.FC<HeaderProps> = ({ onNotificationsClick }) => {
       )}
       <MastheadMain>
         <MastheadBrand component={(props) => <Link {...props} to="/" />}>
-          <Brand heights={{ default: '36px' }} alt={`${ODH_PRODUCT_NAME} Logo`}>
-            <source srcSet={`${window.location.origin}/images/${ODH_LOGO}`} />
-          </Brand>
+          <Brand
+            className="odh-dashboard__brand"
+            src={`${window.location.origin}/images/${ODH_LOGO}`}
+            alt={`${ODH_PRODUCT_NAME} Logo`}
+          />
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

diff --git a/frontend/src/components/BrandImage.tsx b/frontend/src/components/BrandImage.tsx
@@ -35,6 +35,7 @@ const BrandImage: React.FC<BrandImageProps> = ({ src, ...props }) => {
     <Brand
       {...props}
       heights={{ default: '40px' }}
+      widths={{ default: '100%' }}
       onError={() => setImage((prevImage) => ({ imgSrc: prevImage.imgSrc, isValid: false }))}
     >
       <source srcSet={image.imgSrc} />

diff --git a/frontend/src/components/OdhAppCard.tsx b/frontend/src/components/OdhAppCard.tsx
@@ -184,7 +184,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
       isSelectable={!disabled}
     >
       <CardHeader>
-        <CardHeaderMain style={{ maxWidth: '33%' }}>
+        <CardHeaderMain style={{ maxWidth: '33%', width: '100%' }}>
           <BrandImage src={odhApp.spec.img} alt={odhApp.spec.displayName} />
         </CardHeaderMain>
         <CardActions hasNoOffset>

diff --git a/frontend/src/components/OdhDocCard.tsx b/frontend/src/components/OdhDocCard.tsx
@@ -141,7 +141,7 @@ const OdhDocCard: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFavorit
       isSelectable
     >
       <CardHeader>
-        <CardHeaderMain style={{ maxWidth: '33%' }}>
+        <CardHeaderMain style={{ maxWidth: '33%', width: '100%' }}>
           <BrandImage
             src={odhDoc.spec.img || odhDoc.spec.icon || ''}
             alt={odhDoc.spec.displayName}

diff --git a/frontend/src/components/OdhExploreCard.tsx b/frontend/src/components/OdhExploreCard.tsx
@@ -61,7 +61,7 @@ const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
       onClick={() => !disabled && onSelect()}
     >
       <CardHeader>
-        <CardHeaderMain style={{ maxWidth: '33%' }}>
+        <CardHeaderMain style={{ maxWidth: '33%', width: '100%' }}>
           <BrandImage src={odhApp.spec.img} alt={odhApp.spec.displayName} />
         </CardHeaderMain>
         {!dashboardConfig.spec.dashboardConfig.disableISVBadges && (