fix notebook card style

impresso · Oct 11, 2024 · 7e00131 · 7e00131
1 parent ea26806
commit 7e00131
Show file tree

Hide file tree

Showing 12 changed files with 403 additions and 308 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,9 @@
     "@types/react-bootstrap": "^0.32.37",
     "@types/react-dom": "^18.3.0",
     "@uiw/codemirror-theme-duotone": "^4.23.2",
+    "@uiw/codemirror-theme-material": "^4.23.5",
     "@uiw/codemirror-theme-nord": "^4.23.1",
+    "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.1",
     "astro": "^4.15.10",
     "axios": "^1.7.7",

diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.4'
+const PACKAGE_VERSION = '2.4.10'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

diff --git a/src/components/AcceptTermsOfUse.tsx b/src/components/AcceptTermsOfUse.tsx
@@ -0,0 +1,25 @@
+import { useState } from "react"
+import { Form } from "react-bootstrap"
+
+const AcceptTermsOfUse = () => {
+  const [accepted, setAccepted] = useState(false)
+
+  const handleAccept = () => {
+    setAccepted((accepted) => !accepted)
+  }
+
+  return (
+    <Form.Check>
+      <Form.Check.Input
+        type="checkbox"
+        id="terms-of-use"
+        checked={accepted}
+        onChange={handleAccept}
+      />
+      <Form.Check.Label htmlFor="terms-of-use">
+        I accept the terms of use
+      </Form.Check.Label>
+    </Form.Check>
+  )
+}
+export default AcceptTermsOfUse
diff --git a/src/components/CodeSnippet.tsx b/src/components/CodeSnippet.tsx
@@ -1,7 +1,6 @@
 import { useState, useRef, useEffect } from "react"
 import ReactCodeMirror, { EditorView } from "@uiw/react-codemirror"
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror"
-import { nord } from "@uiw/codemirror-theme-nord"
 import { duotoneDark } from "@uiw/codemirror-theme-duotone"
 import { python } from "@codemirror/lang-python"
 import { Copy, CheckCircle } from "iconoir-react"
@@ -11,13 +10,17 @@ import "./CodeSnippet.css"
 export interface CodeSnippetProps {
   value?: string
   readonly?: boolean
-  theme?: "nord" | "duotoneDark"
+  basicSetup?: any
 }
 
 const CodeSnippet: React.FC<CodeSnippetProps> = ({
   value = "",
   readonly = false,
-  theme = "nord",
+  basicSetup = {
+    lineNumbers: true,
+    tabSize: 2,
+    foldGutter: true,
+  },
 }) => {
   const timerRef = useRef<ReturnType<typeof setTimeout>>()
   const codeMirrorRef = useRef<ReactCodeMirrorRef>(null)
@@ -58,12 +61,17 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
       <ReactCodeMirror
         ref={codeMirrorRef}
         value={value}
-        theme={theme === "nord" ? nord : duotoneDark}
+        theme={duotoneDark}
         readOnly={readonly}
+        basicSetup={basicSetup}
         extensions={[python(), EditorView.lineWrapping]}
       />
       <button className="copy-code" onClick={handleCopy} aria-label="copy code">
-        {isCopied ? <CheckCircle strokeWidth={2} /> : <Copy strokeWidth={2} />}
+        {isCopied ? (
+          <CheckCircle strokeWidth={1.5} />
+        ) : (
+          <Copy strokeWidth={1.5} />
+        )}
       </button>
     </div>
   )

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -137,25 +137,46 @@ const Footer: React.FC<{
           </Col>
         </Row>
         <Row className="mb-5 py-3 border-top border-dark">
-          <GitInfo
-            version={import.meta.env.PUBLIC_VERSION}
-            gitBranch={import.meta.env.PUBLIC_GIT_BRANCH}
-            gitBuildDate={import.meta.env.PUBLIC_BUILD_DATE}
-            gitCommitSha={import.meta.env.PUBLIC_GIT_COMMIT_SHA}
-            gitTag={import.meta.env.PUBLIC_GIT_TAG}
-            gitRemoteOriginUrl={import.meta.env.PUBLIC_GIT_REMOTE}
-          >
-            <p>
-              Data version:{" "}
-              <b>
-                {status === "pending" && <span>Loading...</span>}
-                {status === "error" && (
-                  <span>Error: {JSON.stringify(error.message)}</span>
-                )}
-                {status === "success" && <span>{data?.data.version}</span>}
-              </b>
-            </p>
-          </GitInfo>
+          <Col sm={6}>
+            <GitInfo
+              version={import.meta.env.PUBLIC_VERSION}
+              gitBranch={import.meta.env.PUBLIC_GIT_BRANCH}
+              gitBuildDate={import.meta.env.PUBLIC_BUILD_DATE}
+              gitCommitSha={import.meta.env.PUBLIC_GIT_COMMIT_SHA}
+              gitTag={import.meta.env.PUBLIC_GIT_TAG}
+              gitRemoteOriginUrl={import.meta.env.PUBLIC_GIT_REMOTE}
+            >
+              <p>
+                Data version:{" "}
+                <b>
+                  {status === "pending" && <span>Loading...</span>}
+                  {status === "error" && (
+                    <span>Error: {JSON.stringify(error.message)}</span>
+                  )}
+                  {status === "success" && <span>{data?.data.version}</span>}
+                </b>
+              </p>
+            </GitInfo>
+          </Col>
+          <Col>
+            <ul className="list-unstyled">
+              <li>
+                <Link underline to="/about">
+                  About
+                </Link>
+              </li>
+              <li>
+                <Link underline to="/plans">
+                  Plans
+                </Link>
+              </li>
+            </ul>
+          </Col>
+          <Col>
+            <Link underline to="/terms-of-use">
+              Terms of Use
+            </Link>
+          </Col>
         </Row>
       </Container>
     </footer>

diff --git a/src/components/NotebookCard.css b/src/components/NotebookCard.css
@@ -13,7 +13,9 @@
   font-size: var(--fs18px);
   font-weight: bold;
 }
