feat(myActivities): Add StatusIndicatorComponent

 - add statusIndicator scss file
 - add colors representing the various statuses
 - make use of status indicator component in MyActivities and SocietyStats components

src/app/Dashboard/components/MyActivitiesComponent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dateFns from 'date-fns';
 
-import { TableComponent } from '../../common/components';
+import { TableComponent, StatusIndicatorComponent } from '../../common/components';
 import TruncateDescriptionComponent from './TruncateDescriptionComponent';
 
 const MyActivitiesComponent = (props) => {
@@ -32,7 +32,7 @@ const MyActivitiesComponent = (props) => {
             <TruncateDescriptionComponent description={description} wordCount={80} />
           </td>
           <td>{points}</td>
-          <td>{status}</td>
+          <td><StatusIndicatorComponent status={status} /></td>
         </tr>
       );
     });

src/app/Dashboard/components/SocietyStatsComponent.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { StatusIndicatorComponent } from '../../common/components';
+
 import { societyStats } from '../constants';
 
 const SocietyStatsComponent = (props) => {
@@ -27,11 +29,11 @@ const SocietyStatsComponent = (props) => {
       </div>
       <div className='society-stats__desc'>
         <div className='society-stats__desc__points'>
-          <span className='society-stats__desc-indicator' id='blue-circle' />
+          <StatusIndicatorComponent className='society-stats--used-points-indicator' status='completed' />
           <span className='society-stats__desc-text'> Used points</span>
         </div>
         <div className='society-stats__desc__points' id='society-stats__desc--remaining-points'>
-          <span className='society-stats__desc-indicator' id='green-circle' />
+          <StatusIndicatorComponent status='approved' />
           <span className='society-stats__desc-text'> Total Remaining Points</span>
         </div>
       </div>
@@ -50,7 +52,6 @@ const SocietyStatsComponent = (props) => {
   );
 };
 
-
 SocietyStatsComponent.defaultProps = {
   society: societyStats.society,
   usedPoints: societyStats.usedPoints,
@@ -63,5 +64,4 @@ SocietyStatsComponent.propTypes = {
   remainingPoints: PropTypes.number,
 };
 
-
 export default SocietyStatsComponent;

src/app/Dashboard/components/tests/MyActivitiesComponent.test.js

@@ -18,9 +18,6 @@ describe('<MyActivitiesComponent />', () => {
       shallowWrapper,
     };
   };
-  // const props = {
-  //   userActivities: activities
-  // }
 
   it('should have a TableComponent', () => {
     const { shallowWrapper } = setUpWrapper();

src/app/Dashboard/styles/societyStats.scss

@@ -17,12 +17,12 @@
   border-radius: 0;
 
   #progress-bar--blue {
-    background-color: $checkmarkBlue!important;
+    background-color: $andelaBlue!important;
     width: 60%;
   }
 
   #progress-bar--green {
-    background-color: $checkmarkGreen!important;
+    background-color: $approvedStatusGreen!important;
     width: 40%;
   }
 }
@@ -56,14 +56,10 @@
   font-size: rem(30px);
 }
 
-#blue-circle {
-  color: $checkmarkBlue;
+.society-stats--used-points-indicator {
   margin-left: rem(10px);
 }
 
-#green-circle {
-  color: $checkmarkGreen;
-}
 
 #used-points {
   margin-left: rem(10px);

src/app/common/components/StatusIndicatorComponent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const StatusIndicatorComponent = ({ className, status }) => (
+  <span className={`indicator ${className} ${status.replace(/\s/g, '').toLowerCase()}`} />
+);
+
+StatusIndicatorComponent.defaultProps = {
+  status: '',
+  className: '',
+};
+
+StatusIndicatorComponent.propTypes = {
+  status: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default StatusIndicatorComponent;

src/app/common/components/index.js

@@ -5,3 +5,4 @@ export { default as NavbarComponent } from './NavbarComponent';
 export { default as ButtonComponent } from './ButtonComponent';
 export { default as SidebarComponent } from './SidebarComponent';
 export { default as NavItemComponent } from './NavItemComponent';
+export { default as StatusIndicatorComponent } from './StatusIndicatorComponent';

src/app/common/components/tests/StatusIndicatorComponent.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import StatusIndicatorComponent from '../StatusIndicatorComponent';
+
+describe('<StatusIndicatorComponent />', () => {
+  const shallowWrapper = shallow(<StatusIndicatorComponent />);
+
+  it('should have span tag with class indicator', () => {
+    expect(shallowWrapper.find('.indicator')).toHaveLength(1);
+  });
+});

src/app/common/styles/index.scss

@@ -4,3 +4,4 @@
 @import './button.scss';
 @import './sidebar.scss';
 @import './table.scss';
+@import './statusIndicator.scss';

src/app/common/styles/statusIndicator.scss

@@ -0,0 +1,24 @@
+.indicator:before {
+  content: ' \25CF';
+  font-size: rem(30px);
+}
+
+.completed {
+  color: $andelaBlue;
+}
+
+.approved {
+  color: $approvedStatusGreen;
+}
+
+.rejected {
+  color: $rejectedStatusRed;
+}
+
+.pending {
+  color: $andelaGold;
+}
+
+.inreview {
+  color: $inReviewStatusYellow;
+}

src/app/common/styles/table.scss

@@ -23,4 +23,4 @@
   &:first-child {
     padding-left: rem(30px);
   }
-}
+}

src/styles/_vars.scss

@@ -4,12 +4,13 @@ $lightGray: #9B9B9B;
 $andelaBlue: #3359DF;
 $andelaGold: #FFAF30;
 $darkGray: #666666;
-$checkmarkBlue: #3A84FF;
-$checkmarkGreen: #7ED321;
+$approvedStatusGreen: #7ED321;
 $separatorBlue: #5DA5F3;
 $footerTextGray: #ACACBF;
 $darkBlue: #101444;
 $darkerBlue: #000564;
 $whiteShadow: rgba(255, 255, 255, 0.5);
 $grayShadow: rgba(48,48,48,0.13);
 $tableBodyTextColor: #51516B;
+$rejectedStatusRed: #D0021B;
+$inReviewStatusYellow: #F8E71C;