Removing jqueryui alert, replacing by foundation callout

resources/css/renater.css

@@ -146,6 +146,56 @@ button:hover, .button:hover {
 .tooltip.right::before {
     border-color: transparent #fff0c6 transparent transparent;
 }
+/* RENATER Class Added for Foundation CallOut*/
+.alert-callout-border {
+    width: 100%;
+    padding: 1.3rem;
+    border-left-width: 0.3125rem;
+    border-left-color: #cacaca;
+}
+.alert-callout-border strong {
+    color: #0a0a0a;
+}
+.alert-callout-border .close-button {
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+.alert-callout-border.radius {
+    border-radius: 0.6rem;
+}
+.alert-callout-border.primary {
+    border-left-color: #1779ba;
+}
+.alert-callout-border.primary strong {
+    color: #1779ba;
+}
+.alert-callout-border.secondary {
+    border-left-color: #767676;
+}
+.alert-callout-border.secondary strong {
+    color: #767676;
+}
+.alert-callout-border.alert {
+    border-left-color: #cc4b37;
+}
+.alert-callout-border.alert strong {
+    color: #cc4b37;
+}
+.alert-callout-border.success {
+    border-left-color: #2ca200;
+}
+.alert-callout-border.success strong {
+    color: #2ca200;
+}
+.alert-callout-border.warning {
+    border-left-color: #ffae00;
+}
+.alert-callout-border.warning strong {
+    color: #ffae00;
+}
 
 /* Top button */
 .scroll-top-wrapper {

templates/renater/web/create_accounts.tt2.html

 [% WRAPPER index.tt2.html %]
 <div class="row">
-    <div class="callout success">
+    <div class="small-12 columns">
+        <p class="callout alert-callout-border success text-center">
         [% lh.maketext("<strong>Success:</strong> your identity as administrator of the Service Provider with entityID <strong>[_1]</strong> has been validated!", entityid) %]
+        </p>
     </div>
 </div>
 
@@ -69,7 +71,9 @@
             </table>
         </div>
 
-        <div class="callout info">[% lh.maketext("If you need a customized test account with additional user attributes, you should contact <a href=\"mailto:[_1]\">[_1]</a>.", app.support_email) %]</div>
+        <div class="callout alert-callout-border info">
+            <p>[% lh.maketext("If you need a customized test account with additional user attributes, you should contact <a href=\"mailto:[_1]\">[_1]</a>.", app.support_email) %]</p>
+        </div>
         <div>
             [% lh.maketext("(1) eduPersonAffiliation and eduPersonScoppedAffilisation attributes are assigned quite differently from federation to federation.") %]
             [% lh.maketext("<a href=\"[_1]\">This usage comparison of eduPersonAffiliation accross different countries</a> discusses these differences.", "http://tnc2010.terena.org/files/ePSA%20comparison%20v0%2006.ppt") %]
@@ -80,13 +84,13 @@
 </div>
 
 <div class="row">
-    <div class="callout warning">
+    <div class="callout alert-callout-border warning">
         <p>[% lh.maketext("Note that these test accounts will automatically expire in [_1] days and that they can only be used to test federated login to your eduGAIN-enabled Service Provider with entityID <strong>[_2]</strong>.", days, entityid) %]</p>
     </div>
 </div>
 
 <div class="row">
-    <div class="callout primary">
+    <div class="callout alert-callout-border primary text-center">
         <strong>[% lh.maketext("Thank you for using eduGAIN Access Check") %]</strong>
     </div>
 </div>

templates/renater/web/errors.tt2.html

 [% WRAPPER index.tt2.html %]
-<div class="ui-widget">
+<div class="small-12 medium-8 medium-centered columns">
     [% FOREACH err IN errors %]
 
-    <p class="ui-state-error ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
-        [% lh.maketext("Error:") %]
+    <p class="callout  alert-callout-border alert text-center">
+        <strong>[% lh.maketext("Error:") %]</strong>
 
         [% IF err == 'unknown_action' %]
         [% lh.maketext("unknown action") %]
@@ -32,7 +32,6 @@
 
         [% END %]
     </p>
-    <br/>
     [% END %]
 
     [% lh.maketext("You can report the issue to the administrators") %] (<a href="mailto:[% app.support_email %]">[% app.support_email %]</a>).

templates/renater/web/select_email.tt2.html

@@ -25,7 +25,7 @@
             <input type="hidden" name="federation" value="[% federation %]"/>
             <input type="hidden" name="entityid" value="[% sp.entityid %]"/>
         </fieldset>
-        <div class="callout primary">[% lh.maketext("Those email addresses have been extracted from your service metadata.") %]</div>
+        <div class="callout alert-callout-border primary">[% lh.maketext("Those email addresses have been extracted from your service metadata.") %]</div>
     [% ELSE %]
         <p>
         [% lh.maketext("No ContactPerson element could be found in your service metadata, therefore we are unable to provide test accounts for this service.") %]

templates/renater/web/select_sp.tt2.html

@@ -27,7 +27,7 @@
             <label for="entityid_combobox" class="error"></label>
             <input type="hidden" name="federation" value="[% federation %]"/>
         </fieldset>
-        <div class="callout primary">[% lh.maketext("Those service providers have been extracted from the selected federation metadata.") %]</div>
+        <div class="callout alert-callout-border primary">[% lh.maketext("Those service providers have been extracted from the selected federation metadata.") %]</div>
     </div>
 
     <div class="actions clearfix">

templates/web/errors.tt2.html

 [% WRAPPER index.tt2.html %]
-<div class="ui-widget">
+<div class="small-12 medium-8 medium-centered columns">
     [% FOREACH err IN errors %]
 
-    <p class="ui-state-error ui-corner-all" style="margin-top: 20px; padding: 1rem;"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
+    <p class="callout alert text-center">
         [% lh.maketext("Error:") %]
 
         [% IF err == 'unknown_action' %]