From e849878399404e294b1556fe20524e1b5c5b06a6 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Fri, 26 Mar 2021 14:52:26 +0100
Subject: [PATCH] change feedback modal

---
 src/components/Feedback/FeedbackModal.tsx     | 177 +++++++++--------
 src/styles/{base => components}/_buttons.scss | 182 +++++++++---------
 src/styles/components/_dialog.scss            |  43 +++++
 .../_expansion-panel.scss                     |   2 +-
 src/styles/index.scss                         |   5 +-
 5 files changed, 236 insertions(+), 173 deletions(-)
 rename src/styles/{base => components}/_buttons.scss (93%)
 create mode 100644 src/styles/components/_dialog.scss
 rename src/styles/{base => components}/_expansion-panel.scss (91%)

diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index aee001cff..155717a7c 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
 import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { Client, useClient } from 'cozy-client'
 import { detect } from 'detect-browser'
 
-import Modal from 'components/CommonKit/Modal/Modal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import IconButton from '@material-ui/core/IconButton'
 import MuiButton from '@material-ui/core/Button'
+import MuiDialog from '@material-ui/core/Dialog'
 import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
 
 import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
@@ -14,8 +16,9 @@ import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
 import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
 import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
 import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
-import warningIcon from 'assets/icons/ico/warning-yellow.svg'
-import successIcon from 'assets/icons/visu/data-ok.svg'
+import WarningIcon from 'assets/icons/ico/warning-yellow.svg'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import SuccessIcon from 'assets/icons/visu/data-ok.svg'
 import MailService from 'services/mail.service'
 import './feedbackModal.scss'
 import useExploration from 'components/Hooks/useExploration'
