Skip to content

Commit 47f40a2

Browse files
josephmasson26josephmasson26
committed
Update CSS styles and components
1 parent 0e6c867 commit 47f40a2

File tree

4 files changed

+69
-49
lines changed

4 files changed

+69
-49
lines changed

‎DiagnoseMeApp/public/result.css

+15-16
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,19 @@ h1 {
2929
}
3030

3131
.credits {
32-
.subtitle {
33-
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
34-
font-size: 0.4em;
35-
margin-top: 20px;
36-
padding: 5px;
37-
width: 100%;
38-
background: linear-gradient(to right, #e16089, #b31144);
39-
border-radius: 15px;
40-
-webkit-background-clip: text;
41-
-webkit-text-fill-color: transparent;
42-
text-align: center;
43-
color: white;
32+
font-size: 0.7px;
33+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
34+
margin-top: 20px;
35+
padding: 5px;
36+
width: 100%;
37+
background: linear-gradient(to right, #e16089, #b31144);
38+
border-radius: 15px;
39+
-webkit-background-clip: text;
40+
-webkit-text-fill-color: transparent;
41+
text-align: center;
42+
color: white;
4443
}
45-
}
44+
4645

4746

4847

@@ -120,7 +119,7 @@ h1 {
120119
box-shadow: 0 0 30px #fde0fe;
121120
z-index: 1;
122121
opacity: 1;
123-
transform: scale(1.3); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
122+
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
124123

125124
}
126125

@@ -142,7 +141,7 @@ h1 {
142141
box-shadow: 0 0 30px #cf71ff;
143142
color: #66bcde;
144143
opacity: 1;
145-
transform: scale(1.3); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
144+
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
146145

147146
}
148147

@@ -163,7 +162,7 @@ h1 {
163162
box-shadow: 0 0 30px #b0f6fe;
164163
text-shadow: 0 0 30px #d96f88;
165164
opacity: 1;
166-
transform: scale(1.3); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
165+
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
167166
z-index: 1;
168167
}
169168

‎DiagnoseMeApp/src/components/credits.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Credits = () => {
66
return (
77

88
<div className="subtitle">
9-
max ko, namkhang le, raghav maddula, and joseph masson.
9+
max ko, namkhang le, raghav maddula, and joseph masson
1010
</div>
1111

1212
);

‎DiagnoseMeApp/src/home.js

+38-25
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,48 @@ const App = () => {
2424

2525
return (
2626
<div className="App">
27-
<FadeIn delay={300} transitionDuration={2000}>
28-
<div className="grid">
29-
<div className="box side-box">
30-
<div class="box-content">
31-
<div class='container'>
32-
<Header />
33-
<Subtitle />
34-
<GithubButton class="github-button" repoUrl="https://github.com/josephmasson26/diagnoseme" />
35-
<ResetButton />
36-
</div>
37-
</div>
38-
</div>
39-
<div className="box main-box">
40-
<div class="box-content">
41-
<Chatbot className="chatbot" config={config} actionProvider={ActionProvider} messageParser={MessageParser} />
42-
</div>
43-
</div>
27+
28+
<div className="grid">
29+
30+
<div className="box side-box">
31+
<FadeIn delay={900} transitionDuration={2000}>
32+
<div class="box-content">
33+
<div class='container'>
34+
<Header />
35+
<Subtitle />
36+
<GithubButton class="github-button" repoUrl="https://github.com/josephmasson26/diagnoseme" />
37+
<ResetButton />
38+
</div>
39+
</div>
40+
</FadeIn>
41+
</div>
42+
4443

45-
<div className="box side-box">
46-
<div class="box-content">
47-
<p>click and type in your guess! </p>
48-
<Dropdown options={options} />
44+
45+
<div className="box main-box">
46+
<FadeIn delay={600} transitionDuration={2000}>
47+
<div class="box-content">
48+
<Chatbot className="chatbot" config={config} actionProvider={ActionProvider} messageParser={MessageParser} />
49+
</div>
50+
</FadeIn>
4951
</div>
50-
</div>
52+
5153

52-
</div>
53-
</FadeIn>
54+
55+
<div className="box side-box">
56+
<FadeIn delay={300} transitionDuration={2000}>
57+
<div class="box-content">
58+
<p>click and type in your guess! </p>
59+
<Dropdown options={options} />
60+
</div>
61+
</FadeIn>
62+
</div>
63+
64+
65+
</div>
66+
5467

55-
<FadeIn delay={1000} transitionDuration={4000}>
68+
<FadeIn delay={1200} transitionDuration={4000}>
5669
<SubmitButton />
5770
</FadeIn>
5871

‎DiagnoseMeApp/src/result.js

+15-7
Original file line numberDiff line numberDiff line change
@@ -19,47 +19,55 @@ const results = ["Dummy Results"];
1919
const App = () => {
2020
return (
2121
<div className="App">
22-
<FadeIn delay={300} transitionDuration={2000}>
22+
2323
<div className="grid">
24+
2425
<div className="box main-box">
26+
<FadeIn delay={300} transitionDuration={2000}>
2527
<div class="box-content">
2628
<ResultHeader />
2729
<FadeIn delay={500} transitionDuration={2000}>
2830
<ReactStars count={5} value={rating} size={50} color2={"#ca35db"} edit={false}/>
2931
</FadeIn>
3032
</div>
31-
</div>
33+
</FadeIn>
34+
</div>
35+
3236

3337
<div className="box side-box">
38+
<FadeIn delay={600} transitionDuration={2000}>
3439
<div class="box-content">
3540
<FadeIn delay={1000} transitionDuration={2000}>
3641
results
3742
</FadeIn>
3843
</div>
44+
</FadeIn>
3945
</div>
4046

4147
<div className="box side-box">
48+
<FadeIn delay={1200} transitionDuration={2000}>
4249
<div class="box-content">
4350
<div class='container'>
4451
<Header />
4552
<Subtitle />
4653
<GithubButton class="github-button" repoUrl="https://github.com/josephmasson26/diagnoseme" />
47-
<FadeIn delay={1300} transitionDuration={2000}>
48-
<Credits />
49-
</FadeIn>
54+
55+
<Credits className='credits'/>
56+
5057
</div>
5158
</div>
59+
</FadeIn>
5260
</div>
5361

5462
</div>
5563

5664

57-
<FadeIn delay={600} transitionDuration={4000}>
65+
<FadeIn delay={1500} transitionDuration={4000}>
5866
<ResetButton />
5967
</FadeIn>
6068

6169

62-
</FadeIn>
70+
6371

6472

6573

0 commit comments

Comments
 (0)