debug login page

src/component/Login/LoginLogo.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 const Logo = props => {
   return (
-    <div className='loginpage__content__logo'>
+    <div className={props.customClass}>
       <img src={props.logoSrc} />
     </div>
   )
@@ -11,5 +11,10 @@ const Logo = props => {
 export default Logo
 
 Logo.PropTypes = {
-  logoSrc: PropTypes.string.isRequired
+  logoSrc: PropTypes.string.isRequired,
+  customClass: PropTypes.string
+}
+
+Logo.defaultProps = {
+  customClass: ''
 }

src/component/common/Card/Card.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 const Card = props => {
   return (
-    <div className='loginpage__content__connection card'>
+    <div className={classnames(props.customClass, 'card')}>
       {props.children}
     </div>
   )
@@ -11,5 +12,10 @@ const Card = props => {
 export default Card
 
 Card.PropTypes = {
-  children: PropTypes.element.isRequired
+  children: PropTypes.element.isRequired,
+  customClass: PropTypes.string
+}
+
+Card.defaultProps = {
+  customClass: ''
 }

src/container/Login.jsx

@@ -38,13 +38,11 @@ class Login extends React.Component {
     //   </div>
     // )
     const LoginWrapper = props => (
-      <div className='loginpage'>
-        <section className='loginpage__content'>
-          <div className='container-fluid'>
-            {props.children}
-          </div>
-        </section>
-      </div>
+      <section className='loginpage'>
+        <div className='container-fluid'>
+          {props.children}
+        </div>
+      </section>
     )
     const LoginCardWrapper = props => (
       <div className='row justify-content-center'>
@@ -65,10 +63,10 @@ class Login extends React.Component {
     )
     return (
       <LoginWrapper>
-        <LoginLogo logoSrc={LoginLogoImg} />
+        <LoginLogo customClass='loginpage__logo' logoSrc={LoginLogoImg} />
 
         <LoginCardWrapper>
-          <Card customClass='loginpage__content__connection'>
+          <Card customClass='loginpage__connection'>
             <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
 
             <CardBody formClass='connection__form'>

src/css/Header.styl

@@ -23,7 +23,6 @@
     &__rightside
       display flex
       margin-top 15px
-      width 100%
       list-style none
       &__itemsearch
         margin-right 8%

src/css/Login.styl

@@ -1,72 +1,69 @@
 .loginpage
-  &__content
-    position relative
-    padding-top 85px // 85 = header height
-    min-height 100%
-    background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
-    background-size contain
-    display table
-    width 100%
-    &__logo
-      margin 0 auto
-      padding 35px 0
-      width 170px
-    &__connection
+  padding-top 85px // 85 = header height
+  min-height calc(100% - 50px)
+  background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
+  background-size contain
+  width 100%
+  &__logo
+    margin 0 auto
+    padding 50px 0
+    width 170px
+  &__connection
+    border none
+    box-shadow shadow-right
+    margin-bottom 50px
+    .connection__header
+      background-color blue
+      color #FFF
+      font-size 25px
+  .connection__form
+    width 70%
+    margin 0 auto
+    &__rememberme
+      &__label
+        font-size 13px
+    &__groupemail
+      position relative
+      &__icon
+        position absolute
+        top 6px
+        left 10px
+        width 20px
+      &__input
+        padding-left 45px
+    &__groupepw
+      position relative
+      &__icon
+        font-size 20px
+        width 20px
+        position absolute
+        top 5px
+        left 8px
+      &__input
+        padding-left 45px
+    &__btnsubmit
+      width 150px
+      background-color green
       border none
-      box-shadow shadow-right
-      margin-bottom 50px
-      .connection__header
-        background-color blue
-        color #FFF
-        font-size 25px
-    .connection__form
-      width 70%
+      cursor pointer
+      display block
       margin 0 auto
-      &__rememberme
-        &__label
-          font-size 13px
-      &__groupemail
-        position relative
-        &__icon
-          position absolute
-          top 6px
-          left 10px
-          width 20px
-        &__input
-          padding-left 45px
-      &__groupepw
-        position relative
-        &__icon
-          font-size 20px
-          width 20px
-          position absolute
-          top 5px
-          left 8px
-        &__input
-          padding-left 45px
-      &__btnsubmit
-        width 150px
-        background-color green
-        border none
-        cursor pointer
-        display block
-        margin 0 auto
-        &:hover
-          background-color dark-green
-        &:focus
-          box-shadow shadow-all-side-green
-      &__pwforgot
-        cursor pointer
-        font-size 13px
-        margin-top 3px
-        &:hover::after
-          content ' '
-          position absolute
-          top 20px
-          right 15px
-          width 130px
-          padding-bottom 2px
-          border-bottom 1px solid dark-grey
+      &:hover
+        background-color dark-green
+      &:focus
+        box-shadow shadow-all-side-green
+    &__pwforgot
+      cursor pointer
+      font-size 13px
+      margin-top 3px
+      &:hover::after
+        content ' '
+        position absolute
+        top 20px
+        right 15px
+        width 130px
+        padding-bottom 2px
+        border-bottom 1px solid dark-grey
 
 @media (min-width: min-lg) and (max-width: max-lg)
   .loginpage__content