[EMM-1571] Add policies page wizard styling and layout defects

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/templates/hidden-operations-android.hbs

@@ -3,10 +3,8 @@
         <a href="javascript:void(0)" onclick="showAdvanceOperation('passcode-policy', this)" class="selected">
                 <span class="wr-hidden-operations-icon fw-stack">
                     <i class="fw fw-key fw-stack-2x"></i>
-                </span>
+                </span>Passcode Policy
-            Passcode Policy
+            <span id="passcode-policy-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
-            <span id="passcode-policy-configured" class="has-configured status-icon hidden"><i
-                    class="fw fw-ok"></i></span>
             <span id="passcode-policy-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
             <span id="passcode-policy-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
         </a>
@@ -24,11 +22,9 @@
                     <i class="fw fw-security fw-stack-2x"></i>
                 </span>
             Encryption Settings
-            <span id="encrypt-storage-configured" class="has-configured status-icon hidden"><i
+            <span id="encrypt-storage-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
-                    class="fw fw-ok"></i></span>
             <span id="encrypt-storage-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
-            <span id="encrypt-storage-error" class="encryption-error status-icon hidden"><i
+            <span id="encrypt-storage-error" class="encryption-error status-icon hidden"><i class="fw fw-error"></i></span>
-                    class="fw fw-error"></i></span>
         </a>
         <a href="javascript:void(0)" onclick="showAdvanceOperation('wifi', this)">
                 <span class="wr-hidden-operations-icon fw-stack">
@@ -74,8 +70,7 @@
                     <i class="fw fw-block fw-stack-2x"></i>
                 </span>
             Applications Restrictions
-            <span id="app-restriction-configured" class="has-configured status-icon hidden"><i
+            <span id="app-restriction-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
-                    class="fw fw-ok"></i></span>
             <span id="app-restriction-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
             <span id="app-restriction-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
         </a>
@@ -95,18 +90,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to set a passcode policy to an Android Device.
                         Once this configuration profile is installed on a device, corresponding users will not be
                         able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="passcode-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="passcode-policy-body">
-
+                    <hr/>
                     <div id="passcode-policy-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -250,17 +244,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configurations can be used to restrict certain settings on an Android device.
                         Once this configuration profile is installed on a device, corresponding users will not be
                         able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="camera-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="camera-body">
+                    <hr/>
                     <div id="camera-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -689,7 +683,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to encrypt data on an Android device, when the device is
                         locked and
@@ -697,10 +691,10 @@
                         on a device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="encrypt-storage-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="encrypt-storage-body">
+                    <hr/>
                     <div id="encrypt-storage-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -735,17 +729,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configurations can be used to configure Wi-Fi access on an Android device.
                         Once this configuration profile is installed on a device, corresponding users will not be
                         able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="wifi-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="wifi-body">
+                    <hr/>
                     Please note that * sign represents required fields of data.
                     <br>
                     <br>
@@ -899,14 +893,13 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to create a black list or white list of applications.
                     </div>
-                    </h2>
                 </div>
                 <div id="app-restriction-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="app-restriction-body">
-
+                    <hr/>
                     <div id="app-restriction-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -1006,17 +999,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configurations can be used to configure VPN settings on an Android device.
                         Once this configuration profile is installed on a device, corresponding users will not be
                         able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="vpn-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="vpn-body">
+                    <hr/>
                     Please note that * sign represents required fields of data.
                     <br>
                     <br>
@@ -1188,16 +1181,15 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         The configurations below can be applied to the devices where the agent is running in Android
                         Work-Profile.
                     </div>
-                    </h2>
                 </div>
                 <div id="work-profile-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="work-profile-policy-body">
-
+                    <hr/>
                     <div id="work-profile-policy-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/templates/hidden-operations-ios.hbs

@@ -175,18 +175,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to set a passcode policy to an iOS Device.
                         Once this configuration profile is installed on a device, corresponding users
                         will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="passcode-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="passcode-policy-body">
-
+                    <hr/>
                     <div id="passcode-policy-feature-error-msg" class="alert alert-danger hidden"
                          role="alert">
                         <i class="icon fw fw-error"></i><span></span>
@@ -396,17 +395,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configurations can be used to configure VPN settings on an iOS device.
                         Once this configuration profile is installed on a device, corresponding users will not
                         be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="vpn-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="vpn-body">
+                    <hr/>
                     Please note that * sign represents required fields of data.
                     <br>
                     <br>
@@ -1200,7 +1199,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to configure add-on VPN software (per-app VPN),
                         and it works only on VPN services of
@@ -1208,10 +1207,10 @@
                         corresponding users will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="per-app-vpn-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="per-app-vpn-body">
+                    <hr/>
                     Please note that * sign represents required fields of data.
                     <br>
                     <br>
@@ -1319,16 +1318,16 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to configure app-to-per-app VPN mappings.
                         Once this configuration profile is installed on a device, corresponding users will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="app-to-per-app-vpn-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="app-to-per-app-vpn-body">
+                    <hr/>
                     Please note that * sign represents required fields of data.
                     <br>
                     <br>
@@ -1418,7 +1417,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         These configurations can be used to set how devices connect to your wireless network(s),
                         including the necessary authentication
@@ -1426,10 +1425,10 @@
                         corresponding users will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="wifi-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="wifi-body">
+                    <hr/>
                     <div id="wifi-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -2281,18 +2280,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         These configurations can be used to define settings for connecting
                         to your POP or IMAP email accounts.
                         Once this configuration profile is installed on an iOS device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="email-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="email-body">
