Skip to content

Commit 0f73305

Browse files
rajnishpatellrajnishpatell
committed
feat: added Enhanced Random Quote Generator play
1 parent 324b3fe commit 0f73305

File tree

20 files changed

+792
-276
lines changed

20 files changed

+792
-276
lines changed

‎src/common/header/header.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,8 @@
283283

284284
.header-links > li > .app-header-btn.app-header-btn--secondary:hover,
285285
.header-links > li > .app-header-btn.app-header-btn--secondary:focus {
286-
border-color: var(--color-brand-primary);
287-
background-color: var(--color-neutral-10);
286+
border-color: var(--color-brand-primary);
287+
background-color: var(--color-neutral-10);
288288
}
289289

290290
.header-links > li > .app-header-btn.app-header-btn--secondary {

‎src/common/playleaderboard/leaderBoard.css‎

Lines changed: 152 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -37,158 +37,157 @@
3737
justify-content: center;
3838
height: 100vh;
3939
} */
40-
40+
4141
.leaderboard-wrapper {
42-
background-color: #ffffff;
43-
border-radius: 16px;
44-
padding: 24px;
45-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
46-
font-family: 'Inter', sans-serif;
47-
max-width: 800px;
48-
margin: 20px auto;
49-
}
50-
51-
.leaderboard-title {
52-
font-size: 24px;
53-
font-weight: 600;
54-
color: #1a202c;
55-
margin-bottom: 24px;
56-
}
57-
58-
.podium-container {
59-
display: flex;
60-
justify-content: center;
61-
align-items: flex-end;
62-
gap: 8px;
63-
margin-bottom: 16px;
64-
}
65-
66-
.podium-card {
67-
display: flex;
68-
flex-direction: column;
69-
align-items: center;
70-
text-align: center;
71-
padding: 16px;
72-
border-radius: 12px;
73-
width: 120px;
74-
color: #4a5568;
75-
border: 1px solid #e2e8f0;
76-
transition: transform 0.2s ease-in-out;
77-
}
78-
79-
.podium-card:hover {
80-
transform: translateY(-5px);
81-
}
82-
83-
.podium-avatar {
84-
width: 60px;
85-
height: 60px;
86-
border-radius: 50%;
87-
border: 3px solid #fff;
88-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
89-
margin-bottom: 8px;
90-
}
91-
92-
.podium-name {
93-
font-weight: 600;
94-
font-size: 14px;
95-
color: #2d3748;
96-
}
97-
98-
.podium-rank {
99-
font-size: 12px;
100-
font-weight: 500;
101-
margin-bottom: 4px;
102-
}
103-
104-
.podium-points {
105-
font-weight: 700;
106-
font-size: 14px;
107-
color: #1a202c;
108-
}
109-
110-
.podium-second {
111-
background-color: #f7fafc;
112-
height: 170px;
113-
order: 1;
114-
}
115-
116-
.podium-first {
117-
background-color: #fffbef;
118-
height: 200px;
119-
border-color: #f6e05e;
120-
order: 2;
121-
}
122-
123-
.podium-third {
124-
background-color: #fdf5f2;
125-
height: 150px;
126-
order: 3;
127-
}
128-
129-
.winner-announcement {
130-
text-align: center;
131-
color: #4a5568;
132-
font-size: 14px;
133-
margin-bottom: 32px;
134-
line-height: 1.5;
135-
}
136-
42+
background-color: #ffffff;
43+
border-radius: 16px;
44+
padding: 24px;
45+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
46+
font-family: 'Inter', sans-serif;
47+
max-width: 800px;
48+
margin: 20px auto;
49+
}
13750

