@mohamed-karawia/library 0.1.13 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/stories/Chat/Chat.js +5 -26
  2. package/dist/stories/Common Inputs/EditorComponent/EditorComponent.js +4 -2
  3. package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +1 -1
  4. package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +2 -12
  5. package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +4 -19
  6. package/dist/stories/Events/EventsList/EventsList.js +2 -19
  7. package/dist/stories/Library/Folders/Folders.js +3 -9
  8. package/dist/stories/Library/Notes/Notes.js +0 -9
  9. package/dist/stories/Library/ViewNote/ViewNote.js +7 -10
  10. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +1 -8
  11. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +3 -6
  12. package/dist/stories/Navbar/Navbar.js +14 -44
  13. package/dist/stories/Pages/Chat/Chat.js +13 -1
  14. package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +11 -1
  15. package/dist/stories/Pages/Enrollment/Forms/Forms.js +26 -1
  16. package/dist/stories/Pages/Events/Events/Events.js +19 -1
  17. package/dist/stories/Pages/Library/Folders/Library.js +11 -1
  18. package/dist/stories/Pages/Library/Notes/Notes.js +11 -0
  19. package/dist/stories/Pages/Music/MusicAlbum/Music.js +5 -0
  20. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +43 -1
  21. package/dist/stories/Pages/Photos/Album/Album.js +7 -1
  22. package/dist/stories/Pages/Photos/Albums/Albums.js +34 -1
  23. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +0 -8
  24. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +3 -36
  25. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +7 -3
  26. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +7 -1
  27. package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +3 -2
  28. package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +27 -12
  29. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  30. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +8 -6
  31. package/dist/stories/Sections/Sections.js +61 -0
  32. package/dist/stories/helpers/util.js +13 -7
  33. package/package.json +2 -2
  34. package/src/stories/Chat/Chat.jsx +3 -25
  35. package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx +3 -3
  36. package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +1 -0
  37. package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +1 -10
  38. package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +2 -16
  39. package/src/stories/Events/EventsList/EventsList.jsx +1 -17
  40. package/src/stories/Library/Folders/Folders.jsx +1 -7
  41. package/src/stories/Library/Notes/Notes.jsx +0 -9
  42. package/src/stories/Library/ViewNote/ViewNote.jsx +1 -12
  43. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +0 -7
  44. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +1 -4
  45. package/src/stories/Navbar/Navbar.jsx +50 -48
  46. package/src/stories/Pages/Chat/Chat.jsx +17 -4
  47. package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +11 -1
  48. package/src/stories/Pages/Enrollment/Forms/Forms.jsx +27 -1
  49. package/src/stories/Pages/Events/Events/Events.jsx +18 -0
  50. package/src/stories/Pages/Library/Folders/Library.jsx +13 -1
  51. package/src/stories/Pages/Library/Notes/Notes.jsx +30 -18
  52. package/src/stories/Pages/Music/MusicAlbum/Music.jsx +9 -3
  53. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +38 -24
  54. package/src/stories/Pages/Photos/Album/Album.jsx +7 -1
  55. package/src/stories/Pages/Photos/Albums/Albums.jsx +22 -20
  56. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +0 -8
  57. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +1 -35
  58. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +8 -4
  59. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +5 -0
  60. package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +5 -2
  61. package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +14 -8
  62. package/src/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  63. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +17 -6
  64. package/src/stories/Sections/Sections.jsx +53 -0
  65. package/src/stories/helpers/util.js +10 -6
@@ -49,6 +49,7 @@ const AddQuestion = (props) => {
49
49
  }
50
50
 
