Colourful boxes

frontend/src/App.css

@@ -1,43 +0,0 @@
-.App {
-  text-align: center;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.App-header {
-  background-color: #ffffff;
-  min-height: 50vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding-top: 60px;
-  color: #333;
-}
-
-.emoji-container {
-  margin-bottom: 10px;
-}
-
-.header-emoji {
-  font-size: 70px;
-}
-
-h1 {
-  font-size: 2.5rem;
-  margin-bottom: 15px;
-  font-weight: 700;
-  color: #222;
-}
-
-p {
-  font-size: 1.15rem;
-  color: #555;
-  margin-top: 0;
-}
-
-* {
-  font-size: 10pt;
-}

frontend/src/App.js

@@ -1,4 +1,3 @@
-import './App.css'
 import { useState, useEffect } from 'react'
 import { PrimeReactProvider } from 'primereact/api'
 import 'primereact/resources/themes/lara-light-cyan/theme.css'
@@ -29,36 +28,75 @@ function App () {
   }, [])
 
   return (
-    <div className='App'>
-      <header className='App-header'>
-        <div className='emoji-container'>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <header
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '5vh 0'
+        }}
+      >
+        <div>
           <span
             role='img'
-            aria-label='Hugging Face Emoji'
-            className='header-emoji'
+            aria-label='Globe Emoji'
+            style={{ fontSize: '70px' }}
           >
             🌍
           </span>
         </div>
-        <h1>Global AI Language Monitor</h1>
-        <p>Tracking language proficiency of AI models for every language</p>
-
-        <div className='data-container' style={{ width: '100%' }}>
-          <PrimeReactProvider>
-            {loading && <p>...</p>}
-            {error && <p>Error: {error}</p>}
-            {data && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', alignItems: 'center', width: '100%' }}>
-                <div style={{ display: 'flex', flexDirection: 'row', gap: '2rem' }}>
-                  <ModelTable data={data} />
-                  <LanguageTable data={data} />
-                </div>
-                <DatasetTable data={data} />
-              </div>
-            )}
-          </PrimeReactProvider>
-        </div>
+        <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
+          Global AI Language Monitor
+        </h1>
+        <p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
+          Tracking language proficiency of AI models for every language
+        </p>
       </header>
+      <PrimeReactProvider>
+        {loading && <p>...</p>}
+        {error && <p>Error: {error}</p>}
+        {data && (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: '2rem',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center'
+            }}
+          >
+            <div
+              style={{
+                flex: '60vw 100vw 40vw',
+                maxWidth: 'min(100vw, 800px)',
+              }}
+            >
+              <ModelTable data={data} />
+            </div>
+            <div
+              style={{
+                flex: '60vw 100vw 40vw',
+                maxWidth: 'min(100vw, 800px)'
+              }}
+            >
+              <LanguageTable data={data} />
+            </div>
+            <div
+              style={{
+                flex: '60vw 100vw 40vw',
+                maxWidth: 'min(100vw, 800px)'
+              }}
+            >
+              <DatasetTable data={data} />
+            </div>
+          </div>
+        )}
+      </PrimeReactProvider>
     </div>
   )
 }

frontend/src/components/DatasetTable.js

@@ -28,8 +28,8 @@ const DatasetTable = ({ data }) => {
       filters={filters}
       filterDisplay='menu'
       scrollable
-      scrollHeight='500px'
-      style={{ minWidth: '200px', width: "50%" }}
+      scrollHeight='600px'
+      id='dataset-table'
     >
       {/* <Column
         field='implemented'

frontend/src/components/LanguageTable.js

@@ -124,8 +124,8 @@ const LanguageTable = ({ data }) => {
       filters={filters}
       filterDisplay='menu'
       scrollable
-      scrollHeight='500px'
-      style={{ minWidth: '200px' }}
+      scrollHeight='600px'
+      id='language-table'
     >
       <Column
         field='language_name'

frontend/src/components/ModelTable.js

@@ -145,8 +145,8 @@ const ModelTable = ({ data }) => {
       filters={filters}
       filterDisplay='menu'
       scrollable
-      scrollHeight='500px'
-      style={{ minWidth: '200px' }}
+      scrollHeight='600px'
+      id='model-table'
     >
       <Column field='rank' body={rankBodyTemplate} />
       <Column

frontend/src/index.css

@@ -5,9 +5,54 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 10pt;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+html, body, #root {
+  height: 100%;
+}
+
+.p-datatable-wrapper {
+  scrollbar-color: #f0f0f0 rgba(0, 0, 0, 0);
+}
+
+#model-table {
+  border: 3px solid #5151ff;
+  border-radius: 10px;
+}
+
+#model-table .p-datatable-header {
+  border-top-width: 0px;
+  border-radius: 5px 5px 0 0;
+  background: linear-gradient(to bottom, #5151ff, #0000cd);
+  color: white;
+}
+
+#language-table {
+  border: 3px solid #00aa00;
+  border-radius: 10px;
+}
+
+#language-table .p-datatable-header {
+  border-top-width: 0px;
+  border-radius: 5px 5px 0 0;
+  background: linear-gradient(to bottom, #17b417, #008000);
+  color: white;
+}
+
+#dataset-table {
+  border: 3px solid #ffaa00;
+  border-radius: 10px;
+}
+
+#dataset-table .p-datatable-header {
+  border-top-width: 0px;
+  border-radius: 5px 5px 0 0;
+  background: linear-gradient(to bottom, #ffaa00, #ff8000);
+  color: white;
+}