-
+.NotebookCard h3:hover {
+  text-decoration: underline;
+}
 .date {
   display: flex;
   align-items: center;
@@ -39,3 +41,6 @@
 .NotebookCard .NotebookCard__authors:hover {
   text-decoration: underline;
 }
+.NotebookCard .link-button:hover {
+  background-color: var(--impresso-color-yellow);
+}
diff --git a/src/components/NotebookCard.tsx b/src/components/NotebookCard.tsx
@@ -28,42 +28,46 @@ const NotebookCard: React.FC<{
   const accessDateTime = DateTime.fromJSDate(accessTime)
 
   return (
-    <Link to={notebook.href}>
-      <div className={`NotebookCard shadow-sm ${className}`}>
-        <div className="p-3 d-flex align-items-center">
-          <div className="Avatar">
-            <Avatar
-              size={40}
-              name={notebook.href}
-              variant="marble"
-              square={false}
+    <div className={`NotebookCard shadow-sm ${className}`}>
+      <div className="px-3 py-2 d-flex align-items-center">
+        <div className="Avatar">
+          <Avatar
+            size={40}
+            name={notebook.href}
+            variant="marble"
+            square={false}
+          />
+        </div>
+        <div className="mx-3">
+          <a target="_blank" className="small" href={notebook.googleColabUrl}>
+            <img
+              src="https://img.shields.io/badge/Open_in_Colab-fafafa?logo=googlecolab"
+              alt="Open In Colab"
             />
-          </div>
-          <div className="mx-3">
-            <div className="date">
-              <div className="badge bg-secondary me-2">Python notebook</div>{" "}
-            </div>
+          </a>
+          <Link to={notebook.href}>
             <h3 className="mx-0 my-2">{notebook?.title}</h3>
-            <div className="small">
-              {" "}
-              {accessDateTime.toFormat("yyyy LLL dd")}
-            </div>
-            <ol className="NotebookCard__authors  list-unstyled d-flex flex-wrap gap-1">
-              <li>by:</li>
-              {notebook.authors.map((author) => (
-                <li className="inline-block" key={author.name}>
-                  <AuthorCard author={author} />
-                </li>
-              ))}
-            </ol>
-            {children}
-          </div>
-          <div className="ms-auto link-button">
-            <ArrowRight strokeWidth={2} />
-          </div>
+          </Link>
+          {/* <div className="small"> {accessDateTime.toFormat("yyyy LLL dd")}</div> */}
+          <ol className="NotebookCard__authors small list-unstyled d-flex flex-wrap mb-2">
+            <li>by&nbsp;</li>
+            {notebook.authors.map((author, i) => (
+              <li className="inline-block" key={author.name}>
+                {" "}
+                <AuthorCard author={author} />
+                {i < notebook.authors.length - 1 && notebook.authors.length > 1
+                  ? ","
+                  : ""}
+              </li>
+            ))}
+          </ol>
+          {children}
         </div>
+        <Link to={notebook.href} className="ms-auto link-button">
+          <ArrowRight strokeWidth={2} />
+        </Link>
       </div>
-    </Link>
+    </div>
   )
 }
 export default NotebookCard
diff --git a/src/components/NotebookViewer.tsx b/src/components/NotebookViewer.tsx
@@ -5,6 +5,7 @@ import type { Notebook } from "./NotebookCard"
 import NotebookCard from "./NotebookCard"
 import AuthorCard from "./AuthorCard"
 import { GithubCircle } from "iconoir-react"
+import Alert from "./Alert"
 
 export interface NotebookViewerProps {
   notebook: Notebook
@@ -72,17 +73,16 @@ const NotebookViewer: React.FC<NotebookViewerProps> = ({
             {notebook.googleColabUrl ? (
               <a target="_blank" href={notebook.googleColabUrl}>
                 <img
-                  src="https://colab.research.google.com/assets/colab-badge.svg"
+                  src="https://img.shields.io/badge/Open_in_Colab-212529?logo=googlecolab"
                   alt="Open In Colab"
                 />
               </a>
             ) : null}
-            <a
-              href={notebook.githubUrl}
-              className="small d-flex gap-1 align-items-end"
-            >
-              <GithubCircle width={16} className="pt-1" />
-              Browse source code
+            <a href={notebook.githubUrl}>
+              <img
+                src="https://img.shields.io/badge/Open_in_GitHub-212529?logo=GitHub"
+                alt="Open In GitHub"
+              ></img>
             </a>
           </section>
         </Col>
@@ -92,6 +92,11 @@ const NotebookViewer: React.FC<NotebookViewerProps> = ({
       </Row>
       <Row className="mb-3">
         <Col lg="7">
+          <Alert className="mb-4 p-3">
+            <div className="me-2">
+              <b>Note:</b> This is a static preview of the Jupyter notebook.
+            </div>
+          </Alert>
           {cells.map((cell, i) => (
             <div key={cell.cellNumber}>
               {cell.cellType === "markdown" && (
@@ -101,7 +106,7 @@ const NotebookViewer: React.FC<NotebookViewerProps> = ({
                 />
               )}
               {cell.cellType === "code" && (
-                <CodeSnippet value={cell.content} readonly />
+                <CodeSnippet value={cell.content} readonly theme="nord" />
               )}
             </div>
           ))}

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -8,6 +8,7 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
   subtitle?: string
   size?: ModalProps["size"]
   modalBodyClassName?: string
+  footer?: React.ReactNode
 }
 
 const Page: React.FC<PageProps> = ({
@@ -18,6 +19,7 @@ const Page: React.FC<PageProps> = ({
   fullscreen = undefined,
   size,
   modalBodyClassName = "",
+  footer = null,
 }) => {
   const [show, setShow] = useState(false)
   const timerRef = useRef<ReturnType<typeof setTimeout>>()
@@ -63,6 +65,7 @@ const Page: React.FC<PageProps> = ({
         </Modal.Title>
       </Modal.Header>
       <Modal.Body className={modalBodyClassName}>{children}</Modal.Body>
+      {footer !== null ? <Modal.Footer>{footer}</Modal.Footer> : null}
     </Modal>
   )
 }

diff --git a/src/components/TermsOfUseModal.tsx b/src/components/TermsOfUseModal.tsx
@@ -1,3 +1,4 @@
+import AcceptTermsOfUse from "./AcceptTermsOfUse"
 import Page from "./Page"
 import { Container, Row } from "react-bootstrap"
 
@@ -7,6 +8,7 @@ const TermsOfUseModal: React.FC = () => {
       title="Terms Of Use - Impresso Datalab"
       fullscreen="xl-down"
       size="xl"
+      footer={<AcceptTermsOfUse />}
     >
       <Container>
         <Row>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -245,8 +245,7 @@ button.btn-secodary:hover {
   transition: background-color 0.25s ease-in-out;
 }
 
-.link-button:hover,
-.NotebookCard:hover .link-button {
+.link-button:hover {
   background-color: var(--impresso-color-yellow);
 }