From a818be576621245589578dc93b601eca5d066a60 Mon Sep 17 00:00:00 2001 From: Priyatham Sai Chand Date: Fri, 26 Mar 2021 23:54:56 +0530 Subject: [PATCH 01/12] start styled log in migration --- src/components/LogInContainer.js | 15 +++++++++++++++ src/login_reg.css | 7 +------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index 52c3a4b..c9a10d7 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -5,6 +5,21 @@ import Login from './Login'; import Footer from './Footer'; import '../login_reg.css'; +const BaseApp = styled.div` + display: flex; + color: white; + height:100vh; + + +`; +const AppSide = styled.div` + width: 50%; + background-color: #66bfbf; + display:flex; + flex-direction: column; + justify-content: flex-end; + +`; const LogInContainer = (props) => { return ( diff --git a/src/login_reg.css b/src/login_reg.css index 5b16d14..0914682 100644 --- a/src/login_reg.css +++ b/src/login_reg.css @@ -6,12 +6,7 @@ } .Apper__Aside { - width: 50%; - background-color: #66bfbf; - display:flex; - flex-direction: column; - justify-content: flex-end; - + } From 66e24f5d3c5dcc7dafea96b83e6a12b14708424c Mon Sep 17 00:00:00 2001 From: Priyatham Sai Chand Date: Sat, 27 Mar 2021 23:52:22 +0530 Subject: [PATCH 02/12] log in styled change --- src/components/LogInContainer.js | 78 ++++++++++++++++++++++++++++++++ src/login_reg.css | 40 ---------------- 2 files changed, 78 insertions(+), 40 deletions(-) diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index c9a10d7..219f74f 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -19,6 +19,84 @@ const AppSide = styled.div` flex-direction: column; justify-content: flex-end; +`; +const AppForm = styled.div` + + width: 50%; + background-color: #ffffff; + padding: 25px 40px; + overflow: auto; + +`; +const PageSwitcher = styled.div` + + display: flex; + justify-content: flex-end; + margin-bottom: 10%; + +`; +const BannerHeading = styled.h1` + + position: relative; + text-align: center; + font-family: Ubuntu; + font-size: 5rem; + font-weight: bold; + color: #ffffff; + text-decoration: none; + text-transform: lowercase; +`; +const PlaneContainer = styled.div` + + width:100px; + display:flex; + margin-bottom: 50px; + align-content: flex-start; + justify-content: flex-start; + +`; +const TextContainer = styled.p` + + width: 50%; + background-color: #66bfbf; + display:flex; + flex-direction: column; + justify-content: flex-end; + +`; + +const BannerText = styled.p` + color:white; + font-size: 1.25em; + font-style:italic; + + +`; +const SkyContainer = styled.div` + margin-top: 600px; + width: 100%; + background-size: 100%; +`; +const PageSwitcher = styled(NavLink)` + background-color: #4C5D72; + color: white; + padding: 10px 25px; + cursor: pointer; + font-size: .9em; + border: none; + outline: none; + display: inline-block; + text-decoration: none; + + ${props = props.active ? css` + + background-color: #66bfbf; + color: white; + `: css``} + + + + `; const LogInContainer = (props) => { diff --git a/src/login_reg.css b/src/login_reg.css index 0914682..b82bf6b 100644 --- a/src/login_reg.css +++ b/src/login_reg.css @@ -11,68 +11,28 @@ } .Apper__Form { - width: 50%; - background-color: #ffffff; - padding: 25px 40px; - overflow: auto; } .PageSwitcher { - display: flex; - justify-content: flex-end; - margin-bottom: 10%; } .Apper_heading{ - position: relative; - text-align: center; - font-family: Ubuntu; - font-size: 5rem; - font-weight: bold; - color: #ffffff; - text-decoration: none; - text-transform: lowercase; } .Apper_logo img{ - width:100px; - display:flex; - margin-bottom: 50px; - align-content: flex-start; - justify-content: flex-start; } .Apper__Aside__text { - text-align: center; - margin-bottom: 25%; } .Apper_quote{ - color:white; - font-size: 1.25em; - font-style:italic; } .Apper__Aside_image{ - margin-top: 600px; - width: 100%; - - background-size: 100%; } .PageSwitcher__Item { - background-color: #4C5D72; - color: white; - padding: 10px 25px; - cursor: pointer; - font-size: .9em; - border: none; - outline: none; - display: inline-block; - text-decoration: none; } .PageSwitcher__Item--Active { - background-color: #66bfbf; - color: white; } .PageSwitcher__Item:first-child { From 88f2d51a336fa8488d14da314643d054628ad106 Mon Sep 17 00:00:00 2001 From: Priyatham Sai Chand Date: Sun, 28 Mar 2021 18:38:40 +0530 Subject: [PATCH 03/12] Button styled export --- src/components/miscellaneous/Styles.js | 29 ++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/components/miscellaneous/Styles.js diff --git a/src/components/miscellaneous/Styles.js b/src/components/miscellaneous/Styles.js new file mode 100644 index 0000000..069b6ad --- /dev/null +++ b/src/components/miscellaneous/Styles.js @@ -0,0 +1,29 @@ +import styled from 'styled-components' + + +const Button = styled.a` + + display: inline-block; + margin: 15px auto; + padding: 8px 20px; + color: ${props => props.textcolor ? props.textcolor : "black"} !important; + background: ${props => props.displaycolor ? props.displaycolor : "white"} ; + border-radius: ${props => props.radius ? props.radius: "5"}px; + border: 1px solid; + border-color: ${props => props.radiuscolor ? props.radiuscolor : "black"}; + text-transform: uppercase; + letter-spacing: 0.02em; + font-weight: bold; + text-align: center; + cursor: pointer; + + &:hover { + + background: ${props => props.hovercolor ? props.hovercolor : "white"} ; + color: ${props => props.hovertextcolor ? props.hovertextcolor : "black"}!important; + + } + + +`; +export { Button }; \ No newline at end of file From 235711d3d601c1b887b6eea4d9cefb2cfd56baec Mon Sep 17 00:00:00 2001 From: Priyatham Sai Chand Date: Sun, 28 Mar 2021 23:54:21 +0530 Subject: [PATCH 04/12] finish pricing styled --- src/components/LogInContainer.js | 90 +++++++++++++++++++++++--------- src/components/Login.js | 34 +++++++----- src/components/NavBar.js | 4 +- src/components/PricingPlan.js | 39 ++++---------- 4 files changed, 98 insertions(+), 69 deletions(-) diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index 219f74f..8edd08e 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -3,6 +3,7 @@ import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-d import Register from './Register'; import Login from './Login'; import Footer from './Footer'; +import styled, {css} from 'styled-components'; import '../login_reg.css'; const BaseApp = styled.div` @@ -28,7 +29,7 @@ const AppForm = styled.div` overflow: auto; `; -const PageSwitcher = styled.div` +const PageSwitcherContainer = styled.div` display: flex; justify-content: flex-end; @@ -86,44 +87,81 @@ const PageSwitcher = styled(NavLink)` border: none; outline: none; display: inline-block; - text-decoration: none; - - ${props = props.active ? css` + text-decoration: none !important; + &.active{ background-color: #66bfbf; color: white; - `: css``} + } + &:first-child { + border-top-left-radius: 25px; + border-bottom-left-radius: 25px; + + } + &:last-child { + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + + } +`; + +const FormLink = styled(NavLink)` + + color: #707C8B; + text-decoration: none !important; + display: inline-block; + font-size: 1.7em; + margin: 0 10px; + padding-bottom: 5px; + border: none; + + &:first-child { + margin-left: 0; + } + &:last-child{ + color: #707c8b; + } + &.active{ + border-bottom: 1px solid #199087; + } `; +const FormTitle = styled.div` + color: #000000; + font-weight: 300; + margin-bottom: 50px; + + +`; const LogInContainer = (props) => { return ( -
-
-
+ + + plane logo -
-
-

locaft

-

Sit back, let us move you

+ + + locaft + Sit back, let us move you -
-
+ + skyscraper -
-
-
-
- Sign In - Sign Up -
-
- Sign In or Sign Up -
+ + + + + Sign In + Sign Up + + + Sign In or Sign Up + @@ -132,9 +170,9 @@ const LogInContainer = (props) => {

-
+ -
+