Skip to content

Commit a23ac62

Browse files
VaseanAnninVaseanAnnin
authored
Merge pull request #32 from oslabs-beta/lastMinute
slight styling changes
2 parents b1fbd8d + eb6f29b commit a23ac62

File tree

6 files changed

+120
-26
lines changed

6 files changed

+120
-26
lines changed

‎test-client/src/client/components/CharacterCard.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { CharacterProps } from '../types';
44
const CharacterCard = ({ character }: CharacterProps) => {
55
return (
66
<div className='characterCard'>
7-
<h1>{character.name}</h1>
8-
<p>Gender: {character.gender}</p>
9-
<p>Hair Color: {character.hair_color}</p>
10-
<p>Birth Year: {character.birth_year}</p>
11-
<p>Homeplanet: {character.homeworld_id}</p>
12-
<p>Species: {character.species_id}</p>
7+
<h1 className='cardTitle'>{character.name}</h1>
8+
<p className='cardInfo'>Gender: {character.gender}</p>
9+
<p className='cardInfo'>Hair Color: {character.hair_color}</p>
10+
<p className='cardInfo'>Birth Year: {character.birth_year}</p>
11+
<p className='cardInfo'>Homeplanet: {character.homeworld_id}</p>
12+
<p className='cardInfo'>Species: {character.species_id}</p>
1313
</div>
1414
);
1515
};

‎test-client/src/client/components/Dashboard.tsx

