diff --git a/assets/src/components/phone/style.css b/assets/src/components/phone/style.css index de599f27147..8ad1355cb4a 100644 --- a/assets/src/components/phone/style.css +++ b/assets/src/components/phone/style.css @@ -4,7 +4,7 @@ display: flex; flex-direction: column; margin-bottom: 1rem; - max-height: 413px; + height: 413px; min-height: 200px; padding: 12px; position: relative; @@ -25,5 +25,8 @@ } .phone-inner { + display: flex; + background-color: var(--color-gray-medium); + flex-grow: 1; overflow: hidden; } diff --git a/assets/src/components/reader-themes-context-provider/__mocks__/index.js b/assets/src/components/reader-themes-context-provider/__mocks__/index.js new file mode 100644 index 00000000000..7f1509cbacd --- /dev/null +++ b/assets/src/components/reader-themes-context-provider/__mocks__/index.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; + +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +export const ReaderThemes = createContext(); + +/** + * MOCK. + * + * @param {Object} props + * @param {any} props.children Component children. + * @param {boolean} props.downloadingTheme Whether downloading a theme or not. + */ +export function ReaderThemesContextProvider( { children, downloadingTheme = false } ) { + return ( + + { children } + + ); +} +ReaderThemesContextProvider.propTypes = { + children: PropTypes.any, + downloadingTheme: PropTypes.bool, +}; diff --git a/assets/src/components/reader-themes-context-provider/index.js b/assets/src/components/reader-themes-context-provider/index.js index c491bc669bb..b39f7041f88 100644 --- a/assets/src/components/reader-themes-context-provider/index.js +++ b/assets/src/components/reader-themes-context-provider/index.js @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n'; * External dependencies */ import PropTypes from 'prop-types'; +import { USING_FALLBACK_READER_THEME, LEGACY_THEME_SLUG } from 'amp-settings'; /** * Internal dependencies @@ -80,16 +81,20 @@ export function ReaderThemesContextProvider( { wpAjaxUrl, children, currentTheme const [ downloadingThemeError, setDownloadingThemeError ] = useState( null ); /** - * If the currently selected theme is unavailable and not installable, or the current theme is the active theme, - * unset the reader theme option. + * If the currently selected theme is not installable, is the active theme, or unavailable for selection, set the + * Reader theme to AMP Legacy. */ useEffect( () => { if ( themeWasOverridden ) { // Only do this once. return; } - if ( selectedTheme.availability === 'non-installable' || originalSelectedTheme.availability === 'active' ) { - updateOptions( { reader_theme: 'legacy' } ); + if ( + selectedTheme.availability === 'non-installable' || + originalSelectedTheme.availability === 'active' || + USING_FALLBACK_READER_THEME + ) { + updateOptions( { reader_theme: LEGACY_THEME_SLUG } ); setThemeWasOverridden( true ); } }, [ originalSelectedTheme.availability, selectedTheme.availability, themeWasOverridden, updateOptions ] ); diff --git a/assets/src/components/svg/desktop-icon.svg b/assets/src/components/svg/desktop-icon.svg new file mode 100644 index 00000000000..a8c323ec548 --- /dev/null +++ b/assets/src/components/svg/desktop-icon.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/src/components/svg/mobile-icon.svg b/assets/src/components/svg/mobile-icon.svg new file mode 100644 index 00000000000..ed894d55434 --- /dev/null +++ b/assets/src/components/svg/mobile-icon.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/src/components/theme-card/index.js b/assets/src/components/theme-card/index.js index f6798c40f9d..4b29479b67a 100644 --- a/assets/src/components/theme-card/index.js +++ b/assets/src/components/theme-card/index.js @@ -14,10 +14,11 @@ import PropTypes from 'prop-types'; /** * Internal dependencies */ +import './style.css'; +import MobileIcon from '../svg/mobile-icon.svg'; import { Options } from '../options-context-provider'; import { Selectable } from '../selectable'; import { Phone } from '../phone'; -import './style.css'; /** * A selectable card showing a theme in a list of themes. @@ -48,14 +49,18 @@ export function ThemeCard( { description, ElementName = 'li', homepage, screensh >