feat(logo): Add logo and favicon(#158)

* doc(logo): add logo * doc(logo): fixed favicon * doc(logo): adjusted favicon.svg dark style --------- Co-authored-by: Darran Boyd <[email protected]>
awslabs · Feb 6, 2025 · eda74ca · eda74ca
1 parent 120bf36
commit eda74ca
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 1 deletion.
diff --git a/packages/threat-composer-app/public/favicon.ico b/packages/threat-composer-app/public/favicon.ico
diff --git a/packages/threat-composer-app/public/favicon.svg b/packages/threat-composer-app/public/favicon.svg
diff --git a/packages/threat-composer-app/public/index.html b/packages/threat-composer-app/public/index.html
@@ -9,6 +9,9 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="threat-composer" />
 
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="48x48" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.svg" sizes="any" type="image/svg+xml" />
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/packages/threat-composer-app/src/assets/logo-dark.svg b/packages/threat-composer-app/src/assets/logo-dark.svg
diff --git a/packages/threat-composer-app/src/assets/logo-light.svg b/packages/threat-composer-app/src/assets/logo-light.svg
diff --git a/packages/threat-composer-app/src/components/FullAppLayout/index.tsx b/packages/threat-composer-app/src/components/FullAppLayout/index.tsx
@@ -13,15 +13,19 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+import { useThemeContext } from '@aws/threat-composer';
 import AppLayoutComponent, {
   AppLayoutProps as AppLayoutComponentProps,
 } from '@cloudscape-design/components/app-layout';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '@cloudscape-design/components/breadcrumb-group';
 import { CancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import SideNavigation, { SideNavigationProps } from '@cloudscape-design/components/side-navigation';
 import { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
+import { Mode } from '@cloudscape-design/global-styles';
 import { FC, ReactNode, useState, useCallback, createContext, PropsWithChildren, ReactElement, useContext, useMemo, useEffect } from 'react';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
+import appLogoDark from '../../assets/logo-dark.svg';
+import appLogoLight from '../../assets/logo-light.svg';
 import { SEARCH_PARAM_MODE } from '../../config/searchParams';
 import { NavHeaderProps } from '../NavHeader';
 
@@ -95,6 +99,8 @@ const AppLayout: FC<PropsWithChildren<AppLayoutProps>> = ({
   const [notifications, setNotifications] = useState(props.notifications);
   const location = useLocation();
 
+  const { theme } = useThemeContext();
+
   const headerHref = useMemo(() => {
     const mode = searchParams.get(SEARCH_PARAM_MODE);
     const href = 'href' in props ? props.href : '/';
@@ -163,7 +169,7 @@ const AppLayout: FC<PropsWithChildren<AppLayoutProps>> = ({
             props.navigation
           ) : (
             <SideNavigation
-              header={{ text: title, href: headerHref }}
+              header={{ text: title, href: headerHref, logo: { alt: 'logo', src: theme == Mode.Light ? appLogoLight : appLogoDark } }}
               activeHref={activeHref}
               onFollow={onNavigate}
               items={props.navigationItems}