51
51
  const Container = styled.div`
52
+ width: 100%;
52
53
  padding: 10px;
53
54
  background-color: 'white';
54
55
  display: flex;
@@ -34,19 +34,10 @@ const DetailedForm = ({
34
34
  data={questions}
35
35
  type='flat'
36
36
  cardStyle='card-style-3'
37
- headerStyles={{
38
- padding: 10,
39
- headerBackground: '#FE1744',
40
- titleColor: '#ffff',
41
- controlsStyles: {
42
- dropdownBackground: 'black',
43
- dropdownFontColor: 'white',
44
- dropdownItemHoverColor: '#FE1744'
45
- },
46
- }}
47
37
  customCardStyles={{
48
38
  cardPadding: 10
49
39
  }}
40
+ {...props}
50
41
  />
51
42
  <Buttons>
52
43
  <Accept onClick={onAccept}>Accept</Accept>
@@ -8,25 +8,11 @@ const ViewForms = ({
8
8
  }) => {
9
9
  return (
10
10
  <List
11
- listTitle="Submitted Form"
11
+ listTitle="Submitted Forms"
12
12
  data={data}
13
13
  cardStyle="card-style-9"
14
14
  type="sectioned"
15
- sectionHeaderStyles={{
16
- cardTitleColor: 'white',
17
- cardBackgroundColor: 'black',
18
- cardPadding: 10
19
- }}
20
- headerStyles={{
21
- padding: 10,
22
- headerBackground: '#FE1744',
23
- titleColor: '#ffff',
24
- controlsStyles: {
25
- dropdownBackground: 'black',
26
- dropdownFontColor: 'white',
27
- dropdownItemHoverColor: '#FE1744'
28
- },
29
- }}
15
+ {...props}
30
16
  />
31
17
  )
32
18
  }
@@ -60,28 +60,12 @@ const EventsList = ({
60
60
  data={events}
61
61
  type='flat'
62
62
  cardStyle="card-style-11"
63
- headerStyles={{
64
- padding: 10,
65
- headerBackground: '#FE1744',
66
- titleColor: '#ffff',
67
- controlsStyles: {
68
- iconSize: 25
69
- }
70
- }}
71
- customCardStyles={{
72
- iconColor,
73
- cardTitleFontSize,
74
- cardTitleColor,
75
- cardPadding,
76
- controlsStyles: {
77
- iconColor: '#FE1744'
78
- }
79
- }}
80
63
  listControls={listControls}
81
64
  cardControls={cardControls}
82
65
  iconClicked={onIconClicked}
83
66
  cardClicked={cardClicked}
84
67
  cardIconClicked={cardIconClicked}
68
+ {...props}
85
69
  />
86
70
  <Modal
87
71
  modalIsOpen={showModal}
@@ -23,7 +23,6 @@ const Folders = ({
23
23
  rowGap,
24
24
  cardClicked,
25
25
  iconColor,
26
- headerStyles,
27
26
  ...props
28
27
  }) => {
29
28
  const [showModal, setShowModal] = useState(false);
@@ -58,7 +57,6 @@ const Folders = ({
58
57
  data={folders}
59
58
  type="flat"
60
59
  cardStyle="card-style-10"
61
- headerStyles={headerStyles}
62
60
  columnsNumber={columnsNumber}
63
61
  galleryColumnGap={columnGap}
64
62
  galleryRowGap={rowGap}
@@ -68,10 +66,6 @@ const Folders = ({
68
66
  cardIconClicked={cardIconClicked}
69
67
  cardControls={cardControls}
70
68
  rowsHeight={140}
71
- customCardStyles={{
72
- cardPadding: 10,
73
- iconColor
74
- }}
75
69
  {...props} />
76
70
  <Modal
77
71
  modalIsOpen={showModal}
@@ -91,7 +85,7 @@ const Folders = ({
91
85
  }
92
86
 
93
87
  const Container = styled.div`
