From f61b262c0d4817a7ea9f50273bf708bc25951e56 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 28 Aug 2024 10:10:53 +0300 Subject: [PATCH] Shared: OperationContainer: Added logo for dark theme --- .../components/operation-container/index.tsx | 12 +++- public/images/downloading.dark.react.svg | 68 +++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 public/images/downloading.dark.react.svg diff --git a/packages/shared/components/operation-container/index.tsx b/packages/shared/components/operation-container/index.tsx index 276231f652..a91bace8ef 100644 --- a/packages/shared/components/operation-container/index.tsx +++ b/packages/shared/components/operation-container/index.tsx @@ -24,8 +24,10 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode import React, { useEffect } from "react"; +import { useTheme } from "styled-components"; import DownloadingReactSvg from "PUBLIC_DIR/images/downloading.react.svg"; +import DownloadingDarkReactSvg from "PUBLIC_DIR/images/downloading.dark.react.svg"; import { StyledOperationContainer } from "./OperationContainer.styled"; import { IOperationContainer } from "./OperationContainer.types"; @@ -35,6 +37,14 @@ import PortalLogo from "../portal-logo/PortalLogo"; const OperationContainer = (props: IOperationContainer) => { const { url, title, description } = props; + const theme = useTheme(); + + const logo = theme.isBase ? ( + + ) : ( + + ); + useEffect(() => { if (url) window.location.replace(url); }, [url]); @@ -42,7 +52,7 @@ const OperationContainer = (props: IOperationContainer) => { return ( - + {logo} {title} diff --git a/public/images/downloading.dark.react.svg b/public/images/downloading.dark.react.svg new file mode 100644 index 0000000000..cf98f2a1f5 --- /dev/null +++ b/public/images/downloading.dark.react.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +