@mohamed-karawia/library 0.1.15 → 0.1.19

package/dist/stories/Library/ViewNote/ViewNote.js

@@ -7,20 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
 
-var ViewNote = function ViewNote() {
-  var data = {
-    blocks: [{
-      type: "header",
-      data: {
-        text: "New Note",
-        level: 1
-      }
-    }]
-  };
+var _excluded = ["data"];
+
+var ViewNote = function ViewNote(_ref) {
+  var data = _ref.data,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
     data: data
   });

package/dist/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _NavbarPreview = _interopRequireDefault(require("../../PreviewComponents/NavbarPreview/NavbarPreview"));
+
+var _Buttons = _interopRequireDefault(require("../../Buttons/Buttons/Buttons"));
+
+var _templateObject;
+
+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 SectionedPreview = function SectionedPreview() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    label: 'Open Configurator',
+    size: "md",
+    variant: "primary",
+    buttonClicked: function buttonClicked() {
+      setShowModal(true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showModal,
+    closeModal: function closeModal() {
+      return setShowModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_NavbarPreview.default, null)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+var _default = SectionedPreview;
+exports.default = _default;

package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js

@@ -23,8 +23,24 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _AddSong = _interopRequireDefault(require("../../Forms/AddSong/AddSong"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _MusicAlbumPreview = _interopRequireDefault(require("../../PreviewComponents/MusicAlbumPreview/MusicAlbumPreview"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
+var _constatnts = require("../../Pages/ViewWorld/constatnts");
+
+var _styling = _interopRequireDefault(require("../../styling.json"));
+
 var _templateObject;
 
 var _excluded = ["album", "cardBackgroundColor", "songTitleColor"];
@@ -37,6 +53,10 @@ var listControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 var cardControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
@@ -55,19 +75,61 @@ var ViewAlbum = function ViewAlbum(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    album: album
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    console.log('context changed');
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      album: album
+    }, values)));
+  };
 
-      default:
-        break;
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      id: 'styling'
+    }]
+  }];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var onAddSong = function onAddSong(song) {
@@ -80,7 +142,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Album",
+    listTitle: props.title || "My Album",
     data: album,
     cardStyle: "card-style-7",
     type: "flat",
@@ -90,14 +152,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     iconClicked: onIconClicked,
     listControls: listControls,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: songTitleColor,
-      controlsStyles: {
-        iconColor: 'black'
-      }
-    }
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -109,15 +164,76 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddSong.default, {
     saveHandler: onAddSong,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
-  })));
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      localStorage.removeItem('formStyles');
+      setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Sections.default, {
+    sections: sections,
+    backgroundColor: 'white',
+    sectionHeaderStyles: {
+      titleColor: 'white',
+      headerBackground: 'transparent'
+    },
+    customCardStyles: {
+      cardPadding: 6,
+      cardTitleFontSize: 15,
+      cardBackgroundColor: '#2c2c2c',
+      cardTitleColor: 'white',
+      onHoverBackgroundColor: '#555555',
+      controlsStyles: {
+        showOnHover: true
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Music Album Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_MusicAlbumPreview.default, {
+    componentProps: {
+      album: album,
+      title: props.title || "My Album",
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    right: /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+      widgetType: "music player",
+      widgetProps: {
+        playlist: album,
+        currentSong: 1
+      }
+    }),
+    left: /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+      widgetType: "spaces-list",
+      widgetProps: {
+        listTitle: 'Your Spaces',
+        type: 'sectioned',
+        spaces: _constatnts.SPACES,
+        cardStyle: 'card-style-3',
+        cardClicked: function cardClicked() {
+          return alert('clicked');
+        },
+        headerStyles: _styling.default.widgetContainer.header,
+        sectionHeaderStyles: _styling.default.widgetContainer.body.sectionHeaderStyles,
+        customCardStyles: _styling.default.widgetContainer.body.customCardStyles
+      }
+    }),
+    center: centerContext,
+    id: "community"
+  })))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbum.defaultProps = {
-  cardBackgroundColor: 'white'
-};
+ViewAlbum.defaultProps = {};
 var _default = ViewAlbum;
 exports.default = _default;

package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js

@@ -23,11 +23,19 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _CreateMusicAlbum = _interopRequireDefault(require("../../Forms/CreateMusicAlbum/CreateMusicAlbum"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _MusicAlbumsPreview = _interopRequireDefault(require("../../PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview"));
+
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _templateObject;
 
-var _excluded = ["albums", "cardBackgroundColor", "albumTitleColor", "descColor"];
+var _excluded = ["albums", "albumTitleColor", "descColor"];
 
 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); }
 
