From 8613e4e711933777c1f7ecc32f941591f1a1b64f Mon Sep 17 00:00:00 2001
From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Tue, 8 May 2018 09:56:37 +0200
Subject: [PATCH] SONAR-10434 Improve alignments of buttons dropdowns tabs &
 search fields

---
 .../main/js/app/components/search/Search.css  |  4 ++++
 .../src/main/js/app/styles/init/forms.css     |  4 +++-
 .../ProjectActivityDateInput-test.js.snap     | 21 ++++---------------
 .../changelog/ChangelogSearch.tsx             |  2 +-
 .../ChangelogSearch-test.tsx.snap             |  2 +-
 .../main/js/components/controls/SearchBox.css |  2 +-
 .../js/components/controls/react-select.css   |  1 +
 7 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/components/search/Search.css b/server/sonar-web/src/main/js/app/components/search/Search.css
index ff34e5b3576..4ac86b816e5 100644
--- a/server/sonar-web/src/main/js/app/components/search/Search.css
+++ b/server/sonar-web/src/main/js/app/components/search/Search.css
@@ -34,6 +34,10 @@
   border-color: #fff;
 }
 
+.navbar-search .search-box-note {
+  line-height: calc(var(--globalNavContentHeight) - 2px);
+}
+
 .navbar-search .search-box-magnifier,
 .navbar-search .search-box-clear {
   top: calc((var(--globalNavContentHeight) - 16px) / 2);
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 696151b06bc..881e78fe804 100644
--- a/server/sonar-web/src/main/js/app/styles/init/forms.css
+++ b/server/sonar-web/src/main/js/app/styles/init/forms.css
@@ -201,10 +201,12 @@ label[for] {
 
 .radio-toggle > li > label {
   display: inline-block;
-  padding: 3px 12px 5px;
+  padding: 0 12px;
   margin: 0;
   border: 1px solid var(--darkBlue);
   color: var(--darkBlue);
+  height: calc(var(--controlHeight) - 2px);
+  line-height: calc(var(--controlHeight) - 2px);
 }
 
 .radio-toggle input[type='radio'] {
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
index d10a64ba95c..74e05f0bbf6 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
@@ -1,21 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly the date inputs 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render correctly the date inputs 1`] = `
 <div>
-  <DateRangeInput
-    onChange={[Function]}
-    value={
-      Object {
-        "from": 2016-10-27T12:21:15.000Z,
-        "to": 2016-12-27T12:21:15.000Z,
-      }
-    }
-  />
-  <Button
-    className="spacer-left"
-    disabled={false}
-    onClick={[Function]}
-  >
+  <DateRangeInput onChange={[Function]} value={ Object { "from": 2016-10-27T12:21:15.000Z, "to": 2016-12-27T12:21:15.000Z,
+    } } />
+  <Button className="spacer-left" disabled={false} onClick={[Function]}>
     project_activity.reset_dates
   </Button>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
index 7ea8aa32b51..77ef351e7d8 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
@@ -33,7 +33,7 @@ export default class ChangelogSearch extends React.PureComponent<Props> {
     return (
       <div className="display-inline-block" id="quality-profile-changelog-form">
         <DateRangeInput onChange={this.props.onDateRangeChange} value={this.props.dateRange} />
-        <Button className="spacer-left" onClick={this.props.onReset}>
+        <Button className="spacer-left vertical-top" onClick={this.props.onReset}>
           {translate('reset_verb')}
         </Button>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/__snapshots__/ChangelogSearch-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/__snapshots__/ChangelogSearch-test.tsx.snap
index cd8ed3b302e..7a22927456b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/__snapshots__/ChangelogSearch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/__snapshots__/ChangelogSearch-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`should render 1`] = `
     }
   />
   <Button
-    className="spacer-left"
+    className="spacer-left vertical-top"
     onClick={[MockFunction]}
   >
     reset_verb
diff --git a/server/sonar-web/src/main/js/components/controls/SearchBox.css b/server/sonar-web/src/main/js/components/controls/SearchBox.css
index 7c5d32ecae4..16f4d1f4e7a 100644
--- a/server/sonar-web/src/main/js/components/controls/SearchBox.css
+++ b/server/sonar-web/src/main/js/components/controls/SearchBox.css
@@ -64,7 +64,7 @@
   top: 1px;
   left: 40px;
   right: var(--controlHeight);
-  line-height: calc(var(--controlHeight));
+  line-height: var(--controlHeight);
   color: var(--secondFontColor);
   font-size: var(--smallFontSize);
   text-align: right;
diff --git a/server/sonar-web/src/main/js/components/controls/react-select.css b/server/sonar-web/src/main/js/components/controls/react-select.css
index bac1d66a0b8..b65548be61e 100644
--- a/server/sonar-web/src/main/js/components/controls/react-select.css
+++ b/server/sonar-web/src/main/js/components/controls/react-select.css
@@ -56,6 +56,7 @@
   display: table;
   width: 100%;
   height: var(--controlHeight);
+  line-height: calc(var(--controlHeight) - 2px);
   border: 1px solid var(--gray80);
   border-collapse: separate;
   border-radius: 2px;
-- 
2.39.5