Skip to content

Commit d911a2e

Browse files
one-communityone-community
authored
Merge pull request #3713 from OneCommunityGlobal/Anthony-fix-badges-earned-icon-on-Profile-page
Anthony/fix badges earned icon and blue square icon on profile page
2 parents ccea523 + 4f6b4e3 commit d911a2e

20 files changed

Lines changed: 2508 additions & 845 deletions

‎package-lock.json‎

Lines changed: 2006 additions & 639 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Badge/Badge.jsx‎

Lines changed: 56 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
UncontrolledTooltip,
1414
ModalHeader,
1515
} from 'reactstrap';
16-
import './Badge.css';
16+
import styles from './Badge.module.css';
1717
import BadgeSummaryViz from '~/components/Reports/BadgeSummaryViz';
1818
import NewBadges from './NewBadges';
1919
import OldBadges from './OldBadges';
@@ -58,13 +58,44 @@ function Badge(props) {
5858
});
5959

6060
const roundedHours = Math.floor(personalBestMaxHrs);
61-
const personalMaxText = newBadges.find(badgeObj => badgeObj?.badge?.type === 'Personal Max')
62-
? ` and a personal best of ${roundedHours} ${roundedHours === 1 ? 'hour' : 'hours'} in a week`
63-
: '';
61+
const personalMaxText = newBadges.find(
62+
badgeObj => badgeObj?.badge?.type === 'Personal Max',
63+
) && (
64+
<>
65+
{' and have a personal best of '}
66+
<span
67+
style={{
68+
backgroundColor: '#850084',
69+
color: 'white',
70+
fontWeight: 600,
71+
borderRadius: '6px',
72+
padding: '2px 4px',
73+
}}
74+
>
75+
{roundedHours}
76+
</span>{' '}
77+
{roundedHours === 1 ? 'hour' : 'hours'} in a week
78+
</>
79+
);
6480

65-
return `Bravo! You have earned ${totalBadges} ${
66-
totalBadges === 1 ? 'badge' : 'badges'
67-
}${personalMaxText}! `;
81+
return (
82+
<div data-testid="total_badges">
83+
<div style={{ fontWeight: 'bold' }}>{'Bravo! '}</div>
84+
{'You earned '}
85+
<span
86+
style={{
87+
backgroundColor: '#2ed02b',
88+
borderRadius: '6px',
89+
padding: '2px 4px',
90+
}}
91+
>
92+
{totalBadges}
93+
</span>{' '}
94+
{totalBadges === 1 ? 'badge' : 'badges total'}
95+
{personalMaxText}
96+
{'!'}
97+
</div>
98+
);
6899
};
69100

