SONAR-10434 Improve alignments of buttons dropdowns tabs & search fields

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 ff34e5b3576206c391b3214ef2d28c74db43bce2..4ac86b816e58d6b5d23c0a6043d26e5152a7e6c9 100644 (file)
--- 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 696151b06bc15dfa87a8700e36c202c8c2d770d1..881e78fe80405cbb71df52b64c81c96829a97ca3 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
@@ -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 d10a64ba95cf09c97be700ad19d4f9615fb3ab92..74e05f0bbf694dd405526dd8006cfa49be965966 100644 (file)
--- 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 7ea8aa32b51129c67700df6f62389516e82ad1ca..77ef351e7d8bea9aa0d35817e3323d5fc3099f9b 100644 (file)
--- 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 cd8ed3b302ec969f7dde957e18314e0744bfad08..7a22927456bb5da5d99ddb4881967dbbc6f28133 100644 (file)
--- 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 7c5d32ecae49edceda7be7554f43e7f3e2361c2d..16f4d1f4e7afa600f9d755d8d2ef6b1aa3b05acf 100644 (file)
--- 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 bac1d66a0b8f15af1680032ede6c1fcf08ae1235..b65548be61e0b00327f0cafc9706f249b850903b 100644 (file)
--- 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;