@unbxd-ui/unbxd-react-components 0.3.2 → 0.3.3-beta.2

package/components/Link/linkTheme.scss

@@ -0,0 +1,79 @@
+/**
+    Theme styles for Link component - visual appearance and branding
+**/
+
+.RCB-link {
+    // Primary appearance (default link styling)
+    &-primary {
+        color: #3e71f2;
+        
+        &:hover {
+            color: #3865d9;
+        }
+        
+        &:active {
+            color: #3e71f2;
+        }
+        
+        &:visited {
+            color: #6f42c1;
+        }
+    }
+    
+    // Secondary appearance
+    &-secondary {
+        color: #6c757d;
+        text-decoration: none;
+        
+        &:hover {
+            color: #495057;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #343a40;
+        }
+    }
+    
+    // Danger appearance
+    &-danger {
+        color: #dc3545;
+        text-decoration: none;
+        
+        &:hover {
+            color: #c82333;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #bd2130;
+        }
+    }
+    
+    // Success appearance
+    &-success {
+        color: #28a745;
+        text-decoration: none;
+        
+        &:hover {
+            color: #218838;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #1e7e34;
+        }
+    }
+    
+    // External link styling
+    &-external {
+        .RCB-link-external-icon {
+            color: currentColor;
+            opacity: 0.7;
+        }
+        
+        &:hover .RCB-link-external-icon {
+            opacity: 1;
+        }
+    }
+}

package/components/List/list.css

@@ -0,0 +1 @@
+.RCB-list{margin:0;padding:0}

package/components/List/listCore.scss

@@ -0,0 +1,6 @@
+.RCB {
+    &-list {
+        margin: 0;
+        padding: 0;
+    }
+}

package/components/MetricCard/MetricCard.css

@@ -0,0 +1 @@
+.RCB-metric-card-wrapper{display:flex;gap:16px;margin-bottom:32px}.RCB-metric-card-wrapper .RCB-metric-card-item{flex:1;border-radius:12px;padding:10px;position:relative;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e1e7ef;animation:slide-up 0.5s ease-out;width:52px;height:fit-content}.RCB-metric-card-wrapper .RCB-metric-card-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data{position:relative;z-index:10;display:flex;align-items:center;gap:10px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title-icon{flex:0.2}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title-icon .RCB-metric-title-icon-inner{width:35px;aspect-ratio:1;padding:8px;border-radius:12px;display:flex;align-items:center;justify-content:center}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container{flex:1;display:flex;flex-direction:column;gap:4px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container{display:flex;align-items:center;justify-content:space-between}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-title-text{font-size:0.875rem;line-height:1.25rem;color:#65758b}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:0.75rem;line-height:1rem;font-weight:500}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text.positive{background-color:#dcfce7;color:#15803d}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text.negative{background-color:#fee2e2;color:#b91c1c}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-value-text{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#0f1729;letter-spacing:-0.025em}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-bottom-right-circle{position:absolute;right:-16px;bottom:-16px;width:80px;height:80px;border-radius:50%;opacity:0.1;background-color:var(--decorative-color, #06b6d4)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

package/components/MetricCard/MetricCard.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MetricCard;
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("../../core/icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function MetricCard(props) {
+  var _props$metricConfigs = props.metricConfigs,
+    metricConfigs = _props$metricConfigs === void 0 ? [] : _props$metricConfigs,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-metric-card-wrapper ".concat(className)
+  }, metricConfigs.map(function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon,
+      _ref$iconBgColor = _ref.iconBgColor,
+      iconBgColor = _ref$iconBgColor === void 0 ? '#ccc' : _ref$iconBgColor,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? 'white' : _ref$iconColor,
+      _ref$hasDiff = _ref.hasDiff,
+      hasDiff = _ref$hasDiff === void 0 ? false : _ref$hasDiff,
+      _ref$comparePercentag = _ref.comparePercentage,
+      comparePercentage = _ref$comparePercentag === void 0 ? 0 : _ref$comparePercentag,
+      _ref$className = _ref.className,
+      cardClassName = _ref$className === void 0 ? '' : _ref$className,
+      _ref$diffPosition = _ref.diffPosition,
+      diffPosition = _ref$diffPosition === void 0 ? 'top' : _ref$diffPosition;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-card-item ".concat(cardClassName),
+      key: id
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-data"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-icon"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-icon-inner",
+      style: {
+        backgroundColor: iconBgColor
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: icon,
+      size: "20px",
+      color: iconColor
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-data-value-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-text"
+    }, " ", name, " "), hasDiff && diffPosition === 'top' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
+      size: "12px"
+    }), Math.abs(comparePercentage) + '%') : null), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-value-text"
+    }, value), hasDiff && diffPosition === 'bottom' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
+      size: "12px"
+    }), Math.abs(comparePercentage) + '%') : null))));
+  }));
+}