+15-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const Dashboard = () => {
1212
const [reviewText, setReviewText] = useState('');
1313
const [time, setTime] = useState(0);
1414
const getPeopleB = async () => {
15+
setReviewInfo([]);
16+
setCharacterinfo([]);
1517
const startTime: number = performance.now();
1618
const responseCharacter: ResponseObject = await cacheIt({
1719
endpoint: 'http://localhost:3000/graphql',
@@ -37,6 +39,9 @@ const Dashboard = () => {
3739
};
3840

3941
const getReviews = async () => {
42+
setReviewInfo([]);
43+
setCharacterinfo([]);
44+
const startTime: number = performance.now();
4045
const responseReview: ResponseObject = await cacheIt({
4146
endpoint: 'http://localhost:3000/graphql',
4247
query: `
@@ -50,6 +55,8 @@ const Dashboard = () => {
5055
time: 3600,
5156
});
5257
setReviewInfo(responseReview.data.reviews);
58+
const endTime: number = performance.now();
59+
setTime(endTime - startTime);
5360
};
5461

5562
const handleReview = (e: any) => {
@@ -109,8 +116,12 @@ const Dashboard = () => {
109116

110117
return (
111118
<>
112-
<button onClick={getPeopleB} className='getPeople'></button>
113-
<button onClick={getReviews} className='getPeople'></button>
119+
<button onClick={getPeopleB} className='getPeople'>
120+
Get People
121+
</button>
122+
<button onClick={getReviews} className='getPeople'>
123+
Get Reviews
124+
</button>
114125
<div className='hitmissbox'>
115126
<HitMiss time={time} />
116127
</div>
@@ -129,8 +140,9 @@ const Dashboard = () => {
129140
type='text'
130141
placeholder='Type review here'
131142
onChange={handleReview}
143+
className='inputBox'
132144
/>
133-
<button type='submit' onClick={createReview}>
145+
<button type='submit' onClick={createReview} className='submit'>
134146
Submit Your Review
135147
</button>
136148
</>

‎test-client/src/client/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<html>
22
<head>
3+
<link
4+
rel="stylesheet"
5+
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600&display=swap"
6+
/>
37
<title>Test-Client</title>
48
</head>
59

‎test-client/src/client/styles/characterCard.scss

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
.characterCard {
2-
3-
background-color: white;
2+
background-color: #2f2963;
43
z-index: 1;
54
width: 18rem;
65
//border: 1px solid hsl(240, 61%, 92%);
76
border-radius: 8px;
8-
box-shadow: 0px 0px rgb(255, 255, 255);
7+
box-shadow: 0px 0px #85c7f2;
98
transition: transform 0.3s ease, box-shadow 0.3s ease;
109
}
1110

@@ -14,6 +13,5 @@
1413
transform: translateZ(-100px);
1514
transform: translateY(-10px);
1615

17-
box-shadow: 15px 15px 10px rgba(150, 150, 150, 0.5);
18-
16+
box-shadow: 15px 15px 10px #0b7189;
1917
}

‎test-client/src/client/styles/dashboard.scss

+87-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,61 @@
1+
/*
2+
C19AB7 - Lilac for writing and buttons
3+
0B7189 - Creulean TBD
4+
85C7F2 - Light Sky blue TBD
5+
170A1C - Dark Purple for background
6+
2F2963 - Space Cadet not sure yet probably for highlights
7+
*/
8+
9+
html {
10+
font-family: 'Source Code Pro', monospace;
11+
font-optical-sizing: auto;
12+
font-weight: 300;
13+
font-style: normal;
14+
color: #c19ab7;
15+
}
16+
17+
body {
18+
height: 100vh;
19+
background-color: #170a1c;
20+
}
21+
22+
button {
23+
font-family: 'Source Code Pro', monospace;
24+
font-optical-sizing: auto;
25+
font-weight: 300;
26+
font-style: normal;
27+
background-color: white;
28+
color: #c19ab7;
29+
border: none;
30+
transition: background-color 0.3s ease, color 0.3s ease,
31+
border-color 0.3s ease;
32+
cursor: pointer;
33+
}
34+
.inputBox {
35+
background-color: #2f2963; /* Space Cadet */
36+
color: #c19ab7; /* Lilac */
37+
border: 2px solid #c19ab7;
38+
padding: 0.75rem;
39+
font-family: 'Source Code Pro', monospace;
40+
font-size: 1rem;
41+
font-weight: 300;
42+
border-radius: 8px;
43+
outline: none;
44+
width: 100%;
45+
max-width: 400px;
46+
transition: border-color 0.3s ease, background-color 0.3s ease;
47+
}
48+
49+
.inputBox::placeholder {
50+
color: #85c7f2; /* Light Sky Blue */
51+
opacity: 0.7;
52+
}
53+
54+
.inputBox:focus {
55+
border-color: #85c7f2; /* Light Sky Blue */
56+
background-color: #0b7189; /* Cerulean */
57+
color: white;
58+
}
159

260
.cardBox {
361
display: flex;
@@ -23,6 +81,35 @@ h3 {
2381
font-weight: 700;
2482
line-height: 15.4px;
2583
}
84+
.submit {
85+
background-color: white; /* Lilac */
86+
color: #c19ab7; /* Dark Purple */
87+
border: 2px solid #c19ab7;
88+
padding: 0.75rem 1.5rem;
89+
font-family: 'Source Code Pro', monospace;
90+
font-size: 1rem;
91+
font-weight: 300;
92+
border-radius: 8px;
93+
margin-left: 0.5rem;
94+
}
95+
96+
button:hover {
97+
background-color: #85c7f2; /* Light Sky Blue */
98+
color: #170a1c;
99+
border-color: #85c7f2;
100+
}
101+
102+
button:active {
103+
background-color: #0b7189; /* Cerulean */
104+
color: white;
105+
border-color: #0b7189;
106+
}
107+
108+
.input-container {
109+
display: flex;
110+
align-items: center;
111+
gap: 0.5rem;
112+
}
26113
p {
27114
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
28115
font-size: 14px;
@@ -39,11 +126,3 @@ blockquote {
39126
font-weight: 400;
40127
line-height: 30px;
41128
}
42-
pre {
43-
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
44-
font-size: 13px;
45-
font-style: normal;
46-
font-variant: normal;
47-
font-weight: 400;
48-
line-height: 18.5714px;
49-
}

‎test-client/src/client/styles/time.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
.timebox {
2-
margin: 15px;
2+
position: fixed; /* Keeps it in place when scrolling */
3+
top: 15px; /* Positions it near the top */
4+
right: 15px; /* Positions it near the right */
35
background-color: white;
46
padding: 0.75rem;
5-
border: 1px solid hsl(138, 74%, 77%);
7+
border: 1px solid #170a1c;
68
border-radius: 8px;
7-
box-shadow: 10px 10px 2px rgb(209, 209, 209);
9+
z-index: 1000; /* Ensures it's above other elements */
810
}
911

1012
.hitmissbox {
@@ -13,4 +15,3 @@
1315
position: fixed;
1416
z-index: 10;
1517
}
16-

0 commit comments

Comments
 (0)