fix(client): address visual glitches in many components (#2883)

* fix badges, popovers, and lists * remove background on tables and items * fix corners rounding * remove unused resources and CSS rules * better handle authors and sources in datasets
SwissDataScienceCenter · Nov 9, 2023 · 924f95e · 924f95e
1 parent 1081328
commit 924f95e
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 298 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,49 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 70px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Sticky Footer */
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-.footer {
-  /* position: absolute; to fix later */
-  bottom: 0;
-  width: 100%;
-  background-color: #f5f5f5;
-}
-
 /* Component classes */
 .time-caption {
   color: var(--bs-dark);
@@ -60,73 +14,10 @@ html {
   border: 0 !important;
 }
 
-.comment-block {
-  display: inline;
-}
-
-.expanded-reference {
-  border: 1px solid #aaa;
-  border-radius: 15px;
-  padding: 15px;
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
-.notebook-comparison {
-  border: 1px solid #ddd;
-  border-radius: 15px;
-  padding: 10px;
-  margin-left: 0px;
-  margin-top: 5px;
-  margin-right: 0px;
-  margin-bottom: 5px;
-}
-
 .image-preview {
   max-width: 100%;
 }
 
-.text-link {
-  background: none;
-  border: none;
-  margin: 0px;
-  padding: 0px;
-  color: blue;
-  cursor: pointer;
-  outline: none;
-}
-
-.text-link input[type="button"]:focus {
-  outline: none;
-}
-
-/* TODO: Try to replace css tooltip by reactstraps tooltip component */
-.simple-tooltip {
-  position: relative;
-  display: inline-block;
-  color: #dd0000;
-}
-
-.simple-tooltip .tooltiptext {
-  visibility: hidden;
-  background-color: #ccc;
-  width: 260px;
-  color: #000000;
-  text-align: center;
-  padding: 5px 10px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-}
-
-.simple-tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
-.deployButton {
-  margin-bottom: 10px;
-}
-
 .bouncer {
   text-align: center;
   margin: 50px auto 25px auto;
@@ -163,25 +54,6 @@ html {
   }
 }
 
-.delay1s {
-  visibility: hidden;
-  opacity: 0;
-  animation: delay1s 2s forwards;
-}
-
-@keyframes delay1s {
-  0%,
-  50% {
-    visibility: visible;
-    opacity: 0;
-  }
-
-  100% {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 .renku-markdown code {
   padding: 0.2em 0.4em;
   font-size: 85%;
@@ -209,14 +81,6 @@ html {
   word-break: normal;
 }
 
-.mw-0 {
-  min-width: 0;
-}
-
-.limit-width {
-  max-width: 1140px;
-}
-
 .visually-hidden {
   position: absolute;
   left: -100vw;

diff --git a/client/src/components/commits/Commits.css b/client/src/components/commits/Commits.css
@@ -1,7 +1,7 @@
 .commit-object,
 .commit-date {
-  border-width: 1px 0 0 0;
   padding: 0.5rem;
+  border: 1px solid #e4e7ea;
 }
 
 .commit-object .commit-cut-message {
@@ -17,15 +17,9 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #f5f5f5;
-  border: unset;
-}
-
-.commit-date:first-of-type {
-  border-top: 1px solid #e4e7ea;
 }
 
 .commit-object {
-  border-bottom: 1px solid #e4e7ea;
   line-height: 1.5rem;
 }
 
@@ -36,3 +30,7 @@
 .commit-buttons > .last-item-button-group {
   border-radius: 0 8px 8px 0;
 }
+
+.commit-buttons button code {
+  font-size: 14px !important;
+}
diff --git a/client/src/components/commits/Commits.js b/client/src/components/commits/Commits.js
@@ -153,15 +153,14 @@ function SingleCommit(props) {
               className="text-monospace m-auto commit-buttons"
               size="sm"
             >
-              <Button color="rk-background" className="border" disabled>
-                {props.commit.short_id}
-              </Button>
               <Button
-                color="rk-background rounded-0"
-                className="border"
+                color="rk-background"
+                className="border rounded-0 rounded-start"
                 id={idCopyButton}
               >
-                <Clipboard clipboardText={props.commit.id} />
+                <Clipboard clipboardText={props.commit.id}>
+                  <code>{props.commit.short_id}</code>
+                </Clipboard>
               </Button>
               <UncontrolledTooltip placement="top" target={idCopyButton}>
                 Copy commit SHA

diff --git a/client/src/dataset/Dataset.present.js b/client/src/dataset/Dataset.present.js
@@ -137,31 +137,29 @@ function DisplayProjects(props) {
         <Table size="sm" borderless>
           <thead>
             <tr>
-              <th className="bg-transparent">Name</th>
-              <th className="bg-transparent text-center">Date Created</th>
-              <th className="bg-transparent text-center">Created By</th>
+              <th>Name</th>
+              <th className="text-center">Date Created</th>
+              <th className="text-center">Created By</th>
             </tr>
           </thead>
           <tbody>
             {props.projects.map((project, index) => (
               <tr data-cy="project-using-dataset" key={project.name + index}>
-                <td className="bg-transparent text-break">
+                <td className="text-break">
                   <Link to={`${props.projectsUrl}/${project.path}`}>
                     {project.path}
                   </Link>
                 </td>
                 {project.created && project.created.dateCreated ? (
-                  <td className="bg-transparent text-center">
+                  <td className="text-center">
                     {toHumanDateTime({
                       datetime: project.created.dateCreated,
                       format: "date",
                     })}
                   </td>
                 ) : null}
                 {project.created && project.created.agent ? (
-                  <td className="bg-transparent text-center">
-                    {project.created.agent.name}
-                  </td>
+                  <td className="text-center">{project.created.agent.name}</td>
                 ) : null}
               </tr>
             ))}
@@ -176,7 +174,7 @@ function DisplayDescription(props) {
   if (!props.description) return null;
 
   return (
-    <Card key="datasetDescription" className="mb-4 my-4">
+    <Card key="datasetDescription" className="mb-4">
       <CardHeader className="bg-white p-3 ps-4">Dataset description</CardHeader>
       <CardBody className="p-4 pt-3 pb-3 lh-lg pb-2">
         {props.insideProject ? (
@@ -234,31 +232,29 @@ function DisplayInfoTable(props) {
       <ExternalLink url={dataset.sameAs} title={dataset.sameAs} role="link" />
     ) : dataset.url && props.insideProject ? (
       <ExternalLink url={dataset.url} title={dataset.url} role="link" />
-    ) : null;
+    ) : (
+      "Not available"
+    );
 
   const authors = getDatasetAuthors(dataset);
+  const authorsText = authors ? authors : "Not available";
+  const authorPluralization = dataset.published?.creator?.length > 1 ? "s" : "";
 
-  // eslint-disable-next-line
   return (
-    <Table className="mb-4 table-borderless" size="sm">
+    <Table className="table-borderless mb-0" size="sm">
       <tbody className="text-rk-text">
+        <tr>
+          <td className="text-dark fw-bold col-auto">
+            Author{authorPluralization}
+          </td>
+          <td>{authorsText}</td>
+        </tr>
         {source ? (
           <tr>
-            <td
-              className="text-dark fw-bold bg-transparent"
-              style={{ width: "120px" }}
-            >
+            <td className="text-dark fw-bold" style={{ width: "120px" }}>
               Source
             </td>
-            <td className="bg-transparent">{source}</td>
-          </tr>
-        ) : null}
-        {dataset.published?.creator?.length >= 3 ? (
-          <tr>
-            <td className="text-dark fw-bold col-auto bg-transparent">
-              Author(s)
-            </td>
-            <td className="bg-transparent">{authors}</td>
+            <td>{source}</td>
           </tr>
         ) : null}
       </tbody>

diff --git a/client/src/file/File.present.js b/client/src/file/File.present.js
@@ -72,7 +72,7 @@ class FileCard extends React.Component {
           : this.props.commit.title;
       commitHeader = (
         <ListGroup flush>
-          <ListGroupItem>
+          <ListGroupItem className="border-bottom">
             <div className="d-flex justify-content-between flex-wrap">
               <div>
                 <a
@@ -467,7 +467,7 @@ function NotebookDisplayForm(props) {
     );
 
   return (
-    <ListGroup key="controls" flush className="border-top-0">
+    <ListGroup key="controls" flush className="border-bottom">
       <ListGroupItem>
         <div className="form-check form-switch">
           <Input

diff --git a/client/src/file/FilePreview.tsx b/client/src/file/FilePreview.tsx
@@ -199,7 +199,7 @@ function FilePreview(props: FilePreviewProps) {
   // pdf document
   if ("pdf" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyPDFViewer
           file={`data:application/pdf;base64,${props.file.content}`}
         />
@@ -210,7 +210,7 @@ function FilePreview(props: FilePreviewProps) {
   // Free text
   if ("text" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <pre className="no-highlight">
           <code>{atobUTF8(props.file.content)}</code>
         </pre>
@@ -222,7 +222,7 @@ function FilePreview(props: FilePreviewProps) {
   if ("md" === fileType) {
     const content = atobUTF8(props.file.content);
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyRenkuMarkdown
           projectPathWithNamespace={props.projectPathWithNamespace}
           filePath={props.file.file_path}
@@ -252,7 +252,7 @@ function FilePreview(props: FilePreviewProps) {
   // Code with syntax highlighting
   if (fileIsCode) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyCodePreview
           content={props.file.content}
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -265,7 +265,7 @@ function FilePreview(props: FilePreviewProps) {
   // No extensions
   if ("none" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <pre className={"hljs bg-white"}>
           <code>{atobUTF8(props.file.content)}</code>
         </pre>
@@ -275,7 +275,7 @@ function FilePreview(props: FilePreviewProps) {
 
   // File extension not supported
   return (
-    <CardBody key="file preview" className="pb-0 bg-white">
+    <CardBody key="file preview" className="pb-0">
       <p>{`Unable to preview file with extension .${getFileExtension()}`}</p>
     </CardBody>
   );

diff --git a/client/src/index.css b/client/src/index.css
diff --git a/client/src/index.js b/client/src/index.js
@@ -7,7 +7,6 @@ import "jquery";
 
 // Use our version of bootstrap, not the one in import 'bootstrap/dist/css/bootstrap.css';
 import "./styles/index.scss";
-import "./index.css";
 
 import App from "./App";
 // Disable service workers for the moment -- see below where registerServiceWorker is called