✨(demo) add a footer

Add a footer to display some useful links

README.md

@@ -23,7 +23,7 @@
 <div align="center">
 
 [![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/main.svg?style=svg)](https://circleci.com/gh/openfun/cunningham/tree/main)
-[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/3qjUJjp)
+[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/TXPSCMeDzd)
 
 </div>
 

apps/demo/src/Home.tsx

@@ -54,8 +54,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
   }, [pagination.page, sortModel, modal.isOpen, refresh]);
 
   return (
-    <div className="page__home">
+    <main className="page__home">
-      <div className="page__home__title">
+      <header className="page__home__title">
         <h1 className="clr-greyscale-900">
           {/* eslint-disable-next-line react/no-unescaped-entities */}
           🍿Cunningham's <span className="clr-primary-400">Cast</span>
@@ -76,7 +76,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
         >
           Add character
         </Button>
-      </div>
+      </header>
+      <section>
         <div className="card">
           <DataGrid
             columns={[
@@ -152,6 +153,68 @@ export const Home = ({ modal }: { modal: PageProps }) => {
             onRowSelectionChange={setRowSelection}
           />
         </div>
-    </div>
+      </section>
+      <footer className="links">
+        <ul>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.france-universite-numerique.fr/en/"
+            >
+              France Université Numérique
+            </Button>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://discord.gg/TXPSCMeDzd"
+            >
+              Discord
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/openfun/cunningham"
+            >
+              Github
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://openfun.github.io/cunningham/storybook"
+            >
+              Documentation
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"
+            >
+              UI Kit
+            </Button>
+          </li>
+        </ul>
+      </footer>
+    </main>
   );
 };

apps/demo/src/index.scss

@@ -23,10 +23,15 @@ a {
 
 // App
 html {
-  min-height: 100vh;
   background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
 }
 
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
 .pattern {
   position: absolute;
   z-index: -1;
@@ -65,6 +70,7 @@ html {
 .container {
   margin: auto;
   position: relative;
+  height: 100%;
 
   width: 1100px;
   @media (max-width: 1200px) {
@@ -75,6 +81,10 @@ html {
 
 // Home
 .page__home {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
   &__title {
     gap: 1.5rem;
     margin: 4rem 0;
@@ -86,6 +96,10 @@ html {
       margin-top: 1.5rem;
     }
   }
+
+  section {
+    flex: 1;
+  }
 }
 
 html[data-theme="redflux"] {
@@ -150,3 +164,21 @@ html[data-theme="blueney"] {
     justify-content: center;
   }
 }
+
+// links
+.links {
+  border-top: thin solid var(--c--theme--colors--greyscale-300);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+
+  ul {
+    text-align: right;
+    padding: 0;
+  }
+  ul li {
+    display: inline-block;
+    padding: 0 0.5rem;
+    white-space: nowrap;
+  }
+}