From b473a7cd35446fdf9a2aac2ad4a9ec6c85a865ce Mon Sep 17 00:00:00 2001
From: Du Peng <gnepud@gmail.com>
Date: Wed, 24 May 2023 10:01:45 +0200
Subject: [PATCH] (wip) family account css

---
 .../components/family-account/child-item.tsx         | 12 ++++++------
 .../components/family-account/children-list.tsx      |  2 +-
 app/frontend/src/stylesheets/application.scss        |  2 ++
 .../modules/family-account/child-item.scss           | 12 ++++++++++++
 app/frontend/templates/shared/header.html.erb        |  1 +
 5 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 app/frontend/src/stylesheets/modules/family-account/child-item.scss

diff --git a/app/frontend/src/javascript/components/family-account/child-item.tsx b/app/frontend/src/javascript/components/family-account/child-item.tsx
index 44ca25aea..b412285cd 100644
--- a/app/frontend/src/javascript/components/family-account/child-item.tsx
+++ b/app/frontend/src/javascript/components/family-account/child-item.tsx
@@ -18,16 +18,16 @@ export const ChildItem: React.FC<ChildItemProps> = ({ child, onEdit, onDelete })
 
   return (
     <div className="child-item">
-      <div>
-        <div>{t('app.public.child_item.last_name')}</div>
+      <div className="child-lastname">
+        <span>{t('app.public.child_item.last_name')}</span>
         <div>{child.last_name}</div>
       </div>
-      <div>
-        <div>{t('app.public.child_item.first_name')}</div>
+      <div className="child-firstname">
+        <span>{t('app.public.child_item.first_name')}</span>
         <div>{child.first_name}</div>
       </div>
-      <div>
-        <div>{t('app.public.child_item.birthday')}</div>
+      <div className="date">
+        <span>{t('app.public.child_item.birthday')}</span>
         <div>{FormatLib.date(child.birthday)}</div>
       </div>
       <div className="actions">
diff --git a/app/frontend/src/javascript/components/family-account/children-list.tsx b/app/frontend/src/javascript/components/family-account/children-list.tsx
index 287f69802..a383f95a5 100644
--- a/app/frontend/src/javascript/components/family-account/children-list.tsx
+++ b/app/frontend/src/javascript/components/family-account/children-list.tsx
@@ -73,7 +73,7 @@ export const ChildrenList: React.FC<ChildrenListProps> = ({ currentUser, onError
         </FabButton>
       </header>
 
-      <div>
+      <div className="children-list">
         {children.map(child => (
           <ChildItem key={child.id} child={child} onEdit={editChild} onDelete={deleteChild} />
         ))}
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index b70e769c6..e9416affb 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -181,6 +181,8 @@
 @import "modules/tour";
 @import "modules/wallet-info";
 
+@import "modules/family-account/child-item";
+
 @import "app.responsive";
 
 @import "overrides";
diff --git a/app/frontend/src/stylesheets/modules/family-account/child-item.scss b/app/frontend/src/stylesheets/modules/family-account/child-item.scss
new file mode 100644
index 000000000..40706e12b
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/family-account/child-item.scss
@@ -0,0 +1,12 @@
+.child-item {
+  width: 100%;
+  display: grid;
+  grid-template-rows: repeat(3, min-content);
+  grid-template-columns: 1fr 1fr;
+  gap: 1.6rem 2.4rem;
+  align-items: center;
+  padding: 1.6rem;
+  border: 1px solid var(--gray-soft-dark);
+  border-radius: var(--border-radius);
+  background-color: var(--gray-soft-lightest);
+}
diff --git a/app/frontend/templates/shared/header.html.erb b/app/frontend/templates/shared/header.html.erb
index 7dbc6dc96..523b00633 100644
--- a/app/frontend/templates/shared/header.html.erb
+++ b/app/frontend/templates/shared/header.html.erb
@@ -40,6 +40,7 @@
       </a>
       <ul uib-dropdown-menu class="animated fadeInRight">
         <li><a ui-sref="app.logged.dashboard.profile" translate>{{ 'app.public.common.my_profile' }}</a></li>
+        <li ng-if="$root.settings.familyAccount"><a ui-sref="app.logged.dashboard.children" translate>{{ 'app.public.common.my_children' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.settings" translate>{{ 'app.public.common.my_settings' }}</a></li>
         <li ng-if="!isAuthorized(['admin', 'manager']) && hasProofOfIdentityTypes"><a ui-sref="app.logged.dashboard.supporting_document_files" translate>{{ 'app.public.common.my_supporting_documents_files' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.projects" translate>{{ 'app.public.common.my_projects' }}</a></li>