[UI/UX] Improvements in text and styling

Signed-off-by: Akash Ravi <akashkravi@gmail.com>

Author: techtocore

extension/js/methods.js

@@ -134,7 +134,7 @@ function install_packages(project) {
             html.append("<li>" + element + "</li>");
         }
         common.confirm("Install Packages", html, "Confirm", function () {
-            $('#loadingtext').text("Removing Packages");
+            $('#loadingtext').text("Adding Packages");
             $('#loadingview').show();
             api.install_packages(toInstall, project, function () {
                 $('#loadingview').hide();

extension/js/scripts.js

@@ -12,7 +12,7 @@ function package_view(dir) {
     $('#loadingview').show();
     $('#installed-packages').empty();
     $('#to-install').empty();
-    $('#loadingtext').text("Loading Environment Information");
+    $('#loadingtext').text("Loading Project Details");
 
     api.get_info(dir, function (info) {
         var data = info.packages;

extension/js/templates/sidebar.css

@@ -17,7 +17,7 @@
 }
 
 #package-name {
-  width: 390px;
+  width: 380px;
 }
 
 #packageview {
@@ -35,6 +35,14 @@
   font-size: larger;
 }
 
+#loadingview {
+  padding-left: 10px;
+}
+
+#loadingtext {
+  display: inline;
+}
+
 .installed-values, .to-install-values {
   line-height: 30px;
   cursor: pointer;

extension/js/templates/sidebar.html

@@ -1,21 +1,22 @@
 <div id="mySidenav" class="sidenav">
     <div class="sidenavcontent">
-        <label for="package-name">Install Packages</label>
-        <div class="input-group mb-3">
-            <input type="text" class="form-control" id="package-name" list="searchlist" autocomplete="off"
-                placeholder="Search for available packages">
-            <span id="searchicon" class="fa fa-search form-control-feedback"></span>
-            <datalist id="searchlist">
-            </datalist>
-        </div>
-        <br>
         <div id="loadingview">
-            <br>
             <h2 id="loadingtext">Loading</h2>
-            <br>
+            &nbsp;&nbsp;
+            <i class="fa-spinner fa-spin fa"></i>
+            <hr>
         </div>
         <div id="packageview">
             <div class="main-content">
+                <label for="package-name">Install Packages</label>
+                <div class="input-group mb-3">
+                    <input type="text" class="form-control" id="package-name" list="searchlist" autocomplete="off"
+                        placeholder="Search for available packages">
+                    <span id="searchicon" class="fa fa-search form-control-feedback"></span>
+                    <datalist id="searchlist">
+                    </datalist>
+                </div>
+                <br>
                 <div id="to-install-main">
                     <h2>Packages To Install</h2>
                     <br>

extension/package.json

@@ -13,7 +13,7 @@
     "css-loader": "^3.2.0",
     "html-loader": "^0.5.5",
     "style-loader": "^1.0.0",
-    "webpack": "^4.39.2",
+    "webpack": "^4.39.3",
     "webpack-cli": "^3.3.7"
   },
   "scripts": {