From 76d459350047401bfa36440d77166fa1d045ecda Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Tue, 8 Dec 2020 09:35:36 -0800 Subject: [PATCH] Start migration to styled components --- package.json | 7 +- packages/webapp/package.json | 3 +- packages/webapp/src/@types/index.d.ts | 1 - .../webapp/src/components/header/index.tsx | 14 ++-- .../webapp/src/components/header/styled.ts | 69 ++++++++++++++++ .../src/components/login-page/styled.ts | 1 + packages/webapp/src/css/core.css | 80 ------------------- 7 files changed, 82 insertions(+), 93 deletions(-) create mode 100644 packages/webapp/src/components/header/styled.ts create mode 100644 packages/webapp/src/components/login-page/styled.ts diff --git a/package.json b/package.json index 045c613e..a3f8a5d5 100644 --- a/package.json +++ b/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", - "dependencies": { - "@types/react-google-recaptcha": "^2.1.0" - } -} + "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL" +} \ No newline at end of file diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 1ccacf93..f9da0e6b 100644 --- a/packages/webapp/package.json +++ b/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" } } diff --git a/packages/webapp/src/@types/index.d.ts b/packages/webapp/src/@types/index.d.ts index ecdaa29a..c1dabd92 100644 --- a/packages/webapp/src/@types/index.d.ts +++ b/packages/webapp/src/@types/index.d.ts @@ -1,3 +1,2 @@ -declare module 'react-recaptcha-v3'; declare module '*.png'; diff --git a/packages/webapp/src/components/header/index.tsx b/packages/webapp/src/components/header/index.tsx index 98d5eb01..9055f605 100644 --- a/packages/webapp/src/components/header/index.tsx +++ b/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 { } return ( - + + ) }; } interface ButtonProps { - style?: 'style1' | 'style2'| 'style3'; + style?: 'style1' | 'style2' | 'style3'; className?: string; } diff --git a/packages/webapp/src/components/header/styled.ts b/packages/webapp/src/components/header/styled.ts new file mode 100644 index 00000000..26a7d09d --- /dev/null +++ b/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; +} +` \ No newline at end of file diff --git a/packages/webapp/src/components/login-page/styled.ts b/packages/webapp/src/components/login-page/styled.ts new file mode 100644 index 00000000..4f210a90 --- /dev/null +++ b/packages/webapp/src/components/login-page/styled.ts @@ -0,0 +1 @@ +import styled from 'styled-components'; diff --git a/packages/webapp/src/css/core.css b/packages/webapp/src/css/core.css index 2e408420..ad2f137c 100644 --- a/packages/webapp/src/css/core.css +++ b/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 {