SONAR-18755 Validation fixes for MIUI navbar

diff --git a/server/sonar-web/design-system/src/components/InputSearch.tsx b/server/sonar-web/design-system/src/components/InputSearch.tsx
index 5e5e9c0e3eec9b42b837a32fe4911ab016653b8f..304a1d3dd2c3468256c4b14acf16f617ab15d88e 100644 (file)
--- a/server/sonar-web/design-system/src/components/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/InputSearch.tsx
@@ -188,11 +188,11 @@ export const StyledInputWrapper = styled.div`
 
     ${tw`sw-rounded-2`}
     ${tw`sw-box-border`}
-  ${tw`sw-pl-10`}
-  ${tw`sw-body-sm`}
-  ${tw`sw-w-full sw-h-control`}
+    ${tw`sw-pl-10`}
+    ${tw`sw-body-sm`}
+    ${tw`sw-w-full sw-h-control`}
 
-  &::placeholder {
+    &::placeholder {
       color: ${themeColor('inputPlaceholder')};
 
       ${tw`sw-truncate`}

diff --git a/server/sonar-web/design-system/src/components/MainMenuItem.tsx b/server/sonar-web/design-system/src/components/MainMenuItem.tsx
index 9749ba9028a710780ef7fa33f694692d132ef2b7..26da3226de984587152d6ecca55de871802d3d80 100644 (file)
--- a/server/sonar-web/design-system/src/components/MainMenuItem.tsx
+++ b/server/sonar-web/design-system/src/components/MainMenuItem.tsx
@@ -34,7 +34,7 @@ export const MainMenuItem = styled.li`
 
     color: ${themeContrast('mainBar')};
     letter-spacing: 0.03em;
-    line-height: calc(${LAYOUT_GLOBAL_NAV_HEIGHT}px - 3px); // - 3px border bottom
+    line-height: calc(${LAYOUT_GLOBAL_NAV_HEIGHT}px - 4px); // - 4px border bottom
     border-bottom: ${themeBorder('active', 'transparent', 1)};
 
     &:visited {

diff --git a/server/sonar-web/design-system/src/components/__tests__/MainMenuItem-test.tsx b/server/sonar-web/design-system/src/components/__tests__/MainMenuItem-test.tsx
index b3120afbe713e7b177c37e71cee874eff90d2478..562613e9ea8d33e914ea31bd7c5a699ee68ed2bd 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/MainMenuItem-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/MainMenuItem-test.tsx
@@ -33,7 +33,7 @@ it('should render default', () => {
 
   expect(screen.getByText('Hi')).toHaveStyle({
     color: 'rgb(62, 67, 87)',
-    'border-bottom': '3px solid transparent',
+    'border-bottom': '4px solid transparent',
   });
 });
 
@@ -46,7 +46,7 @@ it('should render active link', () => {
 
   expect(screen.getByText('Hi')).toHaveStyle({
     color: 'rgb(62, 67, 87)',
-    'border-bottom': '3px solid rgba(123,135,217,1)',
+    'border-bottom': '4px solid rgba(123,135,217,1)',
   });
 });
 
@@ -59,6 +59,6 @@ it('should render hovered link', () => {
 
   expect(screen.getByText('Hi')).toHaveStyle({
     color: 'rgb(42, 47, 64)',
-    'border-bottom': '3px solid rgba(123,135,217,1)',
+    'border-bottom': '4px solid rgba(123,135,217,1)',
   });
 });

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 56aaefd0d3ae85c3a284682b12dcc0daf6821311..7a86822c0b4027b725f4f9c4e166204b3b7fbeb2 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -674,7 +674,7 @@ const lightTheme = {
   // predefined borders
   borders: {
     default: ['1px', 'solid', ...COLORS.grey[50]],
-    active: ['3px', 'solid', ...primary.light],
+    active: ['4px', 'solid', ...primary.light],
     focus: ['4px', 'solid', ...secondary.default, OPACITY_20_PERCENT],
   },
 

diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
index 71779ed36cd7a0e71eb0e8e0167c9116bbf76de3..982f207add55b41f8ab95fbda6de399c69b8ed63 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
@@ -55,10 +55,12 @@ export default class GlobalSearchResult extends React.PureComponent<Props> {
       >
         <div className="sw-flex sw-justify-between sw-items-center sw-w-full">
           <SearchText match={component.match} name={component.name} />
-          {component.isFavorite && <FavoriteIcon favorite={true} size={16} />}
-          {!component.isFavorite && component.isRecentlyBrowsed && (
-            <ClockIcon aria-label={translate('recently_browsed')} />
-          )}
+          <div className="sw-ml-2">
+            {component.isFavorite && <FavoriteIcon favorite={true} size={16} />}
+            {!component.isFavorite && component.isRecentlyBrowsed && (
+              <ClockIcon aria-label={translate('recently_browsed')} />
+            )}
+          </div>
         </div>
         <TextMuted text={component.key} />
       </ItemLink>

diff --git a/server/sonar-web/src/main/js/app/styles/init/base.css b/server/sonar-web/src/main/js/app/styles/init/base.css
index 8e3b5d505a44a247e1ace452a812790a1ea172eb..7df1afe59fa89e9ebea3604185f5cc69bd004679 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/base.css
+++ b/server/sonar-web/src/main/js/app/styles/init/base.css
@@ -30,7 +30,7 @@
 }
 
 *:focus-visible {
-  outline: 2px dotted var(--primary400) !important;
+  outline: 2px dotted var(--primary400);
 }
 
 html,

diff --git a/server/sonar-web/src/main/js/app/styles/init/forms.css b/server/sonar-web/src/main/js/app/styles/init/forms.css
index d2983bd6b9bea6f0236bb2ba7e57054f86e726dc..f8b1e25a1c7ce66a41c34d4914a79bd222e97e26 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/forms.css
+++ b/server/sonar-web/src/main/js/app/styles/init/forms.css
@@ -54,7 +54,7 @@ textarea:focus,
 select:focus {
   border-color: var(--blue);
   box-shadow: none;
-  outline: none !important;
+  outline: none;
 }
 
 input[type='text']:invalid,

diff --git a/server/sonar-web/src/main/js/components/controls/buttons.css b/server/sonar-web/src/main/js/components/controls/buttons.css
index 1dd0a26769ac0386a994598d398e0b794a90467d..eb189f27e98c1d8f7eda662323b95875e77d7956 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/buttons.css
+++ b/server/sonar-web/src/main/js/components/controls/buttons.css
@@ -34,7 +34,6 @@
   font-size: var(--smallFontSize);
   text-decoration: none;
   cursor: pointer;
-  outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 
@@ -107,7 +106,6 @@
   background: inherit;
   color: inherit;
   cursor: pointer;
-  outline: none;
   border: 0;
 }