added Accessibility changes for Client 360 profile

Author: Rohini-Microsoft

ClientAdvisor/App/frontend/src/components/Cards/Cards.module.css

@@ -39,7 +39,7 @@
   }
 
   .userCardContainer.selected {
-    background-color: #0078D7;
+    background-color: #0F6CBD;
     color: white;
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12); 
   } 

ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -62,3 +62,12 @@
     left: 16.5%;
   }
 }
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+
+  .questionInputContainer{
+    border: 2px solid WindowText;
+    background-color: Window;
+    color: WindowText;
+  }
+}

ClientAdvisor/App/frontend/src/components/UserCard/UserCard.module.css

@@ -29,7 +29,7 @@
 }
 
 .selected {
-  background-color: #0078D7; 
+  background-color: #0F6CBD; 
   color: white !important;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
 }

ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx

@@ -50,7 +50,7 @@ const UserCard: React.FC<UserCardProps> = ({
     <div tabIndex={0} className={`${styles.userInfo} ${isSelected ? styles.selected : ''}`} onClick={onCardClick} onKeyDown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();  // Prevent the default action like scrolling.
-      handleShowMoreClick(e);  // Call the same function as onClick.
+      onCardClick();  // Call the same function as onClick.
     }
   }}>
       <div className={styles.clientName}>{ClientName}</div>

ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css

@@ -179,6 +179,7 @@
   height: 100%; */
   display: flex;
   flex-direction: column;
+  padding-top : 10px ;
 }
 
 .pivotContainer > div {
@@ -316,4 +317,11 @@
       background-color: Window;
       color: WindowText;
   }
+
+  .selectedName{
+    border-radius:25px;
+    border: 2px solid WindowText;
+    background-color: Window;
+    color: WindowText;
+  }
 }

ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx

@@ -212,7 +212,7 @@ const Layout = () => {
                   <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
                 </div>
               )}
-              <Pivot defaultSelectedKey="chat">
+              <Pivot defaultSelectedKey="chat" className='tabContainer' style={{ paddingTop : 10 }}>
                 <PivotItem headerText="Chat" itemKey="chat">
                   <Chat setIsVisible={setIsVisible}/>
                 </PivotItem>