Add logo, layout fixes

gv2325 · Aug 29, 2024 · e80a8c3 · e80a8c3
1 parent 5140285
commit e80a8c3
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 80 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -18,4 +18,11 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
+  theme: {
+    extend: {
+      fontFamily: {
+        manrope: ['Manrope', 'sans-serif'],
+      },
+    },
+  },
 }
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="src\assets\eic.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
     <title>EIC Mobile</title>
   </head>
   <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import config from './config.json';
 import Map from './components/Map';
 import Panel from './components/Panel';
+import EICLogo from './components/Logo';
 import { VitalsDataContext, MapViewContext, ChartDataContext, CurrentJSONContext, DataSelectionContext } from './contexts/AppContext';
 
 export default function App() {
@@ -17,6 +18,7 @@ export default function App() {
         <DataSelectionContext.Provider value={{ dataSelection, setDataSelection }}>
           <VitalsDataContext.Provider value={{ vitalsData, setVitalsData }}>
             <ChartDataContext.Provider value={{ chartData, setChartData }}>
+              <EICLogo />
               <Panel />
               <Map />
             </ChartDataContext.Provider>

diff --git a/src/components/Data.jsx b/src/components/Data.jsx
@@ -1,51 +1,6 @@
 import { useContext } from 'react';
-import styled from 'styled-components';
 import { DataSelectionContext, CurrentJSONContext } from '../contexts/AppContext';
 
-const Section = styled.section`
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  display: flex;
-`;
-
-const Container = styled.div`
-  padding: 0;
-`;
-
-const Title = styled.h1`
-  font-size: 2.5rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-
-  @media (max-width: 768px) {
-    font-size: 2rem;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 1.5rem;
-  }
-`;
-
-const Subtitle = styled.h2`
-  font-size: 1rem;
-  margin-bottom: 1rem;
-
-  @media (max-width: 768px) {
-    font-size: 0.875rem;
-    display: none;
-  }
-`;
-
-const Text = styled.p`
-  font-size: 1.125rem;
-
-  @media (max-width: 768px) {
-    font-size: 1rem;
-    display: none;
-  }
-`;
-
 export default function Data() {
     const { currentJSON } = useContext(CurrentJSONContext);
     const { dataSelection } = useContext(DataSelectionContext);
@@ -55,12 +10,16 @@ export default function Data() {
     }
 
     return (
-        <Section>
-            <Container>
-                <Title>{currentJSON.name || 'No name'}</Title>
-                <Subtitle>{currentJSON.description || 'No description'}</Subtitle>
-                <Text>{currentJSON.tour[dataSelection[1]].text || 'No text'}</Text>
-            </Container>
-        </Section>
+        <div class="flex flex-col gap-4">
+            <h2 class="font-bold text-[20px] leading-[27.32px] text-left sm:text-[16px] sm:leading-[21.86px]">
+              {currentJSON.name || 'No name'}
+            </h2>
+            <h4 class="font-manrope font-normal text-[12px] leading-[18px] hidden sm:block">
+              {currentJSON.description || 'No description'}
+            </h4>
+            <p class="font-manrope font-normal text-[12px] leading-[18px] hidden sm:block">
+              {currentJSON.tour[dataSelection[1]].text || 'No text'}
+            </p>
+        </div>
     );
 }
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import EICLogo from '../assets/eic.svg';
+
+const Logo = () => {
+  return (
+    <a
+      href='#'
+      className='fixed z-10	top-5 left-5 rounded-md p-3 sm:p-4 sm:top-[20px] sm:left-[20px] sm:gap-3'
+    >
+      <span className='sr-only'>Earth Information Center</span>
+      <img className='h-[50.46px] sm:h-12 w-auto' src={EICLogo} alt='alt' />
+    </a>
+  );
+};
+
+export default Logo;
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -126,8 +126,6 @@ export default function Home() {
         bufferGraphic.geometry = buffer;
         bufferGraphic.attributes = { name: 'Geodesic-Buffer' };
       }
-
-      console.log('Buffer updated at point:', point, 'with buffer:', buffer);
     };
 
     let lastKnownPoint;

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
@@ -34,25 +34,26 @@ export default function Panel() {
         setDataSelection([false, 0]);
 
         mapView.map.layers.forEach(layer => {
-          if (layer.title !== item.name && layer.title !== null && layer.title !== 'Geodesic-Buffer') {
-            layer.visible = false;
-          }
+            if (layer.title !== item.name && layer.title !== null && layer.title !== 'Geodesic-Buffer') {
+                layer.visible = false;
+            }
         });
 
         const layer = mapView.map.layers.find(layer => layer.title === item.name);
 
         if (layer) {
-          layer.visible = !layer.visible;
-          const currentProduct = config.find(product => product.name === layer.title);
-          setCurrentJSON(currentProduct);
+            layer.visible = !layer.visible;
+            const currentProduct = config.find(product => product.name === layer.title);
+            setCurrentJSON(currentProduct);
         }
 
         setSelectedIndex(index);
     };
 
     return (
-        <div className='fixed bottom-0 left-1/2 transform -translate-x-1/2 h-[400px] w-full max-w-6xl bg-opacity-90 rounded-xl shadow-lg backdrop-blur-lg flex-col z-10 p-6'>
-            <TabGroup defaultIndex={selectedIndex} onChange={setSelectedIndex}>
+        <div className='fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg backdrop-blur-lg z-10 flex
+                        w-full top-[430px] gap-[20px] lg:w-[762px] lg:top-[746px] lg:left-1/2 lg:-translate-x-1/2 lg:gap-[60px]'>
+            <TabGroup style={{ width: '100%', height: '100%'}} defaultIndex={selectedIndex} onChange={setSelectedIndex}>
                 <StyledTabList className="absolute left-1/2 transform -translate-x-1/2 -top-16 text-white p-2 flex space-x-4 overflow-x-auto whitespace-nowrap">
                     {config.map((dataset, index) => (
                         <Tab
@@ -69,11 +70,10 @@ export default function Panel() {
                     ))}
                 </StyledTabList>
 
-                <TabPanels>
+                <TabPanels style={{ height: '100%'}}>
                     {config.map((dataset, index) => (
-                        <TabPanel key={index}>
-                            <div className="fixed bottom-0 left-1/2 transform -translate-x-1/2 h-[400px] bg-black w-full max-w-6xl bg-opacity-70 rounded-xl shadow-lg backdrop-blur-lg flex z-10 p-6
-                            flex-col md:flex-row">
+                        <TabPanel style={{ height: '100%'}} key={index}>
+                            <div className="flex flex-col justify-between md:flex-row w-full h-full rounded-t-xl bg-black bg-opacity-70 shadow-lg backdrop-blur-lg p-6 gap-[20px] lg:gap-[60px]">
                                 {/* Data on the left */}
                                 <div className="w-full md:w-1/2 pr-4 overflow-y-auto text-white">
                                     <Data />

diff --git a/src/components/Vitals.jsx b/src/components/Vitals.jsx
@@ -7,20 +7,22 @@ export default function Vitals() {
     const globalMax = vitalsData?.globalMax ?? 'N/A';
 
     return (
-        <div className=''>
-            <div className='flex justify-between min-h-100'>
-                <div className='text-center'>
-                    <p className='text-sm font-medium tracking-widest text-white lg:text-base'>
-                        Average value
-                    </p>
-                    <h6 className='text-4xl lg:text-5xl'>{globalAverage}</h6>
-                </div>
-                <div className='text-center'>
-                    <p className='text-sm font-medium tracking-widest text-white lg:text-base'>
-                        Maximum value
-                    </p>
-                    <h6 className='text-4xl lg:text-5xl'>{globalMax}</h6>
-                </div>
+        <div className="flex justify-between min-h-[80px] w-[327px] px-8 lg:min-h-[67px] lg:px-4">
+            <div className='text-center'>
+                <p className='text-[14px] font-light leading-[19.12px] lg:text-[12px] lg:leading-[16.39px]'>
+                    Average value
+                </p>
+                <h6 className='text-[36px] font-light leading-[48px] tracking-[-0.03em] lg:text-[48px] lg:leading-[64px]'>
+                    {globalAverage}
+                </h6>
+            </div>
+            <div className='text-center'>
+                <p className='text-[14px] font-light leading-[19.12px] lg:text-[12px] lg:leading-[16.39px]'>
+                    Maximum value
+                </p>
+                <h6 className='text-[36px] font-light leading-[48px] tracking-[-0.03em] lg:text-[48px] lg:leading-[64px]'>
+                    {globalMax}
+                </h6>
             </div>
         </div>
     );

diff --git a/src/index.css b/src/index.css
@@ -18,6 +18,8 @@
 }
 
 * {
+    font-family: "Manrope", sans-serif;
+
     &::-webkit-scrollbar {
         display: none;
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,8 @@ @@
     }
     * {
+        font-family: "Manrope", sans-serif;
         &::-webkit-scrollbar {
             display: none;
           }
@@ Expand Down @@