94
-
88
+ background-color: transparent;
95
89
  `
96
90
 
97
91
  Folders.defaultProps = {};
@@ -60,15 +60,6 @@ const Notes = ({
60
60
  data={notes}
61
61
  type='flat'
62
62
  cardStyle="card-style-11"
63
- customCardStyles={{
64
- iconColor,
65
- cardTitleFontSize,
66
- cardTitleColor,
67
- cardPadding,
68
- controlsStyles: {
69
- iconColor: '#FE1744'
70
- }
71
- }}
72
63
  listControls={listControls}
73
64
  cardControls={cardControls}
74
65
  iconClicked={onIconClicked}
@@ -2,19 +2,8 @@ import React from 'react';
2
2
 
3
3
  import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
4
4
 
5
- const ViewNote = () => {
5
+ const ViewNote = ({data, ...props}) => {
6
6
 
7
- const data = {
8
- blocks: [
9
- {
10
- type: "header",
11
- data: {
12
- text: "New Note",
13
- level: 1
14
- }
15
- }
16
- ]
17
- }
18
7
 
19
8
  return (
20
9
  <Editor data={data}/>
@@ -59,13 +59,6 @@ const ViewAlbum = ({
59
59
  listControls={listControls}
60
60
  cardControls={cardControls}
61
61
  cardIconClicked={cardIconClicked}
62
- customCardStyles={{
63
- cardBackgroundColor: cardBackgroundColor,
64
- cardTitleColor: songTitleColor,
65
- controlsStyles: {
66
- iconColor: 'black'
67
- }
68
- }}
69
62
  {...props}
70
63
  />
71
64
  <Modal
@@ -21,14 +21,12 @@ const galleryControls = [
21
21
 
22
22
  const ViewAlbums = ({
23
23
  albums,
24
- cardBackgroundColor,
25
24
  albumTitleColor,
26
25
  descColor,
27
26
  ...props
28
27
  }) => {
29
28
  const cardStyles = {
30
29
  darkOnHover: true,
31
- cardBackgroundColor: cardBackgroundColor,
32
30
  cardTitleColor: albumTitleColor,
33
31
  descColor,
34
32
  controlsStyles: {
@@ -87,7 +85,6 @@ const ViewAlbums = ({
87
85
  iconClicked={onHeaderIconClicked}
88
86
  cardControls={cardControls}
89
87
  cardIconClicked={cardIconClicked}
90
- customCardStyles={cardStyles}
91
88
  {...props}
92
89
  />
93
90
  <Modal
@@ -106,7 +103,7 @@ const ViewAlbums = ({
106
103
  )
107
104
  }
108
105
  const Container = styled.div`
109
-
106
+ width: 100%;
110
107
  `
111
108
 
112
109
  ViewAlbums.defaultProps = {
@@ -4,14 +4,11 @@ import Select from 'react-select';
4
4
  import styled from 'styled-components';
5
5
  import CustomAutoComplete from '../Common Inputs/CustomAutoComplete/CustomAutoComplete';
6
6
  import BaseMaterial from '../Containers/BaseMaterial';
7
- import home from '../assets/home-svgrepo-com.svg';
8
- import discover from '../assets/compass-svgrepo-com.svg';
9
- import add from '../assets/add-svgrepo-com.svg';
10
- import basket from '../assets/basket-svgrepo-com.svg';
11
- import bell from '../assets/bell-svgrepo-com.svg';
12
- import medal from '../assets/medal-svgrepo-com.svg';
13
- import settings from '../assets/settings-svgrepo-com.svg';
14
- import search from '../assets/search-svgrepo-com.svg';
7
+
8
+ import { AiFillHome, AiFillCompass, AiOutlineSearch, AiFillSetting, AiFillBell } from "react-icons/ai";
9
+ import { MdAddBox } from "react-icons/md";
10
+ import { BiMedal } from "react-icons/bi";
11
+ import { IoBasketSharp } from "react-icons/io5";
15
12
 
16
13
  /* icon size can sm md lg @sm by default*/
17
14
  /* icon background color @transparent by default*/
@@ -92,30 +89,30 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
92
89
  <BaseMaterial>
93
90
  <NavBar color={navbarColor}>
94
91
  <UniverseContainer>
95
- <IconContainer size={iconSize} color={iconBackgroundColor}>
96
- <Icon src={home} size={iconSize} />
92
+ <IconContainer >
93
+ <AiFillHome size={iconSize} color={iconBackgroundColor} />
97
94
  </IconContainer>
98
- <IconContainer size={iconSize} color={iconBackgroundColor}>
99
- <Icon src={add} size={iconSize} />
95
+ <IconContainer >
96
+ <MdAddBox size={iconSize} color={iconBackgroundColor} />
100
97
  </IconContainer>
101
98
  <div style={{ width: '200px' }}>
102
99
  <Select options={options} styles={{ color: 'blue' }} />
103
100
  </div>
104
101
  </UniverseContainer>
105
102
  <DiscoverContainer>
106
- <IconContainer size={iconSize} color={iconBackgroundColor}>
107
- <Icon src={discover} size={iconSize} />
103
+ <IconContainer>
104
+ <AiFillCompass size={iconSize} color={iconBackgroundColor} />
108
105
  </IconContainer>
109
- <IconContainer size={iconSize} color={iconBackgroundColor}>
110
- <Icon src={medal} size={iconSize} />
106
+ <IconContainer>
107
+ <BiMedal size={iconSize} color={iconBackgroundColor}/>
111
108
  </IconContainer>
112
- <IconContainer size={iconSize} color={iconBackgroundColor}>
113
- <Icon src={basket} size={iconSize} />
109
+ <IconContainer>
110
+ <IoBasketSharp size={iconSize} color={iconBackgroundColor}/>
114
111
  </IconContainer>
115
112
  </DiscoverContainer>
116
113
  <SearchContainer>
117
114
  <SearchBar>
118
- <Icon src={search} size={iconSize} />
115
+ <AiOutlineSearch color={iconBackgroundColor} />
119
116
 
120
117
  <Formik
121
118
  initialValues={initialValues}
@@ -171,11 +168,11 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
171
168
  <UserName>illo</UserName>
172
169
  </ProfileContainer>
173
170
  <SettingsContainer>
174
- <IconContainer size={iconSize} color={iconBackgroundColor}>
175
- <Icon src={settings} size={iconSize} />
171
+ <IconContainer>
172
+ <AiFillSetting size={iconSize} color={iconBackgroundColor}/>
176
173
  </IconContainer>
177
- <IconContainer size={iconSize} color={iconBackgroundColor}>
178
- <Icon src={bell} size={iconSize} />
174
+ <IconContainer>
175
+ <AiFillBell size={iconSize} color={iconBackgroundColor}/>
179
176
  </IconContainer>
180
177
  </SettingsContainer>
181
178
  </ProfileBar>
@@ -218,22 +215,8 @@ const UniverseContainer = styled('div')({
218
215
 
219
216
  const IconContainer = styled.div`
