Refactoring change password modal - UI

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.user-menu/user-menu.hbs

@@ -15,58 +15,64 @@
   specific language governing permissions and limitations
   under the License.
 }}
+
 {{#zone "userMenu-items"}}
     <li>
         <a href="javascript:void(0)" id="change-password">Change password</a>
     </li>
     <li>
+        <!--suppress HtmlUnknownTarget -->
         <a href="{{@app.context}}/logout">Sign out</a>
     </li>
 
     <div id="change-password-window" class="hide">
         <input type="hidden" id="user" value="{{username}}">
         <div class="modal-header">
-            <h3 class="pull-left modal-title">
+            <h4 class="pull-left modal-title">
                 <span class="fw-stack">
-                    <i class="fw fw-ring fw-stack-2x"></i>
+                    <i class="fw fw-user fw-stack-2x"></i>
-                    <i class="fw fw-key fw-stack-1x"></i>
+                    <span class="fw-stack fw-move-right fw-move-bottom">
+                      <i class="fw fw-ring fw-stack-2x"></i>
+                      <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
+                      <i class="fw fw-edit fw-stack-1x fw-inverse"></i>
+                   </span>
                 </span>
-                Change Password
+                &nbsp;&nbsp;Change password
-            </h3>
+            </h4>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
         </div>
+        <hr>
         <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
             <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
                 <i class="icon fw fw-error"></i><span></span>
             </div>
-            <h3>
+            <h5>
-                Enter old password *
+                Type your current password *
                 <br><br>
                 <div>
                     <input type="password" class="form-control modal-input operationDataKeys" id="old-password" data-key="message"/>
                 </div>
                 <br>
-                Enter new password *
+                Type a new password *
                 <br><br>
                 <div>
                     <input type="password" class="form-control modal-input operationDataKeys" id="new-password" data-key="message"/>
                 </div>
                 <br>
-                Retype new password *
+                Retype your new password *
                 <br><br>
                 <div>
                     <input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password" data-key="message"/>
                 </div>
                 <br>
-            </h3>
+            </h5>
         </div>
         <div class="modal-footer">
             <div class="buttons">
-                <a href="#" id="change-password-yes-link" class="btn-operations">Update</a>
+                <a href="#" id="change-password-yes-link" class="btn-operations">Change</a>
                 <a href="#" id="change-password-cancel-link" class="btn-operations">Cancel</a>
             </div>
         </div>
-
     </div>
 
     <div id="change-password-success-content" class="hide">
@@ -83,5 +89,5 @@
     </div>
 {{/zone}}
 {{#zone "bottomJs"}}
-    <script src="{{@unit.publicUri}}/js/user-menu.js"></script>
+    {{js "/js/user-menu.js"}}
 {{/zone}}