-
+                    <hr/>
                     <div id="email-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -2648,7 +2646,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to define settings for connecting to AirPlay
                         destinations.
@@ -2656,11 +2654,10 @@
                         corresponding users will not be able to modify these settings on their devices.
                         <br><br>(This feature is supported only on iOS 7.0 and later.)
                     </div>
-                    </h2>
                 </div>
                 <div id="airplay-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="airplay-body">
-
+                    <hr/>
                     <div id="airplay-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -2828,15 +2825,14 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr/>
+                    </h2>
                     <div class="panel-title-description">
                         This payload defines web domains that are under an enterprise’s management.
                     </div>
-                    </h2>
                 </div>
                 <div id="domain-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="domain-body">
-
+                    <hr/>
                     <div id="DOMAIN-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -2990,18 +2986,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to define settings for connecting to LDAP
                         servers.
                         Once this configuration profile is installed on an iOS device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="ldap-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="ldap-body">
-
+                    <hr/>
                     <div id="ldap-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -3176,18 +3171,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to define settings for connecting to CalDAV
                         servers.
                         Once this configuration profile is installed on an iOS device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="calendar-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="calendar-body">
-
+                    <hr/>
                     <div id="calendar-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -3301,17 +3295,16 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to define settings for calendar subscriptions.
                         Once this configuration profile is installed on an iOS device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="calendar-subscription-body" class="panel-collapse panel-body collapse"
                      role="tabpanel" aria-labelledby="calendar-subscription-body">
-
+                    <hr/>
                     <div id="calendar-subscription-feature-error-msg" class="alert alert-danger hidden"
                          role="alert">
                         <i class="icon fw fw-error"></i><span></span>
@@ -3400,7 +3393,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         These configurations can be used to specify Access Point Names ( APN ).
                         Once this configuration profile is installed on an iOS device, corresponding
@@ -3408,11 +3401,10 @@
                         be able to modify these settings on their devices.
                         <br><br>(This feature is not supported on iOS 7.0 and later.)
                     </div>
-                    </h2>
                 </div>
                 <div id="apn-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="apn-body">
-
+                    <hr/>
                     <div id="apn-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -3527,7 +3519,7 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         These configurations can be used to specify Cellular Network Settings on an iOS
                         device.
@@ -3537,11 +3529,10 @@
                         settings on their devices.
                         <br><br>(This feature is supported only on iOS 7.0 and later.)
                     </div>
-                    </h2>
                 </div>
                 <div id="cellular-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="cellular-body">
-
+                    <hr/>
                     <div id="cellular-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -3713,18 +3704,17 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         These configurations can be used to restrict apps, device features and
                         media content available on an iOS device. Once this configuration profile is installed
                         on a device, corresponding users will not be able to modify these settings on their
                         devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="restrictions-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="restrictions-body">
-
+                    <hr/>
                     <div id="restrictions-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -4768,16 +4758,15 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to create a black list or white list of
                         applications.
                     </div>
-                    </h2>
                 </div>
                 <div id="app-restriction-body" class="panel-collapse panel-body collapse" role="tabpanel"
                      aria-labelledby="app-restriction-body">
-
+                    <hr/>
                     <div id="app-restriction-feature-error-msg" class="alert alert-danger hidden"
                          role="alert">
                         <i class="icon fw fw-error"></i><span></span>

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/templates/hidden-operations-windows.hbs

@@ -3,8 +3,7 @@
         <a href="javascript:void(0)" onclick="showAdvanceOperation('passcode-policy', this)" class="selected">
                 <span class="wr-hidden-operations-icon fw-stack">
                     <i class="fw fw-key fw-stack-2x"></i>
-                </span>
+                </span>Passcode Policy
-            Passcode Policy
             <span id="passcode-policy-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
             <span id="passcode-policy-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
             <span id="passcode-policy-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
@@ -78,16 +77,16 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to set a passcode policy to an Windows Device.
                         Once this configuration profile is installed on a device, corresponding users will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
+
                 </div>
                 <div id="passcode-policy-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="passcode-policy-body">
-
+                    <hr/>
                     <div id="passcode-policy-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -221,15 +220,15 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to restrict the usage of camera on an Windows device together with all the applications using the camera.
                         Once this configuration profile is installed on a device, corresponding users will not be able
                         to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="camera-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="camera-body">
+                    <hr/>
                     <div id="camera-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -262,15 +261,15 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to encrypt data on an Windows device, when the device is locked and
                         make it readable when the passcode is entered. Once this configuration profile is installed on a device,
                         corresponding users will not be able to modify these settings on their devices.
                     </div>
-                    </h2>
                 </div>
                 <div id="encrypt-storage-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="encrypt-storage-body">
+                    <hr/>
                     <div id="encrypt-storage-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>
@@ -302,14 +301,13 @@
                             <span class="helper"></span>
                             <span class="text"></span>
                         </label>
-                        <hr>
+                    </h2>
                     <div class="panel-title-description">
                         This configuration can be used to create a black list or white list of applications.
                     </div>
-                    </h2>
                 </div>
                 <div id="app-restriction-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="app-restriction-body">
-
+                    <hr/>
                     <div id="app-restriction-feature-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
                     </div>

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/emm-web-agent/app/units/mdm.unit.ui.theme/public/less/theme-variables.less

@@ -6,7 +6,7 @@
 @base-dark-color: #11375B;
 @base-light-color: #ffffff;
 @base-success-color: #5cb85c;
-@base-info-color: #009DA7;
+@base-info-color: #526A84;
 @base-warning-color: #f0ad4e;
 @base-danger-color: #d9534f;