- aggiornata la grafica della Home di RISO

- Profilo Completition
- Email Verificata
- Invita un Amico (invio di email)

src/components/CKeyAndValue/CKeyAndValue.scss

@@ -0,0 +1,97 @@
+.key-value-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 36px;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.key-label {
+  flex-shrink: 0;
+  min-width: 110px;
+  max-width: 140px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1976d2;
+  background: #e3f2fd;
+  padding: 4px 10px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.value-content {
+  flex: 1;
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.value-text {
+  display: block;
+}
+
+/* Dark mode */
+body.body--dark {
+  .key-value-row {
+    border-bottom-color: #424242;
+
+    &:hover {
+      background-color: #2a2a2a;
+    }
+  }
+
+  .key-label {
+    background: #1565c0;
+    color: white;
+  }
+
+  .value-content {
+    color: #e0e0e0;
+  }
+}
+
+/* Mobile optimization */
+@media (max-width: 600px) {
+  .key-value-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+    padding: 8px 6px;
+  }
+
+  .key-label {
+    min-width: 100%;
+    max-width: 100%;
+    font-size: 12px;
+    padding: 3px 8px;
+  }
+
+  .value-content {
+    font-size: 13px;
+    padding: 3px 6px;
+  }
+}
+
+/* Tablet */
+@media (min-width: 601px) and (max-width: 1024px) {
+  .key-label {
+    min-width: 100px;
+    font-size: 12px;
+  }
+
+  .value-content {
+    font-size: 13px;
+  }
+}