- new "maintenance" screen

- new UI table column for chracter "role" to active character dialog - added "level" to roles
2018-02-18 23:40:32 +01:00
parent fa0daca5fe
commit d53d481c2b
18 changed files with 148 additions and 71 deletions
--- a/app/main/model/rolemodel.php
+++ b/app/main/model/rolemodel.php
@@ -31,6 +31,10 @@ class RoleModel extends BasicModel {
            'nullable' => false,
            'default' => ''
        ],
+        'level' => [
+            'type' => Schema::DT_INT,
+            'index' => true
+        ],
        'style' => [
            'type' => Schema::DT_VARCHAR128,
            'nullable' => false,
@@ -46,18 +50,21 @@ class RoleModel extends BasicModel {
            'id' => 1,
            'name' => 'MEMBER',
            'label' => 'member',
+            'level' => 2,
            'style' => 'default'
        ],
        [
            'id' => 2,
            'name' => 'SUPER',
            'label' => 'admin',
+            'level' => 10,
            'style' => 'danger'
        ],
        [
            'id' => 3,
            'name' => 'CORPORATION',
            'label' => 'manager',
+            'level' => 4,
            'style' => 'info'
        ]
    ];
@@ -71,6 +78,7 @@ class RoleModel extends BasicModel {

        $roleData->name = $this->name;
        $roleData->label = $this->label;
+        $roleData->style = $this->style;

        return $roleData;
    }
@@ -119,7 +127,11 @@ class RoleModel extends BasicModel {
            ':active' => 1
        ];

-        return (new self())->find($query);
+        $options = [
+            'order' => 'level'
+        ];
+
+        return (new self())->find($query, $options);
    }

 }
