feat: add styles for project and dataset cards (#1964) (#1978)

 Add styles for project and dataset cards, add start a session from project card

Co-authored-by: Chandrasekhar Ramakrishnan <cramakri@ethz.ch>

Fix #1964

client/package.json

@@ -43,6 +43,7 @@
     "query-string": "^6.14.1",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
+    "react-bootstrap-icons": "^1.8.4",
     "react-clipboard.js": "^2.0.16",
     "react-collapse": "^5.0.0",
     "react-cookie-consent": "^5.2.0",

client/src/dataset/list/DatasetList.present.js

@@ -188,6 +188,7 @@ class DatasetsRows extends Component {
         url: `${datasetsUrl}/${encodeURIComponent(dataset.identifier)}`,
         itemType: "dataset",
         title: dataset.title || dataset.name,
+        tagList: dataset.keywords,
         description: dataset.description !== undefined && dataset.description !== null ?
           <Fragment>
             <MarkdownTextExcerpt markdownText={dataset.description} singleLine={gridDisplay ? false : true}

client/src/landing/Landing.present.js

@@ -48,6 +48,7 @@ function truncatedProjectListRows(projects, urlFullList, gridDisplay, lastVisite
       url: url,
       itemType: "project",
       title: project.name,
+      creators: project.owner ? [project.owner] : [],
       slug: project.path_with_namespace,
       description: project.description ?
         <Fragment>
@@ -121,10 +122,10 @@ class YourProjects extends Component {
     }
 
     const title = this.props.lastVisited ? "Recent Projects" : "Your Projects";
-    return <Fragment>
+    return <div className="landing-projects-section">
       <h3 key="header">{title}</h3>
       {projectsComponent}
-    </Fragment>;
+    </div>;
   }
 }
 
@@ -157,12 +158,12 @@ class LoggedInHome extends Component {
       </Row>,
       <Row key="spacer"><Col md={12}>&nbsp;</Col></Row>,
       <Row key="content">
-        <Col xs={{ order: 2 }} md={{ size: 6, order: 1 }}>
+        <Col xs={{ order: 2 }} md={{ size: 7, order: 1 }}>
           <YourProjects
             urlMap={urlMap} loading={projects.fetching} projects={projects.list} lastVisited={projects.lastVisited} />
           <Row><Col md={12}>&nbsp;</Col></Row>
         </Col>
-        <Col xs={{ order: 1 }} md={{ size: 6, order: 2 }}>
+        <Col xs={{ order: 1 }} md={{ size: 5, order: 2 }}>
           <Welcome {...this.props} />
         </Col>
       </Row>,

client/src/project/datasets/DatasetsListView.js

@@ -23,6 +23,7 @@ function datasetToDict(datasetsUrl, dataset_kg, graphStatus, gridDisplay, datase
     url: `${datasetsUrl}/${encodeURIComponent(dataset.name)}/`,
     itemType: "dataset",
     title: dataset.title || dataset.name,
+    tagList: dataset.keywords,
     description: dataset.description !== undefined && dataset.description !== null ?
       <Fragment>
         <MarkdownTextExcerpt markdownText={dataset.description} singleLine={gridDisplay ? false : true}

client/src/project/list/ProjectList.present.js

@@ -54,6 +54,7 @@ function ProjectListRows(props) {
       itemType: "project",
       title: project.name,
       slug: project.path_with_namespace,
+      creators: project.owner ? [project.owner] : [],
       description: project.description ?
         <Fragment>
           <MarkdownTextExcerpt markdownText={project.description} singleLine={gridDisplay ? false : true}

client/src/styles/bootstrap/_custom_bootstrap_variables.scss

@@ -10,7 +10,7 @@ $rk-yellow:#D1BB4C;
 $rk-dark:#3A3A3D; // titles
 $rk-text:#838383; // text
 $rk-text-medium-light:#b3b3b3;
-$rk-text-light: #e9e9e9;
+$rk-text-light: #8E919E;
 $rk-light:#E4E7EA; // borders
 $rk-border-input: #DCE4EC;
 //backgrounds
@@ -43,6 +43,7 @@ $rk-colors : (
   "rk-pink": $rk-pink,
   "rk-green": $rk-green,
   "rk-text": $rk-text,
+  "rk-text-light": $rk-text-light,
   "rk-green-background":$rk-green-background,
   "rk-white": $rk-white,
   "rk-hover": $rk-hover,

client/src/styles/bootstrap_ext/_button.scss

@@ -292,3 +292,12 @@ $borderRadius: 1000px;
     outline: none;
   }
 }
+
+.btn-round {
+  border-radius: 1000px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

client/src/styles/components/_renku_cards.scss

@@ -0,0 +1,65 @@
+.card-entity {
+  max-width: 350px;
+  margin: auto;
+
+  .card-body {
+    padding: 1.5rem 1rem 1rem 1rem;
+  }
+}
+.card-header-entity {
+  height: 198px;
+  border-radius: 8px 8px 0 0;
+  background-size: cover;
+}
+
+.card-header-entity--project {
+  background-image: url("../assets/projectBackgroundSmall.png");
+}
+
+.card-header-entity--dataset {
+  background-image: url("../assets/datasetBackgroundSmall.png");
+}
+
+.card-type-label {
+  border-radius: 1000px;
+  background-color: rgba(255,255,255,0.8);
+  padding: 5px 15px;
+}
+
+.card-visibility-icon svg {
+  color: rgba(255,255,255,0.6);
+}
+.card-visibility-icon--bar svg {
+  color: var(--bs-dark);
+}
+
+.card-bg-title {
+  color: rgba(255,255,255,0.2);
+  font-size: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  line-height: normal;
+}
+
+.card-title {
+  font-size: 27px;
+  color: var(--bs-dark);
+  line-height: 32px;
+  font-weight: bold;
+}
+
+.card-tags {
+  min-height: 24px;
+}
+
+.card-description {
+  min-height: 24px;
+}
+
+.card-button {
+  position: absolute;
+  top: 175px;
+  right: 20px;
+}
+

client/src/styles/components/_renku_general.scss

@@ -67,3 +67,7 @@ a:focus-visible, svg:focus, svg:focus-visible {
   color: var(--bs-primary);
   background-color: white;
 }
+
+.tooltip-inner {
+  border-radius: 8px;
+}

client/src/styles/index.scss

@@ -56,6 +56,7 @@
 @import "./components/renku_home";
 @import "./components/renku_search";
 @import "./components/renku_files";
+@import "./components/renku_cards";
 @import "./components/input_tag";
 @import "./components/file_uploader";
 @import "./components/renku_styleguide";