138-
.leaderboard-table-container {
139-
box-shadow: none !important;
140-
border: 1px solid #e2e8f0;
141-
border-radius: 12px !important;
142-
}
143-
144-
.leaderboard-table-header {
145-
font-weight: 600 !important;
146-
font-size: 12px !important;
147-
color: #718096 !important;
148-
text-transform: uppercase;
149-
background-color: #f7fafc !important;
150-
border-bottom: 1px solid #e2e8f0 !important;
151-
}
152-
153-
.leaderboard-table-cell {
154-
font-size: 14px !important;
155-
color: #2d3748 !important;
156-
border-bottom: 1px solid #e2e8f0 !important;
157-
}
158-
159-
.user-profile {
160-
display: flex;
161-
align-items: center;
162-
gap: 12px;
163-
font-weight: 500;
164-
}
165-
166-
.table-avatar {
167-
width: 32px;
168-
height: 32px;
169-
border-radius: 50%;
170-
}
171-
172-
.rank-cell {
173-
display: flex;
174-
align-items: center;
175-
gap: 8px;
176-
font-weight: 600 !important;
177-
}
178-
179-
.points-cell {
180-
font-weight: 600 !important;
181-
}
182-
183-
.rank-icon {
184-
font-size: 16px !important;
185-
}
186-
.rank-up {
187-
color: #38a169;
188-
}
189-
.rank-down {
190-
color: #e53e3e;
191-
}
192-
.rank-same {
193-
color: #a0aec0;
194-
}
51+
.leaderboard-title {
52+
font-size: 24px;
53+
font-weight: 600;
54+
color: #1a202c;
55+
margin-bottom: 24px;
56+
}
57+
58+
.podium-container {
59+
display: flex;
60+
justify-content: center;
61+
align-items: flex-end;
62+
gap: 8px;
63+
margin-bottom: 16px;
64+
}
65+
66+
.podium-card {
67+
display: flex;
68+
flex-direction: column;
69+
align-items: center;
70+
text-align: center;
71+
padding: 16px;
72+
border-radius: 12px;
73+
width: 120px;
74+
color: #4a5568;
75+
border: 1px solid #e2e8f0;
76+
transition: transform 0.2s ease-in-out;
77+
}
78+
79+
.podium-card:hover {
80+
transform: translateY(-5px);
81+
}
82+
83+
.podium-avatar {
84+
width: 60px;
85+
height: 60px;
86+
border-radius: 50%;
87+
border: 3px solid #fff;
88+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
89+
margin-bottom: 8px;
90+
}
91+
92+
.podium-name {
93+
font-weight: 600;
94+
font-size: 14px;
95+
color: #2d3748;
96+
}
97+
98+
.podium-rank {
99+
font-size: 12px;
100+
font-weight: 500;
101+
margin-bottom: 4px;
102+
}
103+
104+
.podium-points {
105+
font-weight: 700;
106+
font-size: 14px;
107+
color: #1a202c;
108+
}
109+
110+
.podium-second {
111+
background-color: #f7fafc;
112+
height: 170px;
113+
order: 1;
114+
}
115+
116+
.podium-first {
117+
background-color: #fffbef;
118+
height: 200px;
119+
border-color: #f6e05e;
120+
order: 2;
121+
}
122+
123+
.podium-third {
124+
background-color: #fdf5f2;
125+
height: 150px;
126+
order: 3;
127+
}
128+
129+
.winner-announcement {
130+
text-align: center;
131+
color: #4a5568;
132+
font-size: 14px;
133+
margin-bottom: 32px;
134+
line-height: 1.5;
135+
}
136+
137+
.leaderboard-table-container {
138+
box-shadow: none !important;
139+
border: 1px solid #e2e8f0;
140+
border-radius: 12px !important;
141+
}
142+
143+
.leaderboard-table-header {
144+
font-weight: 600 !important;
145+
font-size: 12px !important;
146+
color: #718096 !important;
147+
text-transform: uppercase;
148+
background-color: #f7fafc !important;
149+
border-bottom: 1px solid #e2e8f0 !important;
150+
}
151+
152+
.leaderboard-table-cell {
153+
font-size: 14px !important;
154+
color: #2d3748 !important;
155+
border-bottom: 1px solid #e2e8f0 !important;
156+
}
157+
158+
.user-profile {
159+
display: flex;
160+
align-items: center;
161+
gap: 12px;
162+
font-weight: 500;
163+
}
164+
165+
.table-avatar {
166+
width: 32px;
167+
height: 32px;
168+
border-radius: 50%;
169+
}
170+
171+
.rank-cell {
172+
display: flex;
173+
align-items: center;
174+
gap: 8px;
175+
font-weight: 600 !important;
176+
}
177+
178+
.points-cell {
179+
font-weight: 600 !important;
180+
}
181+
182+
.rank-icon {
183+
font-size: 16px !important;
184+
}
185+
.rank-up {
186+
color: #38a169;
187+
}
188+
.rank-down {
189+
color: #e53e3e;
190+
}
191+
.rank-same {
192+
color: #a0aec0;
193+
}

‎src/common/playlists/playlist.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@
351351
margin-top: 0.4rem;
352352
padding-top: 0.4rem;
353353
}
354-
.header-rightcol{
354+
.header-rightcol {
355355
max-width: 95%;
356356
}
357357

‎src/common/techstack/TechStacks.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,4 @@
180180
.tech-brand-name {
181181
font-size: 1.5rem;
182182
}
183-
}
183+
}

0 commit comments

Comments
 (0)