From 4b7be9a110b8f6f7d4224fca2f74b9b99986b3f4 Mon Sep 17 00:00:00 2001
From: Pamela Fox <pamelafox@microsoft.com>
Date: Tue, 28 Jan 2025 16:54:34 -0800
Subject: [PATCH] Replace sparkle with app logo that's easier to replace
 (#2299)

---
 app/frontend/src/assets/applogo.svg             |  1 +
 app/frontend/src/assets/github.svg              |  1 -
 app/frontend/src/assets/search.svg              |  1 -
 app/frontend/src/pages/chat/Chat.tsx            |  5 +++--
 app/frontend/src/pages/layout/Layout.module.css | 13 -------------
 5 files changed, 4 insertions(+), 17 deletions(-)
 create mode 100644 app/frontend/src/assets/applogo.svg
 delete mode 100644 app/frontend/src/assets/github.svg
 delete mode 100644 app/frontend/src/assets/search.svg

diff --git a/app/frontend/src/assets/applogo.svg b/app/frontend/src/assets/applogo.svg
new file mode 100644
index 0000000000..fb3a5b9712
--- /dev/null
+++ b/app/frontend/src/assets/applogo.svg
@@ -0,0 +1 @@
+<svg font-size="120px" aria-hidden="true" aria-label="Chat logo" fill="rgba(115, 118, 225, 1)" class="___12fm75w f1w7gpdv fez10in fg4l7m0" role="img" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 12.8a1.04 1.04 0 0 0 1.59-.51l.45-1.37a2.34 2.34 0 0 1 1.47-1.48l1.4-.45A1.04 1.04 0 0 0 12.25 7l-1.37-.45A2.34 2.34 0 0 1 9.4 5.08L8.95 3.7a1.03 1.03 0 0 0-.82-.68 1.04 1.04 0 0 0-1.15.7l-.46 1.4a2.34 2.34 0 0 1-1.44 1.45L3.7 7a1.04 1.04 0 0 0 .02 1.97l1.37.45a2.33 2.33 0 0 1 1.48 1.48l.46 1.4c.07.2.2.37.38.5Zm6.14 4.05a.8.8 0 0 0 1.22-.4l.25-.76a1.09 1.09 0 0 1 .68-.68l.77-.25a.8.8 0 0 0-.02-1.52l-.77-.25a1.08 1.08 0 0 1-.68-.68l-.25-.77a.8.8 0 0 0-1.52.01l-.24.76a1.1 1.1 0 0 1-.67.68l-.77.25a.8.8 0 0 0 0 1.52l.77.25a1.09 1.09 0 0 1 .68.68l.25.77c.06.16.16.3.3.4Z" fill="rgba(115, 118, 225, 1)"></path></svg>
diff --git a/app/frontend/src/assets/github.svg b/app/frontend/src/assets/github.svg
deleted file mode 100644
index c679c236fd..0000000000
--- a/app/frontend/src/assets/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
diff --git a/app/frontend/src/assets/search.svg b/app/frontend/src/assets/search.svg
deleted file mode 100644
index 28b410ea66..0000000000
--- a/app/frontend/src/assets/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><linearGradient id="a" x1="9" y1=".36" x2="9" y2="18.31" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#5ea0ef"/><stop offset="1" stop-color="#0078d4"/></linearGradient></defs><path d="M18 11.32a4.12 4.12 0 00-3.51-4 5.15 5.15 0 00-5.25-5 5.25 5.25 0 00-5 3.49A4.86 4.86 0 000 10.59a5 5 0 005.07 4.82h8.65a.78.78 0 00.22 0A4.13 4.13 0 0018 11.32z" fill="url(#a)"/><path d="M12.33 6.59a3.07 3.07 0 00-5.61.85 3.16 3.16 0 00.33 2.27l-2.34 2.37a.79.79 0 000 1.12.78.78 0 00.56.23.76.76 0 00.56-.23l2.33-2.36a3.14 3.14 0 00.81.33 3.08 3.08 0 003.36-4.58zm-.54 2.1a2.16 2.16 0 01-2.09 1.65 1.79 1.79 0 01-.51-.07 1.87 1.87 0 01-.7-.32 2.13 2.13 0 01-.56-.56 2.17 2.17 0 01-.31-1.73A2.14 2.14 0 019.7 6a2.31 2.31 0 01.52.06 2.18 2.18 0 011.32 1 2.13 2.13 0 01.25 1.63z" fill="#f2f2f2"/><ellipse cx="9.69" cy="8.18" rx="2.15" ry="2.16" fill="#83b9f9"/></svg>
diff --git a/app/frontend/src/pages/chat/Chat.tsx b/app/frontend/src/pages/chat/Chat.tsx
index 7dabff8c7f..e3c0cfd77f 100644
--- a/app/frontend/src/pages/chat/Chat.tsx
+++ b/app/frontend/src/pages/chat/Chat.tsx
@@ -2,9 +2,9 @@ import { useRef, useState, useEffect, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { Helmet } from "react-helmet-async";
 import { Panel, DefaultButton } from "@fluentui/react";
-import { SparkleFilled } from "@fluentui/react-icons";
 import readNDJSONStream from "ndjson-readablestream";
 
+import appLogo from "../../assets/applogo.svg";
 import styles from "./Chat.module.css";
 
 import {
@@ -370,7 +370,8 @@ const Chat = () => {
                 <div className={styles.chatContainer}>
                     {!lastQuestionRef.current ? (
                         <div className={styles.chatEmptyState}>
-                            <SparkleFilled fontSize={"120px"} primaryFill={"rgba(115, 118, 225, 1)"} aria-hidden="true" aria-label="Chat logo" />
+                            <img src={appLogo} alt="App logo" width="120" height="120" />
+
                             <h1 className={styles.chatEmptyStateTitle}>{t("chatEmptyStateTitle")}</h1>
                             <h2 className={styles.chatEmptyStateSubtitle}>{t("chatEmptyStateSubtitle")}</h2>
                             {showLanguagePicker && <LanguagePicker onLanguageChange={newLang => i18n.changeLanguage(newLang)} />}
diff --git a/app/frontend/src/pages/layout/Layout.module.css b/app/frontend/src/pages/layout/Layout.module.css
index baa8951d56..4854140247 100644
--- a/app/frontend/src/pages/layout/Layout.module.css
+++ b/app/frontend/src/pages/layout/Layout.module.css
@@ -82,11 +82,6 @@
     display: none;
 }
 
-.microsoftLogo,
-.githubLogo {
-    display: none;
-}
-
 .menuToggle {
     display: block;
     background: none;
@@ -143,14 +138,6 @@
         vertical-align: middle;
     }
 
-    .githubLogo,
-    .microsoftLogo {
-        height: 1.25rem;
-        font-weight: 600;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
     .menuToggle {
         display: none;
     }