fix: Added UI changes (Landing Screen) (#1039)

Author: Rohini-Microsoft

code/frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -65,11 +65,23 @@
     height: 24px;
     margin-bottom: 12px;
   }
-  
+
   .microphoneAndSendContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-right: 12px;
     margin-top: 25px;
   }
+
+
+  /* High contrast mode specific styles */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    .questionInputContainer{
+        border: 2px solid WindowText;
+        margin-bottom: 10px;
+        padding: 5px;
+        background-color: Window;
+        color: WindowText;
+    }
+}

code/frontend/src/pages/chat/Chat.module.css

@@ -308,3 +308,19 @@
         font-size: 12px;
     }
 }
+
+  /* High contrast mode specific styles */
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    .chatContainer {
+        border: 2px solid WindowText;
+        padding: 10px;
+        background-color: Window;
+        color: WindowText;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    .clearChatBroom {
+        left: -17px !important;
+    }
+}

code/frontend/src/pages/chat/Chat.tsx

@@ -136,7 +136,7 @@ const Chat = () => {
       setIsRecognizing(true);
 
       recognizerRef.current = await multiLingualSpeechRecognizer(); // Store the recognizer in the ref
-      
+
       recognizerRef.current.recognized = (s, e) => {
         if (e.result.reason === ResultReason.RecognizedSpeech) {
           const recognized = e.result.text;
@@ -226,7 +226,7 @@ const Chat = () => {
         <div className={`${styles.chatContainer} ${styles.MobileChatContainer}`}>
           {!lastQuestionRef.current ? (
             <Stack className={styles.chatEmptyState}>
-              <img src={Azure} className={styles.chatIcon} aria-hidden="true" />
+              <img src={Azure} className={styles.chatIcon} aria-hidden="true" alt="Azure AI logo"/>
               <h1 className={styles.chatEmptyStateTitle}>Start chatting</h1>
               <h2 className={styles.chatEmptyStateSubtitle}>
                 This chatbot is configured to answer your questions

code/frontend/src/pages/layout/Layout.module.css

@@ -1,3 +1,17 @@
+body {
+    font-size: 16px; /* Use relative units */
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+}
+
+.header, .footer {
+    width: 100%;
+    max-width: 1200px;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
 .layout {
     display: flex;
     flex-direction: column;
@@ -114,4 +128,11 @@
     display: flex;
     align-items: center;
     color: #242424;
-}
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+
+.shareButtonContainer{
+    border: 2px solid WindowText;
+}
+}

code/frontend/src/pages/layout/Layout.tsx

@@ -40,6 +40,7 @@ const Layout = () => {
                             src={Azure}
                             className={styles.headerIcon}
                             aria-hidden="true"
+                            alt="Azure AI logo"
                         />
                         <Link to="/" className={styles.headerTitleContainer}>
                             <h3 className={styles.headerTitle}>Azure AI</h3>
@@ -52,11 +53,11 @@ const Layout = () => {
                 </div>
             </header>
             <Outlet />
-            <Dialog 
+            <Dialog
                 onDismiss={handleSharePanelDismiss}
                 hidden={!isSharePanelOpen}
                 styles={{
-                    
+
                     main: [{
                         selectors: {
                           ['@media (min-width: 480px)']: {
@@ -77,11 +78,11 @@ const Layout = () => {
             >
                 <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" 
+                    <div
+                        className={styles.copyButtonContainer}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Copy"
                         onClick={handleCopyClick}
                         onKeyDown={e => e.key === "Enter" || e.key === " " ? handleCopyClick() : null}
                     >