docs: fix images to have shadow boxes

aio/content/guide/architecture-components.md

@@ -52,7 +52,9 @@ You define a component's view with its companion template. A template is a form
 
 Components and their associated views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's _host view_. The template can also define a _view hierarchy_, which can contain _embedded views_, as well as views hosted by other components.
 
-<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" class="left">
+<figure>
+<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
+</figure>
 
 A view hierarchy can include views from the component's own child components, but it also can (and often does) include views from components that are defined in different NgModules.
 
@@ -72,15 +74,15 @@ This template uses typical HTML elements like `<h2>` and  `<p>`, and also includ
 
 ### Data binding
 
-Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
-read as any experienced jQuery programmer can attest.
+Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest.
 
-Angular supports **two-way data binding**, a mechanism for coordinating parts of a template with parts of a component.
-Add binding markup to the template HTML to tell Angular how to connect both sides. The following diagram shows the four forms of data binding markup. Each form has a direction&mdash;to the DOM, from the DOM, or in both directions.
+Angular supports *two-way data binding*, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides. 
 
-<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
+The following diagram shows the four forms of data binding markup. Each form has a direction&mdash;to the DOM, from the DOM, or in both directions.
 
-<br class="clear">
+<figure>
+<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
+</figure>
 
 This example from the `HeroListComponent` template uses three of these forms:
 
@@ -106,13 +108,13 @@ Angular processes *all* data bindings once per JavaScript event cycle,
 from the root of the application component tree through all child components.
 
 <figure>
-  <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding">
+  <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
 </figure>
 
 Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
 
 <figure>
-  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding">
+  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
 </figure>
 
 ### Pipes
@@ -131,7 +133,7 @@ Data binding plays an important role in communication between a template and its
 
 ### Directives
 
-<img src="generated/images/guide/architecture/directive.png" alt="Parent child" class="left">
+<img src="generated/images/guide/architecture/directive.png" alt="Directives" class="left">
 
 Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by *directives*. A directive is a class with a `@Directive` decorator.
 

aio/content/guide/architecture-modules.md

@@ -1,6 +1,6 @@
 # Modules
 
-<img src="generated/images/guide/architecture/module.png" alt="Component" class="left">
+<img src="generated/images/guide/architecture/module.png" alt="Module" class="left">
 
 Angular apps are modular and Angular has its own modularity system called _NgModules_. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule. It can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
 

aio/content/guide/architecture-next-steps.md

@@ -6,7 +6,7 @@ Once you have understood the basic building blocks, you can begin to learn more
 
    * [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.
 
-   * **Observables and event processing**: How to use Observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.
+   * *Observables and event processing*: How to use Observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.
 
 #### Client-server interaction tools
 
@@ -16,7 +16,7 @@ Once you have understood the basic building blocks, you can begin to learn more
 
   * [Service Workers](guide/service-worker-intro): A service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept outgoing HTTP requests and can, for example, deliver a cached response if one is available. You can significantly improve the user experience by using a service worker to reduce dependency on the network.
 
-#### Domain-specific Libraries
+#### Domain-specific libraries
 
    * [Animations](guide/animations): Animate component behavior
 without deep knowledge of animation techniques or CSS with Angular's animation library.
@@ -31,7 +31,7 @@ without deep knowledge of animation techniques or CSS with Angular's animation l
 
    * [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) and ahead-of-time (AOT) compilation.
 
-   * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks.
+   * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
 
 #### Setup and deployment tools
 

aio/content/guide/architecture-services.md

@@ -29,13 +29,11 @@ The `HeroService` depends on the `Logger` service and another `BackendService` t
 
 ## Dependency injection
 
-Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class. To define a class as a service in Angular, use the `@Injectable` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*. Most dependencies are services.
-
 <img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left">
 
-<br class="clear">
-
-**Dependency injection** (often called DI) is wired into the Angular framework and used everywhere to provide new components with the services they need.
+Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class. To define a class as a service in Angular, use the `@Injectable` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*. Most dependencies are services.
+ 
+*Dependency injection* (often called DI) is wired into the Angular framework and used everywhere to provide new components with the services they need.
 
 * The *injector* is the main mechanism. You don't have to create an Angular injector. Angular creates an application-wide injector for you during the bootstrap process.
 
@@ -54,12 +52,12 @@ When all requested services have been resolved and returned, Angular can call th
 The process of `HeroService` injection looks something like this:
 
 <figure>
-  <img src="generated/images/guide/architecture/injector-injects.png" alt="Service">
+  <img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
 </figure>
 
 ### Providing services
 
-You must register a **provider** of any service you are going to use. You can register providers in modules or in components.
+You must register at least one *provider* of any service you are going to use. You can register providers in modules or in components.
 
 * When you add providers to the [root module](guide/architecture-modules), the same instance of a service is available to all components in your app.
 
@@ -70,6 +68,6 @@ service with each new instance of that component. At the component level, regist
 
 <code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
 
-For detailed information, see the [dependency injection](guide/dependency-injection) page.
+For more detailed information, see the [Dependency Injection](guide/dependency-injection) section.
 
 <hr/>