70101
useEffect(() => {
@@ -84,7 +115,11 @@ function Badge(props) {
84115
<>
85116
<div style={{ minWidth: '100%', paddingRight: '0' }}>
86117
<Row
87-
className={`${darkMode ? 'badge-box-shadow-dark bg-space-cadet' : 'bagde-box-shadow'}`}
118+
className={`${
119+
darkMode
120+
? `${styles['badge-box-shadow-dark']} bg-space-cadet`
121+
: `${styles['bagde-box-shadow']}`
122+
}`}
88123
style={{ minWidth: '100%', marginLeft: '2px' }}
89124
>
90125
<Col className="px-0 mr-0">
@@ -114,10 +149,10 @@ function Badge(props) {
114149
<CardText
115150
style={{
116151
fontWeight: 'bold',
117-
fontSize: 18,
152+
// fontSize: 18,
118153
color: darkMode ? '#007BFF' : '#285739',
119154
}}
120-
className="responsive-font-size"
155+
className={`${styles['responsive-font-size']}`}
121156
>
122157
{generateBadgeText(
123158
totalBadge,
@@ -137,11 +172,11 @@ function Badge(props) {
137172
target="CountInfo"
138173
style={{ backgroundColor: '#666', color: '#fff' }}
139174
>
140-
<p className="badge_info_icon_text">
175+
<p className={styles.badge_info_icon_text}>
141176
This is the total number of badges you have earned. (Way to go Champion!) It increases if
142177
you earn the same badge multiple times too!
143178
</p>
144-
<p className="badge_info_icon_text">
179+
<p className={styles.badge_info_icon_text}>
145180
There are many things in life to be proud of. Some are even worth bragging about. If your
146181
number here is large, it definitely falls into the latter category.
147182
</p>
@@ -152,7 +187,7 @@ function Badge(props) {
152187
target="BadgeInfo"
153188
style={{ backgroundColor: '#666', color: '#fff' }}
154189
>
155-
<p className="badge_info_icon_text">
190+
<p className={styles.badge_info_icon_text}>
156191
There are several types of badges you can earn for hitting different milestones click this
157192
icon to learn more about the different types of badges.
158193
</p>
@@ -166,38 +201,38 @@ function Badge(props) {
166201
Badge Types and Assignment
167202
</ModalHeader>
168203
<ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
169-
<p className="badge_info_icon_text">
204+
<p className={styles.badge_info_icon_text}>
170205
No Infringement Streak: Not recieving any infringement for a certain number of months.{' '}
171206
</p>
172-
<p className="badge_info_icon_text">
207+
<p className={styles.badge_info_icon_text}>
173208
Hours in Category: As you submit hours to a project of a certain category such as
174209
&apos;Food&apos;, &apos;Energy&apos;, etc you can earn badges for hitting certain levels
175210
of hours worked in each category.
176211
</p>
177-
<p className="badge_info_icon_text">
212+
<p className={styles.badge_info_icon_text}>
178213
Hour Multiple: If you earn a multiple of your weekly committed hours you can earn a
179214
corresponding badge for that!
180215
</p>
181-
<p className="badge_info_icon_text">
216+
<p className={styles.badge_info_icon_text}>
182217
Personal Max: This badge will be earned after your first week with the count(little red
183218
number) being the amount of hours you put in that week and updated everytime you beat
184219
it.
185220
</p>
186-
<p className="badge_info_icon_text">
221+
<p className={styles.badge_info_icon_text}>
187222
Most Hours This Week: This badge will be earned if you put in the most HRs of the entire
188223
organization in a certain week.
189224
</p>
190-
<p className="badge_info_icon_text">
225+
<p className={styles.badge_info_icon_text}>
191226
X Hours for X Week Streak: This badge will be earned if you put in X Number of Hours for
192227
X Weeks in a row. In the case of the one week badges the count will increase on the
193228
corresponding highest hour value badge each week. For other badges 2 weeks, 3 weeks etc.
194229
Once you earn a higher hour badge for that streak it will replace the ones below it.
195230
</p>
196-
<p className="badge_info_icon_text">
231+
<p className={styles.badge_info_icon_text}>
197232
Lead a team of X+: For Managers they can earn badges for the size of the team that they
198233
lead whether it is a 5, 10, 20..etc person team.
199234
</p>
200-
<p className="badge_info_icon_text">
235+
<p className={styles.badge_info_icon_text}>
201236
Auto Assignment of the previous types of Badges happens at the end of each week
202237
(Saturday Midnight PST) as your time is processed, so make sure that your time has been
203238
inputted properly by that time in order to get credit.

‎src/components/Badge/Badge.module.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
.btn--dark-sea-green {
2+
background-color: #c9d6c6 !important;
3+
border-color: #285739 !important;
4+
color: #285739 !important;
5+
}
6+
7+
.badge_image_sm > img {
8+
border-radius: 50%;
9+
height: 50px;
10+
width: 50px;
11+
margin: 5px;
12+
overflow: inherit;
13+
}
14+
15+
#rank-filter {
16+
width: 200px;
17+
}
18+
19+
.badge_image_md > img {
20+
border-radius: 50%;
21+
height: 100px;
22+
width: 100px;
23+
overflow: inherit;
24+
}
25+
26+
.badge_image_lg > img {
27+
border-radius: 50%;
28+
height: 200px;
29+
width: 200px;
30+
overflow: inherit;
31+
}
32+
33+
.badge_image_mini > img {
34+
border-radius: 50%;
35+
height: 25px;
36+
width: 25px;
37+
overflow: inherit;
38+
}
39+
40+
.badge_count {
41+
padding-top: 4px;
42+
border-radius: 50%;
43+
width: 22px;
44+
height: 22px;
45+
background: #007bff;
46+
color: #fff;
47+
text-align: center;
48+
font: 12px Arial, sans-serif;
49+
position: absolute;
50+
right: 2px;
51+
bottom: 2px;
52+
z-index: 10;
53+
}
54+
.bagde-box-shadow {
55+
box-shadow: 2px 2px 4px 1px lightgray;
56+
}
57+
.badge-box-shadow-dark {
58+
box-shadow: 2px 2px 4px 1px black;
59+
}
60+
/* This is just only for displaying 'Personal Max hours' badge hours position */
61+
.badge_count_personalmax {
62+
padding-top: 4px;
63+
border-radius: 45%;
64+
width: 20px;
65+
height: 22px;
66+
background: #800080;
67+
color: #fff;
68+
text-align: center;
69+
font: 11px Arial, sans-serif;
70+
position: absolute;
71+
right: 20px;
72+
bottom: 1px;
73+
z-index: 10;
74+
}
75+
76+
.badge_count_3_digit {
77+
border-radius: 50%;
78+
padding: 1px 3px;
79+
background: #007bff;
80+
color: #fff;
81+
text-align: center;
82+
font-size: 9px;
83+
position: absolute;
84+
right: 5px;
85+
bottom: 5px;
86+
z-index: 10;
87+
}
88+
89+
.new_badges {
90+
display: flex;
91+
flex-wrap: wrap;
92+
overflow-y: auto;
93+
height: 70px;
94+
}
95+
96+
.old_badges {
97+
height: 220px;
98+
overflow-y: auto;
99+
}
100+
101+
.badge_history_container {
102+
display: flex;
103+
flex-wrap: wrap;
104+
overflow-y: auto;
105+
}
106+
107+
.badge_image_container {
108+
position: relative;
109+
height: 60px;
110+
}
111+
112+
.badgemanagement-actions-cell {
113+
display: table-cell;
114+
padding-left: 10px;
115+
}
116+
117+
.assign-badge-margin-top {
118+
margin-top: 15px;
119+
}
120+
121+
.badge-message-background-success {
122+
background-color: #d4edda;
123+
}
124+
125+
.badge-message-background-danger {
126+
background-color: #f8d7da;
127+
}
128+
129+
.badge-message-text-success {
130+
color: #092b00;
131+
}
132+
133+
.badge-message-text-danger {
134+
color: #a8071a;
135+
}
136+
137+
.assign_badge_search_box {
138+
margin-bottom: 15px;
139+
}
140+
141+
.badge_info_icon_text {
142+
text-align: left;
143+
}
144+
145+
.widett {
146+
width: 500px;
147+
}
148+
149+
#badgeEdit .form-group i {
150+
margin-left: 5px;
151+
}
152+
153+
.badgeTooltip .tooltip-inner {
154+
background-color: #666;
155+
}
156+
157+
.popover img {
158+
width: 100%;
159+
height: 100%;
160+
max-width: 120px;
161+
margin: 0 auto;
162+
}
163+
164+
@media screen and (max-width: 544px) {
165+
.responsive-font-size {
166+
font-size: 0.75rem !important;
167+
}
168+
}

‎src/components/Badge/BadgeImage.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from 'react';
22
import { Card, CardTitle, CardBody, CardImg, CardText, Popover } from 'reactstrap';
3+
import styles from './Badge.module.css';
34

45
function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuffix }) {
56
const [isOpen, setOpen] = useState(false);
@@ -8,8 +9,8 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
89

910
return (
1011
<>
11-
<div className="badge_image_container">
12-
<div className="badge_image_sm">
12+
<div className={styles.badge_image_container}>
13+
<div className={styles.badge_image_sm}>
1314
<img
1415
src={badgeData?.imageUrl}
1516
id={`popover_${time}${index.toString()}`}
@@ -31,7 +32,7 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
3132
target={`popover_${time}${index.toString()}`}
3233
>
3334
<Card className="text-center">
34-
<CardImg className="badge_image_lg" src={badgeData?.imageUrl} />
35+
<CardImg className={styles.badge_image_lg} src={badgeData?.imageUrl} />
3536
<CardBody>
3637
<CardTitle
3738
style={{
@@ -54,15 +55,15 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
5455
function BadgeSpan({ badgeType, personalBestMaxHrs, count, cssSuffix }) {
5556
if (badgeType === 'Personal Max') {
5657
return (
57-
<span className={'badge_count_personalmax' + cssSuffix}>
58+
<span className={styles.badge_count_personalmax + cssSuffix}>
5859
{Math.floor(personalBestMaxHrs)}
5960
</span>
6061
);
6162
} else {
6263
if (count < 100) {
63-
return <span className={'badge_count' + cssSuffix}>{Math.round(count)}</span>;
64+
return <span className={styles.badge_count + cssSuffix}>{Math.round(count)}</span>;
6465
} else {
65-
return <span className={'badge_count_3_digit' + cssSuffix}>{Math.round(count)}</span>;
66+
return <span className={styles.badge_count_3_digit + cssSuffix}>{Math.round(count)}</span>;
6667
}
6768
}
6869
}

0 commit comments

Comments
 (0)