Merge pull request #607 from OneCommunityGlobal/rj_wrap_badges_user_p…

…rofile Bug fix for: Medium issue 7 : User Profile - Make profile badges fit so bottom scroll bar isn’t showing up.
OneCommunityGlobal · Dec 20, 2022 · c954777 · c954777
2 parents 75f3e06 + 32ea063
commit c954777
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 59 deletions.
diff --git a/src/components/UserProfile/Badge.css b/src/components/UserProfile/Badge.css
@@ -2,6 +2,8 @@
   background-color: #c9d6c6 !important;
   border-color: #285739 !important;
   color: #285739 !important;
+  /*Spacing between buttons*/
+  margin-right: 10px;
 }
 
 .badge_image_sm > img {
@@ -87,8 +89,11 @@
 
 .badge_featured_container {
   display: flex;
-  flex-wrap: nowrap;
+  /*Wrap on overflow*/
+  flex-wrap: wrap;
   overflow-y: hidden;
+  /*center align content*/
+  justify-content: space-around;
 }
 
 .badge_md_image_container {
@@ -129,8 +134,21 @@
   text-align: left;
 }
 
+/*Aligns the title and the buttons*/
+.badge-header{
+  display:flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+/*Title to occupy more width than buttons*/
+.badge-header-title{
+  flex: 3;
+}
+
+/*To match width of iphone 12 Pro*/
 #badgeCard {
-  min-width: 475px;
+  min-width: 390px;
 }
 
 @media screen and (max-width: 1199px) {

diff --git a/src/components/UserProfile/Badges.jsx b/src/components/UserProfile/Badges.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import {
   Card,
-  CardTitle,
-  CardText,
+  CardHeader,
+  CardFooter,
   CardBody,
   Button,
   Modal,
@@ -37,68 +37,65 @@ const Badges = props => {
   return (
     <>
       <Card id="badgeCard" style={{ backgroundColor: '#f6f6f3', marginTop: 20, marginBottom: 20 }}>
+        <CardHeader>
+          <div className='badge-header'>
+            <span className='badge-header-title'>
+              Featured Badges <i className="fa fa-info-circle" id="FeaturedBadgeInfo" />
+            </span>
+            <div>
+              <Button className="btn--dark-sea-green" onClick={toggle}>
+                Select Featured
+              </Button>
+              <Modal size="lg" isOpen={isOpen} toggle={toggle}>
+                <ModalHeader toggle={toggle}>Full View of Badge History</ModalHeader>
+                <ModalBody>
+                  <BadgeReport
+                    badges={props.userProfile.badgeCollection}
+                    userId={props.userProfile._id}
+                    role={props.role}
+                    firstName={props.userProfile.firstName}
+                    lastName={props.userProfile.lastName}
+                    close={toggle}
+                    setUserProfile={props.setUserProfile}
+                    handleSubmit={props.handleSubmit}
+                    permissionsUser={permissionsUser}
+                  />
+                </ModalBody>
+              </Modal>
+              {props.canEdit && (
+                <>
+                  <Button className="btn--dark-sea-green mr-2" onClick={assignToggle}>
+                    Assign Badges
+                  </Button>
+                  <Modal size="lg" isOpen={isAssignOpen} toggle={assignToggle}>
+                    <ModalHeader toggle={assignToggle}>Assign Badges</ModalHeader>
+                    <ModalBody>
+                      <AssignBadgePopup
+                        allBadgeData={props.allBadgeData}
+                        userProfile={props.userProfile}
+                        setUserProfile={props.setUserProfile}
+                        close={assignToggle}
+                        handleSubmit={props.handleSubmit}
+                      />
+                    </ModalBody>
+                  </Modal>
+                </>
+              )}
+            </div>
+          </div>
+        </CardHeader>
         <CardBody>
-          <CardTitle
-            style={{
-              fontWeight: 'bold',
-              fontSize: 18,
-              color: '#285739',
-              marginBottom: 15,
-              minWidth: 446,
-            }}
-          >
-            Featured Badges <i className="fa fa-info-circle" id="FeaturedBadgeInfo" />
-            <Button className="btn--dark-sea-green float-right" onClick={toggle}>
-              Select Featured
-            </Button>
-            <Modal size="lg" isOpen={isOpen} toggle={toggle}>
-              <ModalHeader toggle={toggle}>Full View of Badge History</ModalHeader>
-              <ModalBody>
-                <BadgeReport
-                  badges={props.userProfile.badgeCollection}
-                  userId={props.userProfile._id}
-                  role={props.role}
-                  firstName={props.userProfile.firstName}
-                  lastName={props.userProfile.lastName}
-                  close={toggle}
-                  setUserProfile={props.setUserProfile}
-                  handleSubmit={props.handleSubmit}
-                  permissionsUser={permissionsUser}
-                />
-              </ModalBody>
-            </Modal>
-            {props.canEdit && (
-              <>
-                <Button className="btn--dark-sea-green float-right mr-2" onClick={assignToggle}>
-                  Assign Badges
-                </Button>
-                <Modal size="lg" isOpen={isAssignOpen} toggle={assignToggle}>
-                  <ModalHeader toggle={assignToggle}>Assign Badges</ModalHeader>
-                  <ModalBody>
-                    <AssignBadgePopup
-                      allBadgeData={props.allBadgeData}
-                      userProfile={props.userProfile}
-                      setUserProfile={props.setUserProfile}
-                      close={assignToggle}
-                      handleSubmit={props.handleSubmit}
-                    />
-                  </ModalBody>
-                </Modal>
-              </>
-            )}
-          </CardTitle>
           <FeaturedBadges badges={props.userProfile.badgeCollection} />
-          <CardText
-            style={{
+        </CardBody>
+        <CardFooter style={{
               fontWeight: 'bold',
               fontSize: 18,
               color: '#285739',
             }}
           >
-            Bravo! You've earned {props.userProfile.badgeCollection.length} badges!{' '}
-            <i className="fa fa-info-circle" id="CountInfo" />
-          </CardText>
-        </CardBody>
+          Bravo! You've earned {props.userProfile.badgeCollection.length} badges!{' '}
+          <i className="fa fa-info-circle" id="CountInfo" />
+        </CardFooter>
       </Card>
       <UncontrolledTooltip
         placement="right"