[UX] adding favicons, style updates on various pages

dist/assets/css/main.css

@@ -19367,7 +19367,8 @@ a.slds-button--inverse:focus {
 
 body {
   width: 600px;
-  margin: 0 auto; }
+  margin: 0 auto;
+  line-height: 1.5rem; }
 
 a:hover {
   text-decoration: none; }
@@ -19398,11 +19399,16 @@ a.sfdx-logo:visited {
 .sfdx-wrap {
   word-wrap: break-word; }
 
-.slds-notify__content {
-  width: 100%; }
+.sfdx-note {
+  color: rgba(0, 0, 0, 0.4); }
 
-.slds-notify_toast {
-  padding-right: 1.5rem; }
+.slds-card.sfdx-code {
+  width: 100%;
+  padding: 0.75rem;
+  font-family: monospace;
+  font-size: 1rem;
+  white-space: pre;
+  overflow: scroll; }
 
 /* END SFDX Specific Styles */
 /* START SLDS Overrides */
@@ -19422,6 +19428,12 @@ ol, ul {
   list-style: inherit;
   padding: 0 0 0 1.5rem; }
 
+.slds-notify__content {
+  width: 100%; }
+
+.slds-notify_toast {
+  padding-right: 1.5rem; }
+
 /* END SLDS Overrides */
 @media all and (max-width: 750px) {
   html {

dist/assets/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

package.json

@@ -5,7 +5,7 @@
   "main": "app.js",
   "scripts": {
     "start": "node .",
-    "css-build": "mkdirp dist/assets/css && mkdirp dist/assets/fonts && ncp src/assets dist/assets && node-sass src/scss -o dist/assets/css && ncp node_modules/@salesforce-ux/design-system/assets/fonts dist/assets/fonts",
+    "css-build": "mkdirp dist/assets/css && mkdirp dist/assets/fonts && ncp src/assets dist/assets && ncp src/assets/favicons dist/assets/favicons && node-sass src/scss -o dist/assets/css && ncp node_modules/@salesforce-ux/design-system/assets/fonts dist/assets/fonts",
     "css-watch": "node-sass --watch src/scss -o dist/assets/css"
   },
   "repository": {

src/assets/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

src/scss/main.scss

@@ -3,6 +3,7 @@
 body {
 	width: 600px;
 	margin: 0 auto;
+	line-height: 1.5rem;
 }
 
 a:hover {
@@ -40,12 +41,17 @@ a.sfdx-logo:visited {
 	word-wrap: break-word;
 }
 
-.slds-notify__content {
-	width: 100%;
+.sfdx-note {
+	color: $color-text-browser-active;
 }
 
-.slds-notify_toast {
-	padding-right: $card-spacing-large;	
+.slds-card.sfdx-code {
+	width: 100%;
+	padding: $spacing-small;
+	font-family: monospace;
+	font-size: 1rem;
+	white-space: pre;
+	overflow: scroll;
 }
 /* END SFDX Specific Styles */
 
@@ -69,6 +75,14 @@ ol, ul {
 	list-style: inherit;
 	padding: 0 0 0 $spacing-large;
 }
+
+.slds-notify__content {
+	width: 100%;
+}
+
+.slds-notify_toast {
+	padding-right: $card-spacing-large;	
+}
 /* END SLDS Overrides */
 
 @media all and (max-width: 750px) {

views/pages/about.ejs

@@ -3,9 +3,8 @@
 <% include ../partials/head %>
 
   <div class="sfdx-slim">
-    <main class="slds-card slds-text-align_center">
-      <h2 class="slds-text-heading_medium slds-p-top_medium slds-m-bottom_small">Salesforce Deployment Made Easy</h2>
-      <img src="dist/assets/images/launch.png" alt="Salesforce.com Logo" title="Salesforce.com Logo" />
+    <main class="slds-card">
+      <h2 class="slds-text-heading_medium slds-p-top_medium slds-m-bottom_large">About</h2>
       <p class="slds-m-top_small slds-m-bottom_small">
         <strong>Deploy to Salesforce DX</strong> is a tool that can deploy an application to Salesforce directly from Github using
         the tools provided by Salesforce DX. When you login with your <a href="https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_enable_devhub.htm" target="_blank">Dev Hub</a>

views/pages/choose.ejs

@@ -50,8 +50,8 @@
 
   <main class="sfdx-slim slds-card">
 
-    <h2 class="slds-text-heading_medium slds-p-top_medium slds-p-bottom_medium">Want to try your own repo?</h2>
-    <p class="slds-p-bottom_medium">Just add the <img src="/dist/assets/images/DeployToSFDX.svg" /> button. <a href="/repo">Learn more</a>.</p>
+    <h2 class="slds-text-heading_medium slds-p-top_small slds-p-bottom_medium">Want to try your own repo?</h2>
+    <p class="slds-p-bottom_small">Just add the <img src="/dist/assets/images/DeployToSFDX.svg" /> button. <a href="/repo">Learn more</a>.</p>
 
   </main>
 

views/pages/deploying.ejs

@@ -3,28 +3,11 @@
   <script type="text/javascript" src="../../scripts/deploying.js"></script>
 
   <main class="slds-card">
-    <h2 class="slds-text-heading_medium slds-p-top_medium slds-p-bottom_medium sfdx-wrap">Deploying <strong><%= template %></strong></h2>
+    <h2 id="loaderBlock" class="slds-text-heading_medium slds-p-top_medium slds-p-bottom_medium sfdx-wrap"><img src="/dist/assets/images/loader.gif" style="width:27px;" /> Deploying <strong><%= template %></strong></h2>
 
     <div id="loginBlock" style="display: none;">
       <div class="slds-notify_container slds-is-relative slds-m-bottom_large sfdx-wrap">
 
-        <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
-          <span class="slds-assistive-text">warning</span>
-          <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
-            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
-            </svg>
-          </span>
-          <h2>It can take up to 5 minutes for the my domain DNS to propogate.</h2>
-          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
-            <svg class="slds-button__icon" aria-hidden="true">
-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
-            </svg>
-            <span class="slds-assistive-text">Close</span>
-          </button>
-        </div>
-
-        <br />
         
         <div class="slds-notify slds-notify_toast slds-theme_success" role="alert">
           <span class="slds-assistive-text">warning</span>
@@ -34,32 +17,12 @@
           </div>
         </div>
 
-        <br />
-
-        <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
-          <span class="slds-assistive-text">warning</span>
-          <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
-              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
-              </svg>
-            </span>
-          <h2>If the scratch org doesn't load, refresh it in a few minutes.</h2>
-          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
-              <svg class="slds-button__icon" aria-hidden="true">
-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
-              </svg>
-              <span class="slds-assistive-text">Close</span>
-            </button>
-        </div>
+        <p class="slds-m-around_large"><strong>Note:</strong> It can take up to 5 minutes for the my domain DNS to propogate. If the scratch org doesn't load, refresh it in a few minutes.</p>
 
       </div>
     </div>
 
     <textarea id="status" class="slds-m-bottom_small sfdx-output"></textarea>
-
-    <div id="loaderBlock" style="text-align:center;">
-      <img src="/dist/assets/images/loader.gif" style="width:50px;" />
-    </div>
   </main>
 
   <input type="hidden" id="template" value="<%= template %>"></input>

views/pages/index.ejs

@@ -3,16 +3,17 @@
 <div class="sfdx-slim">
 	<main class="slds-card slds-text-align_center">
 	  <h2 class="slds-text-heading_medium slds-p-top_medium slds-m-bottom_small">Salesforce Deployment Made Easy</h2>
-	  <img src="dist/assets/images/launch.png" alt="Salesforce.com Logo" title="Salesforce.com Logo" />
+	  <img src="dist/assets/images/launch.png" alt="Salesforce.com Logo" title="Salesforce.com Logo" width="174" />
 	  <p class="slds-m-top_small slds-m-bottom_small">This application makes it easy to deploy a Salesforce DX app directly from Github into your Scratch Org.</p>
 		<% include ../partials/actions %>
 		
-		<p class="slds-m-top_small">(Need a Dev Hub org? Learn how to get one <a href="https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_enable_devhub.htm" target="_blank">here</a>.)</p>
-
-		<h2 class="slds-text-heading_medium slds-p-top_medium slds-m-bottom_small">Currently <%= deploymentCount %> successful deployments!</h2>
-
+		<p class="slds-m-around_small">Need a Dev Hub org? Learn how to get one <a href="https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_enable_devhub.htm" target="_blank">here</a>.</p>
 	</main>
 
+	<div class="slds-card slds-text-align_center">
+		<h3 class="slds-text-heading_medium slds-p-top_medium slds-m-bottom_small">Currently <%= deploymentCount %> successful deployments!</h3>
+	</div>
+
 	<a class="slds-button slds-button_neutral slds-show slds-m-top_medium sfdx-button_large sfdx-button_mobile" href="/about">Learn More</a>
 </div>
 

views/pages/repo.ejs

@@ -2,25 +2,22 @@
 
 <main class="sfdx-slim slds-card">
 
-  <h2 class="slds-text-heading_medium slds-p-top_medium slds-p-bottom_medium">Want to try your own repo?</h2>
+  <h2 class="slds-text-heading_medium slds-p-top_medium slds-p-bottom_large">Want to try your own repo?</h2>
   
   <p class="slds-p-bottom_medium">It's easy. Just use the <img src="/dist/assets/images/DeployToSFDX.svg" /> button.</p>
 
   <p class="slds-p-bottom_medium">Add the following source to your github repo (making sure to change the <code>template</code> to your repository:</p>
   
-  <code>
-      [![Deploy](https://deploy-to-sfdx.com/dist/assets/images/DeployToSFDX.svg)](https://deploy-to-sfdx.com/deploy?template=https://github.com/wadewegner/sfdx-simple)
-  </code>
+  <div class="slds-card sfdx-code" readonly>[![Deploy](https://deploy-to-sfdx.com/dist/assets/images/DeployToSFDX.svg)](https://deploy-to-sfdx.com/deploy?template=https://github.com/wadewegner/sfdx-simple)</div>
 
   <p class="slds-p-top_medium slds-p-bottom_medium">Next, create a <code>.salesforcedx.yaml</code> file in your repo:</p>
 
-  <code>
-    scratch-org-def: config/project-scratch-def.json<br />
-    assign-permset: false<br />
-    run-apex-tests: false<br />
-    delete-scratch-org: false<br />
-    show-scratch-org-url: true<br />
-  </code>
+<div class="slds-card sfdx-code" readonly>scratch-org-def: config/project-scratch-def.json
+assign-permset: false
+run-apex-tests: false
+delete-scratch-org: false
+show-scratch-org-url: true
+</div>
     
   <p class="slds-p-top_medium slds-p-bottom_medium">That's it! See the <a href="https://github.com/wadewegner/sfdx-simple/" target="_blank">https://github.com/wadewegner/sfdx-simple</a> for an example of the button in action!</p>
 

views/partials/footer.ejs

@@ -1,7 +1,7 @@
 <footer>
-	<p class="slds-text-align_center slds-m-top_medium">
+	<p class="slds-text-align_center slds-m-top_medium sfdx-note">
 		Written and shared by <a href="https://twitter.com/WadeWegner" target="_blank">Wade Wegner</a> under Apache 2.0 License.
-		<br /> UX designed by <a href="https://github.com/benjisnyder" target="_blank">Ben Snyder</a>.
+		<br /> UX designed by <a href="https://www.linkedin.com/in/bencsnyder/" target="_blank">Ben Snyder</a>.
 	</p>
 </footer>
 

views/partials/head.ejs

@@ -7,10 +7,27 @@
 
 	<link rel="stylesheet" href="dist/assets/css/main.css">
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<link rel="apple-touch-icon" sizes="57x57" href="dist/assets/favicons/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="dist/assets/favicons/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="dist/assets/favicons/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="dist/assets/favicons/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="dist/assets/favicons/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="dist/assets/favicons/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="dist/assets/favicons/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="dist/assets/favicons/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="dist/assets/favicons/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192"  href="dist/assets/favicons/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="dist/assets/favicons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="dist/assets/favicons/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="dist/assets/favicons/favicon-16x16.png">
+	<link rel="manifest" href="dist/assets/favicons/manifest.json">
+	<meta name="msapplication-TileColor" content="#ffffff">
+	<meta name="msapplication-TileImage" content="dist/assets/favicons/ms-icon-144x144.png">
+	<meta name="theme-color" content="#ffffff">
 </head>
 
 <body>
 
 <header class="slds-m-top_xx-large slds-m-bottom_medium">
-    <h1 class="slds-text-heading_large slds-text-align_center"><a class="sfdx-logo" href="/"><img src="dist/assets/images/salesforce_cloud.png" alt="Salesforce.com Logo" title="Salesforce.com Logo" /> Deploy to Salesforce DX</a></h1>
+    <h1 class="slds-text-heading_large slds-text-align_center"><a class="sfdx-logo" href="/"><img src="dist/assets/images/salesforce_cloud.png" alt="Salesforce.com Logo" title="Salesforce.com Logo" width="67" /> Deploy to Salesforce DX</a></h1>
 </header>