Adds few UI modification

This patch adds: - Adds Tooltip to resource catalog and kind icon on resource card - Adds Tooltip to average rating on resource details page - Reduce space between rating and rating icon on resource details page - Replace CRA icon(browser icon) with Tekton logo - Moves alert a little bit down - Modifies resource description page width Signed-off-by: Shiv Verma <[email protected]>
tektoncd · Dec 23, 2020 · 0c833fe · 0c833fe
1 parent 77cb573
commit 0c833fe
Show file tree

Hide file tree

Showing 16 changed files with 403 additions and 264 deletions.
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -2,16 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/tekton.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="All Things Tekton" />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/ui/public/logo192.png b/ui/public/logo192.png
diff --git a/ui/public/logo512.png b/ui/public/logo512.png
diff --git a/ui/public/manifest.json b/ui/public/manifest.json
@@ -1,23 +1,6 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

diff --git a/ui/public/tekton.png b/ui/public/tekton.png
diff --git a/ui/src/components/Cards/__snapshots__/Cards.test.tsx.snap b/ui/src/components/Cards/__snapshots__/Cards.test.tsx.snap
@@ -6,12 +6,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"4\\" />
@@ -52,12 +56,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
@@ -97,12 +105,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
@@ -142,12 +154,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
@@ -190,12 +206,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
@@ -236,12 +256,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"build\\" size=\\"sm\\" label=\\"Task\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />
@@ -281,12 +305,16 @@ exports[`Cards should render the resources on cards 1`] = `
     <Link to={{...}} className=\\"hub-card-link\\">
       <Card className=\\"hub-resource-card\\">
         <CardHeader>
-          <span className=\\"hub-kind-icon\\">
-            <Icon id=\\"domain\\" size=\\"sm\\" label=\\"Pipeline\\" />
-          </span>
-          <span className=\\"hub-catalog-icon\\">
-            <Icon id=\\"cat\\" size=\\"sm\\" label=\\"tekton-hub\\" />
-          </span>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-kind-icon\\">
+              <Icon id=\\"domain\\" size=\\"sm\\" label=\\"Pipeline\\" />
+            </span>
+          </Tooltip>
+          <Tooltip content={{...}}>
+            <span className=\\"hub-catalog-icon\\">
+              <Icon id=\\"cat\\" size=\\"sm\\" label=\\"tekton-hub\\" />
+            </span>
+          </Tooltip>
           <CardActions>
             <span className=\\"hub-rating-icon\\">
               <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />

diff --git a/ui/src/components/Cards/index.tsx b/ui/src/components/Cards/index.tsx
@@ -8,14 +8,16 @@ import {
   TextContent,
   Badge,
   CardFooter,
-  GalleryItem
+  GalleryItem,
+  Tooltip
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { IconSize } from '@patternfly/react-icons';
 import { IResource } from '../../store/resource';
 import { ITag } from '../../store/category';
 import Icon from '../Icon';
 import { Icons } from '../../common/icons';
+import { titleCase } from '../../common/titlecase';
 import './Cards.css';
 
 interface Props {
@@ -35,18 +37,20 @@ const Cards: React.FC<Props> = (resources) => {
           >
             <Card className="hub-resource-card">
               <CardHeader>
-                <span className="hub-kind-icon">
-                  <Icon id={resource.kind.icon} size={IconSize.sm} label={resource.kind.name} />
-                </span>
-
-                <span className="hub-catalog-icon">
-                  <Icon
-                    id={resource.catalog.icon}
-                    size={IconSize.sm}
-                    label={resource.catalog.name}
-                  />
-                </span>
-
+                <Tooltip content={<b> {resource.kind.name}</b>}>
+                  <span className="hub-kind-icon">
+                    <Icon id={resource.kind.icon} size={IconSize.sm} label={resource.kind.name} />
+                  </span>
+                </Tooltip>
+                <Tooltip content={<b>{titleCase(resource.catalog.name)} </b>}>
+                  <span className="hub-catalog-icon">
+                    <Icon
+                      id={resource.catalog.icon}
+                      size={IconSize.sm}
+                      label={resource.catalog.name}
+                    />
+                  </span>
+                </Tooltip>
                 <CardActions>
                   <span className="hub-rating-icon">
                     <Icon id={Icons.Star} size={IconSize.sm} label={String(resource.rating)} />

diff --git a/ui/src/components/Description/Description.css b/ui/src/components/Description/Description.css
@@ -1,5 +1,4 @@
 .hub-description {
-  max-width: 90em;
   margin: auto;
   margin-top: 2em;
 }

diff --git a/ui/src/components/Description/index.tsx b/ui/src/components/Description/index.tsx
@@ -27,7 +27,7 @@ const Description: React.FC<Props> = (props) => {
     ) : (
       <React.Fragment>
         <Grid className="hub-description">
-          <GridItem span={12}>
+          <GridItem offset={1} span={10}>
             <Card>
               <CardHeader className="hub-description-header">
                 <Grid className="hub-tabs">

diff --git a/ui/src/containers/App/App.css b/ui/src/containers/App/App.css
@@ -2,3 +2,7 @@
   position: fixed;
   width: 100%;
 }
+
+.pf-c-alert {
+  margin-top: 3em;
+}
diff --git a/ui/src/containers/BasicDetails/BasicDetails.css b/ui/src/containers/BasicDetails/BasicDetails.css
@@ -87,9 +87,20 @@
 
 .hub-details-average-rating {
   position: relative;
-  left: 3em;
 }
 
 .hub-details-average-rating svg {
   color: #484848;
 }
+
+.hub-details-rating__margin {
+  margin-top: 1em;
+}
+
+.hub-details-rating-tooptip {
+  margin-left: -1em;
+}
+
+.hub-details-rating-value {
+  margin-left: -0.3em;
+}