From 91d4ba7aacb16cfa7da6f4e6232d91168b38edf3 Mon Sep 17 00:00:00 2001
From: Arturo Buono <a.buono@itdm.it>
Date: Wed, 31 Jan 2024 09:57:04 +0100
Subject: [PATCH] fix(rework): updates 20240131

---
 .../src/components/DetailsRow/detailsRow.scss | 127 ++++++------------
 .../src/components/DetailsRow/detailsRow.tsx  |  43 +++---
 .../Entities/Services/citizensList.tsx        |   4 +-
 3 files changed, 69 insertions(+), 105 deletions(-)

diff --git a/fe-piattaforma/src/components/DetailsRow/detailsRow.scss b/fe-piattaforma/src/components/DetailsRow/detailsRow.scss
index ba7a7a8f3..43c0aade2 100644
--- a/fe-piattaforma/src/components/DetailsRow/detailsRow.scss
+++ b/fe-piattaforma/src/components/DetailsRow/detailsRow.scss
@@ -1,111 +1,66 @@
-.details-row-table {
-  display: table-row;
-  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
-}
-
 .details-table-container {
-  display: table;
   width: 100%;
-  border-spacing: 0 15px;
+  border-collapse: separate;
+  border-spacing: 20px;
 }
 
-.button-hidden {
-  opacity: 0;
-  pointer-events: none;
+.details-row-table {
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
+
+}
 
+.details-row__info {
+  padding: 50px;
+  box-sizing: border-box;
 }
 
 .button-icon {
   padding: 0 !important;
 }
 
-.details-row {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-column-gap: rem(10px);
-  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
-  margin-bottom: rem(13px);
-  padding: rem(33px 25px);
+.content-info {
+  display: flex;
+  flex-direction: column;
+}
 
-  @media screen and (max-width: 576px) {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-  }
+.hidden {
+  visibility: hidden;
+}
 
-  @media screen and (min-width: 577px) and (max-width: 992px) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap;
+.icons {
+  &__icon-visible-password {
+    object-fit: contain;
   }
+}
 
-  &__name {
-    display: flex;
-    align-items: flex-start;
-
-    h2 {
-      width: 130px;
-    }
+@media (max-width: 768px) {
+  .details-row__info {
+    text-align: center;
+    padding: 10px;
+    width: 100%;
   }
 
-  &__info {
-    display: table-cell;
-    padding: 50px;
-
-    div {
-      display: flex;
-      flex-direction: column;
-    }
-
-    div > span {
-      @media screen and (max-width: 992px) {
-        min-width: 80px;
-      }
-    }
+  .content-info {
+    width: 100%;
+    box-sizing: border-box;
   }
 
-  &__left-section {
-    grid-area: 1 / 1 / 2 / 4;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: rem(10px);
+  .details-row-table, .details-row__info, .details-row__right, .details-row-icon {
+    display: block;
+    width: 100%;
+    margin-bottom: 20px;
+    box-sizing: border-box;
   }
 
-  &__right-section {
-    display: flex;
-    align-items: center;
-
-    .icon-button-relative {
-      margin-left: auto;
-      display: flex;
-
-      .icon-container {
-        position: relative;
-        right: 80px;
-        bottom: 2px;
-      }
-    }
-
-    .light-grey-bg {
-      background-color: color('grey-080');
-      justify-content: center;
-    }
-
-    span {
-      letter-spacing: rem(1px);
-    }
-
-    & > div {
-      display: flex;
-      align-items: center;
-    }
+  .details-row-table:last-child,
+  .details-row__info:last-child,
+  .details-row__right:last-child,
+  .details-row-icon:last-child {
+    margin-bottom: 0;
   }
-}
 
 
-.icons {
-  &__icon-visible-password {
-    object-fit: contain;
+  .hidden {
+    display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/fe-piattaforma/src/components/DetailsRow/detailsRow.tsx b/fe-piattaforma/src/components/DetailsRow/detailsRow.tsx
index a88c736eb..7563ff5ab 100644
--- a/fe-piattaforma/src/components/DetailsRow/detailsRow.tsx
+++ b/fe-piattaforma/src/components/DetailsRow/detailsRow.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button, Icon, UncontrolledTooltip } from 'design-react-kit';
 import { CRUDActionsI, CRUDActionTypes } from '../../utils/common';
-import StatusChip from '../StatusChip/statusChip';
 import PasswordVisible from '/public/assets/img/it-password-visible.png';
 import ItPlusCircle from '/public/assets/img/it-plus-circle-primary.png';
+import StatusChip from '../StatusChip/statusChip';
 
 interface DetailsRowI {
   id: string;
@@ -161,17 +161,17 @@ const DetailsRow: React.FC<DetailsRowI> = ({
   };
 
   return (
-    <div className='details-row-table neutral-1-color-a8'>
-      <div className='details-row__info'>
-        <div>
+    <tr className='details-row-table'>
+      <td className='details-row__info'>
+        <div className='content-info'>
           <span className='text-uppercase font-weight-bold primary-color-a12 text-nowrap'>
             ID Cittadino:
           </span>
           <span className='text-uppercase'>{id}</span>
         </div>
-      </div>
-      <div className='details-row__info'>
-        <div>
+      </td>
+      <td className='details-row__info'>
+        <div className='content-info'>
           <span className='text-uppercase font-weight-bold primary-color-a12 text-nowrap'>
             Data ultimo aggiornamento:
           </span>
@@ -179,17 +179,26 @@ const DetailsRow: React.FC<DetailsRowI> = ({
             {innerInfo['DataUltimoAggiornamento']}
           </span>
         </div>
-      </div>
-      <div className='left-primary-row primary-color-b1'>
-        <span className='text-uppercase'>{rowInfoType}</span>
-      </div>
-      <div className='details-row__right-section '>
-        <StatusChip status={stato} />
-        <div className='icon-button-relative'>
-          <div className='icon-container'>{loadIcons()}</div>
+      </td>
+      <td className='details-row__info'>
+        <div className='details-row__right'>
+          <div className='primary-color-b1'>
+            <span className='text-uppercase'>{rowInfoType}</span>
+          </div>
+          <div>
+            <StatusChip status={stato} />
+          </div>
+        </div>
+      </td>
+      <td className='details-row__info'>
+        <div className='content-info'>
+          <div className='hidden'>azioni</div>
+          <div className='details-row-icon'>
+            <span>{loadIcons()}</span>
+          </div>
         </div>
-      </div>
-    </div>
+      </td>
+    </tr>
   );
 };
 
diff --git a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Services/citizensList.tsx b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Services/citizensList.tsx
index 2469a2a55..72fe3456d 100644
--- a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Services/citizensList.tsx
+++ b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Services/citizensList.tsx
@@ -298,7 +298,7 @@ const CitizensList: React.FC = () => {
           tooltip
           tooltiptext='Cerca cittadino per codice fiscale o numero documento'
         >
-          <div className='details-table-container'>
+          <table className='details-table-container'>
             {(citizens?.cittadini || []).map((citizen: CitizenI, i: number) => (
               <DetailsRow
                 key={i}
@@ -315,7 +315,7 @@ const CitizensList: React.FC = () => {
                 idQuestionario={citizen?.idQuestionario || ''}
               />
             ))}
-          </div>
+          </table>
           {citizens?.cittadini?.length === 0 && alreadySearched && (
             <EmptySection title='Cittadino non associato al servizio' />
           )}