From a80368b886a1568baf14a4e270313f436aa70d6b Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Mon, 2 Dec 2024 13:42:43 +0300
Subject: [PATCH] feat: add empty area component + css styling

---
 src/App.module.css                        | 50 ++++++++++++++++++++---
 src/components/EmptyArea.tsx              | 22 ++++++++++
 src/components/appWrapper.tsx             |  2 +-
 src/components/keys/keysTable.tsx         | 49 ++++++++++++----------
 src/components/sidebar/SidebarNavLink.tsx |  3 +-
 src/routes/layout.tsx                     | 13 +++---
 6 files changed, 104 insertions(+), 35 deletions(-)
 create mode 100644 src/components/EmptyArea.tsx

diff --git a/src/App.module.css b/src/App.module.css
index a8b2006..e219a95 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -3,14 +3,11 @@
     height: 100%;
     display: flex;
     flex-direction: row;
-    /* align-items: center;
-    justify-content: center; */
     font-size: 1rem;
 }
 
 .sidebar {
     width: 20%;
-    /* background-color: aliceblue; */
     margin: 0.1em;
 }
 
@@ -23,6 +20,12 @@
     margin-top: 1em;
 }
 
+.sidebarList ul {
+    list-style-type: 'none';
+    margin: 0;
+    padding: 0;
+}
+
 .top {
     margin-top: 0.5em;
 }
@@ -33,7 +36,44 @@
 
 .main {
     width: 80%;
-    /* background-color: aqua; */
     margin: 0.1em;
-    padding: 0.5em;
+}
+
+.keysTable {
+    margin-top: 10px;
+    padding: 0.2em;
+}
+
+/* sourced and adapted from https://github.com/dhis2/design-specs/blob/b65e6518dcc7c16733379cd80688e67a422fc742/src/components/sidenav.css#L73 (-> 104) */
+
+.navLink a {
+    display: block;
+    min-height: 36px;
+    padding: 10px;
+    /* background: var(--colors-grey100); */
+    text-decoration: none;
+    color: var(--colors-grey900);
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+}
+.navLink:hover,
+.navLink a:hover {
+    background: var(--colors-grey300);
+}
+.navLink:focus,
+.navLink a:focus {
+    outline: 2px solid white;
+    background: var(--colors-grey200);
+    outline-offset: -2px;
+}
+
+.navLink a.active,
+.navLink :global(.active) {
+    font-weight: 500;
+    background: var(--colors-grey200);
+    box-shadow: inset 6px 0px 0px 0px var(--colors-grey500);
+}
+.navLink.active:hover {
+    background: var(--colors-grey300);
 }
diff --git a/src/components/EmptyArea.tsx b/src/components/EmptyArea.tsx
new file mode 100644
index 0000000..3406a18
--- /dev/null
+++ b/src/components/EmptyArea.tsx
@@ -0,0 +1,22 @@
+import { Center } from '@dhis2/ui'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+
+const EmptyArea = () => {
+    const { store, namespace } = useParams()
+    return (
+        <>
+            {!store && (
+                <Center>
+                    <p>Select a datastore to show namespaces</p>
+                </Center>
+            )}
+            {store && !namespace && (
+                <Center>
+                    <p>Click a namespace to show keys</p>
+                </Center>
+            )}
+        </>
+    )
+}
+export default EmptyArea
diff --git a/src/components/appWrapper.tsx b/src/components/appWrapper.tsx
index 0b8f2c3..96486e6 100644
--- a/src/components/appWrapper.tsx
+++ b/src/components/appWrapper.tsx
@@ -6,7 +6,7 @@ function AppWrapper({ children }) {
     return (
         <>
             <CssReset />
-            <CssVariables />
+            <CssVariables theme spacers colors />
             {children}
         </>
     )
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
index 58ddb13..0f6266d 100644
--- a/src/components/keys/keysTable.tsx
+++ b/src/components/keys/keysTable.tsx
@@ -9,6 +9,7 @@ import {
 } from '@dhis2/ui'
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
+import classes from '../../App.module.css'
 import CenteredLoader from '../Loader'
 
 interface QueryResults {
@@ -44,28 +45,32 @@ const KeysTable = () => {
     }
 
     return (
-        <DataTable>
-            <TableHead>
-                <DataTableRow>
-                    <DataTableColumnHeader>Keys</DataTableColumnHeader>
-                    <DataTableColumnHeader>Actions</DataTableColumnHeader>
-                </DataTableRow>
-            </TableHead>
-            <TableBody>
-                {data?.results?.length && (
-                    <>
-                        {data.results.map((key, index) => (
-                            <DataTableRow key={`${key}-${index}`}>
-                                <DataTableCell bordered>{key}</DataTableCell>
-                                <DataTableCell bordered>
-                                    Edit, Delete
-                                </DataTableCell>
-                            </DataTableRow>
-                        ))}
-                    </>
-                )}
-            </TableBody>
-        </DataTable>
+        <div className={classes.keysTable}>
+            <DataTable>
+                <TableHead>
+                    <DataTableRow>
+                        <DataTableColumnHeader>Keys</DataTableColumnHeader>
+                        <DataTableColumnHeader>Actions</DataTableColumnHeader>
+                    </DataTableRow>
+                </TableHead>
+                <TableBody>
+                    {data?.results?.length && (
+                        <>
+                            {data.results.map((key, index) => (
+                                <DataTableRow key={`${key}-${index}`}>
+                                    <DataTableCell bordered>
+                                        {key}
+                                    </DataTableCell>
+                                    <DataTableCell bordered>
+                                        Edit, Delete
+                                    </DataTableCell>
+                                </DataTableRow>
+                            ))}
+                        </>
+                    )}
+                </TableBody>
+            </DataTable>
+        </div>
     )
 }
 
diff --git a/src/components/sidebar/SidebarNavLink.tsx b/src/components/sidebar/SidebarNavLink.tsx
index 598bb5b..f6ccb3c 100644
--- a/src/components/sidebar/SidebarNavLink.tsx
+++ b/src/components/sidebar/SidebarNavLink.tsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
+import classes from '../../App.module.css'
 
 const SidebarNavLink = ({ to, label }) => {
     return (
-        <li>
+        <li className={classes.navLink}>
             <NavLink
                 to={to}
                 className={({ isActive, isPending }) =>
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 5678c4a..55e10c1 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,20 +1,21 @@
+import { Card } from '@dhis2/ui'
 import React from 'react'
-import { Outlet, useParams } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 import classes from '../App.module.css'
+import EmptyArea from '../components/EmptyArea'
 import Sidebar from '../components/sidebar/Sidebar'
 
 function Layout() {
-    const { store, namespace } = useParams()
     return (
         <div className={classes.container}>
             <div id="sidebar" className={classes.sidebar}>
                 <Sidebar />
             </div>
             <div id="main" className={classes.main}>
-                {/* Empty Display component */}
-                {!store && <p>Select a datastore to show namespaces</p>}
-                {store && !namespace && <p>Click a namespace to show keys</p>}
-                <Outlet />
+                <Card>
+                    <EmptyArea />
+                    <Outlet />
+                </Card>
             </div>
         </div>
     )