fix(PackageDetailTab): update version dropdown layout per design request

Updated the layout and styling to match the design Lee suggested Closes DCOS-19295
dcos · Feb 19, 2019 · c8e1207 · c8e1207
1 parent c16fd0b
commit c8e1207
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/js/pages/catalog/PackageDetailTab.js b/src/js/pages/catalog/PackageDetailTab.js
@@ -356,7 +356,7 @@ class PackageDetailTab extends mixin(StoreMixin) {
 
     return (
       <Dropdown
-        buttonClassName="button button-link dropdown-toggle"
+        buttonClassName="button button-primary-link dropdown-toggle flush-left flush-right"
         dropdownMenuClassName="dropdown-menu"
         dropdownMenuListClassName="dropdown-menu-list"
         onItemSelection={this.handlePackageVersionChange}
@@ -517,8 +517,11 @@ class PackageDetailTab extends mixin(StoreMixin) {
               </div>
               {!state.isLoadingSelectedVersion && (
                 <div className="media-object-item media-object-item-grow ">
-                  <div className="flex flex-direction-left-to-right">
-                    <h1 className="short flush-top">{name}</h1>
+                  <h1 className="short flush-top flush-bottom">{name}</h1>
+                  <div className="flex flex-align-items-center">
+                    <span className="package-version-label">
+                      <Trans>Version</Trans>:
+                    </span>
                     {this.getPackageVersionsDropdown()}
                   </div>
                   <div className="row">

diff --git a/src/styles/views/packages/styles.less b/src/styles/views/packages/styles.less
@@ -35,6 +35,10 @@
       margin-right: @base-spacing-unit * 1/4;
     }
   }
+
+  .package-version-label {
+    padding-right: @base-spacing-unit * 1/4;
+  }
 }
 
 & when (@packages-view-enabled) and (@layout-screen-small-enabled) {