Start migration to styled components

package.json

@@ -44,8 +44,5 @@
         ]
     },
     "homepage": "http://localhost:8080/react",
-    "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
+    "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL"
-    "dependencies": {
+}
-        "@types/react-google-recaptcha": "^2.1.0"
-    }
-}

packages/webapp/package.json

@@ -49,6 +49,7 @@
         "react-dom": "^17.0.1",
         "react-google-recaptcha": "^2.1.0",
         "react-intl": "^5.10.6",
-        "react-router-dom": "^5.2.0"
+        "react-router-dom": "^5.2.0",
+        "styled-components": "^5.2.1"
     }
 }

packages/webapp/src/@types/index.d.ts

@@ -1,3 +1,2 @@
-declare module 'react-recaptcha-v3';
 declare module '*.png';
 

packages/webapp/src/components/header/index.tsx

@@ -1,3 +1,5 @@
+import { StyledNav, StyledDiv,Logo } from './styled';
+
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
@@ -34,20 +36,20 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
     }
 
     return (
-      <nav>
+      <StyledNav>
-        <div className="header">
+        <StyledDiv>
-          <span className="header-logo"><Link to="/"><img src={String(logo)} alt="logo" /></Link></span>
+          <Logo><Link to="/" className="header-logo"><img src={String(logo)} alt="logo" /></Link></Logo>
           {text}
           {signUpButton}
           {signInButton}
-        </div>
+        </StyledDiv>
-      </nav>
+      </StyledNav>
     )
   };
 }
 
 interface ButtonProps {
-  style?: 'style1' | 'style2'| 'style3';
+  style?: 'style1' | 'style2' | 'style3';
   className?: string;
 }
 

packages/webapp/src/components/header/styled.ts

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+
+export const StyledNav = styled.nav`
+height: 90px;
+position: sticky;
+top: -16px;
+z-index: 1;
+-webkit-backface-visibility: hidden;
+
+&::before,
+&::after {
+    content: '';
+    display: block;
+    height: 16px;
+    position: sticky;
+}
+
+&::before {
+    top: 58px;
+    box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
+}
+
+&::after {
+    background: linear-gradient(white, rgba(255, 255, 255, 0.3));
+    top: 0;
+    z-index: 2;
+}
+
+/* Review ....*/
+.header-middle {
+    grid-column-start: 2;
+}
+
+.header-area-right1 {
+    grid-column-start: 3;
+}
+
+.header-area-right2 {
+    grid-column-start: 4;
+}
+`;
+
+export const StyledDiv  = styled.nav`
+background: white;
+height: 74px;
+padding: 10px;
+position: sticky;
+top: 0px;
+margin-top: -16px;
+z-index: 3;
+
+display: grid;
+white-space: nowrap;
+grid-template-columns: 150px 1fr 130px 160px 50px;
+`
+
+export const Logo  = styled.span`
+grid-column-start: 1;
+margin-left: 50px;
+margin-top: 5px;
+
+.header-logo img {
+    height: 50px;
+}
+
+.header-logo a {
+    padding: 0px;
+}
+`

packages/webapp/src/components/login-page/styled.ts

@@ -0,0 +1 @@
+import styled from 'styled-components';

packages/webapp/src/css/core.css

@@ -53,86 +53,6 @@ p {
 }
 
 
-/* Header Section */
-
-nav {
-    height: 90px;
-    position: sticky;
-    top: -16px;
-    z-index: 1;
-    -webkit-backface-visibility: hidden;
-}
-
-nav::before,
-nav::after {
-    content: '';
-    display: block;
-    height: 16px;
-    position: sticky;
-}
-
-nav::before {
-    top: 58px;
-    box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
-}
-
-nav::after {
-    background: linear-gradient(white, rgba(255, 255, 255, 0.3));
-    top: 0;
-    z-index: 2;
-}
-
-nav>div {
-    background: white;
-    height: 74px;
-    padding: 10px;
-    position: sticky;
-    top: 0px;
-    margin-top: -16px;
-    z-index: 3;
-}
-
-nav a {
-    text-decoration: none;
-    border-radius: 9px;
-    padding: 10px 15px 10px 15px;
-    background-color: white;
-    color: #000000;
-}
-
-.header {
-    display: grid;
-    white-space: nowrap;
-    grid-template-columns: 150px 1fr 130px 160px 50px;
-}
-
-.header-logo {
-    grid-column-start: 1;
-    margin-left: 50px;
-    margin-top: 5px;
-}
-
-.header-logo img {
-    height: 50px;
-}
-
-.header-logo a {
-    padding: 0px;
-}
-
-.header-middle {
-    grid-column-start: 2;
-}
-
-.header-area-right1 {
-    grid-column-start: 3;
-}
-
-.header-area-right2 {
-    grid-column-start: 4;
-}
-
-
 /* Footer */
 
 .footer {