220
217
  flex: 0 0 auto;
221
- width: ${(props) =>
222
- props.size === 'sm'
223
- ? '30px'
224
- : props.size === 'md'
225
- ? '35px'
226
- : props.size === 'lg'
227
- ? '40px'
228
- : '30px'};
229
- height: ${(props) =>
230
- props.size === 'sm'
231
- ? '30px'
232
- : props.size === 'md'
233
- ? '35px'
234
- : props.size === 'lg'
235
- ? '40px'
236
- : '30px'};
218
+
219
+
237
220
  display: flex;
238
221
  align-items: center;
239
222
  margin-left: 0px;
@@ -241,7 +224,26 @@ const IconContainer = styled.div`
241
224
  border-radius: 20px;
242
225
  flex-direction: row;
243
226
  justify-content: center;
244
- background-color: ${(props) => props.color || 'transparent'};
227
+
228
+ & svg {
229
+ width: ${(props) =>
230
+ props.size === 'sm'
231
+ ? '30px'
232
+ : props.size === 'md'
233
+ ? '35px'
234
+ : props.size === 'lg'
235
+ ? '40px'
236
+ : '30px'};
237
+ };
238
+ height: ${(props) =>
239
+ props.size === 'sm'
240
+ ? '30px'
241
+ : props.size === 'md'
242
+ ? '35px'
243
+ : props.size === 'lg'
244
+ ? '40px'
245
+ : '30px'};
246
+ fill: ${(props) => props.color || 'transparent'};
245
247
  `;
246
248
 
247
249
  const Icon = styled.img`
@@ -249,18 +251,18 @@ const Icon = styled.img`
249
251
  props.size === 'sm'
250
252
  ? '20px'
251
253
  : props.size === 'md'
