diff --git a/packages/client/README.md b/packages/client/README.md
index d920b12..320b73b 100644
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -28,4 +28,24 @@ REACT_APP_THEME_SECONDARY_COLOR
You must provide a value for the `REACT_APP_STAC_API` environment variable. This should be the URL of the STAC API you wish to interact with.
-If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
\ No newline at end of file
+If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
+
+### Theming
+
+The Stac manager client allows for simple theming to give the instance a different look and feel.
+The primary and secondary colors can be set using the `REACT_APP_THEME_PRIMARY_COLOR` and `REACT_APP_THEME_SECONDARY_COLOR` environment variables. These should be set to a valid CSS color value.
+
+The app has a default logo shown below, but it can be customized by replacing the necessary files.
+
+
+
+The logo should be a square image with a size of 512x512 pixels and should be placed in the `static/meta` folder with the name `icon-512.png`.
+
+To ensure the branding is consistent, the remaining meta images (in the `static/meta` folder) should also be replaced:
+```
+icon-192.png 192x192
+icon-512.png 512x512
+favicon.png 32x32
+apple-touch-icon.png 360x360
+meta-image.png 1920x1080
+```
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 4e0a22a..48b6dbd 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -8,12 +8,13 @@ import {
Heading,
Text,
Badge,
- Divider
+ Divider,
+ Image
} from '@chakra-ui/react';
import { StacApiProvider } from '@developmentseed/stac-react';
import { PluginConfigProvider } from '@stac-manager/data-core';
-import theme from './theme';
+import theme from './theme/theme';
import { MainNavigation } from './components';
import Home from './pages/Home';
import CollectionList from './pages/CollectionList';
@@ -43,9 +44,23 @@ export const App = () => (
justifyContent='space-between'
py={8}
>
-
- STAC Manager
-
+
+
+
+
+ STAC Manager
+
+
diff --git a/packages/client/src/components/ItemCard.tsx b/packages/client/src/components/ItemCard.tsx
index 2431cb8..a68b4e4 100644
--- a/packages/client/src/components/ItemCard.tsx
+++ b/packages/client/src/components/ItemCard.tsx
@@ -15,10 +15,12 @@ import {
SkeletonText
} from '@chakra-ui/react';
import SmartLink from './SmartLink';
+import { ItemCardThumbPlaceholder } from './ItemCardThumbPlaceholder';
interface ItemCardProps {
imageSrc?: string;
imageAlt?: string;
+ showPlaceholder?: boolean;
title?: string;
subtitle?: string;
description?: string;
@@ -30,6 +32,7 @@ interface ItemCardProps {
export function ItemCard({
imageSrc,
imageAlt,
+ showPlaceholder,
title,
subtitle,
description,
@@ -47,6 +50,8 @@ export function ItemCard({
);
};
+ const shouldUsePlaceholder = showPlaceholder && !imageSrc;
+
return (
{imageSrc &&
@@ -54,12 +59,13 @@ export function ItemCard({
)}
+ {shouldUsePlaceholder && }
{(title || subtitle) && (
diff --git a/packages/client/src/components/ItemCardThumbPlaceholder.tsx b/packages/client/src/components/ItemCardThumbPlaceholder.tsx
new file mode 100644
index 0000000..c34d311
--- /dev/null
+++ b/packages/client/src/components/ItemCardThumbPlaceholder.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { chakra, ChakraProps } from '@chakra-ui/react';
+
+export function ItemCardThumbPlaceholder(props: ChakraProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/client/src/pages/CollectionList/index.tsx b/packages/client/src/pages/CollectionList/index.tsx
index e3ab957..9dde370 100644
--- a/packages/client/src/pages/CollectionList/index.tsx
+++ b/packages/client/src/pages/CollectionList/index.tsx
@@ -150,6 +150,7 @@ function CollectionList() {
key={col.id}
imageSrc={col.assets?.thumbnail?.href}
imageAlt={col.assets?.thumbnail?.title}
+ showPlaceholder
title={col.title || col.id}
description={col.description}
tags={col.keywords}
diff --git a/packages/client/src/theme/Container.ts b/packages/client/src/theme/Container.ts
deleted file mode 100644
index f7658a2..0000000
--- a/packages/client/src/theme/Container.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-
-const Container = defineStyleConfig({
- baseStyle: {
- maxW: "70rem"
- },
-});
-
-export default Container;
diff --git a/packages/client/src/theme/index.ts b/packages/client/src/theme/index.ts
deleted file mode 100644
index 4435c7e..0000000
--- a/packages/client/src/theme/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// import { extendTheme } from '@chakra-ui/react';
-// import Container from './Container';
-import theme from './theme';
-
-export default theme;
-
-// export default extendTheme({
-// styles: {
-// global: {
-// body: {
-// bgColor: "gray.50"
-// },
-// "main > *:first-child": {
-// mt: 0
-// },
-// a: {
-// color: "blue.800",
-// textDecoration: "underline",
-// _hover: {
-// bg: "yellow.100",
-// textDecoration: "none",
-// }
-// },
-// h1: {
-// fontWeight: "bold",
-// fontSize: "4xl",
-// my: "4"
-// },
-// h2: {
-// fontWeight: "bold",
-// fontSize: "2xl",
-// my: "4"
-// },
-// h3: {
-// fontWeight: "bold",
-// fontSize: "xl",
-// my: "4"
-// },
-// h4: {
-// fontWeight: "bold",
-// fontSize: "l",
-// my: "4"
-// },
-// p: {
-// my: "4"
-// },
-// ul: {
-// my: "4"
-// },
-// legend: {
-// fontWeight: "500"
-// },
-// "fieldset label": {
-// fontWeight: "400 !important"
-// }
-// },
-// },
-// components: {
-// Container
-// },
-// });
diff --git a/packages/client/static/meta/apple-touch-icon.png b/packages/client/static/meta/apple-touch-icon.png
new file mode 100644
index 0000000..bc96af6
Binary files /dev/null and b/packages/client/static/meta/apple-touch-icon.png differ
diff --git a/packages/client/static/meta/favicon.png b/packages/client/static/meta/favicon.png
new file mode 100644
index 0000000..04fc3bd
Binary files /dev/null and b/packages/client/static/meta/favicon.png differ
diff --git a/packages/client/static/meta/icon-192.png b/packages/client/static/meta/icon-192.png
new file mode 100644
index 0000000..9795ff9
Binary files /dev/null and b/packages/client/static/meta/icon-192.png differ
diff --git a/packages/client/static/meta/icon-512.png b/packages/client/static/meta/icon-512.png
new file mode 100644
index 0000000..1f27a53
Binary files /dev/null and b/packages/client/static/meta/icon-512.png differ
diff --git a/packages/client/static/meta/icon.svg b/packages/client/static/meta/icon.svg
new file mode 100644
index 0000000..0c8e84b
--- /dev/null
+++ b/packages/client/static/meta/icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/client/static/meta/meta-image.png b/packages/client/static/meta/meta-image.png
new file mode 100644
index 0000000..cd46a28
Binary files /dev/null and b/packages/client/static/meta/meta-image.png differ