Add remove svg icon

frontend/src/assets/svg/icon-remove.svg

@@ -0,0 +1,2 @@
+
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm0 2c-4.418278 0-8 3.581722-8 8s3.581722 8 8 8 8-3.581722 8-8-3.581722-8-8-8zm-4.70675 3.29325c.36092308-.36092308.92719527-.38868639 1.31971051-.08328994l.09428949.08328994 3.293 3.293 3.293-3.293c.391-.391 1.023-.391 1.414 0 .3609231.36092308.3886864.92719527.0832899 1.31971051l-.0832899.09428949-3.293 3.293 3.293 3.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293-.2133333 0-.4266667-.0680556-.6046991-.203588l-.1023009-.089412-3.293-3.293-3.293 3.293c-.195.195-.451.293-.707.293s-.512-.098-.707-.293c-.36092308-.3609231-.38868639-.9271953-.08328994-1.3197105l.08328994-.0942895 3.293-3.293-3.293-3.293c-.391-.391-.391-1.023 0-1.414z" fill-rule="evenodd"/></svg>

frontend/src/views/coordinator/Groups.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 import { deleteGroup, getGroups } from '../../api/groups'
+import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
 
 const Groups = () => {
   let navigate = useNavigate()
@@ -43,11 +44,11 @@ const Groups = () => {
       onSuccess: () => refetchGroups(),
     },
   )
-  
+
   useEffect(() => {
     setPage(1)
   }, [perPage])
-  
+
   if (areGroupsLoading) {
     return <div>Ładowanie</div>
   }
@@ -98,7 +99,9 @@ const Groups = () => {
                   <td>{points_for_first_term}</td>
                   <td>{points_for_second_term}</td>
                   <td>
-                    <button onClick={() => mutateDelete(id)}>X</button>
+                    <button onClick={() => mutateDelete(id)}>
+                      <IconRemove />
+                    </button>
                   </td>
                 </tr>
               ),
@@ -107,40 +110,40 @@ const Groups = () => {
         </table>
       </div>
       <div className="w-full flex items-center justify-center mt-2">
-            <div className="btn-group">
+        <div className="btn-group">
+          <button
+            className="btn btn-outline"
+            onClick={() => setPage(page - 1)}
+            disabled={page === 1}
+          >
+            «
+          </button>
+          {[
+            ...Array(
+              groups?.data?.max_pages && groups?.data?.max_pages + 1,
+            ).keys(),
+          ]
+            .slice(1)
+            .map((p) => (
               <button
-                className="btn btn-outline"
+                key={p}
-                onClick={() => setPage(page - 1)}
+                className={classNames('btn btn-outline', {
-                disabled={page === 1}
+                  'bg-success': p === page,
+                })}
+                onClick={() => setPage(p)}
               >
-                «
+                {p}
               </button>
-              {[
+            ))}
-                ...Array(
+          <button
-                  groups?.data?.max_pages && groups?.data?.max_pages + 1,
+            className="btn btn-outline"
-                ).keys(),
+            onClick={() => setPage(page + 1)}
-              ]
+            disabled={page === groups?.data?.max_pages}
-                .slice(1)
+          >
-                .map((p) => (
+            »
-                  <button
+          </button>
-                    key={p}
+        </div>
-                    className={classNames('btn btn-outline', {
+      </div>
-                      'bg-success': p === page,
-                    })}
-                    onClick={() => setPage(p)}
-                  >
-                    {p}
-                  </button>
-                ))}
-              <button
-                className="btn btn-outline"
-                onClick={() => setPage(page + 1)}
-                disabled={page === groups?.data?.max_pages}
-              >
-                »
-              </button>
-            </div>
-          </div>
     </div>
   )
 }

frontend/src/views/coordinator/Leaders.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 import { getLeaders, deleteLeader } from '../../api/leaders'
 import classNames from 'classnames'
+import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
 
 const Leaders = () => {
   let navigate = useNavigate()
@@ -111,7 +112,9 @@ const Leaders = () => {
                           : 'Nie/stacjonarny'}
                       </td>
                       <td>
-                        <button onClick={() => mutateDelete(id)}>X</button>
+                        <button onClick={() => mutateDelete(id)}>
+                          <IconRemove />
+                        </button>
                       </td>
                     </tr>
                   ),

frontend/src/views/coordinator/Students.tsx

@@ -8,6 +8,7 @@ import {
   downloadStudents,
 } from '../../api/students'
 import classNames from 'classnames'
+import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
 
 const Students = () => {
   let navigate = useNavigate()
@@ -179,7 +180,9 @@ const Students = () => {
                       <td>{group === null ? 'Nie' : 'Tak'}</td>
                       <td>{mode ? 'Stacjonarny' : 'Niestacjonarny'}</td>
                       <td>
-                        <button onClick={() => mutateDelete(index)}>X</button>
+                        <button onClick={() => mutateDelete(index)}>
+                          <IconRemove />
+                        </button>
                       </td>
                     </tr>
                   ))}