Fix badges earned notification logic and restore badges UI layout

Author: Mahitha-pasupuleti

src/components/Badge/Badge.module.css

@@ -93,8 +93,8 @@
 .new_badges {
   display: flex;
   flex-wrap: wrap;
-  overflow-y: auto;
-  height: 70px;
+  overflow-y: scroll;
+  height: 120px;
 }
 
 .old_badges {

src/components/Badge/NewBadges.jsx

@@ -1,7 +1,7 @@
 import { Card, CardTitle, CardBody, UncontrolledTooltip } from 'reactstrap';
 import BadgeImage from './BadgeImage';
 import { WEEK_DIFF } from '../../constants/badge';
-import './Badge.module.css';
+import styles from './Badge.module.css';
 
 function NewBadges(props) {
   const filterBadges = allBadges => {
@@ -50,7 +50,8 @@ function NewBadges(props) {
           >
             New Badges Earned <i className="fa fa-info-circle" id="NewBadgeInfo" />
           </CardTitle>
-          <div className={`new_badges ${props.darkMode ? 'text-light' : ''}`}>
+
+          <div className={`${styles.new_badges} ${props.darkMode ? 'text-light' : ''}`}>
             {filteredBadges.length === 0 ? (
               <strong
                 style={{ opacity: 0.7 }}
@@ -76,6 +77,7 @@ function NewBadges(props) {
           </div>
         </CardBody>
       </Card>
+
       <UncontrolledTooltip
         placement="right"
         target="NewBadgeInfo"