252
- ? '25px'
253
- : props.size === 'lg'
254
- ? '30px'
255
- : '20px'};
254
+ ? '25px'
255
+ : props.size === 'lg'
256
+ ? '30px'
257
+ : '20px'};
256
258
  height: ${(props) =>
257
259
  props.size === 'sm'
258
260
  ? '20px'
259
261
  : props.size === 'md'
260
- ? '25px'
261
- : props.size === 'lg'
262
- ? '30px'
263
- : '20px'};
262
+ ? '25px'
263
+ : props.size === 'lg'
264
+ ? '30px'
265
+ : '20px'};
264
266
  `;
265
267
 
266
268
  const DiscoverContainer = styled('div')({
@@ -67,13 +67,26 @@ const Chat = ({
67
67
  discription="Lorem ipsum dolor sit amet consectetur."
68
68
  hideTitle
69
69
  >
70
- <ChatSpace data={data} users={users} />
71
-
70
+ <ChatSpace
71
+ data={data}
72
+ users={users}
73
+ title={'Chat'}
74
+ headerStyles={{
75
+ padding: 10,
76
+ headerBackground: '#00ADC4',
77
+ titleColor: '#ffff',
78
+ controlsStyles: {
79
+ iconSize: 25
80
+ }
81
+ }}
82
+ customCardStyles={{
83
+ cardTitleColor: '#00ADC4',
84
+ }}
85
+ />
72
86
  </SpaceContainer>
73
-
74
87
  </Center>
75
88
  <Right>
76
-
89
+
77
90
  </Right>
78
91
  </Body>
79
92
  </BaseMaterial>
@@ -86,7 +86,17 @@ const DetailedForm = (props) => {
86
86
  <Detailed
87
87
  userName="User Name"
88
88
  userImg="https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png"
89
- questions={questions} />
89
+ questions={questions}
90
+ headerStyles={{
91
+ padding: 10,
92
+ headerBackground: '#FE1744',
93
+ titleColor: '#ffff',
94
+ controlsStyles: {
95
+ dropdownBackground: 'black',
96
+ dropdownFontColor: 'white',
97
+ dropdownItemHoverColor: '#FE1744'
98
+ },
99
+ }} />
90
100
 
91
101
  </SpaceContainer>
92
102
 
@@ -69,6 +69,14 @@ const Forms = (props) => {
69
69
  },
70
70
  ])
71
71
 
72
+ const cardClicked = (index, cardProps) => {
73
+ console.log(cardProps)
74
+ }
75
+
76
+ const onAction = (action, index) => {
77
+ console.log(action)
78
+ }
79
+
72
80
  return (
73
81
  <BaseMaterial {...worldStyles.containerStyle} {...props}>
74
82
  <Navbar />
@@ -113,7 +121,25 @@ const Forms = (props) => {
113
121
  hideTitle
114
122
  >
115
123
  <ViewForms
116
- data={forms} />
124
+ data={forms}
125
+ cardClicked={cardClicked}
126
+ cardIconClicked={onAction}
127
+ headerStyles={{
128
+ padding: 10,
129
+ headerBackground: '#FE1744',
130
+ titleColor: '#ffff',
131
+ controlsStyles: {
132
+ dropdownBackground: 'black',
133
+ dropdownFontColor: 'white',
134
+ dropdownItemHoverColor: '#FE1744'
135
+ },
136
+ }}
137
+ sectionHeaderStyles={{
138
+ cardTitleColor: 'white',
139
+ cardBackgroundColor: 'black',
140
+ cardPadding: 10
141
+ }}
142
+ />
117
143
 
118
144
  </SpaceContainer>
119
145
 
@@ -45,6 +45,10 @@ const Events = (props) => {
45
45
  setEvents(deleteFromArrayByIndex(events, index))
46
46
  }
47
47
 
48
+ const cardClicked = (index, cardProps) => {
49
+ console.log(cardProps)
50
+ }
51
+
48
52
  return (
49
53
  <BaseMaterial {...worldStyles.containerStyle} {...props}>
50
54
  <Navbar />
@@ -94,6 +98,20 @@ const Events = (props) => {
94
98
  cardTitleFontSize={15}
95
99
  onAddEvent={onAddEvent}
96
100
  cardIconClicked={cardIconClicked}
101
+ cardClicked={cardClicked}
102
+ headerStyles={{
103
+ padding: 10,
104
+ headerBackground: '#FE1744',
105
+ titleColor: '#ffff',
106
+ controlsStyles: {
107
+ iconSize: 25
108
+ }
109
+ }}
110
+ customCardStyles={{
111
+ controlsStyles: {
112
+ iconColor: '#FE1744'
113
+ }
114
+ }}
97
115
  />
98
116
 
99
117
  </SpaceContainer>
@@ -46,6 +46,10 @@ const Library = (props) => {
46
46
  setFolders(deleteFromArrayByIndex(folders, index))
47
47
  }
48
48
 
49
+ const cardClicked = (index, cardProps) => {
50
+ console.log(cardProps)
51
+ }
52
+
49
53
  return (
50
54
  <BaseMaterial {...worldStyles.containerStyle} {...props}>
51
55
  <Navbar />
@@ -80,6 +84,7 @@ const Library = (props) => {
80
84
  showOnHover: true,
81
85
  }
82
86
  },
87
+ cardClicked
83
88
  }}
84
89
  />
85
90
  </Left>
@@ -95,6 +100,7 @@ const Library = (props) => {
95
100
  columnsNumber={3}
96
101
  onAddFolder={onAddFolder}
97
102
  cardIconClicked={cardIconClicked}
103
+ cardClicked={cardClicked}
98
104
  headerStyles={{
99
105
  padding: 10,
100
106
  headerBackground: '#ff2d2d',
@@ -102,7 +108,13 @@ const Library = (props) => {
102
108
  controlsStyles: {
103
109
  iconSize: 25
104
110
  }
105
- }} />
111
+ }}
112
+ customCardStyles={{
113
+ cardPadding: 10,
114
+ iconColor: '#ff2d2d'
115
+ }}
116
+
117
+ />
106
118
 
107
119
  </SpaceContainer>
108
120
 
@@ -20,11 +20,11 @@ import { SPACES } from '../../ViewWorld/constatnts';
20
20
  const Notes = (props) => {
21
21
 
22
22
  const [notes, setNotes] = useState([
23
- {title: 'Study notes', date: '15/11/2020'},
24
- {title: 'Music notes', date: '14/12/2020'},
25
- {title: 'Workout notes', date: '5/8/2021'},
26
- {title: 'Gaming notes', date: '14/4/2023'},
27
- {title: 'Working notes', date: '5/6/2021'},
23
+ { title: 'Study notes', date: '15/11/2020' },
24
+ { title: 'Music notes', date: '14/12/2020' },
25
+ { title: 'Workout notes', date: '5/8/2021' },
26
+ { title: 'Gaming notes', date: '14/4/2023' },
27
+ { title: 'Working notes', date: '5/6/2021' },
28
28
  ])
29
29
 
30
30
  const cardIconClicked = (action, index) => {
@@ -32,7 +32,7 @@ const Notes = (props) => {
32
32
  case 'delete':
33
33
  deleteNote(index)
34
34
  break;
35
-
35
+
36
36
  default:
37
37
  break;
38
38
  }
@@ -45,7 +45,11 @@ const Notes = (props) => {
45
45
  const deleteNote = (index) => {
46
46
  setNotes(deleteFromArrayByIndex(notes, index))
47
47
  }
48
-
48
+
49
+ const cardClicked = (index, cardProps) => {
50
+ console.log(cardProps)
51
+ }
52
+
49
53
  return (
50
54
  <BaseMaterial {...worldStyles.containerStyle} {...props}>
51
55
  <Navbar />
@@ -90,17 +94,25 @@ const Notes = (props) => {
90
94
  hideTitle
91
95
  >
92
96
  <ViewNotes
93
- onAddNote={onAddNote}
94
- cardIconClicked={cardIconClicked}
95
- notes={notes}
96
- headerStyles={{
97
- padding: 10,
98
- headerBackground: '#FE1744',
99
- titleColor: '#ffff',
100
- controlsStyles: {
101
- iconSize: 25
102
- }
103
- }} />
97
+ onAddNote={onAddNote}
98
+ cardIconClicked={cardIconClicked}
99
+ notes={notes}
100
+ cardClicked={cardClicked}
101
+ headerStyles={{
102
+ padding: 10,
103
+ headerBackground: '#FE1744',
104
+ titleColor: '#ffff',
105
+ controlsStyles: {
106
+ iconSize: 25
107
+ }
108
+ }}
109
+ customCardStyles={{
110
+ iconColor: '#FE1744',
111
+ controlsStyles: {
112
+ iconColor: '#FE1744'
113
+ }
114
+ }}
115
+ />
104
116
 
105
117
  </SpaceContainer>
106
118
 
@@ -66,7 +66,7 @@ const Music = (props) => {
66
66
  case 'delete':
67
67
  deleteSonngFromAlbum(index)
68
68
  break;
69
-
69
+
70
70
  default:
71
71
  break;
72
72
  }
@@ -129,9 +129,15 @@ const Music = (props) => {
129
129
  headerBackground: 'black',
130
130
  titleColor: '#ffff',
131
131
  controlsStyles: {
132
- iconSize: 25
132
+ iconSize: 25
133
+ }
134
+ }}
135
+ customCardStyles={{
136
+ controlsStyles: {
137
+ iconColor: 'blue'
133
138
  }
134
- }} />
139
+ }}
140
+ />
135
141
  </SpaceContainer>
136
142
 
137
143
  </Center>