use white bar for doc type editor tabs

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -3,8 +3,9 @@
   display: flex;
   align-items: center;
   padding: 0;
-  border-left-width: 1px;
-  border-right-width: 1px;
+  border-right-width: 21px;
+  margin-left: -20px;
+  width: calc(100% + 40px);
 
   .left {
     flex: 1 1 auto;
@@ -33,6 +34,7 @@
   display: flex;
   align-items: center;
   overflow-x: auto;
+  scroll-behavior: smooth;
   -ms-overflow-style: none;
   scrollbar-width: none;
 
@@ -81,6 +83,13 @@
   }
 }
 
+.umb-group-builder__tabs__add-tab {
+    white-space: nowrap;
+    .umb-button__content {
+        flex-wrap: nowrap;
+    }
+}
+
 .umb-group-builder__tab {
   background-color: @white;
   position: relative;
@@ -378,8 +387,7 @@
 input.umb-group-builder__group-title-input {
   border-color: transparent;
   background: transparent;
-  font-weight: bold;
-  color: @black;
+  color: @ui-light-type;
   margin-bottom: 0;
 }
 

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -163,7 +163,7 @@
 @ui-selected-border-hover:     darken(@blueDark, 10%);
 
 @ui-light-border:           @pinkLight;
-@ui-light-type:             @gray-4;
+@ui-light-type:             @gray-3;
 @ui-light-type-hover:       @blueMid;
 
 @ui-light-active-border:      @pinkLight;

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -1,6 +1,6 @@
 <div data-element="groups-builder" class="clearfix">
 
-    <umb-editor-sub-header class="umb-group-builder__toolbar">
+    <umb-editor-sub-header class="umb-group-builder__toolbar" appearance="white">
 
         <umb-editor-sub-header-content-left class="left">
 
@@ -30,17 +30,16 @@
                             on-change-name="onChangeTabName(tab)">
                         </umb-content-type-tab>
                     </li>
-                    <li>
-                        <button
-                            ng-if="!sortingMode"
-                            type="button"
-                            hotkey="alt+shift+a"
-                            ng-click="addTab(tab)"
-                            data-element="tab-add"
-                            class="btn-reset umb-group-builder__tab umb-group-builder__tab--placeholder">
-                            Add tab
-                        </button>
-                    </li>
+                    <umb-button
+                        ng-if="!sortingMode"
+                        class="umb-group-builder__tabs__add-tab"
+                        type="button"
+                        label-key="contentTypeEditor_addTab"
+                        icon="icon-add"
+                        button-style="white"
+                        action="addTab();"
+                        size="xs">
+                    </umb-button>
                 </ul>
                 <button ng-if="overflow.right < 0" class="btn-reset umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--right" ng-click="moveTabsOverflowRight()">
                     <span class="caret"></span>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -1757,6 +1757,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="displaySettingsLabelOnTop">Label above (full-width)</key>
     <key alias="confirmDeleteTabNotice">This will also delete all items below this tab.</key>
     <key alias="confirmDeleteGroupNotice">This will also delete all items below this group.</key>
+    <key alias="addTab">Add tab</key>
   </area>
   <area alias="languages">
     <key alias="addLanguage">Add language</key>