From fb51d6d199793db70a01d916851800d695ebfb27 Mon Sep 17 00:00:00 2001 From: Bastien Dumont <bdumont@grandlyon.com> Date: Wed, 21 Jun 2023 09:04:33 +0200 Subject: [PATCH] fix(challenge): card not fully displayed --- src/components/Action/ActionChoose.tsx | 7 +++---- src/components/Action/actionBegin.scss | 7 ++++++- src/components/Action/actionChoose.scss | 3 --- src/components/Action/actionList.scss | 6 ++++-- 4 files changed, 13 insertions(+), 10 deletions(-) delete mode 100644 src/components/Action/actionChoose.scss diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx index f33c2289a..c137680a9 100644 --- a/src/components/Action/ActionChoose.tsx +++ b/src/components/Action/ActionChoose.tsx @@ -2,17 +2,16 @@ import ActionBegin from 'components/Action/ActionBegin' import ActionList from 'components/Action/ActionList' import { Ecogesture, UserChallenge } from 'models' import React, { useState } from 'react' -import './actionChoose.scss' const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => { const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null) const [showList, setShowList] = useState<boolean>(false) return ( - <div className="action-choose"> + <> {!showList ? ( <ActionBegin - action={selectedAction ? selectedAction : undefined} + action={selectedAction ?? undefined} setShowList={setShowList} userChallenge={userChallenge} /> @@ -22,7 +21,7 @@ const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => { setShowList={setShowList} /> )} - </div> + </> ) } diff --git a/src/components/Action/actionBegin.scss b/src/components/Action/actionBegin.scss index 890eb89d9..8acf26de8 100644 --- a/src/components/Action/actionBegin.scss +++ b/src/components/Action/actionBegin.scss @@ -1,6 +1,9 @@ @import '../../styles/base/color'; @import '../../styles/base/breakpoint'; +.action-begin { + margin: auto; +} .action-container { display: flex; flex-direction: column; @@ -20,7 +23,9 @@ transition: all 300ms ease; color: $white; background: $grey-linear-gradient-background; - height: 63vh; + height: auto; + gap: 1.5rem; + max-height: 63svh; text-align: center; position: relative; padding: 5rem 1rem 1rem 1rem; diff --git a/src/components/Action/actionChoose.scss b/src/components/Action/actionChoose.scss deleted file mode 100644 index 380667b4d..000000000 --- a/src/components/Action/actionChoose.scss +++ /dev/null @@ -1,3 +0,0 @@ -.action-choose { - margin: auto; -} diff --git a/src/components/Action/actionList.scss b/src/components/Action/actionList.scss index 30824bec5..4b4c65a2f 100644 --- a/src/components/Action/actionList.scss +++ b/src/components/Action/actionList.scss @@ -1,13 +1,16 @@ @import '../../styles/base/color'; .action-list-container { - padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 600px; margin: auto; + gap: 1rem; + width: 100%; + box-sizing: border-box; + padding: 0 1.5rem; } button.action-card { width: 100%; @@ -20,7 +23,6 @@ button.action-card { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); border-radius: 4px; padding: 1rem; - margin-bottom: 1.5rem; .action-title { text-align: left; color: white; -- GitLab