Skip to content

Commit 7d2efb6

Browse files
TrillCyborgTrillCyborg
committed
refactor Login. use css vars for colors
1 parent 62a7be4 commit 7d2efb6

File tree

10 files changed

+78
-48
lines changed

10 files changed

+78
-48
lines changed

‎client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"react-apollo-hooks": "^0.4.5",
3131
"react-dom": "16.8.6",
3232
"react-native": "0.59.5",
33-
"react-native-web": "0.11.2",
33+
"react-native-web": "^0.11.4",
3434
"react-router-dom": "^5.0.0",
3535
"react-router-native": "^5.0.0",
3636
"react-scripts": "3.0.0",

‎client/src/components/Box/Box.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const Box = styled(View)<BoxProps>`
1111
width: ${props => props.width || '100%'};
1212
max-width: ${props => props.maxWidth || 600}px;
1313
height: ${props => props.height || 500}px;
14-
background: #edeef3;
15-
box-shadow: 0 100px 100px 0 rgba(0, 0, 0, 0.2);
14+
background: var(--light-grayish-blue);
15+
box-shadow: 0 100px 100px 0 var(--black-20);
1616
border-radius: 10px;
1717
`
1818

‎client/src/components/Button/Button.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import * as React from 'react'
22
import { Text, TouchableOpacity } from 'react-native'
33
import styled from 'styled-components'
44

