flowbite-svelte 0.12.5 → 0.13.1

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 (69) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/accordions/AccordionItem.svelte +1 -7
  3. package/alerts/BorderAlert.svelte +11 -36
  4. package/avatar/Avatar.svelte +2 -20
  5. package/avatar/Avatar.svelte.d.ts +1 -1
  6. package/badges/BadgeLink.svelte +2 -2
  7. package/badges/BadgeLink.svelte.d.ts +1 -1
  8. package/buttons/Button.svelte +1 -2
  9. package/buttons/GradientOutlineButton.svelte +8 -16
  10. package/cards/Card.svelte +10 -29
  11. package/cards/EcommerceCard.svelte +24 -53
  12. package/cards/EcommerceCard.svelte.d.ts +2 -2
  13. package/cards/InteractiveCard.svelte +14 -51
  14. package/cards/InteractiveCard.svelte.d.ts +2 -2
  15. package/cards/ListCard.svelte +2 -8
  16. package/cards/SignInCard.svelte +18 -65
  17. package/cards/SignInCard.svelte.d.ts +2 -2
  18. package/darkmode/DarkMode.svelte +4 -28
  19. package/dropdowns/DropdownDefault.svelte +5 -24
  20. package/dropdowns/DropdownDefault.svelte.d.ts +2 -2
  21. package/footer/SitemapFooter.svelte +1 -3
  22. package/forms/Checkbox.svelte +2 -16
  23. package/forms/Checkbox.svelte.d.ts +2 -7
  24. package/forms/FloatingLabelInput.svelte +2 -1
  25. package/forms/FloatingLabelInput.svelte.d.ts +3 -2
  26. package/forms/Iconinput.svelte +3 -2
  27. package/forms/Iconinput.svelte.d.ts +3 -2
  28. package/forms/Input.svelte +4 -13
  29. package/forms/Input.svelte.d.ts +2 -1
  30. package/forms/Radio.svelte +2 -30
  31. package/forms/Radio.svelte.d.ts +2 -7
  32. package/forms/Select.svelte +4 -3
  33. package/forms/SingleCheckbox.svelte +4 -11
  34. package/forms/SingleCheckbox.svelte.d.ts +1 -1
  35. package/forms/Textarea.svelte +3 -2
  36. package/forms/Toggle.svelte +5 -4
  37. package/index.d.ts +2 -0
  38. package/index.js +4 -0
  39. package/list-group/List.svelte +1 -3
  40. package/modals/ExtraLargeModal.svelte +42 -99
  41. package/modals/LargeModal.svelte +42 -99
  42. package/modals/MediumModal.svelte +39 -93
  43. package/modals/ModalButton.svelte +10 -19
  44. package/modals/ModalButton.svelte.d.ts +1 -0
  45. package/modals/SignInModal.svelte +22 -94
  46. package/modals/SmallModal.svelte +42 -99
  47. package/navbar/DropdownNavbar.svelte +5 -43
  48. package/navbar/Navbar.svelte +4 -31
  49. package/package.json +4 -2
  50. package/paginations/Next.svelte +1 -11
  51. package/paginations/Pagination.svelte +2 -22
  52. package/paginations/Previous.svelte +1 -11
  53. package/progressbars/Progressbar.svelte +8 -11
  54. package/progressbars/Progressbar.svelte.d.ts +2 -1
  55. package/spinners/Spinner.svelte +4 -22
  56. package/tables/Table.svelte +21 -3
  57. package/tables/Table.svelte.d.ts +12 -16
  58. package/tables/TableDefaultRow.svelte +57 -0
  59. package/tables/TableDefaultRow.svelte.d.ts +17 -0
  60. package/tabs/IconTabs.svelte +2 -10
  61. package/tabs/InteractiveTabHead.svelte +2 -17
  62. package/tabs/InteractiveTabs.svelte +2 -15
  63. package/tabs/UnderlineTabs.svelte +1 -8
  64. package/toasts/Toast.svelte +9 -27
  65. package/toasts/Toast.svelte.d.ts +2 -2
  66. package/tooltips/Tooltip.svelte +1 -9
  67. package/types.d.ts +22 -0
  68. package/utils/generateId.d.ts +1 -0
  69. package/utils/generateId.js +5 -0
