UI polish changes on cellular plan activation page....

chrome/browser/resources/mobile_setup.html

Index: chrome/browser/resources/mobile_setup.html
===================================================================
--- chrome/browser/resources/mobile_setup.html	(revision 67622)
+++ chrome/browser/resources/mobile_setup.html	(working copy)
@@ -5,11 +5,13 @@
 <title i18n-content="title"></title>
 <style>
 body {
-  font-size: 100%;
+  font-family: arial, sans-serif;
+  font-size: 13px;
+  line-height: 22px;
   -webkit-user-select: none;
 }
 
-iframe { 
+iframe {
   overflow-x: scroll; 
   overflow-y: scroll; 
 }
@@ -18,7 +20,7 @@
   position: fixed;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, .2);
+  background: #EEE;
   top: 0;
   bottom: 0;
   z-index: 10;
@@ -31,8 +33,8 @@
   background: white;
   border-radius: 5px;
   padding: 15px;
-  border: 1px solid #666;
-  -webkit-box-shadow: 3px 3px 3px #666;
+  border:1px solid #bdbdbd;
+  -webkit-box-shadow:1px 1px 12px rgba(0, 0, 0, 0.15);
 }
 
 .startup {
@@ -42,7 +44,6 @@
   left: 50%;
   margin-left:-250px;
   margin-top:-250px;
-  text-align: center;
 }
 
 #paymentForm {
@@ -58,21 +59,16 @@
 
 .logo {
   background: url('file:///usr/share/chromeos-assets/mobile/carrier_logo.png') no-repeat;
-  background-position: center;
+  background-position: 85% 50%;
   height: 58px;
   margin-bottom: 20px;
   margin-top: 20px;
 }
 
-#errorMessage {
-  margin: 20px;
-}
-
 .splitter {
   margin-top: 10px;
   left: 50%;
-  margin-left: 150px;
-  width: 200px;
+  width: 600px;
   border-bottom: 1px solid #EEE;
   height: 1px;
 }
@@ -106,6 +102,52 @@
   display: -webkit-box;
 }
 
+#carrierPage {
+  width: 500px;
+  height: 380px;
+  overflow-x: none; 
+  overflow-y: none; 
+}

[satorux1, 2010/11/30 05:45:52]

Insert a blank line between styles to be consistent with others above?

[zel, 2010/11/30 06:07:52]

Done.

+#header {
+  -webkit-padding-start: 50px;
+  position: relative;
+  top: -50%;
+}
+#banner {
+  background-color: #fcf6e0;
+  border: 1px solid #ccc;
+  display: -webkit-box;
+  margin-left: -22px;
+  padding: 5px;
+  width: 467px;
+  -webkit-padding-start: 70px;
+  -webkit-box-shadow:1px 1px 6px rgba(0, 0, 0, 0.2);
+}
+#startupMessage {
+  -webkit-padding-start: 15px;
+}
+#headerWrapper {
+  position: relative;
+}
+#statusHeader {
+  font-weight: bold;
+  font-size: 16px;
+}
+#auxHeader {
+  font-size: 16px;
+}
+#errorMessage {
+  width: 500px;
+  height: 380px;
+  padding-top: 20px;
+}
+.headerCell {
+  -webkit-padding-start: 10px;
+}
+.canvasCell {
+  vertical-align: middle;
+  line-height: 0px;
+}
 </style>
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/local_strings.js"></script>
@@ -117,11 +159,19 @@
   <iframe class="hidden" id="paymentForm" frameborder="0"></iframe>
   <div id="systemStatus" class="overlay hidden">
     <div class="startup">
-      <div><h3 id="statusHeader"></h3></div>
-      <div id="errorMessage"></div>
-      <canvas id="canvas" width="56" height="56"></canvas>
-      <div class="splitter"></div>
-      <div class="logo"></div>
+      <div id="banner">
+        <table border="0">
+          <tbody><tr>
+            <td class="canvasCell"><canvas id="canvas" width="56" height="56"></canvas></td>

[satorux1, 2010/11/30 05:45:52]

longer than 80 chars.

[zel, 2010/11/30 06:07:52]

Done.

+            <td class="headerCell">
+              <div id="statusHeader"></div>
+              <div id="auxHeader"></div>
+            </td>
+          </tr>
+        </tbody></table>
+      </div>
+      <div id="errorMessage" class="hidden"></div>
+      <iframe src="./test.html" id="carrierPage" frameborder="0"></iframe>

[satorux1, 2010/11/30 05:45:52]

Do we have test.html? Otherwise, src="" may be nicer.

[zel, 2010/11/30 06:07:52]

Done.

     </div>
   </div>
   <div id="finalMessage" class="overlay hidden">