5-
const Wrapper = styled(TouchableOpacity)`
6-
background: #575b7e;
5+
export enum Variants {
6+
primary = 'primary',
7+
}
8+
9+
const Wrapper = styled(TouchableOpacity)<{ variant?: Variants }>`
10+
background: ${props => (props.variant === Variants.primary ? 'var(--cyan)' : 'var(--dark-blue)')};
711
border-radius: 30px;
812
text-align: center;
913
box-shadow: 0 20px 30px 0 rgba(87, 91, 126, 0.3);
@@ -13,18 +17,26 @@ const Wrapper = styled(TouchableOpacity)`
1317
const Label = styled(Text)`
1418
font-size: 18px;
1519
font-weight: 900;
16-
color: #ffffff;
20+
color: var(--white);
1721
letter-spacing: -0.5px;
1822
`
1923

2024
interface ButtonProps {
2125
children: string
2226
onPress: () => void
2327
disabled?: boolean
28+
variant?: Variants
29+
style?: any
2430
}
2531

26-
const Button = ({ children, onPress, disabled }: ButtonProps) => (
27-
<Wrapper onPress={onPress} activeOpacity={0.6} disabled={disabled}>
32+
const Button = ({ children, onPress, disabled, variant, style }: ButtonProps) => (
33+
<Wrapper
34+
variant={variant}
35+
onPress={onPress}
36+
activeOpacity={0.6}
37+
disabled={disabled}
38+
style={style}
39+
>
2840
<Label>{children}</Label>
2941
</Wrapper>
3042
)

‎client/src/components/Button/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default } from './Button'
2+
export * from './Button'

‎client/src/components/Input/Input.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import { View, Text, TextInput, TextInputIOSProps } from 'react-native'
33
import styled from 'styled-components'
44

55
const Base = styled(TextInput)<{ name?: string }>`
6-
background: #ffffff;
6+
background: var(--white);
77
padding: 12px 20px;
88
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.04);
99
border-radius: 2.67px;
1010
font-size: 20px;
1111
font-weight: 900;
12-
color: #575b7e;
12+
color: var(--dark-blue);
1313
letter-spacing: -0.91px;
1414
`
1515

1616
const Label = styled(Text)`
1717
margin-bottom: 8px;
1818
font-size: 13.33px;
1919
font-weight: 900;
20-
color: #575b7e;
20+
color: var(--dark-blue);
2121
letter-spacing: -0.61px;
2222
`
2323

@@ -52,7 +52,7 @@ const Input = ({
5252
onChangeText={onChangeText}
5353
onBlur={onBlur}
5454
placeholder={placeholder}
55-
placeholderTextColor="rgba(67, 91, 126, 0.3)"
55+
placeholderTextColor="var(--dark-moderate-blue-30)"
5656
textContentType={textContentType}
5757
secureTextEntry={secure}
5858
/>

‎client/src/index.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ body {
3939
}
4040

4141
:root {
42+
--dark-blue: #575b7e;
43+
--very-dark-blue: #201c3d;
44+
--light-grayish-blue: #edeef3;
45+
--dark-moderate-blue-30: rgba(67, 91, 126, 0.3);
46+
--cyan: #55b6ab;
4247
--white: #ffffff;
4348
--black: #000000;
49+
--black-10: rgba(0, 0, 0, 0.1);
50+
--black-20: rgba(0, 0, 0, 0.2);
4451
}

‎client/src/screens/Login/Login.tsx

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,19 @@
11
import * as React from 'react'
2-
import { View, Text, Image } from 'react-native'
2+
import { View, Image } from 'react-native'
33
import styled from 'styled-components'
4-
import { Link } from '../../components/Router'
54
import logo from '../../assets/images/logo-full.svg'
65
import TabBox, { Tabs } from './components/TabBox'
76
import { useUserContext } from '../../screens/Login/UserContext'
87
import LoginForm from './components/LoginForm'
98
import SignupForm from './components/SignupForm'
10-
11-
const LinkToOtherLogin = (props: { isLandlord: boolean }) => (
12-
<View style={{ marginTop: 50 }}>
13-
{props.isLandlord ? (
14-
<Text style={{ color: '#EDEEF3' }}>
15-
Looking for{' '}
16-
<Link to="/login">
17-
<Text style={{ color: '#EDEEF3' }}>Tenant Login</Text>
18-
</Link>
19-
?
20-
</Text>
21-
) : (
22-
<Text style={{ color: '#EDEEF3' }}>
23-
Looking for{' '}
24-
<Link to="/landlord/login">
25-
<Text style={{ color: '#EDEEF3' }}>Landlord Login</Text>
26-
</Link>
27-
?
28-
</Text>
29-
)}
30-
</View>
31-
)
9+
import LinkToOtherLogin from './components/LinkToOtherLogin'
3210

3311
const Wrapper = styled(View)`
3412
min-height: 100vh;
3513
flex: 1;
3614
justify-content: center;
3715
align-items: center;
38-
background-image: radial-gradient(50% 100%, #575b7e 0%, #201c3d 100%);
16+
background-image: radial-gradient(50% 100%, var(--dark-blue) 0%, var(--very-dark-blue) 100%);
3917
`
4018

4119
const LogoWrapper = styled(View)`

‎client/src/screens/Login/components/LinkToOtherLogin.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react'
2+
import { View, Text } from 'react-native'
3+
import { Link } from '../../../components/Router'
4+
5+
const LinkToOtherLogin = (props: { isLandlord: boolean }) => (
6+
<View style={{ marginTop: 50 }}>
7+
{props.isLandlord ? (
8+
<Text style={{ color: 'var(--light-grayish-blue)' }}>
9+
Looking for{' '}
10+
<Link to="/login">
11+
<Text style={{ color: 'var(--light-grayish-blue)' }}>tenant login</Text>
12+
</Link>
13+
?
14+
</Text>
15+
) : (
16+
<Text style={{ color: 'var(--light-grayish-blue)' }}>
17+
Looking for{' '}
18+
<Link to="/landlord/login">
19+
<Text style={{ color: 'var(--light-grayish-blue)' }}>landlord login</Text>
20+
</Link>
21+
?
22+
</Text>
23+
)}
24+
</View>
25+
)
26+
27+
export default LinkToOtherLogin

‎client/src/screens/Login/components/TabBox.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,24 @@ export enum Tabs {
99
signup = '/signup',
1010
}
1111

12+
enum Sides {
13+
left = 'LEFT',
14+
right = 'RIGHT',
15+
}
16+
1217
const TabRow = styled(View)`
1318
height: 90px;
1419
flex-direction: row;
1520
`
1621

17-
const TabOuter = styled(Link)<{ active: boolean; left?: boolean; right?: boolean }>`
22+
const TabOuter = styled(Link)<{ active: boolean; side?: Sides }>`
1823
flex: 1;
1924
justify-content: center;
2025
align-items: center;
2126
text-decoration: none;
22-
background-color: ${props => (props.active ? '#EDEEF3' : '#fff')};
23-
${props => props.left && 'border-top-left-radius: 10px;'}
24-
${props => props.right && 'border-top-right-radius: 10px;'}
27+
background-color: ${props => (props.active ? 'var(--light-grayish-blue)' : 'var(--white)')};
28+
${props => props.side === Sides.left && 'border-top-left-radius: 10px;'}
29+
${props => props.side === Sides.right && 'border-top-right-radius: 10px;'}
2530
`
2631

2732
const TabInner = styled(View)`
@@ -35,7 +40,7 @@ const TabInner = styled(View)`
3540
const TabText = styled(Text)`
3641
font-size: 20px;
3742
font-weight: 900;
38-
color: #575b7e;
43+
color: var(--dark-blue);
3944
letter-spacing: -0.91px;
4045
`
4146

@@ -49,7 +54,7 @@ const TabBox = ({ children, activeTab, isLandlord }: TabBoxProps) => (
4954
<Box maxWidth={600} width={'90%'} height={500}>
5055
<TabRow>
5156
<TabOuter
52-
left
57+
side={Sides.left}
5358
active={activeTab === Tabs.login}
5459
to={`${isLandlord ? '/landlord' : ''}${Tabs.login}`}
5560
replace
@@ -60,7 +65,7 @@ const TabBox = ({ children, activeTab, isLandlord }: TabBoxProps) => (
6065
</TabInner>
6166
</TabOuter>
6267
<TabOuter
63-
right
68+
side={Sides.right}
6469
active={activeTab === Tabs.signup}
6570
to={`${isLandlord ? '/landlord' : ''}${Tabs.signup}`}
6671
replace

‎client/yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10350,10 +10350,10 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is
1035010350
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
1035110351
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
1035210352

10353-
react-native-web@0.11.2:
10354-
version "0.11.2"
10355-
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.2.tgz#f3550589347be1f402f0641fefca687ca64a1750"
10356-
integrity sha512-EVUrBftCZBfUCOrwKJPh+hiGmDieBPL+5m+57BFg0UIH6uSmgvXK9r/xy6rQXLRMTgk3krDd94nRo3/31p69+A==
10353+
react-native-web@^0.11.4:
10354+
version "0.11.4"
10355+
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.4.tgz#86e8158d83a6a41983e43b1c84acaaa342d443b2"
10356+
integrity sha512-xuiHd9mxtOUlCY/CY8UO25a3cX5u3qsEdhl7zXLDNbJ0nu1Tf98GsplBZgdnDB0q/LpYVPQWmjnTEerncsO2vw==
1035710357
dependencies:
1035810358
array-find-index "^1.0.2"
1035910359
create-react-class "^15.6.2"

0 commit comments

Comments
 (0)