From 0de773ff892d752d26f3255587e48b240279816c Mon Sep 17 00:00:00 2001
From: Lea Renaux <lea.renaux@insee.fr>
Date: Wed, 5 Jun 2024 13:40:47 +0200
Subject: [PATCH] modify survey list style and dockerfile

---
 Dockerfile                                 |  2 +-
 package.json                               |  2 +-
 src/components/template/response-button.js |  2 +-
 src/components/template/survey-item.js     |  4 +--
 src/index.scss                             | 37 ++++++++++++++++++----
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 7701558..5724bdb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:stable-alpine
 COPY build /usr/share/nginx/html
 RUN rm etc/nginx/conf.d/default.conf
 COPY nginx-coleman-promotion.conf etc/nginx/conf.d/
diff --git a/package.json b/package.json
index d2a50bb..f2c8131 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colempub",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^3.3.7",
diff --git a/src/components/template/response-button.js b/src/components/template/response-button.js
index 9436346..83c404b 100644
--- a/src/components/template/response-button.js
+++ b/src/components/template/response-button.js
@@ -14,7 +14,7 @@ const ResponseButton = ({ id }) => (
         <button
           type="button"
           className="btn btn-lg"
-          id="boutonRepondre"
+          id="accessButton"
           disabled={!getIsSurveyOnlineById(id)}
         >
           {'Accéder au questionnaire'}
diff --git a/src/components/template/survey-item.js b/src/components/template/survey-item.js
index 7902f00..9406602 100644
--- a/src/components/template/survey-item.js
+++ b/src/components/template/survey-item.js
@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 
 const SurveyItem = ({ survey }) => (
   <div className="survey-item">
-    <Link to={`/${survey.id}`} tabIndex="-1">
-      <button type="button" className="btn btn-lg" id="boutonRepondre">
+    <Link to={`/${survey.id}`} tabIndex="-1" className='survey-item-link'>
+      <button type="button" className="btn" id="boutonRepondre">
         <span>{survey.titleShort}</span>
         <br />
         {`${window.location.host}/${survey.id}`}
diff --git a/src/index.scss b/src/index.scss
index b524c49..06b2d07 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -94,8 +94,27 @@ h2 {
 .btn-md {
   margin-right: 10px;
 }
+
+#survey-item-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+#boutonRepondre {
+  display: flex;
+  flex-direction: column;
+  white-space: inherit;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  word-wrap: break-word;
+}
+
 #menuItemRepondre,
 #boutonRepondre,
+#accessButton,
 #boutonMailConfirm,
 #boutonMailModif,
 #formSend,
@@ -105,10 +124,12 @@ h2 {
 }
 #menuItemRepondre:hover,
 #boutonRepondre:hover,
+#accessButton:hover,
 #boutonMailConfirm:hover,
 #boutonMailModif:hover,
 #menuItemRepondre:focus,
 #boutonRepondre:focus,
+#accessButton:focus,
 #boutonMailConfirm:focus,
 #boutonMailModif:focus,
 #formSend:hover,
@@ -321,14 +342,18 @@ div.banner-top h1 {
 
 /* survey item */
 .surveys-list {
-  text-align: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-top:2rem;
 }
+
 .survey-item {
-  text-align: center;
-  margin: 5px;
-  display: inline-block;
+  width: 30%;
+  min-width: 300px;
   border-radius: 7px;
-  width: auto;
   background-color: $blue-insee;
   color: $yellow-insee;
 
@@ -340,7 +365,7 @@ div.banner-top h1 {
     text-decoration: none;
   }
   span {
-    font-size: 2em;
+    font-size: 1.5em;
   }
 }