From c2c977359048f93a41970ee98fe7b015be85daf3 Mon Sep 17 00:00:00 2001
From: Yoan Vallet <yoan.vallet@gmail.com>
Date: Mon, 29 Jun 2020 19:38:03 +0200
Subject: [PATCH] feat: fix position when no text in header
---
.../FeedbacksContainer.tsx} | 6 +++---
.../ContainerComponents/Header/Header.tsx | 14 ++++++++++++--
.../ViewContainer/ViewContainer.tsx | 4 ++--
.../FeedbacksModal.tsx | 0
src/styles/base/_layout.scss | 3 +++
5 files changed, 20 insertions(+), 7 deletions(-)
rename src/components/ContainerComponents/{Feedbacks/Feedbacks.tsx => FeedbacksContainer/FeedbacksContainer.tsx} (81%)
rename src/components/ContentComponents/{FeedbacksModal => Feedbacks}/FeedbacksModal.tsx (100%)
diff --git a/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx b/src/components/ContainerComponents/FeedbacksContainer/FeedbacksContainer.tsx
similarity index 81%
rename from src/components/ContainerComponents/Feedbacks/Feedbacks.tsx
rename to src/components/ContainerComponents/FeedbacksContainer/FeedbacksContainer.tsx
index 83075762f..39f770426 100644
--- a/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx
+++ b/src/components/ContainerComponents/FeedbacksContainer/FeedbacksContainer.tsx
@@ -1,8 +1,8 @@
import React, { useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
-import FeedbacksModal from 'components/ContentComponents/FeedbacksModal/FeedbacksModal'
+import FeedbacksModal from 'components/ContentComponents/Feedbacks/FeedbacksModal'
-const Feedbacks: React.FC = () => {
+const FeedbacksContainer: React.FC = () => {
const { feedbacksIsOpened, setFeedbacksOpened } = useContext(AppContext)
const handleCloseClick = () => {
@@ -17,4 +17,4 @@ const Feedbacks: React.FC = () => {
)
}
-export default Feedbacks
+export default FeedbacksContainer
diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/ContainerComponents/Header/Header.tsx
index 5d342bd66..29770f48c 100644
--- a/src/components/ContainerComponents/Header/Header.tsx
+++ b/src/components/ContainerComponents/Header/Header.tsx
@@ -58,7 +58,13 @@ const Header: React.FC<HeaderProps> = ({
<div className="header" ref={header}>
<div className="header-top">
<div className="header-content">
- <div className="header-content-top">
+ <div
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-content-top header-content-top-right'
+ : 'header-content-top'
+ }
+ >
{textKey && (
<div
className={`header-text ${
@@ -89,7 +95,11 @@ const Header: React.FC<HeaderProps> = ({
</div>
)}
<StyledIconButton
- className="header-feedbacks-button"
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-feedbacks-button right'
+ : 'header-feedbacks-button'
+ }
icon={FeedbacksIcon}
size={40}
onClick={() => handleClickFeedbacks()}
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
index 9f0704db9..7bb0e8b8d 100644
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
@@ -19,7 +19,7 @@ import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewCon
import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import LegalNoticeViewContainer from './LegalNoticeViewContainer'
-import Feedbacks from 'components/ContainerComponents/Feedbacks/Feedbacks'
+import FeedbacksContainer from 'components/ContainerComponents/FeedbacksContainer/FeedbacksContainer'
export const history = createBrowserHistory()
@@ -30,7 +30,7 @@ export const ViewContainer = () => {
<AppContextProvider>
<Navbar />
<Main>
- <Feedbacks />
+ <FeedbacksContainer />
<Content className="app-content">
<ScrollToTop>
<Switch>
diff --git a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx b/src/components/ContentComponents/Feedbacks/FeedbacksModal.tsx
similarity index 100%
rename from src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
rename to src/components/ContentComponents/Feedbacks/FeedbacksModal.tsx
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index a3725ce8b..0f07d9e7f 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -83,6 +83,9 @@ body {
.header-content-top {
display: flex;
flex-direction: row;
+ &.header-content-top-right{
+ justify-content: flex-end;
+ }
.header-text {
padding: 2rem 1rem;
flex: 1;
--
GitLab