1. optimize logo's size

2. change search input's with from 350px to 375px
3. add switch language icon

CHANGES.md

@@ -21,6 +21,7 @@ Apollo 2.0.0
 * [Bump version to 2.0.0 and drop java 1.7 support](https://github.com/apolloconfig/apollo/pull/4015)
 * [Optimize home page style](https://github.com/apolloconfig/apollo/pull/4052)
 * [Support Java 17](https://github.com/apolloconfig/apollo/pull/4060)
+* [Optimize top navbar style](https://github.com/apolloconfig/apollo/pull/4073)
 
 ------------------
 All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/8?closed=1)

apollo-portal/src/main/resources/static/styles/common-style.css

@@ -1099,6 +1099,10 @@ table th {
     font-size: 14px;
 }
 
+#app-search-list {
+    width: 375px;
+}
+
 /*backTop component style*/
 .back-top {
     position: fixed;
@@ -1125,3 +1129,15 @@ table th {
 .back-top:active {
     opacity: .6;
 }
+
+.navbar-nav .nav-switch-lang {
+    width: 12px;
+    height: 12px;
+    margin-top: -4px;
+    margin-right: -5px;
+}
+
+.navbar-header .logo {
+    height: 35px;
+    margin-top: -4px
+}

apollo-portal/src/main/resources/static/views/common/nav.html

@@ -30,10 +30,10 @@
                  ng-show="viewMode == 2 && showSideBar"
                  ng-click="showSideBar = !showSideBar">
             <a class="navbar-brand logo" href="{{ '/' | prefixPath }}">
-                <img src="{{ '/img/logo-simple.png' | prefixPath }}" style="height:45px; margin-top: -13px">
+                <img class="logo" src="{{ '/img/logo-simple.png' | prefixPath }}">
             </a>
         </div>
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+        <div class="collapse navbar-collapse">
 
             <ul class="nav navbar-nav navbar-right">
                 <li>
@@ -43,6 +43,7 @@
                 </li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                        <img class="nav-switch-lang" style="" src="{{ '/img/language.png' | prefixPath }}">
                         <span class="glyphicon .glyphicon-glyphicon-font"></span>&nbsp;Language<span class="caret"></span></a>
 
                     <ul class="dropdown-menu">
@@ -90,7 +91,7 @@
 
             <div class="navbar-form navbar-right form-inline" role="search">
                 <div class="form-group app-search-list">
-                    <select id="app-search-list" style="width: 350px"></select>
+                    <select id="app-search-list"></select>
                 </div>
             </div>
         </div>