Skip to content

Commit 6de5706

Browse files
CWade3051CWade3051
committed
Update header layout and branding
Added new company logo (applogo2.svg) and updated header styles for improved layout and branding. Changed header background color, increased logo size, and reorganized header sections for better desktop and mobile experience. Updated navigation to only show 'M&A Advanced AI Chat with RAG' and changed 'Chat' label to 'Walmart' in translations.
1 parent cbe42e7 commit 6de5706

File tree

5 files changed

+88
-41
lines changed

5 files changed

+88
-41
lines changed

‎app/frontend/src/assets/applogo2.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/frontend/src/components/AIModeToggle/AIModeToggle.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.aiModeToggle {
2-
display: flex;
3-
gap: 8px;
4-
align-items: center;
5-
margin-left: 205px;
2+
display: flex;
3+
gap: 8px;
4+
align-items: center;
5+
margin-left: 205px;
66
}
77

88
.optionSlider {

‎app/frontend/src/locales/en/translation.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"pageTitle": "Azure OpenAI + AI Search",
33
"headerTitle": "Azure OpenAI + AI Search",
4-
"chat": "Chat",
4+
"chat": "Walmart",
55
"qa": "M&A Advanced AI Chat with RAG",
66
"login": "Login",
77
"logout": "Logout",

‎app/frontend/src/pages/layout/Layout.module.css‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66

77
.header {
8-
background-color: #222222;
8+
background-color: #0071ce;
99
color: #f2f2f2;
1010
}
1111

@@ -18,6 +18,34 @@
1818
position: relative;
1919
}
2020

21+
.headerLeft {
22+
display: flex;
23+
align-items: center;
24+
gap: 2rem;
25+
flex: 1;
26+
}
27+
28+
.headerCenter {
29+
flex: 1;
30+
display: none; /* Hidden on mobile, shown on desktop */
31+
justify-content: center;
32+
margin-left: -45px; /* Shift left to center over toggles */
33+
}
34+
35+
.headerRight {
36+
display: flex;
37+
align-items: center;
38+
flex: 1;
39+
justify-content: flex-end;
40+
}
41+
42+
.headerLogoContainer {
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
margin: 0;
47+
}
48+
2149
.headerTitleContainer {
2250
display: flex;
2351
align-items: center;
@@ -26,7 +54,7 @@
2654
}
2755

2856
.headerLogo {
29-
height: 2rem;
57+
height: 60px;
3058
width: auto;
3159
}
3260

@@ -39,7 +67,7 @@
3967
z-index: 100;
4068
display: none;
4169
flex-direction: column;
42-
background-color: #222222;
70+
background-color: #0071ce;
4371
position: absolute;
4472
top: 2.7rem;
4573
right: 0;
@@ -103,19 +131,34 @@
103131
font-weight: 600;
104132
}
105133

134+
.headerCenter {
135+
display: flex !important;
136+
}
137+
138+
.headerLeft {
139+
gap: 34rem; /* Much more space between title and logo on desktop */
140+
}
141+
142+
.headerLogo {
143+
height: 70px; /* Even bigger on desktop */
144+
}
145+
106146
.headerNavList {
107147
display: flex;
108148
flex-direction: row;
109149
list-style: none;
110150
padding: 0;
111151
position: static;
112152
width: auto;
153+
background-color: transparent;
113154
}
114155

115156
.headerNavPageLink {
116157
border-bottom: none;
117158
padding: 0;
118159
display: block;
160+
font-size: 1.1rem;
161+
font-weight: 500;
119162
}
120163

121164
.headerNavPageLink:hover {
@@ -125,6 +168,8 @@
125168
.headerNavPageLinkActive {
126169
color: #f2f2f2;
127170
text-decoration: none;
171+
font-size: 1.1rem;
172+
font-weight: 500;
128173
}
129174

130175
.headerNavLeftMargin {

‎app/frontend/src/pages/layout/Layout.tsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
44
import styles from "./Layout.module.css";
55

66
import { useLogin } from "../../authConfig";
7+
import appLogo2 from "../../assets/applogo2.svg";
78

89
import { LoginButton } from "../../components/LoginButton";
910
import { IconButton } from "@fluentui/react";
@@ -38,39 +39,39 @@ const Layout = () => {
3839
<div className={styles.layout}>
3940
<header className={styles.header} role={"banner"}>
4041
<div className={styles.headerContainer} ref={menuRef}>
41-
<Link to="/" className={styles.headerTitleContainer}>
42-
<h3 className={styles.headerTitle}>{t("headerTitle")}</h3>
43-
</Link>
44-
<nav>
45-
<ul className={`${styles.headerNavList} ${menuOpen ? styles.show : ""}`}>
46-
<li>
47-
<NavLink
48-
to="/"
49-
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
50-
onClick={() => setMenuOpen(false)}
51-
>
52-
{t("chat")}
53-
</NavLink>
54-
</li>
55-
<li>
56-
<NavLink
57-
to="/qa"
58-
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
59-
onClick={() => setMenuOpen(false)}
60-
>
61-
{t("qa")}
62-
</NavLink>
63-
</li>
64-
</ul>
65-
</nav>
66-
<div className={styles.loginMenuContainer}>
67-
{useLogin && <LoginButton />}
68-
<IconButton
69-
iconProps={{ iconName: "GlobalNavButton" }}
70-
className={styles.menuToggle}
71-
onClick={toggleMenu}
72-
ariaLabel={t("labels.toggleMenu")}
73-
/>
42+
<div className={styles.headerLeft}>
43+
<Link to="/" className={styles.headerTitleContainer}>
44+
<h3 className={styles.headerTitle}>{t("headerTitle")}</h3>
45+
</Link>
46+
<div className={styles.headerLogoContainer}>
47+
<img src={appLogo2} alt="Company logo" className={styles.headerLogo} />
48+
</div>
49+
</div>
50+
<div className={styles.headerCenter}>
51+
<nav>
52+
<ul className={`${styles.headerNavList} ${menuOpen ? styles.show : ""}`}>
53+
<li>
54+
<NavLink
55+
to="/qa"
56+
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
57+
onClick={() => setMenuOpen(false)}
58+
>
59+
{t("qa")}
60+
</NavLink>
61+
</li>
62+
</ul>
63+
</nav>
64+
</div>
65+
<div className={styles.headerRight}>
66+
<div className={styles.loginMenuContainer}>
67+
{useLogin && <LoginButton />}
68+
<IconButton
69+
iconProps={{ iconName: "GlobalNavButton" }}
70+
className={styles.menuToggle}
71+
onClick={toggleMenu}
72+
ariaLabel={t("labels.toggleMenu")}
73+
/>
74+
</div>
7475
</div>
7576
</div>
7677
</header>

0 commit comments

Comments
 (0)