package/modals/ExtraLargeModal.svelte CHANGED
@@ -31,159 +31,115 @@ if (textColor === 'blue') {
31
31
  divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
32
32
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
33
33
  h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
34
- buttonClass =
35
- 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
34
+ buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
36
35
  pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
37
- footerClass =
38
- 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
39
- btn2Class =
40
- 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
36
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
37
+ btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
41
38
  }
42
39
  else if (textColor === 'gray') {
43
40
  divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
44
41
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
45
42
  h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
46
- buttonClass =
47
- 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
43
+ buttonClass = 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
48
44
  pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
49
- footerClass =
50
- 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
51
- btn2Class =
52
- 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
45
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
46
+ btn2Class = 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
53
47
  }
54
48
  else if (textColor === 'red') {
55
49
  divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
56
50
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
57
51
  h3Class = 'text-xl font-medium text-red-900 dark:text-white';
58
- buttonClass =
59
- 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
52
+ buttonClass = 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
60
53
  pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
61
- footerClass =
62
- 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
63
- btn2Class =
64
- 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
54
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
55
+ btn2Class = 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
65
56
  }
66
57
  else if (textColor === 'yellow') {
67
58
  divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
68
- headDivClass =
69
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
59
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
70
60
  h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
71
- buttonClass =
72
- 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
61
+ buttonClass = 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
73
62
  pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
74
- footerClass =
75
- 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
76
- btn2Class =
77
- 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
63
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
64
+ btn2Class = 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
78
65
  }
79
66
  else if (textColor === 'green') {
80
67
  divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
81
68
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
82
69
  h3Class = 'text-xl font-medium text-green-900 dark:text-white';
83
- buttonClass =
84
- 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
70
+ buttonClass = 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
85
71
  pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
86
- footerClass =
87
- 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
88
- btn2Class =
89
- 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
72
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
73
+ btn2Class = 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
90
74
  }
91
75
  else if (textColor === 'indigo') {
92
76
  divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
93
- headDivClass =
94
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
77
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
95
78
  h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
96
- buttonClass =
97
- 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
79
+ buttonClass = 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
98
80
  pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
99
- footerClass =
100
- 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
101
- btn2Class =
102
- 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
81
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
82
+ btn2Class = 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
103
83
  }
104
84
  else if (textColor === 'purple') {
105
85
  divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
106
- headDivClass =
107
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
86
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
108
87
  h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
109
- buttonClass =
110
- 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
88
+ buttonClass = 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
111
89
  pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
112
- footerClass =
113
- 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
114
- btn2Class =
115
- 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
90
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
91
+ btn2Class = 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
116
92
  }
117
93
  else if (textColor === 'pink') {
118
94
  divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
119
95
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
120
96
  h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
121
- buttonClass =
122
- 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
97
+ buttonClass = 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
123
98
  pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
124
- footerClass =
125
- 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
126
- btn2Class =
127
- 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
99
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
100
+ btn2Class = 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
128
101
  }
129
102
  else {
130
103
  divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
131
104
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
132
105
  h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
133
- buttonClass =
134
- 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
106
+ buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
135
107
  pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
136
- footerClass =
137
- 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
138
- btn2Class =
139
- 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
108
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
109
+ btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
140
110
  }
141
111
  let button1Class;
142
112
  if (btnColor === 'blue') {
143
- button1Class =
144
- 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
113
+ button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
145
114
  }
146
115
  else if (btnColor === 'gray') {
147
- button1Class =
148
- 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
116
+ button1Class = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
149
117
  }