@@ -138,7 +141,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
     return (
       <div className="fb-selector-item">
         <StyledIconBorderedButton
-          title={`${t('feedback.accessibility.select_type')} ${t(
+          aria-label={`${t('feedback.accessibility.select_type')} ${t(
             'feedback.type_' + itemType
           )}`}
           icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
@@ -161,83 +164,99 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
   }
 
   return (
-    <Modal yellowBorder={true} handleCloseClick={closeModal}>
-      {sent ? (
-        <div className="fb-root">
-          <div className="fb-content">
-            {error === '' ? (
-              <div className="fb-content-success">
-                <div className="fb-icon">
-                  <StyledIcon icon={successIcon} size={48} />
+    <MuiDialog
+      open={true}
+      onClose={closeModal}
+      classes={{
+        root: 'modal-root',
+        paper: 'modal-paper yellow-border',
+      }}
+    >
+      <IconButton
+        aria-label="test"
+        className="modal-paper-close-button"
+        onClick={closeModal}
+      >
+        <Icon icon={CloseIcon} size={16} />
+      </IconButton>
+      <div className="fb-root">
+        {sent ? (
+          <>
+            <div className="fb-content">
+              {error === '' ? (
+                <div className="fb-content-success">
+                  <div className="fb-icon">
+                    <StyledIcon icon={SuccessIcon} size={48} />
+                  </div>
+                  <div>{t('feedback.success_sending')}</div>
                 </div>
-                <div>{t('feedback.success_sending')}</div>
-              </div>
-            ) : (
-              <div className="fb-content-error">
-                <div className="fb-icon">
-                  <StyledIcon icon={warningIcon} size={48} />
+              ) : (
+                <div className="fb-content-error">
+                  <div className="fb-icon">
+                    <StyledIcon icon={WarningIcon} size={48} />
+                  </div>
+                  <div>{t('feedback.warning')}</div>
+                  <div>{error}</div>
                 </div>
-                <div>{t('feedback.warning')}</div>
-                <div>{error}</div>
-              </div>
-            )}
-            <MuiButton
-              title={t('feedback.accessibility.ok')}
-              onClick={validResult}
-              variant={'contained'}
-              classes={{
-                root: 'btn-highlight',
-                label: 'text-16-bold',
-              }}
-            >
-              {t('feedback.ok')}
-            </MuiButton>
-          </div>
-        </div>
-      ) : (
-        <div className="fb-root">
-          <div className="fb-header text-18-bold">{t('feedback.title')}</div>
-          <form className="fb-content">
-            <label htmlFor="feedbackType" className="fb-label text-16-bold">
-              {t('feedback.type')}
-            </label>
-            <fieldset id="feedbackType" className="fb-selector">
-              {selectorItem('bug')}
-              {selectorItem('idea')}
-              {selectorItem('other')}
-            </fieldset>
-            <label
-              htmlFor="idFeedbackDescription"
-              className="fb-label text-16-bold"
-            >
-              {t('feedback.description')}
-            </label>
-            <textarea
-              id="idFeedbackDescription"
-              className="fb-form fb-textarea"
-              placeholder={t('feedback.description_placeholder')}
-              name="description"
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setDescription(e.target.value)
-              }
-              value={description}
-            ></textarea>
-            <MuiButton
-              title={t('feedback.accessibility.send')}
-              onClick={sendEmail}
-              disabled={sending}
-              classes={{
-                root: 'btn-highlight',
-                label: 'text-16-bold',
-              }}
-              type="submit"
-            >
-              {t('feedback.send')}
-            </MuiButton>
-          </form>
-        </div>
-      )}
-    </Modal>
+              )}
+              <MuiButton
+                aria-label={t('feedback.accessibility.ok')}
+                onClick={validResult}
+                variant={'contained'}
+                classes={{
+                  root: 'btn-highlight',
+                  label: 'text-16-bold',
+                }}
+              >
+                {t('feedback.ok')}
+              </MuiButton>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="fb-header text-18-bold">{t('feedback.title')}</div>
+            <form className="fb-content">
+              <label htmlFor="feedbackType" className="fb-label text-16-bold">
+                {t('feedback.type')}
+              </label>
+              <fieldset id="feedbackType" className="fb-selector">
+                {selectorItem('bug')}
+                {selectorItem('idea')}
+                {selectorItem('other')}
+              </fieldset>
+              <label
+                htmlFor="idFeedbackDescription"
+                className="fb-label text-16-bold"
+              >
+                {t('feedback.description')}
+              </label>
+              <textarea
+                id="idFeedbackDescription"
+                className="fb-form fb-textarea"
+                placeholder={t('feedback.description_placeholder')}
+                name="description"
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setDescription(e.target.value)
+                }
+                value={description}
+              ></textarea>
+              <MuiButton
+                aria-label={t('feedback.accessibility.send')}
+                onClick={sendEmail}
+                disabled={sending}
+                classes={{
+                  root: 'btn-highlight',
+                  label: 'text-16-bold',
+                }}
+                type="submit"
+              >
+                {t('feedback.send')}
+              </MuiButton>
+            </form>
+          </>
+        )}
+      </div>
+    </MuiDialog>
   )
 }
 
diff --git a/src/styles/base/_buttons.scss b/src/styles/components/_buttons.scss
similarity index 93%
rename from src/styles/base/_buttons.scss
rename to src/styles/components/_buttons.scss
index 231337aab..256493ab3 100644
--- a/src/styles/base/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -1,91 +1,91 @@
-@import 'color';
-@import 'mixins';
-
-button {
-  &.btn-highlight {
-    @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
-      background-color: darken($gold-shadow, 12%);
-    }
-  }
-  &.btn-primary-positive {
-    @include button(
-      transparent,
-      $gold-shadow,
-      1px solid $dark-light-2,
-      transparent
-    ) {
-      background-color: rgba($dark-light-2, 0.2);
-      span:first-child {
-        color: rgba($gold-shadow, 0.7);
-      }
-    }
-  }
-  &.btn-primary-negative {
-    @include button(
-      transparent,
-      $gold-shadow,
-      1px solid $grey-dark,
-      transparent
-    ) {
-      background-color: rgba($grey-dark, 0.2);
-      span:first-child {
-        color: rgba($gold-shadow, 0.7);
-      }
-    }
-  }
-  &.btn-secondary-positive {
-    @include button(
-      transparent,
-      $grey-bright,
-      1px solid $dark-light-2,
-      transparent
-    ) {
-      background-color: rgba($dark-light-2, 0.2);
-      span:first-child {
-        color: rgba($grey-bright, 0.7);
-      }
-    }
-  }
-  &.btn-secondary-negative {
-    @include button(
-      transparent,
-      $grey-bright,
-      1px solid $grey-dark,
-      transparent
-    ) {
-      background-color: rgba($grey-dark, 0.2);
-      span:first-child {
-        color: rgba($grey-bright, 0.7);
-      }
-    }
-  }
-  &.btn-duel-off {
-    @include button(
-      $dark-light-2,
-      $white,
-      1px solid rgba(97, 240, 242, 0.5),
-      $dark-light-2
-    ) {
-      background-color: darken($dark-light-2, 12%);
-    }
-  }
-  &.btn-duel-active {
-    @include button($blue, $dark-light-2, none, $blue) {
-      background-color: darken($blue, 30%);
-    }
-  }
-  &.btn-duel-on {
-    @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
-      background-color: darken($dark-light-2, 12%);
-    }
-  }
-  &.btn-profile-next {
-    @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
-      background-color: darken($gold-shadow, 12%);
-    }
-  }
-  &.btn-profile-back {
-    @include button(none, $grey-dark, none, none) {
-    }
-  }
-}
+@import '../base/color';
+@import '../base/mixins';
+
+button {
+  &.btn-highlight {
+    @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+      background-color: darken($gold-shadow, 12%);
+    }
+  }
+  &.btn-primary-positive {
+    @include button(
+      transparent,
+      $gold-shadow,
+      1px solid $dark-light-2,
+      transparent
+    ) {
+      background-color: rgba($dark-light-2, 0.2);
+      span:first-child {
+        color: rgba($gold-shadow, 0.7);
+      }
+    }
+  }
+  &.btn-primary-negative {
+    @include button(
+      transparent,
+      $gold-shadow,
+      1px solid $grey-dark,
+      transparent
+    ) {
+      background-color: rgba($grey-dark, 0.2);
+      span:first-child {
+        color: rgba($gold-shadow, 0.7);
+      }
+    }
+  }
+  &.btn-secondary-positive {
+    @include button(
+      transparent,
+      $grey-bright,
+      1px solid $dark-light-2,
+      transparent
+    ) {
+      background-color: rgba($dark-light-2, 0.2);
+      span:first-child {
+        color: rgba($grey-bright, 0.7);
+      }
+    }
+  }
+  &.btn-secondary-negative {
+    @include button(
+      transparent,
+      $grey-bright,
+      1px solid $grey-dark,
+      transparent
+    ) {
+      background-color: rgba($grey-dark, 0.2);
+      span:first-child {
+        color: rgba($grey-bright, 0.7);
+      }
+    }
+  }
+  &.btn-duel-off {
+    @include button(
+      $dark-light-2,
+      $white,
+      1px solid rgba(97, 240, 242, 0.5),
+      $dark-light-2
+    ) {
+      background-color: darken($dark-light-2, 12%);
+    }
+  }
+  &.btn-duel-active {
+    @include button($blue, $dark-light-2, none, $blue) {
+      background-color: darken($blue, 30%);
+    }
+  }
+  &.btn-duel-on {
+    @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
+      background-color: darken($dark-light-2, 12%);
+    }
+  }
+  &.btn-profile-next {
+    @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+      background-color: darken($gold-shadow, 12%);
+    }
+  }
+  &.btn-profile-back {
+    @include button(none, $grey-dark, none, none) {
+    }
+  }
+}
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
new file mode 100644
index 000000000..6cafa55a8
--- /dev/null
+++ b/src/styles/components/_dialog.scss
@@ -0,0 +1,43 @@
+@import '../base/color';
+
+div.modal-root{
+  .MuiBackdrop-root{
+    background-color: rgba(27, 28, 34, 0.85);
+  }
+}
+
+div.modal-paper{
+  background: $grey-linear-gradient-background;
+  width: 36rem;
+  max-width: 100%;
+  max-height: 90vh;
+  padding: 1rem;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+  border-radius: 4px;
+  margin: 0 0 0 13.75rem;
+  align-items: center;
+  color: $white;
+  @media #{$tablet} {
+    width: 35rem;
+    margin: 0;
+  }
+  @media #{$large-phone} {
+    width: 85%;
+    max-width: 35rem;
+    margin: 0;
+  }
+  &.blue-border {
+    border: 1px solid $blue-40;
+  }
+  &.yellow-border {
+    border: 1px solid $gold-40;
+  }
+  .modal-paper-close-button{
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 5px 5px;
+    z-index: 10;
+  }
+}
diff --git a/src/styles/base/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
similarity index 91%
rename from src/styles/base/_expansion-panel.scss
rename to src/styles/components/_expansion-panel.scss
index f72081549..a39e1af5e 100644
--- a/src/styles/base/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,4 +1,4 @@
-@import 'color';
+@import '../base/color';
 
 div.expansion-panel-root{
   margin: 1rem 0;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a361df512..28b053250 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,9 +7,10 @@
 @import 'base/color';
 @import 'base/breakpoint';
 @import 'base/typography';
-@import 'base/buttons';
-@import 'base/expansion-panel';
+@import 'components/buttons';
+@import 'components/expansion-panel';
 @import 'components/barchart';
+@import 'components/dialog';
 
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
 
-- 
GitLab