Popup UI updated

ritwickdey · May 17, 2018 · b0b723e · b0b723e
1 parent 4f5d293
commit b0b723e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/popup/css/style.css b/popup/css/style.css
@@ -6,10 +6,12 @@
 *::before {
     box-sizing: border-box;
     font-size: 15px;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-    width: 200px;
+    width: 250px;
     margin-bottom: 0;
     padding-bottom: 0;
 }
@@ -19,25 +21,36 @@ body {
     font-size: 20px;
     font-weight: 600;
     letter-spacing: 0.9px;
-    padding: 5px 0px;
-    margin: -10px -25px 10px -25px;
+    padding: 15px 0px;
     display: block;
     background-color: #d5d5d5;
 }
 
+.header > p {
+    font-size: 12px;
+    font-style: italic;
+    font-weight: 400;
+    margin-top: 5px;
+}
+
 .footer {
     text-align: center;
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 0.9px;
-    margin: 6px -25px 0px -25px;
     background-color: #d5d5d5;
     display: block;
-    padding: 5px 0px;
+    padding: 5px ;
+}
+
+.footer > p {
+    font-size: 10px;
+    padding: 10px;
 }
 
 .content {
-    padding: 0px 5px 5px 5px;
+    width: 90%;
+    margin: auto;
 }
 
 .row {
@@ -55,6 +68,7 @@ body {
     margin: auto;
     border-radius: 5px;
     padding: 8px 3px;
+    width: 100%;
 }
 
 .show {

diff --git a/popup/popup.html b/popup/popup.html
@@ -14,6 +14,8 @@
         Live Server
         <div></div>
         Web Extension
+
+        <p>"Makes your existing server live"</p>
     </div>
     <div class="content">
         <div class="row">
@@ -37,14 +39,14 @@
             <div class="row">
                 <div>
                     <label class="form-label" for="actualServer">Actual Server Address</label>
-                    <input class="form-control" type="text" id="actualServer" placeholder="http://localhost:80/php/">
+                    <input class="form-control" type="text" id="actualServer" placeholder="http://Your Server Address">
                 </div>
             </div>
 
             <div class="row">
                 <div>
                     <label class="form-label" for="liveServer">Live Server Address</label>
-                    <input class="form-control" type="text" id="liveServer" placeholder="http://127.0.0.1:5500/">
+                    <input class="form-control" type="text" id="liveServer" placeholder="Eg. http://127.0.0.1:5500/">
                     <a class="short-right-label" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Install Live Server</a>
                 </div>
             </div>
@@ -55,6 +57,7 @@
     </div>
     <div class="footer">
         <a target="_blank" href="https://github.com/ritwickdey/live-server-web-extension">Need Help?</a>
+        <p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP or IIS or Node.js)</p>
     </div>
     <script src="./popup.js"></script>
 </body>