Polish header for mobile and more languages

edit-post/components/header/more-menu/style.scss

@@ -1,12 +1,18 @@
 .edit-post-more-menu {
+	margin-left: -4px;
+
 	// the padding and margin of the more menu is intentionally non-standard
+	.components-icon-button {
+		width: auto;
+		padding: 8px 2px;
+	}
+
 	@include break-small() {
 		margin-left: 4px;
-	}
 
-	.components-icon-button {
-		padding: 8px 4px;
-		width: auto;
+		.components-icon-button {
+			padding: 8px 4px;
+		}
 	}
 
 	.components-button svg {

edit-post/components/header/style.scss

@@ -1,6 +1,6 @@
 .edit-post-header {
 	height: $header-height;
-	padding: $item-spacing;
+	padding: $item-spacing 2px;
 	border-bottom: 1px solid $light-gray-500;
 	background: $white;
 	display: flex;
@@ -19,12 +19,22 @@
 	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
 	@include break-small {
 		position: fixed;
+		padding: $item-spacing;
 		top: $admin-bar-height-big;
 	}
 
 	@include break-medium() {
 		top: $admin-bar-height;
 	}
+
+	.editor-post-switch-to-draft + .editor-post-preview,
+	.editor-post-switch-to-draft + .editor-post-preview + .editor-post-publish-button {
+		display: none;
+
+		@include break-small {
+			display: inline-block;
+		}
+	}
 }
 
 @include editor-left('.edit-post-header');
@@ -70,7 +80,12 @@
 		margin: 2px;
 		height: 33px;
 		line-height: 32px;
-		padding: 0 12px 2px;
+		padding: 0 5px 2px;
+		font-size: $default-font-size;
+
+		@include break-small() {
+			padding: 0 12px 2px;
+		}
 	}
 
 	@include break-medium() {

editor/components/post-saved-state/index.js

@@ -31,11 +31,10 @@ import {
  * @return {WPElement}       WordPress Element.
  */
 export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSaveable, onSave } ) {
-	const className = 'editor-post-saved-state';
-
 	if ( isSaving ) {
 		return (
-			<span className={ className }>
+			<span className="editor-post-saved-state editor-post-saved-state__saving">
+				<Dashicon icon="cloud" />
 				{ __( 'Saving' ) }
 			</span>
 		);
@@ -51,7 +50,7 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 
 	if ( ! isNew && ! isDirty ) {
 		return (
-			<span className={ className }>
+			<span className="editor-post-saved-state">
 				<Dashicon icon="saved" />
 				{ __( 'Saved' ) }
 			</span>
@@ -63,10 +62,8 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 			className="editor-post-save-draft"
 			onClick={ onSave }
 			icon="cloud-upload"
-			label={ __( 'Save Draft' ) }
 		>
-			<span className="editor-post-saved-state__mobile">{ __( 'Save' ) }</span>
-			<span className="editor-post-saved-state__desktop">{ __( 'Save Draft' ) }</span>
+			{ __( 'Save Draft' ) }
 		</IconButton>
 	);
 }

editor/components/post-saved-state/style.scss

@@ -1,33 +1,36 @@
 .editor-post-saved-state {
 	display: flex;
 	align-items: center;
-	margin-right: $item-spacing;
 	color: $dark-gray-500;
+	overflow: hidden;
 
 	.dashicon {
-		margin-right: 4px;
-		margin-left: -4px;
+		display: inline-block;
+	    flex: 0 0 auto;
 	}
+}
 
-	.wp-core-ui &.button-link {
-		margin-right: $item-spacing;
-		padding: 0;
+.editor-post-saved-state,
+.editor-post-save-draft {
+	white-space: nowrap;
+	padding: 8px 4px;
+	width: $icon-button-size - 8px;
 
-		&:hover {
-			background: none;
-		}
+	.dashicon {
+		margin-right: 8px;
 	}
-}
 
-.editor-post-saved-state__mobile {
-	@include break-small {
-		display: none;
+	@include break-small() {
+		padding: 8px;
+		width: auto;
+		text-indent: inherit;
+
+		.dashicon {
+			margin-right: 4px;
+		}
 	}
 }
 
-.editor-post-saved-state__desktop {
-	display: none;
-	@include break-small {
-		display: inline;
-	}
+.editor-post-saved-state__saving {
+	animation: loading_fade .5s infinite;
 }

editor/components/post-saved-state/test/index.js

@@ -18,7 +18,7 @@ describe( 'PostSavedState', () => {
 				isSaveable={ false } />
 		);
 
-		expect( wrapper.text() ).toBe( 'Saving' );
+		expect( wrapper.text() ).toContain( 'Saving' );
 	} );
 
 	it( 'returns null if the post is not saveable', () => {

editor/components/post-switch-to-draft-button/index.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 /**
  * WordPress dependencies
  */
-import { IconButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,14 +31,14 @@ function PostSwitchToDraftButton( { isSaving, isPublished, onClick } ) {
 	};
 
 	return (
-		<IconButton
+		<Button
 			className="editor-post-switch-to-draft"
 			isLarge
 			onClick={ onSwitch }
 			disabled={ isSaving }
 		>
 			{ __( 'Switch to Draft' ) }
-		</IconButton>
+		</Button>
 	);
 }