Merge pull request #1868 from amitpanwar789/feature/polaris_upgradati…

…on_v12

Feature/polaris upgradation v12

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/DateRangeFilter.jsx

@@ -24,6 +24,7 @@ function DateRangeFilter(props){
       sectioned={false}
       fullHeight
       activator={
+        <div className="polaris-secondaryAction-button">
         <Button
           icon={CalendarIcon}
           onClick={() => setPopoverActive(!popoverActive)}
@@ -32,6 +33,7 @@ function DateRangeFilter(props){
             {func.getDateValue(initialDispatch)}
           </span>
         </Button>
+        </div>
       }
       onClose={() => setPopoverActive(false)}
     >

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/FlyLayout.jsx

@@ -15,7 +15,7 @@ function FlyLayout(props) {
     return (
         <div className={"flyLayout " + (show ? "show" : "")} style={{width: divWidth}}>
             <div className="innerFlyLayout">
-                <Box borderColor="border-secondary" borderWidth="1" background="bg" width={divWidth} minHeight="100%">
+                <Box borderColor="border-secondary" borderWidth="025" background="bg-surface" width={divWidth} minHeight="100%">
                     { loading ? <div style={{position: "absolute", right: "25vw" , top: "50vh"}}><Spinner size="large" /></div>:
                     <BlockStack gap={"500"}>
                         <Box padding={"400"} paddingBlockEnd={"0"} >

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/LearnPopoverComponent.jsx

@@ -1,6 +1,7 @@
 import { ActionList, Box, Button, Icon, Popover, Text, BlockStack } from '@shopify/polaris'
 import { PlayIcon, NoteIcon } from "@shopify/polaris-icons";
 import React, { useState } from 'react'
+import '../../pages/observe/api_collections/apiCollections.css'
 
 function LearnPopoverComponent({learnMoreObj}) {
     const [popoverActive,setPopoverActive] = useState(false)
@@ -23,9 +24,11 @@ function LearnPopoverComponent({learnMoreObj}) {
         <Popover
             active={popoverActive}
             activator={(
-                <Button onClick={() => setPopoverActive(!popoverActive)} disclosure>
-                    Learn
-                </Button>
+                <div className="polaris-secondaryAction-button">
+                    <Button variant="secondary" onClick={() => setPopoverActive(!popoverActive)} disclosure>
+                        Learn
+                    </Button>
+                </div>
             )}
             autofocusTarget="first-node"
             onClose={() => { setPopoverActive(false) }}

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.css

@@ -14,6 +14,13 @@
     fill: #6D3BEF !important;
 }
 
-.local_icon .Polaris-Icon__Svg {
-    fill: #2C6ECB !important;
-}
+/* .Polaris-TopBar-Menu__Activator:not(:hover){
+    background: transparent !important;
+} */
+
+.Polaris-TopBar-Menu__Activator:hover{
+    --border-gradient-bg-hover: var(--p-color-bg-fill-hover)!important;
+    --border-gradient-border-hover: var(--p-color-border-gradient-hover)!important;
+    --border-gradient-bg-selected: var(--p-color-button-gradient-bg-fill-selected)!important;
+    --border-gradient-border-selected: var(--p-color-border-gradient-selected)!important;
+}

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.js

@@ -110,7 +110,7 @@ export default function Header() {
             }
         }
     })
-
+    
     function createNewAccount() {
         api.saveToAccount(newAccount).then(resp => {
           setShowCreateAccount(false)
@@ -165,6 +165,7 @@ export default function Header() {
                 },
             ]}
             initials={func.initials(username)}
+            name={accounts[activeAccount]}
             open={isUserMenuOpen}
             onToggle={toggleIsUserMenuOpen}
         />
@@ -227,8 +228,8 @@ export default function Header() {
                  <SemiCircleProgress key={"progress"} progress={progress} size={60} height={55} width={75}/>
                 </Button>
                 <BlockStack gap={"0"}>
-                    <Text fontWeight="medium">Test run status</Text>
-                    <Text tone="subdued" variant="bodySm">{`${currentTestsObj.totalTestsQueued} tests queued`}</Text>
+                    <Text fontWeight="medium"><div style={{color: "#FFFFFF"}}>Test run status</div></Text>
+                    <Text variant="bodySm"><div style={{color: "#FFFFFF"}}>{`${currentTestsObj.totalTestsQueued} tests queued`}</div></Text>
                 </BlockStack>
             </InlineStack> : null}
             <TopBar.Menu