Add more pics and do style cleaning

package.json

@@ -32,7 +32,7 @@
         "@pxblue/colors": "^3.0.0",
         "@pxblue/colors-branding": "^3.0.0",
         "@pxblue/icons-mui": "^2.2.1",
-        "@pxblue/react-components": "^5.0.0",
+        "@pxblue/react-components": "^5.0.1-beta.0",
         "@pxblue/react-progress-icons": "^2.1.0",
         "@pxblue/react-themes": "^6.0.0-beta.1",
         "axios": "^0.19.2",

src/__configuration__/navigationMenu/navigation.tsx

@@ -275,7 +275,7 @@ export const pageDefinitions: SimpleNavItem[] = [
             {
                 title: 'Themes',
                 url: '/themes',
-                component: <MarkdownPage title={'Themes'} markdown={Docs.Style.Themes} />,
+                component: <MarkdownPage title={'Themes'} markdown={Docs.Style.Themes} wideLayout />,
             },
         ],
     },

src/app/components/patterns/DemoCard.tsx

@@ -31,25 +31,25 @@ const getDetails = (repository: string, framework: string): Details => {
             return {
                 url: `https://stackblitz.com/github/pxblue/${repository}/tree/angular`,
                 displayName: 'Angular',
-                icon: <Angular />,
+                icon: <Angular style={{ backgroundColor: 'transparent' }} />,
             };
         case 'ionic':
             return {
                 url: `https://stackblitz.com/github/pxblue/${repository}/tree/ionic`,
                 displayName: 'Ionic',
-                icon: <Ionic />,
+                icon: <Ionic style={{ backgroundColor: 'transparent' }} />,
             };
         case 'react':
             return {
                 url: `https://codesandbox.io/s/github/pxblue/${repository}/tree/react`,
                 displayName: 'React',
-                icon: <ReactBlue />,
+                icon: <ReactBlue style={{ backgroundColor: 'transparent' }} />,
             };
         case 'react-native':
             return {
                 url: `https://snack.expo.io/@git/github.com/pxblue/${repository}@reactnative?preview=true&platform=ios`,
                 displayName: 'React Native',
-                icon: <ReactBlue />,
+                icon: <ReactBlue style={{ backgroundColor: 'transparent' }} />,
             };
         default:
             return {

src/app/components/theme/demos/ListDemo.tsx

@@ -17,7 +17,6 @@ export const ListDemo: JSX.Element = (
                 /* do nothing */
             }}
             ripple
-            dense
         />
         <InfoListItem
             statusColor={Colors.red[500]}
@@ -34,7 +33,6 @@ export const ListDemo: JSX.Element = (
                 /* do nothing */
             }}
             ripple
-            dense
         />
         <InfoListItem
             title={'An info list item with list actions on the right'}
@@ -56,7 +54,6 @@ export const ListDemo: JSX.Element = (
             }
             iconAlign={'center'}
             divider={'partial'}
-            dense
         />
     </List>
 );

src/docs/style/color.mdx

