From 9fc5ed746be9b5babbf69df34239484e85083a16 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 16 Jan 2023 08:39:02 +0000
Subject: [PATCH] Revert "fix(css): header and sge view for small screens"

This reverts commit 133470e1767ca440e3b241baf7da35b5f176a0fe
---
 .../Connection/SGEConnect/SgeConnect.scss     |  2 -
 .../Connection/SGEConnect/SgeConnectView.tsx  |  3 -
 .../SgeConnectView.spec.tsx.snap              |  1 -
 src/components/Header/Header.tsx              | 19 ++---
 src/components/Header/header.scss             |  8 +--
 src/styles/base/_layout.scss                  | 70 +++++++++++++++++++
 6 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index 7a02ec9d4..73e386aba 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -13,8 +13,6 @@
   top: 4rem;
   width: 100%;
   height: 92vh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
   @media (min-width: $width-large-phone) {
     top: 8rem;
     height: 85vh;
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 1f5cbf459..88c9b5f08 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -142,9 +142,6 @@ const SgeConnectView: React.FC = () => {
         setHeaderHeight={defineHeaderHeight}
         desktopTitleKey={'common.title_sge_connect'}
         displayBackArrow={true}
-        backFunction={() =>
-          dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
-        }
       ></Header>
       <Content height={headerHeight}>
         <div className="sge-view">
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index b3f663e1a..6b58abe11 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -339,7 +339,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
       </BarRight>
     </CozyBar>
     <Header
-      backFunction={[Function]}
       desktopTitleKey="common.title_sge_connect"
       displayBackArrow={true}
       setHeaderHeight={[Function]}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 49a4fc643..3a469698a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,15 +1,16 @@
-import IconButton from '@material-ui/core/IconButton'
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbackIcon from 'assets/icons/ico/feedback.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { ScreenType } from 'enum/screen.enum'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import './header.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector, useDispatch } from 'react-redux'
 import { AppStore } from 'store'
 import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import './header.scss'
+import { useHistory } from 'react-router-dom'
+
+import { ScreenType } from 'enum/screen.enum'
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from '@material-ui/core/IconButton'
 
 interface HeaderProps {
   textKey?: string
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 1a73a5fe5..58b400875 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -22,17 +22,17 @@
       $dark-2 100%
     );
     width: 100%;
-    display: flex;
-    justify-content: flex-end;
     .header-text {
       padding: 0 1rem 1rem 1rem;
       color: $grey-bright;
     }
   }
   .header-content {
-    width: 85%;
+    margin: 0 0 0 220px;
+    display: flex;
+    flex-direction: column;
     @media #{$tablet} {
-      width: 100%;
+      margin: 0;
     }
     @media #{$large-phone} {
       margin: 60px 0 0 0;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 63369debd..977aa5666 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -45,6 +45,76 @@ body {
   color: #32363f;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  z-index: $z-header;
+  position: fixed;
+  top: 48px;
+  left: 0;
+  @media #{$large-phone} {
+    top: 0;
+  }
+  .header-top {
+    background: radial-gradient(
+      circle,
+      rgba(52, 54, 65, 1) 0%,
+      rgba(27, 28, 34, 1) 100%
+    );
+    width: 100%;
+    .header-text {
+      padding: 0 1rem 1rem 1rem;
+      color: $grey-bright;
+    }
+  }
+  .header-content {
+    margin: 0 0 0 220px;
+    display: flex;
+    flex-direction: column;
+    @media #{$tablet} {
+      margin: 0;
+    }
+    @media #{$large-phone} {
+      margin: 60px 0 0 0;
+    }
+    .header-content-top {
+      display: flex;
+      flex-direction: row;
+      &.header-content-top-right {
+        justify-content: flex-end;
+      }
+      .header-text {
+        padding: 2rem 1rem;
+        flex: 1;
+      }
+      .header-text-desktop {
+        display: flex;
+        flex: 1;
+        padding: 2rem 1.25rem;
+        color: $grey-bright;
+      }
+      .header-back-button {
+        padding: 0 0.75rem;
+      }
+      @media #{$large-phone} {
+        .header-text {
+          padding: 0 1rem 1rem 1rem;
+          color: $grey-bright;
+        }
+        .header-text-desktop {
+          display: none;
+        }
+        .header-feedbacks-button {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 .content-view-loading {
   height: 80vh;
   width: 100%;
-- 
GitLab