styling tweaks to model catalog cards

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Feb 26, 2025 · 084bc8a · 084bc8a
1 parent a05d232
commit 084bc8a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/frontend/src/images/icons/RhUiTagIcon.ts b/frontend/src/images/icons/RhUiTagIcon.ts
@@ -0,0 +1,13 @@
+import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
+
+const RhUiTagIcon = createIcon({
+  name: 'RhUiTagIcon',
+  width: 36,
+  height: 36,
+  svgPath:
+    'M6.707,6.707c.3906-.3906.3906-1.0234,0-1.4141L2.707,1.293c-.3906-.3906-1.0234-.3906-1.4141,0s-.3906,1.0234,0,1.4141l4,4c.1953.1953.4512.293.707.293s.5117-.0977.707-.293Z M30.3037,17.8896l-11.5967-11.5967c-.1875-.1875-.4414-.293-.707-.293h-6c-.2656,0-.5195.1055-.707.293l-5,5c-.1875.1875-.293.4419-.293.707v6c0,.2637.1045.5171.29.7041l11.5449,11.6421c.2832.2861.6602.4443,1.0625.4453h.0039c.4014,0,.7783-.1562,1.0605-.4395l10.3418-10.3413c.2832-.2837.4395-.6606.4395-1.0615s-.1562-.7773-.4395-1.0596ZM18.9033,28.5825l-10.9033-10.9941v-5.1743l4.4141-4.4141h5.1719l10.9502,10.9502-9.6328,9.6323Z M15.5,14.0002a1.5,1.5 0 1,0 -3,0a1.5,1.5 0 1,0 3,0Z',
+  xOffset: 0,
+  yOffset: 0,
+});
+
+export default RhUiTagIcon;
diff --git a/frontend/src/images/icons/index.ts b/frontend/src/images/icons/index.ts
@@ -24,6 +24,7 @@ export { default as PipelineRunIcon } from './PipelineRunIcon';
 export { default as ProjectIcon } from './ProjectIcon';
 export { default as RegisteredModelIcon } from './RegisteredModelIcon';
 export { default as ResourcesIcon } from './ResourcesIcon';
+export { default as RhUiTagIcon } from './RhUiTagIcon';
 export { default as ServingRuntimeIcon } from './ServingRuntimeIcon';
 export { default as SingleModelIcon } from './SingleModelIcon';
 export { default as StorageClassIcon } from './StorageClassIcon';

diff --git a/frontend/src/pages/modelCatalog/components/ModelCatalogCard.tsx b/frontend/src/pages/modelCatalog/components/ModelCatalogCard.tsx
@@ -12,13 +12,14 @@ import {
   Icon,
   Split,
   SplitItem,
+  CardFooter,
 } from '@patternfly/react-core';
-import { TagIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
 import BrandImage from '~/components/BrandImage';
 import { CatalogModel } from '~/concepts/modelCatalog/types';
 import { modelDetailsUrlFromModel } from '~/pages/modelCatalog/routeUtils';
 import { getTagFromModel } from '~/pages/modelCatalog/utils';
+import { RhUiTagIcon } from '~/images/icons';
 
 export const ModelCatalogCard: React.FC<{ model: CatalogModel; source: string }> = ({
   model,
@@ -52,22 +53,24 @@ export const ModelCatalogCard: React.FC<{ model: CatalogModel; source: string }>
           </Link>
           <Split hasGutter>
             <SplitItem>
-              <Icon>
-                <TagIcon />
+              <Icon isInline>
+                <RhUiTagIcon />
               </Icon>
+              <span style={{ marginLeft: 'var(--pf-t--global--spacer--xs)' }}>
+                {getTagFromModel(model)}
+              </span>
             </SplitItem>
-            <SplitItem isFilled>{getTagFromModel(model)}</SplitItem>
           </Split>
         </StackItem>
         <StackItem isFilled>{model.description}</StackItem>
-        <StackItem>
-          {(model.tasks ?? []).map((task, index) => (
-            <Label variant="outline" key={index}>
-              {task}
-            </Label>
-          ))}
-        </StackItem>
       </Stack>
     </CardBody>
+    <CardFooter>
+      {(model.tasks ?? []).map((task, index) => (
+        <Label variant="outline" key={index}>
+          {task}
+        </Label>
+      ))}
+    </CardFooter>
   </Card>
 );