Skip to content

Commit

Permalink
Merge pull request #22 from wri/update/base-app-style
Browse files Browse the repository at this point in the history
Update base styling
  • Loading branch information
LanesGood authored Jan 23, 2025
2 parents 74c89cd + cf7dae8 commit 046d4aa
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 9 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zeno</title>
<title>Project Zeno | Land Carbon Lab</title>
</head>
<body>
<div id="root"></div>
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@chakra-ui/react": "^3.2.1",
"@devseed-ui/collecticons-react": "^3.0.3",
"@emotion/react": "^11.13.5",
"@fontsource/ibm-plex-mono": "^5.1.1",
"@fontsource/ibm-plex-sans": "^5.1.0",
"@turf/bbox": "^7.1.0",
"d3": "^7.9.0",
Expand Down
4 changes: 4 additions & 0 deletions public/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 21 additions & 6 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Box, Grid, Text } from "@chakra-ui/react";
import { Box, Flex, Grid, Image, Text } from "@chakra-ui/react";
import { useAtomValue } from "jotai";
import Providers from "./Providers";
import { ChatInput, ChatOutput, Map } from "./components";
import { chartDataAtom } from "./atoms";
import BarChart from "./components/BarChart";
import logo from "/logo.svg";

function App() {
const chartData = useAtomValue(chartDataAtom);
Expand All @@ -13,13 +14,27 @@ function App() {
maxH="vh"
h="vh"
templateRows="min-content minmax(0, 1fr)"
bg="blue.900/15"
bgImage="linear-gradient({colors.lime.50}, transparent)"
bg="gray.50"
>
<Box bgColor="blue.50" shadow="sm" px="8" py="4">
<Text as="h1" color="blue.900" fontWeight="700">Land Carbon Lab - Zeno</Text>
<Box bgColor="white" shadow="sm" px="8" py="4">
<Flex gap={12} alignItems="center">
<Image src={logo} height="40px" alt="WRI Land Carbon Lab logo" />
<Text
fontFamily="mono"
fontVariantNumeric="slashed-zero"
fontFeatureSettings="'ss03'"
letterSpacing="0.75px"
fontSize="sm"
lineHeight="100%"
textTransform="uppercase"
fontWeight="500"
title="Project Zeno"
>
Pr0ject <br /> Zen0_
</Text>
</Flex>
</Box>
<Grid templateColumns="350px 1fr" p="8" gap="2">
<Grid templateColumns="350px 1fr" p="6" gap="2">
<Grid
gap="4"
templateRows="1fr max-content"
Expand Down
1 change: 1 addition & 0 deletions src/main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "@fontsource/ibm-plex-sans/index.css";
import "@fontsource/ibm-plex-mono/index.css";

const isMock = import.meta.env.VITE_MOCK_QUERIES === "true";

Expand Down
5 changes: 3 additions & 2 deletions src/theme/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ export const config = defineConfig({
theme: {
tokens: {
fonts: {
body: { value: "IBM Plex Sans" },
heading: { value: "IBM Plex Sans" },
body: { value: "IBM Plex Sans, sans-serif" },
mono: { value: "IBM Plex Mono, monospace"},
heading: { value: "IBM Plex Sans, sans-serif" },
},
colors: {
blue: {
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -577,6 +577,11 @@
resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==

"@fontsource/ibm-plex-mono@^5.1.1":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.1.1.tgz#bd90d702c0532642a6071c3a4ed4be30b0047b2a"
integrity sha512-1aayqPe/ZkD3MlvqpmOHecfA3f2B8g+fAEkgvcCd3lkPP0pS1T0xG5Zmn2EsJQqr1JURtugPUH+5NqvKyfFZMQ==

"@fontsource/ibm-plex-sans@^5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.1.0.tgz#9cd6bcce9817c55565ae2cf92629ce9a9f617a6b"
Expand Down

0 comments on commit 046d4aa

Please sign in to comment.