[Feature] Rebrand sample app with Contoso branding (#486)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>
microsoft · Jan 9, 2024 · 88eaaf3 · 88eaaf3
1 parent 9ba81d3
commit 88eaaf3
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 173 deletions.
diff --git a/frontend/src/assets/Contoso.svg b/frontend/src/assets/Contoso.svg
diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
diff --git a/frontend/src/pages/layout/Layout.tsx b/frontend/src/pages/layout/Layout.tsx
@@ -1,38 +1,13 @@
 import { Outlet, Link } from "react-router-dom";
 import styles from "./Layout.module.css";
-import Azure from "../../assets/Azure.svg";
+import Contoso from "../../assets/Contoso.svg";
 import { CopyRegular, ShareRegular } from "@fluentui/react-icons";
-import { CommandBarButton, Dialog, Stack, TextField, ICommandBarStyles, IButtonStyles, DefaultButton  } from "@fluentui/react";
+import { Dialog, Stack, TextField, ICommandBarStyles, IButtonStyles } from "@fluentui/react";
 import { useContext, useEffect, useState } from "react";
 import { HistoryButton, ShareButton } from "../../components/common/Button";
 import { AppStateContext } from "../../state/AppProvider";
 import { CosmosDBStatus } from "../../api";
 
-const shareButtonStyles: ICommandBarStyles & IButtonStyles = {
-    root: {
-      width: 86,
-      height: 32,
-      borderRadius: 4,
-      background: 'radial-gradient(109.81% 107.82% at 100.1% 90.19%, #0F6CBD 33.63%, #2D87C3 70.31%, #8DDDD8 100%)',
-    //   position: 'absolute',
-    //   right: 20,
-      padding: '5px 12px',
-      marginRight: '20px'
-    },
-    icon: {
-      color: '#FFFFFF',
-    },
-    rootHovered: {
-      background: 'linear-gradient(135deg, #0F6CBD 0%, #2D87C3 51.04%, #8DDDD8 100%)',
-    },
-    label: {
-      fontWeight: 600,
-      fontSize: 14,
-      lineHeight: '20px',
-      color: '#FFFFFF',
-    },
-  };
-
 const Layout = () => {
     const [isSharePanelOpen, setIsSharePanelOpen] = useState<boolean>(false);
     const [copyClicked, setCopyClicked] = useState<boolean>(false);
@@ -64,64 +39,62 @@ const Layout = () => {
         }
     }, [copyClicked]);
 
-    useEffect(() => {}, [appStateContext?.state.isCosmosDBAvailable.status]);
+    useEffect(() => { }, [appStateContext?.state.isCosmosDBAvailable.status]);
 
     return (
         <div className={styles.layout}>
             <header className={styles.header} role={"banner"}>
-                <Stack horizontal verticalAlign="center" horizontalAlign="space-between"
-                // className={styles.headerContainer}
-                >
+                <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
                     <Stack horizontal verticalAlign="center">
                         <img
-                            src={Azure}
+                            src={Contoso}
                             className={styles.headerIcon}
                             aria-hidden="true"
                         />
                         <Link to="/" className={styles.headerTitleContainer}>
-                            <h1 className={styles.headerTitle}>Azure AI</h1>
+                            <h1 className={styles.headerTitle}>Contoso</h1>
                         </Link>
                     </Stack>
                     <Stack horizontal tokens={{ childrenGap: 4 }}>
-                            {(appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured) && 
-                                <HistoryButton onClick={handleHistoryClick} text={appStateContext?.state?.isChatHistoryOpen ? "Hide chat history" : "Show chat history"}/>    
-                            }
-                            <ShareButton onClick={handleShareClick} />
+                        {(appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured) &&
+                            <HistoryButton onClick={handleHistoryClick} text={appStateContext?.state?.isChatHistoryOpen ? "Hide chat history" : "Show chat history"} />
+                        }
+                        <ShareButton onClick={handleShareClick} />
                     </Stack>
 
                 </Stack>
             </header>
             <Outlet />
-            <Dialog 
+            <Dialog
                 onDismiss={handleSharePanelDismiss}
                 hidden={!isSharePanelOpen}
                 styles={{
-                    
+
                     main: [{
                         selectors: {
-                          ['@media (min-width: 480px)']: {
-                            maxWidth: '600px',
-                            background: "#FFFFFF",
-                            boxShadow: "0px 14px 28.8px rgba(0, 0, 0, 0.24), 0px 0px 8px rgba(0, 0, 0, 0.2)",
-                            borderRadius: "8px",
-                            maxHeight: '200px',
-                            minHeight: '100px',
-                          }
+                            ['@media (min-width: 480px)']: {
+                                maxWidth: '600px',
+                                background: "#FFFFFF",
+                                boxShadow: "0px 14px 28.8px rgba(0, 0, 0, 0.24), 0px 0px 8px rgba(0, 0, 0, 0.2)",
+                                borderRadius: "8px",
+                                maxHeight: '200px',
+                                minHeight: '100px',
+                            }
                         }
-                      }]
+                    }]
                 }}
                 dialogContentProps={{
                     title: "Share the web app",
                     showCloseButton: true
                 }}
             >
-                <Stack horizontal verticalAlign="center" style={{gap: "8px"}}>
-                    <TextField className={styles.urlTextBox} defaultValue={window.location.href} readOnly/>
-                    <div 
-                        className={styles.copyButtonContainer} 
-                        role="button" 
-                        tabIndex={0} 
-                        aria-label="Copy" 
+                <Stack horizontal verticalAlign="center" style={{ gap: "8px" }}>
+                    <TextField className={styles.urlTextBox} defaultValue={window.location.href} readOnly />
+                    <div
+                        className={styles.copyButtonContainer}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Copy"
                         onClick={handleCopyClick}
                         onKeyDown={e => e.key === "Enter" || e.key === " " ? handleCopyClick() : null}
                     >

diff --git a/static/assets/Azure-30d5e7c0.svg b/static/assets/Azure-30d5e7c0.svg
diff --git a/static/assets/Contoso-ff70ad88.svg b/static/assets/Contoso-ff70ad88.svg
diff --git a/static/assets/index-5453444a.js.map b/static/assets/index-5453444a.js.map
diff --git a/static/assets/index-5453444a.js → static/assets/index-67c84355.js b/static/assets/index-5453444a.js → static/assets/index-67c84355.js
diff --git a/static/assets/index-67c84355.js.map b/static/assets/index-67c84355.js.map
diff --git a/static/index.html b/static/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Azure AI</title>
-    <script type="module" crossorigin src="/assets/index-5453444a.js"></script>
+    <title>Contoso</title>
+    <script type="module" crossorigin src="/assets/index-67c84355.js"></script>
     <link rel="stylesheet" href="/assets/index-9557690e.css">
   </head>
   <body>