62 |
63 |
64 |
65 |
66 |
67 | {users.length > 0 ? (
68 |
91 | ) : (
92 | Oops... there are no devs available at the moment.
93 | )}
94 |
95 | {itsAMatch && (
96 |
97 |
98 |
99 |
100 |
101 |
102 | {itsAMatch.name}
103 | {itsAMatch.bio}
104 |
105 |
110 | {/*
*/}
111 |
112 | )}
113 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/mobile/src/pages/Main/Main_Styles.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components/native';
2 | import { Animated } from 'react-native';
3 |
4 | export const Container = styled.SafeAreaView`
5 | flex: 1;
6 | background: #282a36;
7 | justify-content: space-between;
8 | align-items: center;
9 | padding: 60px 30px;
10 | `;
11 |
12 | export const CardsContainer = styled.View`
13 | flex: 1;
14 | align-self: stretch;
15 | justify-content: center;
16 | max-height: 500px;
17 | `;
18 |
19 | export const AnimatedCard = styled(Animated.View)`
20 | background: #44475a;
21 | border: 1px solid #44475a;
22 | border-radius: 8px;
23 | overflow: hidden;
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | right: 0;
28 | bottom: 0;
29 | elevation: 3;
30 | `;
31 |
32 | export const AnimatedTag = styled(Animated.View)`
33 | position: absolute;
34 | top: 36px;
35 | left: ${({ action }) => (action === 'like' ? '20px' : 'auto')};
36 | right: ${({ action }) => (action === 'dislike' ? '20px' : 'auto')};
37 | transform: ${({ action }) =>
38 | action === 'like' ? 'rotate(-30deg)' : 'rotate(30deg)'};
39 | z-index: 2;
40 | border-width: 6px;
41 | border-color: ${({ action }) => (action === 'like' ? 'green' : 'red')};
42 | border-radius: 12px;
43 | justify-content: center;
44 | align-items: center;
45 | `;
46 |
47 | export const TagText = styled.Text`
48 | color: ${({ action }) => (action === 'like' ? 'green' : 'red')};
49 | font-size: 32px;
50 | font-weight: bold;
51 | padding: 4px 10px;
52 | `;
53 |
54 | export const Avatar = styled.Image`
55 | flex: 1;
56 | height: 300px;
57 | `;
58 |
59 | export const InfoWrapper = styled.View`
60 | padding: 15px 20px;
61 | `;
62 |
63 | export const Name = styled.Text`
64 | font-size: 16px;
65 | color: #fff;
66 | `;
67 |
68 | export const Bio = styled.Text.attrs({
69 | numberOfLines: 3,
70 | })`
71 | font-size: 14px;
72 | line-height: 20px;
73 | color: #ccccc7;
74 | margin-top: 5px;
75 | `;
76 |
77 | export const Footer = styled.View`
78 | flex-direction: row;
79 | `;
80 |
81 | export const FooterButton = styled.TouchableOpacity`
82 | width: 50px;
83 | height: 50px;
84 | border-radius: 25px;
85 | background: #44475a;
86 | justify-content: center;
87 | align-items: center;
88 | margin: 0 20px;
89 | elevation: 2;
90 | /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5); */
91 | `;
92 |
93 | export const MatchContainer = styled.View`
94 | background: rgba(0, 0, 0, 0.85);
95 | position: absolute;
96 | top: 0;
97 | right: 0;
98 | bottom: 0;
99 | left: 0;
100 | justify-content: center;
101 | align-items: center;
102 | elevation: 15;
103 | z-index: 999;
104 | `;
105 |
106 | export const MatchSymbol = styled.Image`
107 | margin-bottom: 50px;
108 | height: 60px;
109 | resize-mode: contain;
110 | `;
111 |
112 | export const MatchAvatar = styled.Image`
113 | width: 160px;
114 | height: 160px;
115 | border-radius: 80px;
116 | border-width: 5px;
117 | border-color: #44475a;
118 | `;
119 |
120 | export const MatchName = styled.Text`
121 | font-size: 28px;
122 | font-weight: bold;
123 | color: #fff;
124 | margin-top: 20px;
125 | `;
126 |
127 | export const MatchBio = styled.Text`
128 | margin-top: 10px;
129 | font-size: 16px;
130 | line-height: 24px;
131 | color: rgba(255, 255, 255, 0.7);
132 | text-align: center;
133 | padding: 0 30px;
134 | `;
135 |
136 | export const MatchButtonText = styled.Text`
137 | font-size: 16px;
138 | color: #fff;
139 | text-align: center;
140 | margin-top: 30px;
141 | font-weight: bold;
142 | text-transform: uppercase;
143 | `;
144 |
--------------------------------------------------------------------------------
/frontend/src/pages/Main/Main_Styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { darken, lighten } from 'polished';
3 |
4 | export const Container = styled.main`
5 | max-width: 980px;
6 | margin: 0 auto;
7 | padding: 50px 0;
8 | text-align: center;
9 |
10 | header + div {
11 | font-size: 20px;
12 | color: #65666d;
13 | font-weight: bold;
14 | margin-top: 300px;
15 | }
16 |
17 | ul {
18 | display: grid;
19 | grid-template-columns: repeat(3, 1fr);
20 | grid-gap: 30px;
21 | margin-top: 50px;
22 |
23 | li {
24 | display: flex;
25 | flex-direction: column;
26 |
27 | header {
28 | max-width: 100%;
29 | max-height: 300px;
30 | border-radius: 4px 4px 0 0;
31 | overflow: hidden;
32 | background: #44475a;
33 |
34 | img {
35 | max-width: 100%;
36 | object-fit: cover;
37 | }
38 | }
39 |
40 | section {
41 | flex: 1;
42 | background: #44475a;
43 | border: 1px solid #44475a;
44 | padding: 15px 20px;
45 | text-align: left;
46 | border-radius: 0 0 4px 4px;
47 |
48 | h2 {
49 | font-size: 16px;
50 | color: #fff;
51 | }
52 |
53 | p {
54 | font-size: 14px;
55 | line-height: 20px;
56 | color: #ccccc7;
57 | margin-top: 5px;
58 | }
59 | }
60 |
61 | footer {
62 | margin-top: 10px;
63 | display: grid;
64 | grid-template-columns: repeat(2, 1fr);
65 | grid-gap: 10px;
66 |
67 | button {
68 | height: 50px;
69 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
70 | border-radius: 4px;
71 | background: #44475a;
72 | transition: all 150ms ease-in-out;
73 |
74 | &:hover {
75 | box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
76 | transform: translateY(-1px);
77 | background: ${lighten(0.03, '#44475a')};
78 | }
79 |
80 | &:active {
81 | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
82 | transform: translateY(1px);
83 | background: ${darken(0.03, '#44475a')};
84 | }
85 | }
86 | }
87 | }
88 | }
89 | `;
90 |
91 | export const MatchContainer = styled.aside`
92 | position: fixed;
93 | height: 100%;
94 | top: 0;
95 | right: 0;
96 | bottom: 0;
97 | left: 0;
98 | display: flex;
99 | flex-direction: column;
100 | align-items: center;
101 | justify-content: center;
102 | background: rgba(0, 0, 0, 0.85);
103 |
104 | article {
105 | margin-top: 50px;
106 | max-width: 400px;
107 |
108 | img {
109 | width: 200px;
110 | height: 200px;
111 | border-radius: 50%;
112 | border: 5px solid #44475a;
113 | }
114 |
115 | h1 {
116 | margin-top: 20px;
117 | font-size: 32px;
118 | color: #fff;
119 | }
120 |
121 | p {
122 | margin-top: 10px;
123 | font-size: 20px;
124 | line-height: 30px;
125 | color: rgba(255, 255, 255, 0.7);
126 | }
127 | }
128 |
129 | footer {
130 | margin-top: 10px;
131 |
132 | button {
133 | height: 50px;
134 | border-radius: 4px;
135 | background: none;
136 | color: #fff;
137 | font-size: 18px;
138 | font-weight: bold;
139 | text-transform: uppercase;
140 | transition: all 150ms ease-in-out;
141 |
142 | &:hover {
143 | transform: translateY(-1px);
144 | }
145 |
146 | &:active {
147 | transform: translateY(1px);
148 | }
149 | }
150 | }
151 | `;
152 |
--------------------------------------------------------------------------------
/mobile/ios/tinDev/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |