mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-09-21 03:30:08 +02:00
Start migration to styled components
This commit is contained in:
Paulo Gustavo Veiga
parent
a6fe41b5c9
commit
76d4593500
@ -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"
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
1
packages/webapp/src/@types/index.d.ts
vendored
1
packages/webapp/src/@types/index.d.ts
vendored
@ -1,3 +1,2 @@
|
||||
declare module 'react-recaptcha-v3';
|
||||
declare module '*.png';
|
||||
|
||||
|
||||
@ -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>
|
||||
<div className="header">
|
||||
<span className="header-logo"><Link to="/"><img src={String(logo)} alt="logo" /></Link></span>
|
||||
<StyledNav>
|
||||
<StyledDiv>
|
||||
<Logo><Link to="/" className="header-logo"><img src={String(logo)} alt="logo" /></Link></Logo>
|
||||
{text}
|
||||
{signUpButton}
|
||||
{signInButton}
|
||||
</div>
|
||||
</nav>
|
||||
</StyledDiv>
|
||||
</StyledNav>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
interface ButtonProps {
|
||||
style?: 'style1' | 'style2'| 'style3';
|
||||
style?: 'style1' | 'style2' | 'style3';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
|
||||
69
packages/webapp/src/components/header/styled.ts
Normal file
69
packages/webapp/src/components/header/styled.ts
Normal file
@ -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;
|
||||
}
|
||||
`
|
||||
1
packages/webapp/src/components/login-page/styled.ts
Normal file
1
packages/webapp/src/components/login-page/styled.ts
Normal file
@ -0,0 +1 @@
|
||||
import styled from 'styled-components';
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user