linear-react-components-ui 1.1.14-beta.0 → 1.1.14-beta.1

package/lib/alerts/Message.js

@@ -1,21 +1,23 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../icons"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var getClass = function getClass(_ref) {
-  var customClass = _ref.customClass,
-    className = _ref.className;
+var _progress = _interopRequireDefault(require("../progress"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getClass = _ref => {
+  let {
+    customClass,
+    className
+  } = _ref;
   return "".concat(className, " ").concat(customClass);
 };
-var getIcon = function getIcon(icon, iconName, color) {
+const getIcon = (icon, iconName, color) => {
   if (icon !== null) {
     return icon;
   } else if (iconName !== null) {
@@ -27,55 +29,86 @@ var getIcon = function getIcon(icon, iconName, color) {
   }
   return null;
 };
-var Message = function Message(_ref2) {
-  var _ref2$handleClose = _ref2.handleClose,
-    handleClose = _ref2$handleClose === void 0 ? function () {} : _ref2$handleClose,
-    message = _ref2.message,
-    _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? 0 : _ref2$id,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? '' : _ref2$color,
-    _ref2$icon = _ref2.icon,
-    icon = _ref2$icon === void 0 ? null : _ref2$icon,
-    _ref2$iconName = _ref2.iconName,
-    iconName = _ref2$iconName === void 0 ? null : _ref2$iconName,
-    _ref2$timeout = _ref2.timeout,
-    timeout = _ref2$timeout === void 0 ? 3000 : _ref2$timeout,
-    _ref2$customClass = _ref2.customClass,
-    customClass = _ref2$customClass === void 0 ? '' : _ref2$customClass,
-    _ref2$closeButton = _ref2.closeButton,
-    closeButton = _ref2$closeButton === void 0 ? false : _ref2$closeButton,
-    _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? 'message' : _ref2$className,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'centerTop' : _ref2$position;
-  (0, _react.useEffect)(function () {
-    if (timeout > 0) {
-      setTimeout(function () {
+const Message = _ref2 => {
+  let {
+    handleClose = () => {},
+    message,
+    id = 0,
+    color = '',
+    icon = null,
+    iconName = null,
+    timeout = 3000,
+    customClass = '',
+    closeButton = false,
+    className = 'message',
+    position = 'centerTop',
+    pauseTimeoutOnMouseHover = false
+  } = _ref2;
+  const [progressBarTime, setProgressBarTime] = (0, _react.useState)(timeout - 300);
+  const [pauseTimeout, setPauseTimeout] = (0, _react.useState)(false);
+  const timeoutIdentifier = (0, _react.useRef)(null);
+  const intervalIdentifier = (0, _react.useRef)(null);
+  const handleMouseEnter = () => {
+    if (pauseTimeoutOnMouseHover) {
+      setPauseTimeout(true);
+      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime + 600 : prevProgressBarTime + 500);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (pauseTimeoutOnMouseHover) {
+      setPauseTimeout(false);
+      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime - 600 : prevProgressBarTime - 500);
+    }
+  };
+  const getProgressBarType = () => customClass.replace('-', '');
+  (0, _react.useEffect)(() => {
+    if (!pauseTimeout && progressBarTime > 0) {
+      timeoutIdentifier.current = setTimeout(() => {
         handleClose(id, position);
-      }, timeout);
+      }, progressBarTime);
+      intervalIdentifier.current = setInterval(() => progressBarTime > 0 ? setProgressBarTime(prevProgressBarTime => prevProgressBarTime > 0 ? prevProgressBarTime - 100 : 0) : null, 100);
+    } else {
+      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
+      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
     }
-  }, []);
+    return () => {
+      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
+      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
+    };
+  }, [pauseTimeout]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, timeout > 0 && /*#__PURE__*/_react.default.createElement(_progress.default, {
+    min: 300,
+    max: timeout,
+    value: progressBarTime,
+    showLabel: false,
+    style: {
+      animation: 'tinRightIn 1s forwards ease-in-out',
+      margin: '0px',
+      borderRadius: '0px',
+      backgroundColor: 'rgb(234 234 234)'
+    },
+    height: "6px",
+    type: getProgressBarType()
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: getClass({
-      className: className,
-      customClass: customClass
+      className,
+      customClass
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "-icon"
   }, (icon || iconName || color) && getIcon(icon, iconName, color)), /*#__PURE__*/_react.default.createElement("div", {
     className: "-messagecontent"
-  }, message), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, message)), /*#__PURE__*/_react.default.createElement("div", {
     className: "close"
   }, closeButton || timeout === 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: "close-button",
     role: "button",
-    onKeyPress: function onKeyPress() {},
+    onKeyPress: () => {},
     tabIndex: -1,
-    onClick: function onClick() {
-      return handleClose !== undefined ? handleClose(id, position) : null;
-    }
-  }, "x") : null));
+    onClick: () => handleClose !== undefined ? handleClose(id, position) : null
+  }, "x") : null)));
 };