150
118
  else if (btnColor === 'red') {
151
- button1Class =
152
- 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
119
+ button1Class = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
153
120
  }
154
121
  else if (btnColor === 'yellow') {
155
- button1Class =
156
- 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
122
+ button1Class = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
157
123
  }
158
124
  else if (btnColor === 'green') {
159
- button1Class =
160
- 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
125
+ button1Class = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
161
126
  }
162
127
  else if (btnColor === 'indigo') {
163
- button1Class =
164
- 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
128
+ button1Class = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
165
129
  }
166
130
  else if (btnColor === 'purple') {
167
- button1Class =
168
- 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
131
+ button1Class = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
169
132
  }
170
133
  else if (btnColor === 'pink') {
171
- button1Class =
172
- 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
134
+ button1Class = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
173
135
  }
174
136
  else {
175
- button1Class =
176
- 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
137
+ button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
177
138
  }
178
139
  </script>
179
140
 
180
141
  {#if showModalId === id}
181
- <div
182
- {id}
183
- role="dialog"
184
- aria-modal="true"
185
- class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center"
186
- >
142
+ <div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
187
143
  <div class="relative px-4 w-full max-w-7xl h-full md:h-auto">
188
144
  <!-- Modal content -->
189
145
  <div class={divClass}>
@@ -193,17 +149,7 @@ else {
193
149
  {title}
194
150
  </h3>
195
151
  <button type="button" class={buttonClass} on:click={closeModal}>
196
- <svg
197
- class="w-5 h-5"
198
- fill="currentColor"
199
- viewBox="0 0 20 20"
200
- xmlns="http://www.w3.org/2000/svg"
201
- ><path
202
- fill-rule="evenodd"
203
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
204
- clip-rule="evenodd"
205
- /></svg
206
- >
152
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
207
153
  </button>
208
154
  </div>
209
155
  <!-- Modal body -->
@@ -225,8 +171,5 @@ else {
225
171
  </div>
226
172
  </div>
227
173
 
228
- <div
229
- on:click={closeModal}
230
- class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full"
231
- />
174
+ <div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
232
175
  {/if}
package/modals/LargeModal.svelte CHANGED
@@ -31,160 +31,116 @@ if (textColor === 'blue') {
31
31
  divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
32
32
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
33
33
  h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
34
- buttonClass =
35
- 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
34
+ buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
36
35
  pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
37
- footerClass =
38
- 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
39
- btn2Class =
40
- 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
36
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
37
+ btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
41
38
  }
42
39
  else if (textColor === 'gray') {
43
40
  divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
44
41
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
45
42
  h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
46
- buttonClass =
47
- 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
43
+ buttonClass = 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
48
44
  pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
49
- footerClass =
50
- 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
51
- btn2Class =
52
- 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
45
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
46
+ btn2Class = 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
53
47
  }
54
48
  else if (textColor === 'red') {
55
49
  divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
56
50
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
57
51
  h3Class = 'text-xl font-medium text-red-900 dark:text-white';
58
- buttonClass =
59
- 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
52
+ buttonClass = 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
60
53
  pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
61
- footerClass =
62
- 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
63
- btn2Class =
64
- 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
54
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
55
+ btn2Class = 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
65
56
  }
66
57
  else if (textColor === 'yellow') {
67
58
  divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
68
- headDivClass =
69
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
59
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
70
60
  h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
71
- buttonClass =
72
- 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
61
+ buttonClass = 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
73
62
  pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
74
- footerClass =
75
- 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
76
- btn2Class =
77
- 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
63
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
64
+ btn2Class = 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
78
65
  }
79
66
  else if (textColor === 'green') {
80
67
  divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
81
68
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
82
69
  h3Class = 'text-xl font-medium text-green-900 dark:text-white';
83
- buttonClass =
84
- 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
70
+ buttonClass = 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
85
71
  pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
86
- footerClass =
87
- 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
88
- btn2Class =
89
- 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
72
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
73
+ btn2Class = 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
90
74
  }
91
75
  else if (textColor === 'indigo') {
92
76
  divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
93
- headDivClass =
94
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
77
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
95
78
  h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
96
- buttonClass =
97
- 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
79
+ buttonClass = 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
98
80
  pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
99
- footerClass =
100
- 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
101
- btn2Class =
102
- 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
81
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
82
+ btn2Class = 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
103
83
  }
104
84
  else if (textColor === 'purple') {
105
85
  divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
106
- headDivClass =
107
- 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
86
+ headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
108
87
  h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
109
- buttonClass =
110
- 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
88
+ buttonClass = 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
111
89
  pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
112
- footerClass =
113
- 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
114
- btn2Class =
115
- 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
90
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
91
+ btn2Class = 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
116
92
  }
117
93
  else if (textColor === 'pink') {
118
94
  divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
119
95
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
120
96
  h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
121
- buttonClass =
122
- 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
97
+ buttonClass = 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
123
98
  pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
124
- footerClass =
125
- 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
126
- btn2Class =
127
- 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
99
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
100
+ btn2Class = 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
128
101
  }
129
102
  else {
130
103
  divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
131
104
  headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
132
105
  h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
133
- buttonClass =
134
- 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
106
+ buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
135
107
  pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
136
- footerClass =
137
- 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
138
- btn2Class =
139
- 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
108
+ footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
109
+ btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
140
110
  }
141
111
  let button1Class;
142
112
  if (btnColor === 'blue') {
143
- button1Class =
144
- 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
113
+ button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
145
114
  }
146
115
  else if (btnColor === 'gray') {
147
- button1Class =
148
- 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
116
+ button1Class = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
149
117
  }
150
118
  else if (btnColor === 'red') {
151
- button1Class =
152
- 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
119
+ button1Class = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
153
120
  }
154
121
  else if (btnColor === 'yellow') {
155
- button1Class =
156
- 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
122
+ button1Class = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
157
123
  }
158
124
  else if (btnColor === 'green') {
159
- button1Class =
160
- 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
125
+ button1Class = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
161
126
  }
162
127
  else if (btnColor === 'indigo') {
163
- button1Class =
164
- 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
128
+ button1Class = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
165
129
  }
166
130
  else if (btnColor === 'purple') {
167
- button1Class =
168
- 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
131
+ button1Class = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
169
132
  }
170
133
  else if (btnColor === 'pink') {
171
- button1Class =
172
- 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
134
+ button1Class = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
173
135
  }
174
136
  else {
175
- button1Class =
176
- 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
137
+ button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
177
138
  }
178
139
  </script>
179
140
 
180
141
  {#if showModalId === id}
181
142
  <!-- Large Modal -->
182
- <div
183
- {id}
184
- role="dialog"
185
- aria-modal="true"
186
- class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center"
187
- >
143
+ <div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
188
144
  <div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
189
145
  <!-- Modal content -->
190
146
  <div class={divClass}>
@@ -194,17 +150,7 @@ else {
194
150
  {title}
195
151
  </h3>
196
152
  <button type="button" class={buttonClass} on:click={closeModal}>
197
- <svg
198
- class="w-5 h-5"
199
- fill="currentColor"
200
- viewBox="0 0 20 20"
201
- xmlns="http://www.w3.org/2000/svg"
202
- ><path
203
- fill-rule="evenodd"
204
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
205
- clip-rule="evenodd"
206
- /></svg
207
- >
153
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
208
154
  </button>
209
155
  </div>
210
156
  <!-- Modal body -->
@@ -226,8 +172,5 @@ else {
226
172
  </div>
227
173
  </div>
228
174
 
229
- <div
230
- on:click={closeModal}
231
- class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full"
232
- />
175
+ <div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
233
176
  {/if}