From 499c44a2921449607aa3669235be1fd632b7062b Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Tue, 6 Aug 2024 11:31:00 +0500 Subject: [PATCH 01/10] feat: implement theme changing feature to propagate changesto child apps --- src/App.jsx | 77 +++++++++++++++++++++++++++++++++++++++++++++++++--- src/theme.js | 8 ++++++ 2 files changed, 81 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b1528ec..4c7596d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,12 @@ import "./App.css"; -import { useState, useRef, useEffect, useMemo } from "react"; -import { Dropdown } from "flowbite-react"; +import React, { useRef, useMemo, useEffect, useState } from "react"; +import { Dropdown, Flowbite, Button, Modal } from "flowbite-react"; import { CadtLogo } from "./components/CadtLogo"; import { ExplorerLogo } from "./components/ExplorerLogo"; import { TokenizationLogo } from "./components/TokenizationLogo"; -import { Flowbite, Button, Modal } from "flowbite-react"; import flowbiteThemeSettings from "./flowbite.theme"; import { LocaleSwitcher } from "./components/LocalSwitcher"; +import themeColors from "./theme"; const appLinks = { cadt: { @@ -60,6 +60,56 @@ const App = () => { } } + const handleIframeLoad = (iframe) => { + const iframeWindow = iframe.contentWindow; + + const messageListener = (event) => { + if (event.origin !== new URL(iframe.src).origin) return; + if (event.data === "leftNavLoaded") { + window.removeEventListener("message", messageListener); + sendMessageToIframe(iframe, { colors: themeColors }); + } + }; + + iframeWindow.addEventListener("load", () => { + const leftNav = iframe.contentDocument.getElementById("left-nav"); + if (leftNav) { + iframeWindow.postMessage("leftNavLoaded", new URL(iframe.src).origin); + } + }); + + window.addEventListener("message", messageListener); + }; + + useEffect(() => { + sendColorSettingsToIframes(); + }, [activeApp.link, showConnect]); + + function getIframeOrigin(iframe) { + try { + const url = new URL(iframe.src); + return url.origin; + } catch (_) { + return null; + } + } + + function sendMessageToIframe(iframe, message) { + const targetOrigin = getIframeOrigin(iframe); + if (targetOrigin && iframe.contentWindow) { + iframe.contentWindow.postMessage(message, targetOrigin); + } + } + + const sendColorSettingsToIframes = () => { + const message = { colors: themeColors }; + [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { + if (ref.current) { + sendMessageToIframe(ref.current, message); + } + }); + }; + const handleLocaleChange = (event) => { const message = { changeLocale: event }; [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { @@ -69,6 +119,14 @@ const App = () => { }); }; + useEffect(() => { + [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { + if (ref.current) { + handleIframeLoad(ref.current); + } + }); + }, [showConnect]); + const handleSubmit = (e) => { e.preventDefault(); @@ -184,7 +242,11 @@ const App = () => {
{validateLocalStorage() ? ( } size="lg"> @@ -350,6 +412,7 @@ const App = () => { @@ -366,6 +429,9 @@ const App = () => { @@ -382,6 +448,9 @@ const App = () => { diff --git a/src/theme.js b/src/theme.js index e69de29..d28fb5d 100644 --- a/src/theme.js +++ b/src/theme.js @@ -0,0 +1,8 @@ +const themeColors = { + topBarBgColor: "#6e7d7f", + leftNavHighlightColor: "#fff", + leftNavBgColor: "rgb(240, 242, 245)", + leftNavTextColor: "rgb(110, 125, 127)", +}; + +export default themeColors; From 070c9b18f6ce3d94370fd11be6f39467f802c281 Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Tue, 6 Aug 2024 11:44:17 +0500 Subject: [PATCH 02/10] fix: used arrow functions for consistency --- src/App.jsx | 29 +++++++---------------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4c7596d..146dfa0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -39,7 +39,7 @@ const App = () => { const ActiveLogo = activeApp.logo; - function getIframeOrigin(iframe) { + const getIframeOrigin = (iframe) => { try { const url = new URL(iframe.src); return url.origin; @@ -47,9 +47,9 @@ const App = () => { console.error("Invalid iframe URL", error); return null; } - } + }; - function sendMessageToIframe(iframe, message) { + const sendMessageToIframe = (iframe, message) => { const targetOrigin = getIframeOrigin(iframe); if (targetOrigin && iframe.contentWindow) { iframe.contentWindow.postMessage(message, targetOrigin); @@ -58,7 +58,7 @@ const App = () => { "Failed to determine target origin or iframe is not available" ); } - } + }; const handleIframeLoad = (iframe) => { const iframeWindow = iframe.contentWindow; @@ -85,22 +85,6 @@ const App = () => { sendColorSettingsToIframes(); }, [activeApp.link, showConnect]); - function getIframeOrigin(iframe) { - try { - const url = new URL(iframe.src); - return url.origin; - } catch (_) { - return null; - } - } - - function sendMessageToIframe(iframe, message) { - const targetOrigin = getIframeOrigin(iframe); - if (targetOrigin && iframe.contentWindow) { - iframe.contentWindow.postMessage(message, targetOrigin); - } - } - const sendColorSettingsToIframes = () => { const message = { colors: themeColors }; [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { @@ -216,7 +200,7 @@ const App = () => { setShowConnect(true); }; - function validateLocalStorage() { + const validateLocalStorage = () => { const keys = [ "cadtRemoteServerAddress", "cadtRemoteServerApiKey", @@ -235,8 +219,9 @@ const App = () => { } return true; - } + }; + return (
From 2f418bc343c6d0989b1044265eb12fb604efdb8e Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Wed, 7 Aug 2024 15:15:00 +0500 Subject: [PATCH 03/10] feat: implement theme fetching and storage from theme.js and used styled component --- src/App.jsx | 319 +++++++++++--------------------------- src/components/Header.jsx | 183 ++++++++++++++++++++++ src/theme.js | 7 +- 3 files changed, 273 insertions(+), 236 deletions(-) create mode 100644 src/components/Header.jsx diff --git a/src/App.jsx b/src/App.jsx index 146dfa0..4b8bdfa 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,8 +5,9 @@ import { CadtLogo } from "./components/CadtLogo"; import { ExplorerLogo } from "./components/ExplorerLogo"; import { TokenizationLogo } from "./components/TokenizationLogo"; import flowbiteThemeSettings from "./flowbite.theme"; -import { LocaleSwitcher } from "./components/LocalSwitcher"; -import themeColors from "./theme"; +import { ThemeProvider } from "styled-components"; +import getTheme from "./theme"; +import Header from "./components/Header"; const appLinks = { cadt: { @@ -27,6 +28,7 @@ const appLinks = { }; const App = () => { + const theme = getTheme(); const [activeApp, setActiveApp] = useState(appLinks["cadt"]); const [showConnect, setShowConnect] = useState(false); const cadtRef = useRef(null); @@ -65,16 +67,16 @@ const App = () => { const messageListener = (event) => { if (event.origin !== new URL(iframe.src).origin) return; - if (event.data === "leftNavLoaded") { + if (event.data === "appLoaded") { window.removeEventListener("message", messageListener); - sendMessageToIframe(iframe, { colors: themeColors }); + sendMessageToIframe(iframe, { customThemeColors: getTheme() }); } }; iframeWindow.addEventListener("load", () => { const leftNav = iframe.contentDocument.getElementById("left-nav"); if (leftNav) { - iframeWindow.postMessage("leftNavLoaded", new URL(iframe.src).origin); + iframeWindow.postMessage("appLoaded", new URL(iframe.src).origin); } }); @@ -86,7 +88,7 @@ const App = () => { }, [activeApp.link, showConnect]); const sendColorSettingsToIframes = () => { - const message = { colors: themeColors }; + const message = { customThemeColors: getTheme() }; [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { if (ref.current) { sendMessageToIframe(ref.current, message); @@ -221,238 +223,91 @@ const App = () => { return true; }; - return ( - -
-
+ + +
+
+ {validateLocalStorage() ? ( - } size="lg"> - setActiveApp(appLinks["cadt"])}> - - - setActiveApp(appLinks["climateTokenization"])} + <> +
+ +
+
- - - setActiveApp(appLinks["climateExplorer"])} + +
+
- - - + +
+ ) : ( -
- )} -
- - {validateLocalStorage() ? ( - - ) : ( - - )} -
- {showConnect && ( - setShowConnect(false)}> - Connect to Core Registry - -
-
-
- -
- - - -
-
- - - -
-
- -
- -
- - - -
-
- - - -
-
- -
- -
- - - -
-
-
-
- - - - - - - )} -
- - {validateLocalStorage() ? ( - <> -
- -
-
- -
-
- +
+
+

+ Welcome to Core Registry +

+

Connect to get started

+
- - ) : ( -
-
-

- Welcome to Core Registry -

-

Connect to get started

-
-
- )} -
- + )} +
+ + ); }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..9613d1f --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,183 @@ +import React from "react"; +import { Dropdown, Button, Modal } from "flowbite-react"; +import { CadtLogo } from "./CadtLogo"; +import { ExplorerLogo } from "./ExplorerLogo"; +import { TokenizationLogo } from "./TokenizationLogo"; +import { LocaleSwitcher } from "./LocalSwitcher"; +import styled from "styled-components"; + +const Header = styled.header` + display: flex; + justify-content: space-between; + padding: 1rem; + background-color: ${(props) => props.theme.topBarBgColor}; +`; + +const CustomHeader = ({ + activeApp, + appLinks, + setActiveApp, + showConnect, + setShowConnect, + handleLocaleChange, + handleDisconnect, + validateLocalStorage, + handleSubmit, +}) => { + const ActiveLogo = activeApp.logo; + + return ( +
+ {validateLocalStorage() ? ( + } size="lg"> + setActiveApp(appLinks["cadt"])}> + + + setActiveApp(appLinks["climateTokenization"])}> + + + setActiveApp(appLinks["climateExplorer"])}> + + + + ) : ( +
+ )} +
+ + {validateLocalStorage() ? ( + + ) : ( + + )} +
+ {showConnect && ( + setShowConnect(false)}> + Connect to Core Registry + +
+
+
+ +
+ + + +
+
+ + + +
+
+ +
+ +
+ + + +
+
+ + + +
+
+ +
+ +
+ + + +
+
+
+
+ + + + + + + )} +
+ ); +}; + +export default CustomHeader; diff --git a/src/theme.js b/src/theme.js index d28fb5d..6d215a3 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,8 +1,7 @@ -const themeColors = { +const getTheme = () => ({ topBarBgColor: "#6e7d7f", leftNavHighlightColor: "#fff", leftNavBgColor: "rgb(240, 242, 245)", leftNavTextColor: "rgb(110, 125, 127)", -}; - -export default themeColors; +}); +export default getTheme; From 9d7f4a1df150f0fb8859e234d4721c00519dd464 Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Fri, 9 Aug 2024 01:23:55 +0500 Subject: [PATCH 04/10] fix: used theme.json and logo svgs from server root if exist --- public/ExplorerCustom.svg | 49 +++++++ public/RegistryCustom.svg | 44 ++++++ public/TokenizationCustom.svg | 41 ++++++ public/theme.json | 6 + src/App.jsx | 203 +++++++++++++++++++++++++--- src/components/CadtLogo.jsx | 45 +++++- src/components/ExplorerLogo.jsx | 49 ++++++- src/components/Header.jsx | 183 ------------------------- src/components/TokenizationLogo.jsx | 58 ++++++-- src/theme.js | 8 +- 10 files changed, 457 insertions(+), 229 deletions(-) create mode 100644 public/ExplorerCustom.svg create mode 100644 public/RegistryCustom.svg create mode 100644 public/TokenizationCustom.svg create mode 100644 public/theme.json delete mode 100644 src/components/Header.jsx diff --git a/public/ExplorerCustom.svg b/public/ExplorerCustom.svg new file mode 100644 index 0000000..4d322c8 --- /dev/null +++ b/public/ExplorerCustom.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/RegistryCustom.svg b/public/RegistryCustom.svg new file mode 100644 index 0000000..f8ff270 --- /dev/null +++ b/public/RegistryCustom.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/TokenizationCustom.svg b/public/TokenizationCustom.svg new file mode 100644 index 0000000..9327285 --- /dev/null +++ b/public/TokenizationCustom.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/theme.json b/public/theme.json new file mode 100644 index 0000000..c95e515 --- /dev/null +++ b/public/theme.json @@ -0,0 +1,6 @@ +{ + "topBarBgColor": "#6e7d7f", + "leftNavHighlightColor": "#fff", + "leftNavBgColor": "rgb(240, 242, 245)", + "leftNavTextColor": "rgb(110, 125, 127)" +} diff --git a/src/App.jsx b/src/App.jsx index 4b8bdfa..fd76537 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,11 +3,17 @@ import React, { useRef, useMemo, useEffect, useState } from "react"; import { Dropdown, Flowbite, Button, Modal } from "flowbite-react"; import { CadtLogo } from "./components/CadtLogo"; import { ExplorerLogo } from "./components/ExplorerLogo"; +import { LocaleSwitcher } from "./components/LocalSwitcher"; import { TokenizationLogo } from "./components/TokenizationLogo"; import flowbiteThemeSettings from "./flowbite.theme"; -import { ThemeProvider } from "styled-components"; -import getTheme from "./theme"; -import Header from "./components/Header"; +import styled, { ThemeProvider } from "styled-components"; + +const Header = styled.header` + display: flex; + justify-content: space-between; + padding: 1rem; + background-color: ${(props) => props.theme.topBarBgColor}; +`; const appLinks = { cadt: { @@ -28,7 +34,7 @@ const appLinks = { }; const App = () => { - const theme = getTheme(); + const [theme, setTheme] = useState({}); const [activeApp, setActiveApp] = useState(appLinks["cadt"]); const [showConnect, setShowConnect] = useState(false); const cadtRef = useRef(null); @@ -67,9 +73,9 @@ const App = () => { const messageListener = (event) => { if (event.origin !== new URL(iframe.src).origin) return; - if (event.data === "appLoaded") { + if (event.data === "appLoaded" && theme) { window.removeEventListener("message", messageListener); - sendMessageToIframe(iframe, { customThemeColors: getTheme() }); + sendMessageToIframe(iframe, { customThemeColors: theme }); } }; @@ -84,11 +90,11 @@ const App = () => { }; useEffect(() => { - sendColorSettingsToIframes(); - }, [activeApp.link, showConnect]); + theme && sendColorSettingsToIframes(); + }, [activeApp.link, showConnect, theme]); const sendColorSettingsToIframes = () => { - const message = { customThemeColors: getTheme() }; + const message = { customThemeColors: theme }; [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { if (ref.current) { sendMessageToIframe(ref.current, message); @@ -111,7 +117,21 @@ const App = () => { handleIframeLoad(ref.current); } }); - }, [showConnect]); + }, [showConnect, theme]); + + useEffect(() => { + const fetchTheme = async () => { + try { + const themeResponse = await fetch("/theme.json"); + if (themeResponse.ok) { + const customTheme = await themeResponse.json(); + setTheme(customTheme); + } + } catch (_) {} + }; + + fetchTheme(); + }, []); const handleSubmit = (e) => { e.preventDefault(); @@ -227,17 +247,158 @@ const App = () => {
-
+
+ {validateLocalStorage() ? ( + } size="lg"> + setActiveApp(appLinks["cadt"])}> + + + setActiveApp(appLinks["climateTokenization"])} + > + + + setActiveApp(appLinks["climateExplorer"])} + > + + + + ) : ( +
+ )} +
+ + {validateLocalStorage() ? ( + + ) : ( + + )} +
+ {showConnect && ( + setShowConnect(false)}> + Connect to Core Registry + +
+
+
+ +
+ + + +
+
+ + + +
+
+ +
+ +
+ + + +
+
+ + + +
+
+ +
+ +
+ + + +
+
+
+
+ + + + + + + )} +
{validateLocalStorage() ? ( <> diff --git a/src/components/CadtLogo.jsx b/src/components/CadtLogo.jsx index 6eb27b2..f387e5c 100644 --- a/src/components/CadtLogo.jsx +++ b/src/components/CadtLogo.jsx @@ -1,8 +1,8 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { withTheme } from "styled-components"; import styled from "styled-components"; -import appLogo from "../assets/img/Registry.svg"; +import defaultLogo from "../assets/img/Registry.svg"; const LogoContainer = styled("div")` display: flex; @@ -17,10 +17,47 @@ const LogoContainer = styled("div")` `; const CadtLogo = withTheme(({ width = 50, height = 50 }) => { + const [svgContent, setSvgContent] = useState(""); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const fetchSVG = async () => { + try { + const response = await fetch("/RegistryCustom.svg"); + if (response.ok) { + const svgText = await response.text(); + setSvgContent(svgText); + } + } catch (_) { + } finally { + setIsLoading(false); + } + }; + + fetchSVG(); + }, []); + + const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgContent)}`; + return ( - - Registry + {isLoading ? ( + <> + ) : ( + <> + {svgContent ? ( + Cadt Logo + ) : ( + Cadt Logo + )} + Registry + + )} ); }); diff --git a/src/components/ExplorerLogo.jsx b/src/components/ExplorerLogo.jsx index af55c7c..66dd1c9 100644 --- a/src/components/ExplorerLogo.jsx +++ b/src/components/ExplorerLogo.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import styled from "styled-components"; +import React, { useEffect, useState } from "react"; +import styled, { withTheme } from "styled-components"; import logo from "../assets/img/Explorer.svg"; @@ -15,13 +15,50 @@ const LogoContainer = styled("div")` text-transform: uppercase; `; -const ExplorerLogo = ({ width = 50, height = 50 }) => { +const ExplorerLogo = withTheme(({ width = 50, height = 50 }) => { + const [svgContent, setSvgContent] = useState(""); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const fetchSVG = async () => { + try { + const response = await fetch("/ExplorerCustom.svg"); + if (response.ok) { + const svgText = await response.text(); + setSvgContent(svgText); + } + } catch (_) { + } finally { + setIsLoading(false); + } + }; + + fetchSVG(); + }, []); + + const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgContent)}`; + return ( - - Explorer + {isLoading ? ( + <> + ) : ( + <> + {svgContent ? ( + Explorer Logo + ) : ( + Explorer Logo + )} + Explorer + + )} ); -}; +}); export { ExplorerLogo }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index 9613d1f..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,183 +0,0 @@ -import React from "react"; -import { Dropdown, Button, Modal } from "flowbite-react"; -import { CadtLogo } from "./CadtLogo"; -import { ExplorerLogo } from "./ExplorerLogo"; -import { TokenizationLogo } from "./TokenizationLogo"; -import { LocaleSwitcher } from "./LocalSwitcher"; -import styled from "styled-components"; - -const Header = styled.header` - display: flex; - justify-content: space-between; - padding: 1rem; - background-color: ${(props) => props.theme.topBarBgColor}; -`; - -const CustomHeader = ({ - activeApp, - appLinks, - setActiveApp, - showConnect, - setShowConnect, - handleLocaleChange, - handleDisconnect, - validateLocalStorage, - handleSubmit, -}) => { - const ActiveLogo = activeApp.logo; - - return ( -
- {validateLocalStorage() ? ( - } size="lg"> - setActiveApp(appLinks["cadt"])}> - - - setActiveApp(appLinks["climateTokenization"])}> - - - setActiveApp(appLinks["climateExplorer"])}> - - - - ) : ( -
- )} -
- - {validateLocalStorage() ? ( - - ) : ( - - )} -
- {showConnect && ( - setShowConnect(false)}> - Connect to Core Registry - -
-
-
- -
- - - -
-
- - - -
-
- -
- -
- - - -
-
- - - -
-
- -
- -
- - - -
-
-
-
- - - - - - - )} -
- ); -}; - -export default CustomHeader; diff --git a/src/components/TokenizationLogo.jsx b/src/components/TokenizationLogo.jsx index 7686dd8..714e57c 100644 --- a/src/components/TokenizationLogo.jsx +++ b/src/components/TokenizationLogo.jsx @@ -1,10 +1,9 @@ -import React from "react"; -import { withTheme } from "styled-components"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; -import appLogo from "../assets/img/Tokenization.svg"; +import logo from "../assets/img/Tokenization.svg"; -const LogoContainer = styled("div")` +const LogoContainer = styled.div` display: flex; justify-content: center; align-items: center; @@ -16,13 +15,56 @@ const LogoContainer = styled("div")` text-transform: uppercase; `; -const TokenizationLogo = withTheme(({ width = 50, height = 50 }) => { +const TokenizationLogo = ({ width = 50, height = 50 }) => { + const [svgContent, setSvgContent] = useState(""); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const fetchSVG = async () => { + try { + const response = await fetch("/TokenizationCustom.svg"); + if (response.ok) { + const svgText = await response.text(); + setSvgContent(svgText); + } + } catch (error) { + console.error("Error fetching SVG:", error); + } finally { + setIsLoading(false); + } + }; + + fetchSVG(); + }, []); + + const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgContent)}`; + return ( - - Tokenization + {isLoading ? ( + <> + ) : ( + <> + {svgContent ? ( + Tokenization Logo + ) : ( + Tokenization Logo + )} + Tokenization + + )} ); -}); +}; export { TokenizationLogo }; diff --git a/src/theme.js b/src/theme.js index 6d215a3..8b13789 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,7 +1 @@ -const getTheme = () => ({ - topBarBgColor: "#6e7d7f", - leftNavHighlightColor: "#fff", - leftNavBgColor: "rgb(240, 242, 245)", - leftNavTextColor: "rgb(110, 125, 127)", -}); -export default getTheme; + From a8051d3bc0f7b3737c64d1eb806505dfd8dc0372 Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Mon, 12 Aug 2024 14:54:31 +0500 Subject: [PATCH 05/10] fix: added HeaderBrandingCustom.svg component, theme.json structure --- public/theme.json | 14 +++++++--- src/App.jsx | 6 ++-- src/components/HeaderBranding.jsx | 46 +++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 src/components/HeaderBranding.jsx diff --git a/public/theme.json b/public/theme.json index c95e515..640fc68 100644 --- a/public/theme.json +++ b/public/theme.json @@ -1,6 +1,12 @@ { - "topBarBgColor": "#6e7d7f", - "leftNavHighlightColor": "#fff", - "leftNavBgColor": "rgb(240, 242, 245)", - "leftNavTextColor": "rgb(110, 125, 127)" + "colors": { + "default": { + "topBarBg": "#6e7d7f", + "leftNav": { + "bg": "rgb(240, 242, 245)", + "text": "#6e7d7f", + "highlight": "#fff" + } + } + } } diff --git a/src/App.jsx b/src/App.jsx index fd76537..7168c10 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,12 +7,13 @@ import { LocaleSwitcher } from "./components/LocalSwitcher"; import { TokenizationLogo } from "./components/TokenizationLogo"; import flowbiteThemeSettings from "./flowbite.theme"; import styled, { ThemeProvider } from "styled-components"; +import { HeaderBranding } from "./components/HeaderBranding"; const Header = styled.header` display: flex; justify-content: space-between; padding: 1rem; - background-color: ${(props) => props.theme.topBarBgColor}; + background-color: ${(props) => props.theme?.colors?.default?.topBarBg}; `; const appLinks = { @@ -75,7 +76,7 @@ const App = () => { if (event.origin !== new URL(iframe.src).origin) return; if (event.data === "appLoaded" && theme) { window.removeEventListener("message", messageListener); - sendMessageToIframe(iframe, { customThemeColors: theme }); + theme && sendColorSettingsToIframes(); } }; @@ -267,6 +268,7 @@ const App = () => { ) : (
)} +
{validateLocalStorage() ? ( diff --git a/src/components/HeaderBranding.jsx b/src/components/HeaderBranding.jsx new file mode 100644 index 0000000..4147dff --- /dev/null +++ b/src/components/HeaderBranding.jsx @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from "react"; +import { withTheme } from "styled-components"; +import styled from "styled-components"; + +const LogoContainer = styled("div")` + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: white; + font-family: Ariel, Helvetica, sans-serif; + gap: 10px; + font-size: 1rem; + text-transform: uppercase; +`; + +const HeaderBranding = withTheme(({ width = 50, height = 50 }) => { + const [svgContent, setSvgContent] = useState(""); + + useEffect(() => { + const fetchSVG = async () => { + try { + const response = await fetch("/HeaderBrandingCustom.svg"); + if (response.ok) { + const svgText = await response.text(); + setSvgContent(svgText); + } + } catch (_) {} + }; + + fetchSVG(); + }, []); + + const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgContent)}`; + + return svgContent ? ( + + Header Branding + Registry + + ) : ( + <> + ); +}); + +export { HeaderBranding }; From 17ecd1031188f96bf36f8c2a7949d1db0c7ec6c6 Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Mon, 12 Aug 2024 19:12:30 +0500 Subject: [PATCH 06/10] fix: deleted custom theme and svgs from public folder --- public/ExplorerCustom.svg | 49 ----------------------------------- public/RegistryCustom.svg | 44 ------------------------------- public/TokenizationCustom.svg | 41 ----------------------------- public/theme.json | 12 --------- 4 files changed, 146 deletions(-) delete mode 100644 public/ExplorerCustom.svg delete mode 100644 public/RegistryCustom.svg delete mode 100644 public/TokenizationCustom.svg delete mode 100644 public/theme.json diff --git a/public/ExplorerCustom.svg b/public/ExplorerCustom.svg deleted file mode 100644 index 4d322c8..0000000 --- a/public/ExplorerCustom.svg +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/RegistryCustom.svg b/public/RegistryCustom.svg deleted file mode 100644 index f8ff270..0000000 --- a/public/RegistryCustom.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/TokenizationCustom.svg b/public/TokenizationCustom.svg deleted file mode 100644 index 9327285..0000000 --- a/public/TokenizationCustom.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/theme.json b/public/theme.json deleted file mode 100644 index 640fc68..0000000 --- a/public/theme.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "colors": { - "default": { - "topBarBg": "#6e7d7f", - "leftNav": { - "bg": "rgb(240, 242, 245)", - "text": "#6e7d7f", - "highlight": "#fff" - } - } - } -} From 1231fac6148c9b13c0c135537455653d1868fec4 Mon Sep 17 00:00:00 2001 From: "William \"Zan\" Wills" Date: Tue, 13 Aug 2024 08:47:32 -0400 Subject: [PATCH 07/10] Update HeaderBranding.jsx --- src/components/HeaderBranding.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/HeaderBranding.jsx b/src/components/HeaderBranding.jsx index 4147dff..36f27ab 100644 --- a/src/components/HeaderBranding.jsx +++ b/src/components/HeaderBranding.jsx @@ -36,7 +36,6 @@ const HeaderBranding = withTheme(({ width = 50, height = 50 }) => { return svgContent ? ( Header Branding - Registry ) : ( <> From e389bf1773f9a2c24145346c8283a2331f2331d8 Mon Sep 17 00:00:00 2001 From: Zachary Brown Date: Wed, 14 Aug 2024 10:10:50 -0700 Subject: [PATCH 08/10] chore: bump app versions to support theme color chooser --- app-builds.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app-builds.js b/app-builds.js index b6b735d..8587f7f 100644 --- a/app-builds.js +++ b/app-builds.js @@ -1,14 +1,14 @@ module.exports = { cadt: { - tag: "1.3.9", + tag: "1.3.11", url: "https://github.com/Chia-Network/core-registry-cadt-ui/releases/download/{{tag}}/core-registry-cadt-ui-web-build.tar.gz", }, climate_explorer: { - tag: "1.1.11", + tag: "1.1.14", url: "https://github.com/Chia-Network/climate-explorer-ui/releases/download/{{tag}}/climate-explorer-ui-web-build.tar.gz", }, climate_tokenization_engine: { - tag: "1.1.8", + tag: "1.1.10", url: "https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/releases/download/{{tag}}/climate-tokenization-engine-ui-web-build.tar.gz", }, }; From b2556085f87ffb25ba07da185b1d2f0c269f607a Mon Sep 17 00:00:00 2001 From: Zachary Brown Date: Wed, 14 Aug 2024 14:14:47 -0700 Subject: [PATCH 09/10] docs: add theme.json example file and documentation --- .gitignore | 7 ++++++- .nvmrc | 1 + README.md | 11 +++++++++++ package-lock.json | 4 ++-- package.json | 2 +- theme.json.example | 12 ++++++++++++ 6 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 .nvmrc create mode 100644 theme.json.example diff --git a/.gitignore b/.gitignore index d1c7875..13031e5 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,9 @@ dist dist-ssr *.local apps -build \ No newline at end of file +build +theme.json +ExplorerCustom.svg +RegistryCustom.svg +TokenizationCustom.svg +HeaderBrandingCustom.svg diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..b492b08 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +18.16 diff --git a/README.md b/README.md index 42af88d..aa714ec 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,17 @@ The Core Registry UI can be hosted as a web application, either for internal use To host the UI on the web, use the [web-build.tar.gz file from the releases page](https://github.com/Chia-Network/core-registry-ui/releases). One of the simplest solutions is to uncompress these files into a [public S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html). These files could also be served by any webserver, such as Nginx or Apache. +#### Customize Colors and Icons + +The Core Registry UI supports color and icon customization by site administrators. To customize the UI colors, copy the `theme.json.example` file to `theme.json` in the web root directory. Edit the new `theme.json` file and replace the default colors with any valid css color definitions. + +To customize icons, place SVG files in the web root with the following names: + +* RegistryCustom.svg +* TokenizationCustom.svg +* ExplorerCustom.svg +* HeaderBrandingCustom.svg + ## Contributing Upon your first commit, you will automatically be added to the package.json file as a contributor. diff --git a/package-lock.json b/package-lock.json index 56cf248..9a7041b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "core-registry-ui", - "version": "0.0.12", + "version": "0.0.15", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "core-registry-ui", - "version": "0.0.12", + "version": "0.0.15", "license": "Apache-2.0", "dependencies": { "@tailwindcss/aspect-ratio": "^0.4.2", diff --git a/package.json b/package.json index fe3a888..90832b3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "react-start": "vite --port 3000", "react-start-browser": "vite --port 3001 --open", "sync-ui-apps": "rm -rf apps && node sync-apps.js", - "build": "rm -rf dist && rm -rf build && npm run sync-ui-apps && vite build && cp -r apps build/apps", + "build": "rm -rf dist && rm -rf build && npm run sync-ui-apps && vite build && cp -r apps build/apps && cp theme.json.example build", "serve": "vite preview", "test": "vitest", "electron:package:mac": "npm run build && electron-builder -m -c.extraMetadata.main=build/electron.js", diff --git a/theme.json.example b/theme.json.example new file mode 100644 index 0000000..20dc43a --- /dev/null +++ b/theme.json.example @@ -0,0 +1,12 @@ +{ + "colors": { + "default": { + "topBarBg": "#6e7d7f", + "leftNav": { + "bg": "rgb(240, 242, 245)", + "text": "rgb(110, 125, 127)", + "highlight": "white" + } + } + } + } From af057989b4d3d7175e1394611786541022f99111 Mon Sep 17 00:00:00 2001 From: Zachary Brown Date: Wed, 14 Aug 2024 14:15:34 -0700 Subject: [PATCH 10/10] chore: version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 90832b3..0caceba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "core-registry-ui", - "version": "0.0.15", + "version": "0.1.1", "scripts": { "start": "nf start -p 3001", "electron": "electron .",