From 9e20b33692ee867823c6e1b2b5d2b56e543fb356 Mon Sep 17 00:00:00 2001 From: cherif Date: Wed, 31 Jan 2024 19:50:55 +0100 Subject: [PATCH] 31/01/2024 - 20h --- src/components/AccountUserActivated.js | 2 +- src/components/DisplayPartnerSession.js | 262 ++++++++++++++---- .../DisplayPartnerTrainingsPagination.js | 52 ++-- src/components/Employes.js | 2 +- src/components/Module_Editique.js | 32 ++- src/pages/emargementOk.js | 2 +- .../components/_displaypartnersession.scss | 5 + 7 files changed, 266 insertions(+), 91 deletions(-) diff --git a/src/components/AccountUserActivated.js b/src/components/AccountUserActivated.js index 4b6b97a..acef442 100644 --- a/src/components/AccountUserActivated.js +++ b/src/components/AccountUserActivated.js @@ -57,7 +57,7 @@ function Account() {

- Vous allez etre redirigé vers le moteur de recherche dans quelques secondes. {tempo} + Vous allez être redirigé vers le moteur de recherche dans quelques secondes. {tempo}
diff --git a/src/components/DisplayPartnerSession.js b/src/components/DisplayPartnerSession.js index a2ab7bb..22f1ecf 100644 --- a/src/components/DisplayPartnerSession.js +++ b/src/components/DisplayPartnerSession.js @@ -163,7 +163,7 @@ const DisplayPartnerSession = (props) => { { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, { field: 'class_internal_url', headerName: 'class_internal_url', hide: true }, - { field: 'code_session', headerName: 'Code session', hide: false, minWidth: 100, flex: 1, renderCell: (params) => , }, + { field: 'code_session', headerName: 'Code session', hide: false, minWidth: 200, flex: 1, renderCell: (params) => , }, { field: 'session_title', headerName: 'Titre', hide: false, flex: 1, minWidth: 250, renderCell: (params) => , }, { @@ -187,8 +187,8 @@ const DisplayPartnerSession = (props) => { }, { field: 'class_external_code', headerName: 'Code Formation', align: "center", hideable: true, flex: 1, hide: true, minWidth: 150, renderCell: (params) => , }, - { field: 'date_debut', headerName: 'Debut', hide: false, width: datagrid_columns_size_model2, }, - { field: 'date_fin', headerName: 'Fin', hideable: false, width: datagrid_columns_size_model2, }, + { field: 'date_debut', headerName: 'Debut', hide: false, minWidth: 150, renderCell: (params) => , }, + { field: 'date_fin', headerName: 'Fin', hideable: false, minWidth: 150, renderCell: (params) => , }, { field: 'distantiel', headerName: 'Distantiel', hideable: false, width: datagrid_columns_size_model2, renderCell: (cellValues) => { @@ -244,7 +244,10 @@ const DisplayPartnerSession = (props) => { }, { field: 'nb_inscrit', headerName: 'Inscrits', minWidth: 20, align: "center", hide: true, hideable: true, }, { field: 'nb_preinscrit', headerName: 'Preinscrits', minWidth: 20, align: "center", hide: true, hideable: true, }, - { field: 'prix_session', headerName: 'Prix', minWidth: 20, align: "center", renderCell: (params) => , }, + { + field: 'prix_session', headerName: 'Prix', minWidth: 20, align: "center", + renderCell: (params) => , + }, { field: 'title', headerName: 'Formation', minWidth: 250, flex: 1, align: "center", hide: true, hideable: true, renderCell: (params) => , }, { field: 'domaine', headerName: 'Domaine', minWidth: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, renderCell: (params) => , }, { field: 'published', headerName: 'publié', minWidth: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, renderCell: (params) => , }, @@ -750,20 +753,21 @@ const DisplayPartnerSession = (props) => { { field: 'nom', headerName: 'nom', width: 150, hide: false, editable: true }, { field: 'prenom', headerName: 'prenom', width: 150, hide: false, editable: false }, - { field: 'statut', headerName: 'Statut', width: 150, hide: false, editable: false , - renderCell: (cellValues) => { - return ( + { + field: 'statut', headerName: 'Statut', width: 150, hide: false, editable: false, + renderCell: (cellValues) => { + return ( -
- {String(cellValues.row.statut) === "0" && "Init"}  - {String(cellValues.row.statut) === "1" && "Envoyé"}  - {String(cellValues.row.statut) === "2" && "Validé"}  +
+ {String(cellValues.row.statut) === "0" && "Init"}  + {String(cellValues.row.statut) === "1" && "Envoyé"}  + {String(cellValues.row.statut) === "2" && "Validé"}  -
+
- ); + ); + }, }, - }, { field: 'date_envoi', headerName: 'Envoyé le', width: 150, hide: false, editable: false }, { @@ -837,6 +841,10 @@ const DisplayPartnerSession = (props) => { { field: 'sequence_start', headerName: 'Debut', minWidth: 200, flex: 1, hide: false, editable: false }, { field: 'sequence_end', headerName: 'Fin', minWidth: 200, flex: 1, hide: false, editable: false }, + { field: 'agenda', headerName: 'Agenda', minWidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => , }, + { field: 'objectif', headerName: 'Objectif', width: 0, flex: 0, hide: true, editable: false, }, + { field: 'commentaire', headerName: 'Commentaire', width: 0, flex: 0, hide: true, editable: false, }, + { field: "Detail", headerName: 'Voir detail', minWidth: 200, flex: 1, @@ -851,6 +859,10 @@ const DisplayPartnerSession = (props) => { setselected_sequence_startDate(cellValues.row.sequence_start); setselected_sequence_endDate(cellValues.row.sequence_end); + setp_detail_sequence_agenda(cellValues.row.agenda); + setp_detail_sequence_objectif(cellValues.row.objectif); + setp_detail_sequence_comment(cellValues.row.commentaire); + Getall_List_Sequence_Ressource(cellValues.row._id); setselected_sequence_id(cellValues.row._id); @@ -890,6 +902,11 @@ const DisplayPartnerSession = (props) => { setsequence_startDate(date_du); setsequence_endDate(date_au); + + setp_detail_sequence_agenda(cellValues.row.agenda); + setp_detail_sequence_objectif(cellValues.row.objectif); + setp_detail_sequence_comment(cellValues.row.commentaire); + setupdate_sequence("1"); submenu_update_sequence(); }} @@ -1181,6 +1198,7 @@ const DisplayPartnerSession = (props) => { function handleClick_edit_session_From_Line(selected_row_id) { setgridline_id(selected_row_id); + setsequence_gridline_id(""); setLoading(true); setaddOneSession("0"); @@ -2069,6 +2087,7 @@ const DisplayPartnerSession = (props) => { } setgridline_id(''); + setsequence_gridline_id(""); //myRef.current.scrollIntoView({ behavior: "smooth" }); var divh = document.getElementById('myRef_add_session').offsetTop; @@ -2791,7 +2810,10 @@ const DisplayPartnerSession = (props) => { + const [sequence_gridline_id, setsequence_gridline_id] = useState(""); + const [gridline_id, setgridline_id] = useState(""); + function GetSelectedRows_Sequence_Ids() { @@ -5931,6 +5953,8 @@ const DisplayPartnerSession = (props) => { setp_filtre2_value(); setgridline_id(''); + setsequence_gridline_id(""); + setnb_stagiaire_Preinscrit(""); setnb_stagiaire_Inscrit(""); setSelectionModel([]); @@ -6391,6 +6415,7 @@ const DisplayPartnerSession = (props) => { setDialog_2_open(false); setsession_selected_row_id(''); setgridline_id(''); + setsequence_gridline_id(""); }; @@ -7149,6 +7174,9 @@ const DisplayPartnerSession = (props) => { const [p_detail_sequence_title, setp_detail_sequence_title] = useState(); const [p_detail_sequence_comment, setp_detail_sequence_comment] = useState(); + const [p_detail_sequence_agenda, setp_detail_sequence_agenda] = useState(); + const [p_detail_sequence_objectif, setp_detail_sequence_objectif] = useState(); + const [sequence_startDate, setsequence_startDate] = useState(new Date()); const [sequence_endDate, setsequence_endDate] = useState(new Date()); @@ -7163,6 +7191,7 @@ const DisplayPartnerSession = (props) => { const [Dialog_seq_1_open, setDialog_seq_1_open] = React.useState(false); function Close_Dialog_Detail_seq_open() { + clearSequence_Data(); setDialog_seq_1_open(false); } @@ -7181,11 +7210,27 @@ const DisplayPartnerSession = (props) => { }; + function clearSequence_Data() { + setupdate_sequence(); + setp_detail_sequence_title(""); + + setp_detail_sequence_comment(""); + setp_detail_sequence_agenda(""); + setp_detail_sequence_objectif(""); + + setsequence_startDate(new Date()); + setsequence_endDate(new Date()); + + } + function submenu_add_one_sequence() { setupdate_sequence(); - setp_detail_sequence_title(); + setp_detail_sequence_title(""); + + setp_detail_sequence_comment(""); + setp_detail_sequence_agenda(""); + setp_detail_sequence_objectif(""); - setp_detail_sequence_comment(); setsequence_startDate(new Date()); setsequence_endDate(new Date()); @@ -7217,6 +7262,11 @@ const DisplayPartnerSession = (props) => { form.append("sequence_start", new_start_date); form.append("sequence_end", new_end_date); + form.append("agenda", p_detail_sequence_agenda); + form.append("objectif", p_detail_sequence_objectif); + form.append("commentaire", p_detail_sequence_comment); + + //console.log(" form == ", form); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Session_Sequence/"; @@ -7233,8 +7283,12 @@ const DisplayPartnerSession = (props) => { Getall_Sequence_Of_Session(selected_session_id); - setp_detail_sequence_title(); - setp_detail_sequence_comment(); + setp_detail_sequence_title(""); + setp_detail_sequence_comment(""); + + setp_detail_sequence_agenda(""); + setp_detail_sequence_objectif(""); + setsequence_startDate(); setsequence_endDate(); @@ -7294,8 +7348,12 @@ const DisplayPartnerSession = (props) => { Getall_Sequence_Of_Session(selected_session_id); - setp_detail_sequence_title(); - setp_detail_sequence_comment(); + setp_detail_sequence_title(""); + setp_detail_sequence_comment(""); + + setp_detail_sequence_agenda(""); + setp_detail_sequence_objectif(""); + setsequence_startDate(); setsequence_endDate(); @@ -7340,6 +7398,10 @@ const DisplayPartnerSession = (props) => { form.append("sequence_start", new_start_date); form.append("sequence_end", new_end_date); + form.append("agenda", p_detail_sequence_agenda); + form.append("objectif", p_detail_sequence_objectif); + form.append("commentaire", p_detail_sequence_comment); + form.append("_id", selected_sequence_id); //console.log(" form == ", form); @@ -7358,8 +7420,12 @@ const DisplayPartnerSession = (props) => { Getall_Sequence_Of_Session(selected_session_id); - setp_detail_sequence_title(); - setp_detail_sequence_comment(); + setp_detail_sequence_title(""); + setp_detail_sequence_comment(""); + + setp_detail_sequence_agenda(""); + setp_detail_sequence_objectif(""); + setsequence_startDate(); setsequence_endDate(); @@ -7421,6 +7487,7 @@ const DisplayPartnerSession = (props) => { setselected_sequence_id(); setupdate_sequence(); setgridline_id(''); + setsequence_gridline_id(""); alert(res.data.message) @@ -7771,6 +7838,9 @@ const DisplayPartnerSession = (props) => { function GetListeEmargement(localsessionid, class_internal_url) { clean_old_messages(); var form = new FormData(); + + setRows_emarg([]); + setSelectionModel_emarg([]); //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); @@ -7858,22 +7928,14 @@ const DisplayPartnerSession = (props) => { async function actionmass_emarge_Traitemet() { var liste_formation = GetSelectedRows_Emarg_Ids(); - for (var i = 0; i < liste_formation.length; i++) { - var line = JSON.parse(rowss_emarg[liste_formation[i]]); - //console.log(" line = ", line); - var email = line.email; - //console.log(" Traitement de email = ", email); - if (String(actionmass_emarg_val) === "demande emargement") { - ActionMassListEmargement(); - } - await sleep(20) + if (String(actionmass_emarg_val) === "demande emargement") { + ActionMassListEmargement(); } setSelectionModel_emarg([]); setactionmass_emarg_val(); GetListeEmargement(selected_session_id, selected_internal_url); - alert(" La demande d'émargement a été envoyée" ); } @@ -7913,7 +7975,9 @@ const DisplayPartnerSession = (props) => { setActionMassListEmargement_api("true"); setActionMassListEmargement_result(res.data.message); - + GetListeEmargement(selected_session_id, selected_internal_url); + alert(res.data.message); + } else if (String(res.data.status) === String("Err_Connexion")) { alert(res.data.message); history.push("/Connexion"); @@ -7929,6 +7993,7 @@ const DisplayPartnerSession = (props) => { setLoading(false); console.warn('ActionMassListEmargement : Not good man :( mysearchtext = ' + error); setActionMassListEmargement_api("false"); + alert(" Impossible d'envoyer les demandes d'émargement"); }) @@ -8099,7 +8164,7 @@ const DisplayPartnerSession = (props) => { var is_present_val = ""; - console.log(" ### cellValues.row = ", cellValues.row); + //console.log(" ### cellValues.row = ", cellValues.row); var is_present = cellValues.row.is_present; if (is_present === true) { @@ -8136,7 +8201,7 @@ const DisplayPartnerSession = (props) => { setUpdateStagiaireEmargement_api("true"); setUpdateStagiaireEmargement_result(res.data.message); GetListeEmargement(selected_session_id, selected_internal_url); - alert(" La mise à jour a été bien faite"); + alert(res.data.message); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); @@ -8813,7 +8878,13 @@ const DisplayPartnerSession = (props) => { > - Ajout Sequence + + + {String(update_sequence) !== "1" && "Ajouter une séquence"} + {String(update_sequence) === "1" && "Mettre à jour une séquence"} + + + {Dialog_seq_1_message} @@ -8890,6 +8961,55 @@ const DisplayPartnerSession = (props) => {
+ +
Agenda + { + + setp_detail_sequence_agenda(e.target.value); + } + } + multiline + minRows={2} + maxRows={2} + rows={2} + + /> + +
+ +
Objectif + { + + setp_detail_sequence_objectif(e.target.value); + } + } + multiline + minRows={2} + maxRows={2} + rows={2} + + /> + +
+
Commentaire { onRowDoubleClick={(newSelectionModel) => { setgridline_id(newSelectionModel.row.id); + + setsequence_gridline_id(""); + setaddOneSession("0"); setEdite_session("0"); setsessionChanged(false); @@ -9884,7 +10007,10 @@ const DisplayPartnerSession = (props) => { "& .MuiDataGrid-cellContent": { minHeight: 50, - } + }, + [`& .${gridClasses.cell}`]: { + py: 1, + }, }} @@ -11909,7 +12035,7 @@ const DisplayPartnerSession = (props) => { {String(submenu) === String("sequence_session") &&
-
Gestion séquences
+
@@ -11919,24 +12045,29 @@ const DisplayPartnerSession = (props) => {
  { setselectionModel_sequence(newSelectionModel); - /*if (newSelectionModel.length === 1) - handleClick_edit_session_From_Line(newSelectionModel);*/ - if (newSelectionModel.length !== 1) { - } }} selectionModel={selectionModel_sequence} @@ -11951,7 +12082,9 @@ const DisplayPartnerSession = (props) => { session_id: JSON.parse(item).session_id, sequence_title: JSON.parse(item).sequence_title, - + agenda: JSON.parse(item).agenda, + objectif: JSON.parse(item).objectif, + commentaire: JSON.parse(item).commentaire, } ))} @@ -11960,11 +12093,16 @@ const DisplayPartnerSession = (props) => { className="datagridclass" onRowDoubleClick={(newSelectionModel) => { - + setsequence_gridline_id(newSelectionModel.row.id); setselected_detail_sequence_title(newSelectionModel.row.sequence_title); setselected_sequence_startDate(newSelectionModel.row.sequence_start); setselected_sequence_endDate(newSelectionModel.row.sequence_end); + setp_detail_sequence_agenda(newSelectionModel.row.agenda); + setp_detail_sequence_objectif(newSelectionModel.row.objectif); + setp_detail_sequence_comment(newSelectionModel.row.commentaire); + + Getall_List_Sequence_Ressource(newSelectionModel.row._id); setselected_sequence_id(newSelectionModel.row._id); @@ -11987,7 +12125,7 @@ const DisplayPartnerSession = (props) => { components={{ Toolbar: GridToolbar, }} - sx={datagridSx} + //sx={datagridSx} getCellClassName={(params) => { //field === 'distantiel' if (params.field === 'distantiel' && String(params.value) === "1") { @@ -12024,7 +12162,16 @@ const DisplayPartnerSession = (props) => { } }} + getRowClassName={(params) => { + // Pour la gestion de la couleur de zone double cliquée + if (String(params.row.id) === String(sequence_gridline_id)) { + return 'line--statut--selected'; + } + + + + }} /> @@ -12250,13 +12397,9 @@ const DisplayPartnerSession = (props) => { checkboxSelection onSelectionModelChange={(newSelectionModel) => { setselectionModel_sequence(newSelectionModel); - /*if (newSelectionModel.length === 1) - handleClick_edit_session_From_Line(newSelectionModel);*/ - if (newSelectionModel.length !== 1) { - } }} - selectionModel={selectionModel} + //selectionModel={selectionModel_sequence} localeText={frFR.components.MuiDataGrid.defaultProps.localeText} rows={Getall_List_Sequence_Ressource_result.map((item, index) => ( @@ -13382,10 +13525,7 @@ const DisplayPartnerSession = (props) => { getEstimatedRowHeight={() => 200} getRowHeight={() => "auto"} sx={{ - "& .MuiDataGrid-cellContent": { - minHeight: 50, - }, [`& .${gridClasses.cell}`]: { py: 1, }, @@ -14511,7 +14651,9 @@ const DisplayPartnerSession = (props) => { -
+
@@ -14618,7 +14760,9 @@ const DisplayPartnerSession = (props) => {
{' '} - Confirmer l'action {actionmass_emarg_val} en masse. + {String(actionmass_emarg_val) === "demande emargement" && + Confirmer l'envoi de {selectionModel_emarg.length} demande(s) d'émargement. + }
diff --git a/src/components/DisplayPartnerTrainingsPagination.js b/src/components/DisplayPartnerTrainingsPagination.js index bdaeee0..42e275d 100644 --- a/src/components/DisplayPartnerTrainingsPagination.js +++ b/src/components/DisplayPartnerTrainingsPagination.js @@ -341,6 +341,17 @@ const DistplayPartnerTraningsPage = (props) => { } + + function Display_Colunm_text({ value }) { + + return ( +
+ {value}  + +
+ ); + } + function ExpandableCell_50({ value }) { const [expanded, setExpanded] = React.useState(false); @@ -385,22 +396,27 @@ const DistplayPartnerTraningsPage = (props) => { { field: 'internal_url', headerName: 'internal_url', hide: true, editable: false, }, { field: 'external_code', headerName: 'Code Formation', hideable: false, minWidth: 150, flex: 1, maxWidth: 250, editable: false, renderCell: (params) => , }, { field: 'title', headerName: 'Titre', hideable: false, minWidth: 300, flex: 1, editable: false, renderCell: (params) => , }, - { field: 'domain', headerName: 'Domaine', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, editable: false, }, - { field: 'metier', headerName: 'Métier', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, hide: true, editable: false, }, - { field: 'nb_session_formation', headerName: 'Nb Session', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center", }, + { field: 'domain', headerName: 'Domaine', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, editable: false, renderCell: (params) => , }, + { field: 'metier', headerName: 'Métier', minWidth: 50, flex: 1, maxWidth: 150, hideable: true, hide: true, editable: false, renderCell: (params) => , }, + { field: 'nb_session_formation', headerName: 'Nb Session', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center", renderCell: (params) => , }, { field: 'url', headerName: 'lien', minWidth: 20, hideable: true, hide: true, editable: false, }, { field: 'description', headerName: 'Description', hide: true, resizable: true, minWidth: 250, maxWidth: 300, flex: 1, renderCell: (params) => , }, - { field: 'price', headerName: 'Prix', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, hide: ismobilephone_columns_hide, editable: false, }, + { field: 'price', headerName: 'Prix', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, hide: ismobilephone_columns_hide, editable: false, + renderCell: (params) => , }, { field: 'published', headerName: 'Publié', minWidth: 50, flex: 1, maxWidth: 100, align: "center", resizable: true, editable: false, - valueFormatter: (params) => { - if (String(params.value) === "0") - return "Non"; - else if (String(params.value) === "1") - return "Oui"; - else - return "?"; + + renderCell: (cellValues) => { + return ( + +
+ {String(cellValues.row.published) === "1" && "Oui"}  + {String(cellValues.row.published) !== "1" && "Non"}  + +
+ + ); }, }, { @@ -1264,10 +1280,11 @@ const DistplayPartnerTraningsPage = (props) => { color: "black", fontSize: 16 }, - "& .MuiDataGrid-cellContent": { - minHeight: 50, - - } + + [`& .${gridClasses.cell}`]: { + py: 1, + }, + }; @@ -1982,9 +1999,10 @@ const DistplayPartnerTraningsPage = (props) => { }} getEstimatedRowHeight={() => 200} getRowHeight={() => "auto"} + sx={datagridSx} - - + + />
diff --git a/src/components/Employes.js b/src/components/Employes.js index c613a14..4bdbab8 100644 --- a/src/components/Employes.js +++ b/src/components/Employes.js @@ -4841,7 +4841,7 @@ const Employes = (props) => { - +
diff --git a/src/components/Module_Editique.js b/src/components/Module_Editique.js index ef2022c..473b26b 100644 --- a/src/components/Module_Editique.js +++ b/src/components/Module_Editique.js @@ -995,9 +995,15 @@ const Module_Editique = (props) => { > MySy Information - + - {Dialog_1_message} - {action_server_type_doc} + + +
+ Cliquez sur l'onglet 'PREINSCRIPT.' pour confirmer les inscriptions. + +
+
@@ -1006,13 +1012,10 @@ const Module_Editique = (props) => {
- +  
- -
@@ -1032,19 +1035,24 @@ const Module_Editique = (props) => { > MySy Information - + - {Dialog_1_message} - {action_server_type_doc} +
+ Cliquez sur l'onglet 'EMARGEMENT' pour la gestion des émargements :
+
    +
  • Initialisation
  • +
  • Envoyer les demandes d'émargements
  • +
  • Mettre à jour les émargements
  • +
  • etc
  • +
+
- -
- +  
diff --git a/src/pages/emargementOk.js b/src/pages/emargementOk.js index 949e4a6..fcdde8e 100644 --- a/src/pages/emargementOk.js +++ b/src/pages/emargementOk.js @@ -44,7 +44,7 @@ const EmargementOk = () => {
Votre demande d'emargement a bien été prise en compte
- Vous allez etre redirigé vers le moteur de recherche dans quelques secondes. {tempo} + Vous allez être redirigé vers le moteur de recherche dans quelques secondes. {tempo}
diff --git a/src/styles/components/_displaypartnersession.scss b/src/styles/components/_displaypartnersession.scss index 6600135..59e588c 100644 --- a/src/styles/components/_displaypartnersession.scss +++ b/src/styles/components/_displaypartnersession.scss @@ -2257,6 +2257,8 @@ margin-left: 5px; margin-right: 5px; color: white; + cursor: pointer; + box-shadow: 5px 1px 5px 1px rgb(0 0 0 / 25%); } .bton_emarge:hover { @@ -2267,6 +2269,9 @@ margin-left: 5px; margin-right: 5px; color: white; + cursor: pointer; + + box-shadow: 5px 1px 5px 1px rgb(0 0 0 / 25%); } .css-1x5jdm {