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