@@ -42,46 +50,58 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      cardBackgroundColor = _ref.cardBackgroundColor,
       albumTitleColor = _ref.albumTitleColor,
       descColor = _ref.descColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var cardStyles = {
-    darkOnHover: true,
-    cardBackgroundColor: cardBackgroundColor,
-    cardTitleColor: albumTitleColor,
-    descColor: descColor,
-    controlsStyles: {
-      showOnHover: true,
-      position: 'center',
-      iconBackground: "#272727",
-      dropdownBackground: "#272727",
-      dropdownFontColor: "white",
-      dropdownItemHoverColor: "#414141",
-      iconBackgroundHover: "#414141",
-      iconBorderRadius: 100,
-      iconSize: 25,
-      iconsGap: 10,
-      iconColor: 'white',
-      containerPadding: 20
-    }
-  };
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var tabs = [{
+    title: 'New',
+    component: /*#__PURE__*/_react.default.createElement(_MusicAlbumsPreview.default, {
+      componentProps: {
+        albums: albums,
+        title: props.title || 'Music Albums'
+      }
+    })
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+        title: "Music Albums Config",
+        tabs: tabs
+      })
+    }]
+  }];
+
   var onHeaderIconClicked = function onHeaderIconClicked(action) {
     switch (action) {
       case 'add':
         setShowModal(true);
         break;
 
+      case 'config':
+        setShowConfigModal(true);
+        break;
+
       default:
         break;
     }
@@ -101,18 +121,14 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: props.title,
+    galleryTitle: props.title || 'Music Albums',
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -124,15 +140,35 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateMusicAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Sections.default, {
+    sections: sections,
+    backgroundColor: 'white',
+    sectionHeaderStyles: {
+      titleColor: 'white',
+      headerBackground: 'transparent'
+    },
+    customCardStyles: {
+      cardPadding: 6,
+      cardTitleFontSize: 15,
+      cardBackgroundColor: '#2c2c2c',
+      cardTitleColor: 'white',
+      onHoverBackgroundColor: '#555555'
+    }
   })));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbums.defaultProps = {
-  cardBackgroundColor: 'white'
-};
+ViewAlbums.defaultProps = {};
 var _default = ViewAlbums;
 exports.default = _default;

package/dist/stories/Navbar/Navbar.js

@@ -25,21 +25,13 @@ var _CustomAutoComplete = _interopRequireDefault(require("../Common Inputs/Custo
 
 var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
 
-var _homeSvgrepoCom = _interopRequireDefault(require("../assets/home-svgrepo-com.svg"));
+var _ai = require("react-icons/ai");
 
-var _compassSvgrepoCom = _interopRequireDefault(require("../assets/compass-svgrepo-com.svg"));
+var _md = require("react-icons/md");
 
-var _addSvgrepoCom = _interopRequireDefault(require("../assets/add-svgrepo-com.svg"));
+var _bi = require("react-icons/bi");
 
-var _basketSvgrepoCom = _interopRequireDefault(require("../assets/basket-svgrepo-com.svg"));
-
-var _bellSvgrepoCom = _interopRequireDefault(require("../assets/bell-svgrepo-com.svg"));
-
-var _medalSvgrepoCom = _interopRequireDefault(require("../assets/medal-svgrepo-com.svg"));
-
-var _settingsSvgrepoCom = _interopRequireDefault(require("../assets/settings-svgrepo-com.svg"));
-
-var _searchSvgrepoCom = _interopRequireDefault(require("../assets/search-svgrepo-com.svg"));
+var _io = require("react-icons/io5");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
@@ -132,18 +124,12 @@ var Navbar = function Navbar(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(NavBar, {
     color: navbarColor
-  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillHome, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _homeSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_md.MdAddBox, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _addSvgrepoCom.default,
-    size: iconSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '200px'
@@ -153,27 +139,17 @@ var Navbar = function Navbar(_ref) {
     styles: {
       color: 'blue'
     }
-  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillCompass, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _compassSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_bi.BiMedal, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _medalSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_io.IoBasketSharp, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _basketSvgrepoCom.default,
-    size: iconSize
-  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _searchSvgrepoCom.default,
-    size: iconSize
+  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineSearch, {
+    color: iconBackgroundColor
   }), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: function onSubmit(values) {
@@ -223,18 +199,12 @@ var Navbar = function Navbar(_ref) {
       }
     },
     menuIsOpen: menuOpen
-  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillSetting, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _settingsSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillBell, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _bellSvgrepoCom.default,
-    size: iconSize
   }))))));
 };
 
@@ -249,7 +219,7 @@ var NavBar = _styledComponents.default.div(_templateObject3 || (_templateObject3
 });
 
 var UniverseContainer = (0, _styledComponents.default)('div')({
-  width: '346px',
+  width: '100%',
   height: '72px',
   display: 'flex',
   'align-items': 'center',
@@ -257,7 +227,7 @@ var UniverseContainer = (0, _styledComponents.default)('div')({
   'justify-content': 'flex-start'
 });
 
-var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: ", ";\n"])), function (props) {
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  \n  \n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n\n  & svg {\n    width: ", ";\n  };\n  height: ", ";\n  fill: ", ";\n"])), function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';
 }, function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';

package/dist/stories/Pages/Chat/Chat.js

@@ -81,7 +81,19 @@ var Chat = function Chat(_ref) {
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_Chat.default, {
     data: data,
-    users: users
+    users: users,
+    title: 'Chat',
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#00ADC4',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      cardTitleColor: '#00ADC4'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js

@@ -88,7 +88,25 @@ var DetailedForm = function DetailedForm(props) {
   }, /*#__PURE__*/_react.default.createElement(_DetailedForm.default, {
     userName: "User Name",
     userImg: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
-    questions: questions
+    questions: questions,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        dropdownBackground: 'black',
+        dropdownFontColor: 'white',
+        dropdownItemHoverColor: '#FE1744'
+      }
+    },
+    userHeaderStyles: {
+      cardBackgroundColor: '#FE1744',
+      cardImageRadius: "100",
+      cardTitleColor: 'white'
+    },
+    customCardStyles: {
+      cardPadding: 10
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/FillForm/FillForm.js

@@ -92,9 +92,15 @@ var FillForm = function FillForm(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_FillForm.default, {
+    formTitle: "Community Form",
     sections: sections,
     saveBtnText: 'Submit',
-    cancelBtnText: "Cancel"
+    cancelBtnText: "Cancel",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };