fix(modal): added modal icon color class name

Se-Gl · Aug 7, 2022 · a756fe8 · a756fe8
1 parent 2189f0d
commit a756fe8
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,8 @@
 ## [7.0.8](https://github.com/Se-Gl/codn/compare/v7.0.7...v7.0.8) (2022-08-07)
 
-
 ### Bug Fixes
 
-* **modal:** deleted max modal size ([e945cf2](https://github.com/Se-Gl/codn/commit/e945cf2218cf37cf2db0be988f1df85e3e8c8181))
+- **modal:** deleted max modal size ([e945cf2](https://github.com/Se-Gl/codn/commit/e945cf2218cf37cf2db0be988f1df85e3e8c8181))
 
 ## [7.0.7](https://github.com/Se-Gl/codn/compare/v7.0.6...v7.0.7) (2022-08-07)
 

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/images/badges/badge-branches.svg b/images/badges/badge-branches.svg
diff --git a/src/components/Modal/CloseIcon.js b/src/components/Modal/CloseIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import '../../../dist/style/green.css'
 
-function CloseIcon({ width = '20', height = '20' }) {
+function CloseIcon({ width = '20', height = '20', iconColor = 'fill-gray' }) {
   return (
     <svg
       className='cursor-pointer'
@@ -11,7 +11,7 @@ function CloseIcon({ width = '20', height = '20' }) {
       fill='none'
       viewBox='0 0 20 20'>
       <path
-        className='fill-gray'
+        className={iconColor}
         d='M5.187 4.01A.833.833 0 004.01 5.187L8.822 10l-4.814 4.813a.835.835 0 101.179 1.178L10 11.178l4.813 4.813a.833.833 0 001.178-1.178L11.178 10l4.813-4.812a.833.833 0 00-1.178-1.179L10 8.822 5.187 4.008v.001z'></path>
     </svg>
   )

diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -9,7 +9,8 @@ export const Modal = ({
   setToggle,
   className,
   backgroundAnimation = 'fade-in animation-duration-500ms animation-forwards',
-  closeIcon = <CloseIcon />,
+  iconColor,
+  closeIcon = <CloseIcon iconColor={iconColor} />,
   modalContentAnimation = 'fade-in animation-duration-500ms animation-forwards',
   useKeyInput = true,
   shadow = true,

diff --git a/src/stories/Modal.stories.js b/src/stories/Modal.stories.js
@@ -18,7 +18,7 @@ export const StoryModal = stories.add('Modal', () => {
 
       {/* Modal */}
       <div className='relative z-2'>
-        <Modal toggle={toggleModal} setToggle={setToggleModal}>
+        <Modal toggle={toggleModal} setToggle={setToggleModal} iconColor='fill-red'>
           <Modal.Header className='sans font-900 text-30px fade-in-left animation-duration-500ms animation-forwards'>
             <h3>👋 Hi, I'm your modal</h3>
           </Modal.Header>