@@ -46,7 +46,7 @@ Avoid the use of pure black (**#000000**) in a UI, except in instances where you
 
 ### Dark Black
 
-These colors are only for dark themes.
+These colors are only for [dark themes](/style/themes#blue-dark-theme).
 
 <ColorPalette palette={Colors.darkBlack} />
 <Divider />

src/docs/style/themes.mdx

@@ -1,12 +1,16 @@
 import { ImageGrid, DemoCard, MaterialDesignDescription, Divider, ThemeBrowser } from '../../app/components';
 import { REGULAR_WIDTH_STYLE } from '../../app/shared';
+
 import LightThemeColors from '../../app/assets/styles/themes/light-theme-colors.png';
+import DarkThemeColors from '../../app/assets/styles/themes/dark-theme-colors.png';
+import LightThemeExample from '../../app/assets/styles/themes/light-theme-example.png';
+import DarkThemeExample from '../../app/assets/styles/themes/dark-theme-example.png';
 
 <!-- KEYWORDS: design style theme light dark mode -->
 
 # Themes
 
-One of the key benefits of PX Blue is consistency of look & feel between different applications. This is achieved primarily through the use of PX Blue themes. PX Blue offers two themes: a blue theme (light theme) and a blue dark theme.
+One of the key benefits of PX Blue is consistency of look & feel between different applications. This is achieved primarily through the use of PX Blue themes. PX Blue offers two themes: a light theme (blue) and a dark theme (blueDark).
 
 <div style={REGULAR_WIDTH_STYLE}>
     <MaterialDesignDescription
@@ -26,22 +30,26 @@ One of the key benefits of PX Blue is consistency of look & feel between differe
 
 Have a look at the component theme explorer below and learn how PX Blue themes work on a high level. The theme explorer selectively showcases some of the most representative components from Material Design and from our component library that fabrics our theme.
 
-<ThemeBrowser />
+<div style={REGULAR_WIDTH_STYLE}>
+    <ThemeBrowser />
+</div>
 
 You are also encouraged to visit our code examples, modify our code, and see the magic happens in real time.
 
-<React.Fragment>
+<div style={REGULAR_WIDTH_STYLE}>
     <DemoCard
         repository={'showcase-demo'}
         angular={`https://stackblitz.com/github/pxblue/angular-showcase-demo/tree/master`}
         react={`https://codesandbox.io/s/github/pxblue/react-showcase-demo/tree/master`}
     />
     <Divider />
-</React.Fragment>
+</div>
 
 # Blue Theme / Light Theme
 
-> A SCREENSHOT HERE
+<div style={REGULAR_WIDTH_STYLE}>
+    <ImageGrid images={[LightThemeExample]} regularWidth caption={'An example of a light-themed application.'} />
+</div>
 
 The blue theme, inherited and expanded from Material Design's baseline theme, is the default theme for all PX Blue applications. With a clean color vibrance and high text legibility, it is designed to suit day to day use on a computer monitor, on-site facility inspection with a tablet, and on a mobile phone screen. It should be applied at the root level of your app.
 
@@ -52,19 +60,21 @@ The blue theme uses our [iconic Blue 500 color](/style/color) (`#007bc1`) throug
 
 # Blue Dark Theme
 
-> A SCREENSHOT HERE
+<div style={REGULAR_WIDTH_STYLE}>
+    <ImageGrid images={[DarkThemeExample]} regularWidth caption={'An example of a dark-themed application.'} />
+</div>
 
 The blue dark theme is constructed in a similiar fashion just like the blue theme, but is intended primarily for applications used in low-light conditions. As the name indicates, the blue dark theme is dominated by different shades of dark colors, and uses colors only to for interactive components and status displays.
 
-> Some fancy color stuff
+<ImageGrid images={[DarkThemeColors]} regularWidth />
 
 To accomodate for [accessibility requirements](/design/accessibility), PX Blue uses 200 colors when a text shows by itself on a dark background, such as in an outlined button and a text field label. For a "contained" element, such as in an elevated / contained button, the style remains Blue 500 on White.
 
 > A PIC SHOWING
 >
-> -   YEA: BLUE200 on dark
-> -   YEA: WHITE50 on BLUE500
-> -   NAY: DARK on BLUE200
+> -   YEA: BLUE200 on dark: outlined button, icon button
+> -   YEA: WHITE50 on BLUE500: flat button, icon button with badge
+> -   NAY: DARK on BLUE200: flat button, list item tag
 
 > A PIC showing that carefully using transparency for bg colors make your stuff looks good on light and dark theme, such as the list item tag
 
@@ -79,7 +89,7 @@ PX Blue offers the theming support via the package [@pxblue/angular-themes](http
 -   @pxblue/angular-themes: [NPM](https://www.npmjs.com/package/@pxblue/angular-themes), [GitHub](https://github.com/pxblue/themes/tree/master/angular)
 -   [Theming Guide](https://material.angular.io/guide/theming) on Angular Material
 
-If you are using Ionic for hybrid application development, you can utilize our Angular themes as well. See [our Ionic getting started guide](https://pxblue.github.io/development/frameworks-mobile/ionic).
+If you are using Ionic for hybrid application development, you can utilize our Angular themes as well. See [our Ionic getting started guide](/frameworks-mobile/ionic).
 
 ## React
 

yarn.lock

@@ -2074,10 +2074,10 @@
   resolved "https://registry.yarnpkg.com/@pxblue/prettier-config/-/prettier-config-1.0.2.tgz#fb00503df6557b66c3d91d43c9101e614c35d2ec"
   integrity sha512-/3cLBoTjZs3kV1ATPA/Sp0tsL7XmlV/b8HW/qt0jqR/uP5+cdXL2YIhMXQngLRa7PhpSkEiRIYK5sl0rKsXTUg==
 
-"@pxblue/react-components@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@pxblue/react-components/-/react-components-5.0.0.tgz#f245e51de9c0bf2403ee12769aff87dd0875a3ec"
-  integrity sha512-HrZxrV8lWj/09m/pjtTsoo2z/RUBxKj3gu//vqwL3LtN+i3FeTl9guvDbJIHpLWFxHfBJ/AVgOgyIjWAWqRJAA==
+"@pxblue/react-components@^5.0.1-beta.0":
+  version "5.0.1-beta.0"
+  resolved "https://registry.yarnpkg.com/@pxblue/react-components/-/react-components-5.0.1-beta.0.tgz#158fcdb0c3b7d2017ae161c4fc7a7d40f2b3c5f5"
+  integrity sha512-Q5NdFUQ2+RXIIP+FoEisocXmcLQ3yUUq9W1xYlmiZaPY9+KB9ZrmACsBOnvOXFW8EWFp6XDv9oy/F6ReglEa5g==
   dependencies:
     "@pxblue/colors" "^3.0.0"
     color "^3.1.2"