-var _default = Message;
-exports.default = _default;
+var _default = exports.default = Message;

package/lib/alerts/helpers.js

@@ -5,6 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var AlertProviderContext = /*#__PURE__*/(0, _react.createContext)({});
-var _default = AlertProviderContext;
-exports.default = _default;
+const AlertProviderContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = exports.default = AlertProviderContext;

package/lib/alerts/index.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "AlertProvider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _AlertProvider.default;
   }
 });
 exports.default = void 0;
 var _withAlert = _interopRequireDefault(require("./withAlert"));
 var _AlertProvider = _interopRequireDefault(require("./AlertProvider"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _withAlert.default;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _withAlert.default;

package/lib/alerts/types.d.ts

@@ -29,6 +29,7 @@ interface IMessageProps {
     icon?: ReactNode | null;
     iconName?: IconNames | null;
     timeout?: number;
+    pauseTimeoutOnMouseHover?: boolean;
 }
 interface IBaseAlertProps {
     children: ReactNode;

package/lib/alerts/withAlert.js

@@ -1,25 +1,24 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = _interopRequireDefault(require("./helpers"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var withAlert = function withAlert(WrapperComponent) {
-  var GetAlert = function GetAlert(props) {
-    var _useContext = (0, _react.useContext)(_helpers.default),
-      alert = _useContext.alert;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const withAlert = WrapperComponent => {
+  const GetAlert = props => {
+    const {
+      alert
+    } = (0, _react.useContext)(_helpers.default);
     return /*#__PURE__*/_react.default.createElement(WrapperComponent, _extends({}, props, {
       alert: alert
     }));
   };
   return GetAlert;
 };
-var _default = withAlert;
-exports.default = _default;
+var _default = exports.default = withAlert;

package/lib/assets/styles/alerts.scss

@@ -8,12 +8,13 @@
 .alert-component {
   position: fixed;
   z-index: 9999999;
-  pointer-events: none;
   > .messagecontainer {
     height: 100%;
     > .lefttop, > .leftbottom, > .rightbottom, .righttop, .centertop, .centerbottom {
       position: fixed;
-      width: 370px;
+      width: auto;
+      min-width: 20%;
+      max-width: 25%;
     }
     > .lefttop {
       left: 0;
@@ -53,15 +54,11 @@
     > .rightbottom {
       right: 0;
       bottom: 0;
-      &:hover {
-        opacity: 0.3!important;
-        background-color: #E0CABB;
-      }
     }
   }
   .message {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     width: 100%;
     height: 100%;
     min-height: 80px;

package/lib/assets/styles/button.scss

@@ -38,13 +38,14 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-splash-click;
     content: "";
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50% !important;
+    left: 50% !important;
     display: block;
-    width: 0;
     padding-top: 0;
     border-radius: 100%;
     background-color: rgba(236, 240, 241, 0.3);
+    width: 0;
+    height: 0 !important;
   }
   > .icon-component {
     width: 15px;
@@ -69,7 +70,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   &:active:before {
     @extend %component-effect-click;
   }
-  &:hover {
+  &:hover, &[data-uitour="hover"] {
     background-color: $default-hover-color;
   }
   &:focus {
@@ -102,6 +103,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-disabled;
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
+    pointer-events: auto;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;
@@ -162,7 +164,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $primary-border-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $primary-hover-color;
     }
     &:focus {
@@ -201,7 +203,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $warning-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $warning-hover-color;
     }
     &:focus {
@@ -220,7 +222,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $danger-hover-color;
     }
     &:focus {
@@ -239,7 +241,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $success-hover-color;
       color: $font-color-second;
     }
@@ -259,7 +261,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover { 
+    &:hover, &[data-uitour="hover"] { 
       background-color: $info-hover-color;
       color: $font-color-second;
     }

package/lib/assets/styles/checkbox.scss

@@ -4,83 +4,90 @@
 
 .checkbox-component {
   > .inputcontent {
+    display: flex;
     > .input {
-      position: absolute;
-      z-index: 0;
-      left: -9999999999999px;
+      pointer-events: none;
+      opacity: 0;
+      width: 0;
+      height: 0;
       &:disabled + span {
         @extend %component-disabled;
+        border: 1px solid $component-border-color;
+      }
+      &:checked:disabled + span {
+        border: 1px solid $component-border-color;
+        > svg {
+          @extend %component-menu-disabled
+        }
       }
       &:disabled + span + .description {
         @extend %component-menu-disabled;
       }
-      &:checked + span:before {
-        content: "✓";
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: static;
-        margin-top: -5px;
-        font-weight: 600;
-        height: 28px;
+      &:checked + span > svg {
+        display: block;
+        fill: $font-color-second;
+        margin: 0;
       }
       + span {
-        display: inline-block;
         position: relative;
-        top: -1px;
+        min-width: 18px;
+        min-height: 18px;
         width: 18px;
         height: 18px;
-        margin: -1px 0px 0 0;
-        margin-right: 4px;
         vertical-align: middle;
         background: $font-color-second left top no-repeat;
         border: 1px solid $component-border-color;
         cursor: pointer;
+        display: flex;
+        margin-right: 6px;
+        align-items: center;
+        justify-content: center;
         &:hover {
           animation-duration: .5s;
           animation-name: blink-effect;
           animation-iteration-count: infinite;
           animation-direction: alternate;
         }
+        & > svg {
+          display: none;
+        }
       }
       &:checked + span {
-        background-color: $check-background;
+        background-color: $checked-effect;
+        border-color: $checked;
         color: $font-color-second;
         animation-duration: .2s;
         animation-name: select-checkbox;
         animation-iteration-count: 1;
         animation-direction: Normal;
-        box-shadow: inset 0 0 0 1px $checked, 
-        inset 0 0 0 0 #FFFFFF, 
-        inset 0 0 0 16px $checked-effect;
       }
       &:focus + span {
         border: 2px solid $component-selected-color;
       }
-      &:disabled:checked + span:before {
-        @extend %component-menu-disabled;
-        border: 1px solid;
-        margin-top: -1px;
-        width: 18px;
-        height: 18px;
-        background-color: rgb(229, 229, 229);
-        margin-left: -1px;
-      }
     }
     > .description {
       @extend %input-label;
-      margin-left: 2px;
       cursor: pointer ;
+      flex: 1;
+      line-height: 18px;
+      
+      > .hint {
+        @extend %hint-text;
+        margin-top: 0;
+      }
     }
   }
 
-  > .hint {
-    @extend %hint-text;
-    margin-top: 0;
-    padding-left: 22px;
-  }
   
-  &.-skeletonized {
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 0px;
+  }
+
+  &[data-skeletonized="true"] {
     > .inputcontent {
       .input {
         + span {
@@ -93,8 +100,8 @@
         }
       }
     }
-    > .inputcontent > .description,
-    > .hint > span {
+    > .inputcontent > .description > span,
+    > .inputcontent > .description > .hint > span {
       @extend %skeleton-component;
     }
   }

package/lib/assets/styles/colors.scss

@@ -4,7 +4,7 @@
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  transition: all 0.5s ease-in-out;
+  transition: all 0.25s ease-in-out;
 }
 
 %component-effect-click {
@@ -89,6 +89,8 @@ $alert-warning: #fff3cd;
 $alert-warning-text: #856404;
 $alert-warning-border: #f2e3b5;
 
+$error-color: #ff3030;
+
 $danger-color: #e74c3c;
 $danger-hover-color: #dd2d1b;
 $danger-focus-color: #c0392b;

package/lib/assets/styles/commons.scss

@@ -9,6 +9,7 @@
 
 %component-menu-disabled {
   color: #bbbbbb;
+  fill: #bbbbbb;
   background-color: transparent,
 }
 

package/lib/assets/styles/dialog.scss

@@ -1,24 +1,20 @@
 @import "commons.scss";
 @import "colors.scss";
 @import "effects.scss";
+
+$shadow-button-default: 1px 1px 1px rgba(0, 0, 0, 0.2);
+$shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-button-default;
 .modalcontainer {
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
   font-size: 14px;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   > .dialog {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: contents;
     > .dialog-form-wrapper {
       @extend %component-box-shadow;
       width: 100%;
@@ -66,18 +62,38 @@
           width: 100%;
           margin-left: 2px;
           display: flex;
+          justify-content: space-between;
           align-items: center;
-          &.modal-title {
-            color: #4e4c4c;
-            font-weight: 600;
+          .modal-title {
+            color: $font-color-default;
+            font-weight: 400;
           }
         }
         .close-button {
-          color: #777;
-          cursor: pointer;
-          font-size: 16px;
-          text-shadow: 0 1px 0 $default-color;
-          margin-left: auto;
+          all: unset;
+          line-height: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          border: none;
+          background-color: $default-color;
+          color: $font-color-soft;
+          border-radius: 999999px;
+          cursor: pointer !important;
+          >svg {
+            fill: $font-color-soft;
+            pointer-events: fill;
+            transition: 0.2s fill;
+          }
+          &:hover {
+            background-color: $default-hover-color;
+          }
+          &:focus {
+            -webkit-box-shadow: $shadow-button-inset-default;
+            box-shadow: $shadow-button-inset-default;
+          }
         }
       }
       .footer {
@@ -176,6 +192,7 @@
   background-color: #235a94;
   opacity: .3;
   position: fixed;
+  z-index: -1;
   height: 100%;
   width: 100%;
   top: 0;

package/lib/assets/styles/drawers.scss

@@ -94,6 +94,8 @@
       }
       .right {
         margin-left: 2px;
+        display: flex;
+        align-items: center;
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
@@ -101,12 +103,13 @@
       }
       .closebutton {
         cursor: pointer;
-        float: right;
-        font-size: 16px;
-        text-shadow: 0 1px 0 $default-color;
-        margin-right: 5px;
-        &:hover {
-          color: rgba(0, 0, 0, 0.164);
+        > svg {
+          fill: #252424;
+          pointer-events: fill;
+          transition: 0.2s fill;
+          &:hover {
+            fill: rgba(0, 0, 0, 0.164);
+          }
         }
       }
     }

package/lib/assets/styles/error.scss

@@ -0,0 +1,9 @@
+@import "colors.scss";
+
+p.errormessages-component {
+  width: 100%;
+  color: $error-color;
+  font-size: 13px!important;
+  line-height: 13px;
+  margin-top: 3px;
+}

package/lib/assets/styles/fieldset.scss

@@ -65,6 +65,9 @@
     text-transform: uppercase;
     border-radius: 0px 10px 0px 0px;
     z-index: 9;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
   > .errormessage {
     position: relative;

package/lib/assets/styles/gridlayout.scss

@@ -65,8 +65,6 @@ html {
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  // margin-right: -15px;
-  // margin-left: -15px;
   &.-withtrim {
     .grid-container:first-child {
       padding-left: 0;