--- a/js/app/admin.js
+++ b/js/app/admin.js
@@ -21,10 +21,12 @@ define([
     * set page observer
     */
    let setPageObserver = () => {
-        $('.' + config.triggerOverlayClass).on('click', function(){
+        $('.' + config.triggerOverlayClass).on('click', function(e){
            $('.' + config.splashOverlayClass).showSplashOverlay();
        });

+        $('body').initTooltips();
+
        // set fieldset toggled by checkbox ---------------------------------------------------------------------------
        $('input[type="checkbox"][data-target]').on('change', function(){
            let targetId = $(this).attr('data-target');
--- a/js/app/ui/dialog/account_settings.js
+++ b/js/app/ui/dialog/account_settings.js
@@ -44,8 +44,6 @@ define([

        requirejs(['text!templates/dialog/settings.html', 'mustache'], function(template, Mustache) {

-            let characterRoleName = Util.getCurrentUserInfo('roleName');
-
            let data = {
                id: config.settingsDialogId,
                settingsAccountContainerId: config.settingsAccountContainerId,
@@ -56,14 +54,7 @@ define([
                captchaImageId: config.captchaImageId,
                formErrorContainerClass: Util.config.formErrorContainerClass,
                ccpImageServer: Init.url.ccpImageServer,
-                roleLabelClass: () => {
-                    let label = 'label-default';
-                    switch(characterRoleName){
-                        case 'SUPER': label = 'label-danger'; break;
-                        case 'CORPORATION': label = 'label-info'; break;
-                    }
-                    return label;
-                }
+                roleLabel: Util.getLabelByRole(Util.getObjVal(Util.getCurrentUserData(), 'character.role')).prop('outerHTML'),
            };

            let content = Mustache.render(template, data);
--- a/js/app/ui/dialog/map_info.js
+++ b/js/app/ui/dialog/map_info.js
@@ -713,6 +713,10 @@ define([
            ordering: true,
            order: [[ 3, 'asc' ]],
            autoWidth: false,
+            responsive: {
+                breakpoints: Init.breakpoints,
+                details: false
+            },
            hover: false,
            data: usersData,
            language: {
@@ -725,7 +729,7 @@ define([
                {
                    targets: 0,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
                    className: ['pf-help-default', 'text-center', config.tableCellImageClass].join(' '),
@@ -742,7 +746,7 @@ define([
                },{
                    targets: 1,
                    title: 'ship name',
-                    width: '100px',
+                    width: 100,
                    orderable: true,
                    searchable: true,
                    data: 'log.ship',
@@ -758,7 +762,7 @@ define([
                },{
                    targets: 2,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
                    className: [config.tableCellImageClass].join(' '),
@@ -798,10 +802,10 @@ define([
                },{
                    targets: 4,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
-                    className: [config.tableCellImageClass, config.tableCellImageSmallClass].join(' '),
+                    className: [config.tableCellImageClass, config.tableCellImageSmallClass, 'min-desktop'].join(' '),
                    data: 'corporation',
                    render: {
                        _: function(data, type, row, meta){
@@ -817,7 +821,7 @@ define([
                    title: 'corporation',
                    orderable: true,
                    searchable: true,
-                    className: [config.tableCellActionClass].join(' '),
+                    className: [config.tableCellActionClass, 'min-desktop'].join(' '),
                    data: 'corporation',
                    render: {
                        _: function (data, type, row, meta) {
@@ -863,6 +867,23 @@ define([
                            return value;
                        }
                    }
+                },{
+                    targets: 8,
+                    title: 'role',
+                    width: 30,
+                    orderable: true,
+                    searchable: true,
+                    className: ['text-right', 'min-desktop'].join(' '),
+                    data: 'role',
+                    render: {
+                        _: function (data, type, row, meta) {
+                            let value = data.label;
+                            if(type === 'display'){
+                                value = Util.getLabelByRole(data).prop('outerHTML');
+                            }
+                            return value;
+                        }
+                    }
                }
            ]
        });
--- a/js/app/util.js
+++ b/js/app/util.js
@@ -1325,10 +1325,22 @@ define([
     * @param jqXHR XMLHttpRequest instance
     * @returns {boolean}
     */
-    let isXHRAborted = function(jqXHR){
+    let isXHRAborted = (jqXHR) => {
        return !jqXHR.getAllResponseHeaders();
    };

+    /**
+     * get label element for role data
+     * @param role
+     * @returns {*|jQuery|HTMLElement}
+     */
+    let getLabelByRole = (role) => {
+        return $('<span>', {
+            class: ['label', 'label-' + role.style].join(' '),
+            text: role.label
+        });
+    };
+
    /**
     * get all mapTabElements (<a> tags)
     * or search for a specific tabElement within the
@@ -1363,7 +1375,7 @@ define([
     * get the map module object or create a new module
     * @returns {*|HTMLElement}
     */
-    let getMapModule = function(){
+    let getMapModule = () => {
        let mapModule = $('#' + config.mapModuleId);
        if(mapModule.length === 0){
            mapModule = $('<div>', {
@@ -1379,7 +1391,7 @@ define([
     * @param security
     * @returns {number}
     */
-    let getAreaIdBySecurity = function(security){
+    let getAreaIdBySecurity = (security) => {
        let areaId = 0;
        switch(security){
            case 'H':
@@ -1415,7 +1427,7 @@ define([
     * @param effect
     * @returns {boolean}
     */
-    let getSystemEffectData = function(security, effect){
+    let getSystemEffectData = (security, effect) => {
        let data =  SystemEffect;
        if(security){
            // look for specific data
@@ -1440,7 +1452,7 @@ define([
     * @param option
     * @returns {string}
     */
-    let getStatusInfoForCharacter = function(characterData, option){
+    let getStatusInfoForCharacter = (characterData, option) => {

        let statusInfo = '';

@@ -1892,10 +1904,6 @@ define([
                if(option === 'corporationId' && characterData.corporation){
                    userInfo = characterData.corporation.id;
                }
-
-                if(option === 'roleName' && characterData.role){
-                    userInfo = characterData.role.name;
-                }
            }
        }

@@ -2373,6 +2381,7 @@ define([
        setSyncStatus: setSyncStatus,
        getSyncType: getSyncType,
        isXHRAborted: isXHRAborted,
+        getLabelByRole: getLabelByRole,
        getMapElementFromOverlay: getMapElementFromOverlay,
        getMapModule: getMapModule,
        getSystemEffectData: getSystemEffectData,
--- a/public/css/pathfinder.css
+++ b/public/css/pathfinder.css
--- a/public/js/v1.3.3/app/admin.js
+++ b/public/js/v1.3.3/app/admin.js
@@ -21,10 +21,12 @@ define([
     * set page observer
     */
    let setPageObserver = () => {
-        $('.' + config.triggerOverlayClass).on('click', function(){
+        $('.' + config.triggerOverlayClass).on('click', function(e){
            $('.' + config.splashOverlayClass).showSplashOverlay();
        });

+        $('body').initTooltips();
+
        // set fieldset toggled by checkbox ---------------------------------------------------------------------------
        $('input[type="checkbox"][data-target]').on('change', function(){
            let targetId = $(this).attr('data-target');
--- a/public/js/v1.3.3/app/ui/dialog/account_settings.js
+++ b/public/js/v1.3.3/app/ui/dialog/account_settings.js
@@ -44,8 +44,6 @@ define([

        requirejs(['text!templates/dialog/settings.html', 'mustache'], function(template, Mustache) {

-            let characterRoleName = Util.getCurrentUserInfo('roleName');
-
            let data = {
                id: config.settingsDialogId,
                settingsAccountContainerId: config.settingsAccountContainerId,
@@ -56,14 +54,7 @@ define([
                captchaImageId: config.captchaImageId,
                formErrorContainerClass: Util.config.formErrorContainerClass,
                ccpImageServer: Init.url.ccpImageServer,
-                roleLabelClass: () => {
-                    let label = 'label-default';
-                    switch(characterRoleName){
-                        case 'SUPER': label = 'label-danger'; break;
-                        case 'CORPORATION': label = 'label-info'; break;
-                    }
-                    return label;
-                }
+                roleLabel: Util.getLabelByRole(Util.getObjVal(Util.getCurrentUserData(), 'character.role')).prop('outerHTML'),
            };

            let content = Mustache.render(template, data);
--- a/public/js/v1.3.3/app/ui/dialog/map_info.js
+++ b/public/js/v1.3.3/app/ui/dialog/map_info.js
@@ -713,6 +713,10 @@ define([
            ordering: true,
            order: [[ 3, 'asc' ]],
            autoWidth: false,
+            responsive: {
+                breakpoints: Init.breakpoints,
+                details: false
+            },
            hover: false,
            data: usersData,
            language: {
@@ -725,7 +729,7 @@ define([
                {
                    targets: 0,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
                    className: ['pf-help-default', 'text-center', config.tableCellImageClass].join(' '),
@@ -742,7 +746,7 @@ define([
                },{
                    targets: 1,
                    title: 'ship name',
-                    width: '100px',
+                    width: 100,
                    orderable: true,
                    searchable: true,
                    data: 'log.ship',
@@ -758,7 +762,7 @@ define([
                },{
                    targets: 2,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
                    className: [config.tableCellImageClass].join(' '),
@@ -798,10 +802,10 @@ define([
                },{
                    targets: 4,
                    title: '',
-                    width: '26px',
+                    width: 26,
                    orderable: false,
                    searchable: false,
-                    className: [config.tableCellImageClass, config.tableCellImageSmallClass].join(' '),
+                    className: [config.tableCellImageClass, config.tableCellImageSmallClass, 'min-desktop'].join(' '),
                    data: 'corporation',
                    render: {
                        _: function(data, type, row, meta){
@@ -817,7 +821,7 @@ define([
                    title: 'corporation',
                    orderable: true,
                    searchable: true,
-                    className: [config.tableCellActionClass].join(' '),
+                    className: [config.tableCellActionClass, 'min-desktop'].join(' '),
                    data: 'corporation',
                    render: {
                        _: function (data, type, row, meta) {
@@ -863,6 +867,23 @@ define([
                            return value;
                        }
                    }
+                },{
+                    targets: 8,
+                    title: 'role',
+                    width: 30,
+                    orderable: true,
+                    searchable: true,
+                    className: ['text-right', 'min-desktop'].join(' '),
+                    data: 'role',
+                    render: {
+                        _: function (data, type, row, meta) {
+                            let value = data.label;
+                            if(type === 'display'){
+                                value = Util.getLabelByRole(data).prop('outerHTML');
+                            }
+                            return value;
+                        }
+                    }
                }
            ]
        });
--- a/public/js/v1.3.3/app/util.js
+++ b/public/js/v1.3.3/app/util.js
@@ -1325,10 +1325,22 @@ define([
     * @param jqXHR XMLHttpRequest instance
     * @returns {boolean}
     */
-    let isXHRAborted = function(jqXHR){
+    let isXHRAborted = (jqXHR) => {
        return !jqXHR.getAllResponseHeaders();
    };

+    /**
+     * get label element for role data
+     * @param role
+     * @returns {*|jQuery|HTMLElement}
+     */
+    let getLabelByRole = (role) => {
+        return $('<span>', {
+            class: ['label', 'label-' + role.style].join(' '),
+            text: role.label
+        });
+    };
+
    /**
     * get all mapTabElements (<a> tags)
     * or search for a specific tabElement within the
@@ -1363,7 +1375,7 @@ define([
     * get the map module object or create a new module
     * @returns {*|HTMLElement}
     */
-    let getMapModule = function(){
+    let getMapModule = () => {
        let mapModule = $('#' + config.mapModuleId);
        if(mapModule.length === 0){
            mapModule = $('<div>', {
@@ -1379,7 +1391,7 @@ define([
     * @param security
     * @returns {number}
     */
-    let getAreaIdBySecurity = function(security){
+    let getAreaIdBySecurity = (security) => {
        let areaId = 0;
        switch(security){
            case 'H':
@@ -1415,7 +1427,7 @@ define([
     * @param effect
     * @returns {boolean}
     */
-    let getSystemEffectData = function(security, effect){
+    let getSystemEffectData = (security, effect) => {
        let data =  SystemEffect;
        if(security){
            // look for specific data
@@ -1440,7 +1452,7 @@ define([
     * @param option
     * @returns {string}
     */
-    let getStatusInfoForCharacter = function(characterData, option){
+    let getStatusInfoForCharacter = (characterData, option) => {

        let statusInfo = '';

@@ -1892,10 +1904,6 @@ define([
                if(option === 'corporationId' && characterData.corporation){
                    userInfo = characterData.corporation.id;
                }
-
-                if(option === 'roleName' && characterData.role){
-                    userInfo = characterData.role.name;
-                }
            }
        }

@@ -2373,6 +2381,7 @@ define([
        setSyncStatus: setSyncStatus,
        getSyncType: getSyncType,
        isXHRAborted: isXHRAborted,
+        getLabelByRole: getLabelByRole,
        getMapElementFromOverlay: getMapElementFromOverlay,
        getMapModule: getMapModule,
        getSystemEffectData: getSystemEffectData,
--- a/public/templates/admin/settings.html
+++ b/public/templates/admin/settings.html
@@ -42,7 +42,7 @@
                                                    <div class="col-xs-6 col-sm-12  checkbox checkbox-warning">
                                                        <input id="{{ @fieldsetId}}" name="managed" value="1" type="checkbox" data-target="{{ @fieldsetId}}" {{ @isManaged }}>
                                                        <label for="{{ @fieldsetId}}">Managed mode
-                                                            <i class="fas fa-fw fa-sm fa-question-circle pf-help-light" title="If active only corporation admins can add/update/delete corporation map settings"></i>
+                                                            <i class="fas fa-fw fa-sm fa-question-circle pf-help-light" title="If active, admin roles can be set for some actions"></i>
                                                        </label>
                                                    </div>
                                                </div>
@@ -51,12 +51,11 @@
                                    </div>
                                </div>

-                                <exclude>
-                                    <div class="pf-dialog-warning-container alert alert-warning">
-                                        <span class="txt-color txt-color-warning">Warning</span>
-                                        <small> (important non-critical information)</small>
-                                    </div>
-                                </exclude>
+
+                                <div class="pf-dialog-warning-container alert alert-info">
+                                    <span class="txt-color txt-color-info">Cache expire</span>
+                                    <small> Roles are cached for 2min</small>
+                                </div>

                            </div>
                            <div class="panel-footer text-right">
--- a/public/templates/dialog/map.html
+++ b/public/templates/dialog/map.html
@@ -215,7 +215,7 @@


                        {{! Discord notification --------------------------------------------- }}
-                        <h4 class="pf-dynamic-area {{^discordSectionShow}}collapsed{{/discordSectionShow}}" data-toggle="collapse" data-target="#pf-map-dialog-discord-section"><i class="fab fa-discord"></i>&nbsp;&nbsp;Discord notifications <small class="txt-color txt-color-warning">[BETA]</small></h4>
+                        <h4 class="pf-dynamic-area {{^discordSectionShow}}collapsed{{/discordSectionShow}}" data-toggle="collapse" data-target="#pf-map-dialog-discord-section"><i class="fab fa-discord"></i>&nbsp;&nbsp;Discord notifications</h4>

                        <div id="pf-map-dialog-discord-section" class="collapse {{#discordSectionShow}}in{{/discordSectionShow}}">
                            <fieldset {{^discordEnabled}}disabled{{/discordEnabled}}>
--- a/public/templates/dialog/map_info.html
+++ b/public/templates/dialog/map_info.html
@@ -13,7 +13,7 @@
            </li>
            <li class="{{#openTabLog}}active{{/openTabLog}}">
                <a role="tab" data-toggle="tab" data-name="infoLog" href="#{{dialogLogsContainerId}}">
-                    <i class="fas fa-binoculars fa-fw"></i>&nbsp;Log&nbsp;&nbsp;<small class="txt-color txt-color-warning">[BETA]</small>
+                    <i class="fas fa-binoculars fa-fw"></i>&nbsp;Log&nbsp;&nbsp;<small class="txt-color txt-color-warning"></small>
                </a>
            </li>
        </ul>
@@ -35,7 +35,6 @@
    {{! "summary" tab ------------------------------------------------------ }}
    <div role="tabpanel" class="tab-pane fade {{#openTabInformation}}in active{{/openTabInformation}}" id="{{dialogSummaryContainerId}}">
        <div class="alert alert-info fade in hidden-md hidden-lg">
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button>
            <span class="txt-color txt-color-information">Info</span>
            <small> Your browser window is to small. Resize it to obtain more columns.</small>
        </div>
@@ -57,6 +56,11 @@

    {{! "users" tab -------------------------------------------------------- }}
    <div role="tabpanel" class="tab-pane fade {{#openTabActivity}}in active{{/openTabActivity}}" id="{{dialogUsersContainerId}}">
+        <div class="alert alert-info fade in hidden-md hidden-lg">
+            <span class="txt-color txt-color-information">Info</span>
+            <small> Your browser window is to small. Resize it to obtain more columns.</small>
+        </div>
+
        <h4><i class="fas fa-male fa-lg fa-fw"></i> Active pilots</h4>

        <div id="{{mapInfoUsersId}}" class="pf-dynamic-area"></div>
--- a/public/templates/dialog/settings.html
+++ b/public/templates/dialog/settings.html
@@ -224,9 +224,7 @@
            <form role="form" class="form-horizontal">

                {{#userData.character}}
-                    <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Character/{{id}}_64.jpg">&nbsp;&nbsp;{{name}}&nbsp;
-                        <span class="label {{roleLabelClass}}">{{role.label}}</span>
-                    </h4>
+                    <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Character/{{id}}_64.jpg">&nbsp;&nbsp;{{name}}&nbsp;&nbsp;{{{roleLabel}}}</h4>

                    <div class="row">
                        <div class="col-xs-8 col-sm-6">
--- a/public/templates/dialog/stats.html
+++ b/public/templates/dialog/stats.html
@@ -33,7 +33,6 @@
    </nav>

    <div class="alert alert-info fade in hidden-md hidden-lg">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button>
        <span class="txt-color txt-color-information">Info</span>
        <small> Your browser window is to small. Resize it to obtain more columns.</small>
    </div>
--- a/public/templates/status/offline.html
+++ b/public/templates/status/offline.html
@@ -0,0 +1,19 @@
+<div class="pf-splash pf-splash-warning">
+    <div class="pf-color-line warning"></div>
+    <div class="pf-splash-title">
+        <h1>
+            <span class="txt-color txt-color-warning">
+                <i class="fas fa-fw fa-cogs"></i>&nbsp;Maintenance
+            </span>
+        </h1>
+        <p class="lead">
+            Server is temporary under scheduled maintenance.<br>Please wait a few minutes&hellip;<br>
+        </p>
+
+        <svg class="lds-gear-set" width="100px"  height="100px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(50 50)"> <g transform="translate(-17 -17) scale(0.5)"> <g transform="rotate(36.6667)">
+            <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="9s" begin="0s" repeatCount="indefinite"></animateTransform><path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 31.070237969796747 21.87784981437163 L31.070237969796747 21.87784981437163 L38.141305781662226 28.948917626237105 L28.948917626237105 38.14130578166222 L21.87784981437163 31.070237969796743 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -21.877849814371626 31.070237969796747 L-21.877849814371626 31.070237969796747 L-28.9489176262371 38.141305781662226 L-38.14130578166222 28.948917626237105 L-31.070237969796743 21.87784981437163 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -31.070237969796747 -21.877849814371626 L-31.070237969796747 -21.877849814371626 L-38.141305781662226 -28.9489176262371 L-28.94891762623711 -38.14130578166222 L-21.877849814371633 -31.070237969796743 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 21.877849814371622 -31.07023796979675 L21.877849814371622 -31.07023796979675 L28.948917626237098 -38.141305781662226 L38.14130578166221 -28.94891762623711 L31.07023796979674 -21.877849814371633 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -22A22 22 0 1 0 0 22 A22 22 0 1 0 0 -22" fill="#63676a"></path></g></g> <g transform="translate(0 22) scale(0.4)"> <g transform="rotate(300.833)">
+            <animateTransform attributeName="transform" type="rotate" values="360;0" keyTimes="0;1" dur="9s" begin="-0.5625s" repeatCount="indefinite"></animateTransform><path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 31.070237969796747 21.87784981437163 L31.070237969796747 21.87784981437163 L38.141305781662226 28.948917626237105 L28.948917626237105 38.14130578166222 L21.87784981437163 31.070237969796743 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -21.877849814371626 31.070237969796747 L-21.877849814371626 31.070237969796747 L-28.9489176262371 38.141305781662226 L-38.14130578166222 28.948917626237105 L-31.070237969796743 21.87784981437163 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -31.070237969796747 -21.877849814371626 L-31.070237969796747 -21.877849814371626 L-38.141305781662226 -28.9489176262371 L-28.94891762623711 -38.14130578166222 L-21.877849814371633 -31.070237969796743 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 21.877849814371622 -31.07023796979675 L21.877849814371622 -31.07023796979675 L28.948917626237098 -38.141305781662226 L38.14130578166221 -28.94891762623711 L31.07023796979674 -21.877849814371633 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -22A22 22 0 1 0 0 22 A22 22 0 1 0 0 -22" fill="#5cb85c"></path></g></g> <g transform="translate(28 4) scale(0.3)"> <g transform="rotate(59.1667)">
+            <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="9s" begin="-0.5625s" repeatCount="indefinite"></animateTransform><path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 31.070237969796747 21.87784981437163 L31.070237969796747 21.87784981437163 L38.141305781662226 28.948917626237105 L28.948917626237105 38.14130578166222 L21.87784981437163 31.070237969796743 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -21.877849814371626 31.070237969796747 L-21.877849814371626 31.070237969796747 L-28.9489176262371 38.141305781662226 L-38.14130578166222 28.948917626237105 L-31.070237969796743 21.87784981437163 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -31.070237969796747 -21.877849814371626 L-31.070237969796747 -21.877849814371626 L-38.141305781662226 -28.9489176262371 L-28.94891762623711 -38.14130578166222 L-21.877849814371633 -31.070237969796743 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 21.877849814371622 -31.07023796979675 L21.877849814371622 -31.07023796979675 L28.948917626237098 -38.141305781662226 L38.14130578166221 -28.94891762623711 L31.07023796979674 -21.877849814371633 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -22A22 22 0 1 0 0 22 A22 22 0 1 0 0 -22" fill="#375959"></path></g></g></g></svg>
+
+    </div>
+</div>
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -418,7 +418,7 @@ input[type="email"]{
    .close {
        top: 0px;
        right: -5px;
-        line-height: 20px;
+        line-height: 18px;
    }
 }

--- a/sass/bootstrap/_modals.scss
+++ b/sass/bootstrap/_modals.scss
@@ -87,7 +87,7 @@
 }
 // Close icon
 .modal-header, .modal-body{
-  .close {
+  .bootbox-close-button {
    padding: 0 5px;
    font-size: 22px;
    margin-top: -2px;