package/components/MetricCard/MetricCard.scss

@@ -0,0 +1,120 @@
+.RCB-metric-card-wrapper {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 32px;
+
+  .RCB-metric-card-item {
+    flex: 1;
+    border-radius: 12px;
+    padding: 10px;
+    position: relative;
+    overflow: hidden;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    background: hsl(0, 0%, 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid hsl(214, 32%, 91%);
+    animation: slide-up 0.5s ease-out;
+    width: 52px;
+    height: fit-content;
+
+    &:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .RCB-metric-data {
+      position: relative;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .RCB-metric-title-icon {
+        flex: 0.2;
+
+        .RCB-metric-title-icon-inner {
+          width: 35px;
+          aspect-ratio: 1;
+          padding: 8px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      .RCB-metric-data-value-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .RCB-metric-title-container {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .RCB-metric-title-text {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            color: hsl(215, 16%, 47%);
+          }
+
+          .RCB-metric-compare-text {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 8px;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            line-height: 1rem;
+            font-weight: 500;
+
+            &.positive {
+              background-color: #dcfce7;
+              color: #15803d;
+            }
+
+            &.negative {
+              background-color: #fee2e2;
+              color: #b91c1c;
+            }
+          }
+        }
+
+        .RCB-metric-value-text {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+          font-weight: 700;
+          color: #0f1729;
+          letter-spacing: -0.025em;
+        }
+      }
+    }
+
+    .RCB-bottom-right-circle {
+      position: absolute;
+      right: -16px;
+      bottom: -16px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      opacity: 0.1;
+      background-color: var(--decorative-color, rgb(6, 182, 212));
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/components/MetricCard/MetriicCard.stories.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithDifferencePercentage = exports.WithCustomClassNames = exports.Default = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+require("./MetricCard.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'Components/MetricCard',
+  component: _MetricCard["default"],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'MetricCard displays key metrics in a grid layout.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      description: 'Optional CSS class name for the parent wrapper element',
+      control: 'text'
+    },
+    metricConfigs: {
+      description: 'Array of metric configuration objects with id, name, value, icon, iconBgColor, iconColor, and optional className properties',
+      control: 'object'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Sample metric data
+var sampleMetrics = [{
+  icon: 'preview',
+  iconBgColor: 'rgba(67, 56, 202, 0.15)',
+  iconColor: 'rgba(67, 56, 202, 1)',
+  id: 'impressions',
+  name: 'Impressions',
+  value: '120,588,028'
+}, {
+  icon: 'click-rate',
+  iconBgColor: 'rgba(124, 62, 173, 0.15)',
+  iconColor: 'rgba(124, 62, 173, 1)',
+  id: 'clicks',
+  name: 'Clicks',
+  value: '120'
+}, {
+  icon: 'cart-rate',
+  iconBgColor: 'rgba(14, 116, 144, 0.15)',
+  iconColor: 'rgba(14, 116, 144, 1)',
+  id: 'carts',
+  name: 'Carts',
+  value: '120'
+}, {
+  icon: 'package',
+  iconBgColor: 'rgba(29, 78, 216, 0.15)',
+  iconColor: 'rgba(29, 78, 216, 1)',
+  id: 'orders',
+  name: 'Orders',
+  value: '120'
+}, {
+  icon: 'trending-up',
+  iconBgColor: 'rgba(162, 28, 175, 0.15)',
+  iconColor: 'rgba(162, 28, 175, 1)',
+  id: 'conversion-rate',
+  name: 'Conversion Rate',
+  value: '90%'
+}, {
+  icon: 'revenue',
+  iconBgColor: 'rgba(0, 153, 102, 0.15)',
+  iconColor: 'rgba(0, 153, 102, 1)',
+  id: 'revenue',
+  name: 'Revenue',
+  value: '$91320'
+}];
+
+// Sample metric data with difference percentages
+var metricsWithDiff = [{
+  icon: 'preview',
+  iconBgColor: 'rgba(67, 56, 202, 0.15)',
+  iconColor: 'rgba(67, 56, 202, 1)',
+  id: 'impressions',
+  name: 'Impressions',
+  value: '120,588,028',
+  hasDiff: true,
+  comparePercentage: 10,
+  diffPosition: 'top'
+}, {
+  icon: 'click-rate',
+  iconBgColor: 'rgba(124, 62, 173, 0.15)',
+  iconColor: 'rgba(124, 62, 173, 1)',
+  id: 'clicks',
+  name: 'Clicks',
+  value: '120',
+  hasDiff: true,
+  comparePercentage: 10,
+  diffPosition: 'top'
+}, {
+  icon: 'cart-rate',
+  iconBgColor: 'rgba(14, 116, 144, 0.15)',
+  iconColor: 'rgba(14, 116, 144, 1)',
+  id: 'carts',
+  name: 'Carts',
+  value: '120',
+  hasDiff: true,
+  comparePercentage: -10,
+  diffPosition: 'top'
+}, {
+  icon: 'trending-up',
+  iconBgColor: 'rgba(162, 28, 175, 0.15)',
+  iconColor: 'rgba(162, 28, 175, 1)',
+  id: 'conversion-rate',
+  name: 'Conv Rate',
+  value: '90%',
+  hasDiff: true,
+  comparePercentage: -10,
+  diffPosition: 'top'
+}, {
+  icon: 'revenue',
+  iconBgColor: 'rgba(0, 153, 102, 0.15)',
+  iconColor: 'rgba(0, 153, 102, 1)',
+  id: 'revenue',
+  name: 'Revenue',
+  value: '$91320',
+  hasDiff: true,
+  comparePercentage: 10,
+  diffPosition: 'bottom'
+}];
+
+// Default Story
+var Default = exports.Default = {
+  args: {
+    metricConfigs: sampleMetrics
+  }
+};
+
+// Story with difference percentages
+var WithDifferencePercentage = exports.WithDifferencePercentage = {
+  args: {
+    metricConfigs: metricsWithDiff
+  }
+};
+
+// Story with custom classNames
+var WithCustomClassNames = exports.WithCustomClassNames = {
+  args: {
+    className: 'custom-metric-wrapper',
+    metricConfigs: [{
+      icon: 'preview',
+      iconBgColor: 'rgba(67, 56, 202, 0.15)',
+      iconColor: 'rgba(67, 56, 202, 1)',
+      id: 'impressions',
+      name: 'Impressions',
+      value: '120,588,028',
+      className: 'highlighted-card'
+    }, {
+      icon: 'click-rate',
+      iconBgColor: 'rgba(124, 62, 173, 0.15)',
+      iconColor: 'rgba(124, 62, 173, 1)',
+      id: 'clicks',
+      name: 'Clicks',
+      value: '120',
+      className: 'primary-metric'
+    }, {
+      icon: 'cart-rate',
+      iconBgColor: 'rgba(14, 116, 144, 0.15)',
+      iconColor: 'rgba(14, 116, 144, 1)',
+      id: 'carts',
+      name: 'Add to Carts',
+      value: '120'
+    }, {
+      icon: 'revenue',
+      iconBgColor: 'rgba(0, 153, 102, 0.15)',
+      iconColor: 'rgba(0, 153, 102, 1)',
+      id: 'revenue',
+      name: 'Revenue',
+      value: '$91320',
+      className: 'revenue-card'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This story demonstrates the flexibility of adding custom CSS classes:\n\n**Parent className**: Add custom styles to the wrapper with the `className` prop\n**Individual card className**: Each metric config can have its own `className` property for card-specific styles\n\nExample usage:\n```jsx\n<MetricCard\n  className=\"custom-metric-wrapper\"\n  metricConfigs={[\n    {\n      id: 1,\n      name: 'Impressions',\n      value: '20M',\n      icon: 'preview',\n      iconBgColor: 'rgba(67, 56, 202, 0.15)',\n      className: 'highlighted-card'\n    }\n  ]}\n/>\n```\n\n**Important Note on CSS Specificity:**\nTo override default styles, use either:\n1. Higher specificity selectors: `.RCB-metric-card-wrapper .your-class { }`\n2. The `!important` flag for specific properties\n\n```css\n/* Option 1: Higher specificity (recommended) */\n.RCB-metric-card-wrapper .highlighted-card {\n  border: 2px solid gold;\n  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);\n}\n\n/* Option 2: Using !important */\n.highlighted-card {\n  border: 2px solid gold !important;\n  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;\n}\n```\n\nCustom styles applied in this example:\n- `.highlighted-card` - Gold border with shadow (Impressions)\n- `.primary-metric` - Reordered first with blue shadow (Clicks)\n- `.revenue-card` - Gradient background with green border (Revenue)\n                "
+      }
+    }
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_MetricCard["default"], args), /*#__PURE__*/React.createElement("style", null, "\n                .custom-metric-wrapper {\n                    flex-wrap: wrap;\n                    gap: 24px;\n                }\n\n                /* Use higher specificity to override default styles */\n                .RCB-metric-card-wrapper .highlighted-card {\n                    border: 2px solid rgb(250, 204, 21) !important;\n                    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;\n                }\n\n                .RCB-metric-card-wrapper .primary-metric {\n                    order: -1;\n                    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2) !important;\n                }\n\n                .RCB-metric-card-wrapper .revenue-card {\n                    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;\n                    border: 2px solid rgb(16, 185, 129) !important;\n                }\n            "));
+  }
+};

package/components/MetricCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _MetricCard["default"];

package/components/Modal/modal.css

@@ -0,0 +1 @@
+.RCB-modal{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}

package/components/Modal/modalCore.scss

@@ -0,0 +1,58 @@
+.RCB {
+    &-modal {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+
+        .modal-footer {
+            padding: 24px 24px;
+            margin: 20px -24px 0px;
+            border-radius: 0 0 8px 8px;
+            text-align: right;
+    
+            .RCB-btn {
+                margin-right: 14px;
+    
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &-modal-body {
+        background: #FFF;
+        border-radius: 8px;
+        padding: 0px;
+    }
+
+    &-modal-header {
+        display: flex;
+        margin-bottom: 0px;
+        padding: 24px 24px 10px;
+    }
+
+    &-modal-title {
+        flex: 1;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    &-modal-close {
+        cursor: pointer;
+        &:before { 
+            content: "X";
+        }
+    }
+
+    &-modal-content {
+        padding: 24px 24px 0px;
+    }
+}

package/components/NoDataPlaceholder/noDataPlaceholderCore.scss

@@ -0,0 +1,33 @@
+.RCB-no-data-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.RCB-no-data-image {
+    margin-bottom: 16px;
+}
+
+.RCB-no-data-image img {
+    max-width: 120px;
+    max-height: 120px;
+    object-fit: contain;
+}
+
+.RCB-no-data-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.RCB-no-data-description {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+

package/components/NotificationComponent/notificationComponent.css

@@ -0,0 +1 @@
+.RCB-notif{padding:10px}.RCB-notif-success{color:#129274;border:1px solid #2cb292;background-color:#b7d2cb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75190;background-color:#fff9fc}.RCB-notif-warning{color:#445870;border:solid 1px #f09c0a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #509DB9;background-color:#DFF6FF}

package/components/NotificationComponent/notificationTheme.scss

@@ -0,0 +1,38 @@
+.RCB {
+    &-notif {
+        padding: 10px;
+        border-radius: 3px;
+
+        &-success {
+            color: #6DB886;
+            border: solid 1px #6DB886;
+            background-color: #DEF9E7;
+        }
+
+        &-error {
+            color: #CA4646;
+            border: solid 1px #CA4646;
+            background-color: #FFE4E4;
+            ;
+        }
+
+        &-warning {
+            color: #D5A555;
+            border: solid 1px #D5A555;
+            background-color: #FFF8EC;
+        }
+
+        &-info {
+            color: #3E71F2;
+            border: solid 1px #3E71F2;
+            background-color: #E7EDFF;
+        }
+    }
+}
+
+.notif-wrapper{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}