Repository: thenewboston-developers/Website (ts)

Issue:
Console error of jsx not being registered in hljs
<img width="529" alt="Screen Shot 2021-03-20 at 10 49 28 PM" src="https://user-images.githubusercontent.com/32864116/111874863-f8300980-89d1-11eb-96a8-59b072c340ee.png">


Pull request description:
[#1577] ! Use Prism as language highlighter to include jsx
Fixes #1577

`hljs` does not include `jsx` as language, which causes `jsx` to not able to be registered properly. Switching to use `Prism` will solve the issue as it includes all languages listed in our `SnippetLang` enum. [Reference](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD)

However, the style of the code snippets need to be changed as `prism` has its own pre-built styles that are different from `hljs`. I have chosen `solarizedLight` for light backgrounds and `duotoneDark` for dark background.

`solarizedLight`: (bash code snippets)

<img width="767" alt="Screen Shot 2021-03-20 at 11 06 50 PM" src="https://user-images.githubusercontent.com/32864116/111875025-a5a31d00-89d2-11eb-9ba3-32bcbe649be3.png">

`duotoneDark`: (all other code snippets)

<img width="678" alt="Screen Shot 2021-03-20 at 11 01 43 PM" src="https://user-images.githubusercontent.com/32864116/111875028-a9cf3a80-89d2-11eb-9b83-e1118b364b3d.png">

P.S. its fine for this PR to not be paid as it was my mistake to not spot the error previously


Patch:
diff --git a/src/components/CodeSnippet/BaseCodeSnippet/index.tsx b/src/components/CodeSnippet/BaseCodeSnippet/index.tsx
index b5496ea..35f7580 100644
--- a/src/components/CodeSnippet/BaseCodeSnippet/index.tsx
+++ b/src/components/CodeSnippet/BaseCodeSnippet/index.tsx
@@ -1,12 +1,12 @@
 import React, {FC} from 'react';
-import {Light as SyntaxHighlighter} from 'react-syntax-highlighter';
-import {obsidian, routeros} from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import bashLang from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
-import jsonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {duotoneDark, solarizedlight} from 'react-syntax-highlighter/dist/esm/styles/prism';
+import bashLang from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import jsonLang from 'react-syntax-highlighter/dist/esm/languages/prism/json';
 import jsxLang from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
-import pythonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
-import scssLang from 'react-syntax-highlighter/dist/esm/languages/hljs/scss';
-import typescriptLang from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import pythonLang from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import scssLang from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+import typescriptLang from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 
 export enum SnippetLang {
   bash = 'bash',
@@ -36,7 +36,7 @@ const BaseCodeSnippet: FC<BaseCodeSnippetProps> = ({code, language, light = fals
     <SyntaxHighlighter
       language={language}
       showLineNumbers={showLineNumbers}
-      style={light ? routeros : obsidian}
+      style={light ? solarizedlight : duotoneDark}
       data-testid="BaseCodeSnippet"
     >
       {code}
diff --git a/src/containers/Teams/TeamMemberCard/TeamMemberCard.scss b/src/containers/Teams/TeamMemberCard/TeamMemberCard.scss
index f38ff1d..9782203 100644
--- a/src/containers/Teams/TeamMemberCard/TeamMemberCard.scss
+++ b/src/containers/Teams/TeamMemberCard/TeamMemberCard.scss
@@ -39,10 +39,6 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-
-    &-pay {
-      color: var(--color-tertiary);
-    }
   }
 
   &__lead-flag {
diff --git a/src/containers/Teams/TeamMemberCard/index.tsx b/src/containers/Teams/TeamMemberCard/index.tsx
index 12d656a..a189821 100644
--- a/src/containers/Teams/TeamMemberCard/index.tsx
+++ b/src/containers/Teams/TeamMemberCard/index.tsx
@@ -8,7 +8,6 @@ interface ComponentProps {
   displayName: string;
   githubUsername?: string;
   isLead: boolean;
-  payPerDay: number;
   profileImage: string;
   slackUsername: string;
   titles: string[];
@@ -18,7 +17,6 @@ const TeamMemberCard: FC<ComponentProps> = ({
   displayName,
   githubUsername,
   isLead,
-  payPerDay,
   profileImage,
   slackUsername,
   titles,
@@ -37,9 +35,6 @@ const TeamMemberCard: FC<ComponentProps> = ({
       <div className="TeamMemberCard__details-title">{titles.join(', ')}</div>
       <div>Slack: {slackUsername}</div>
       <div>Github: {githubUsername ? <A href={`https://github.com/${githubUsername}`}>{githubUsername}</A> : '-'}</div>
-      <div>
-        Pay Per Day: <span className="TeamMemberCard__details-pay">{payPerDay.toLocaleString()}</span>
-      </div>
     </div>
   );
 
diff --git a/src/containers/Teams/index.tsx b/src/containers/Teams/index.tsx
index ea2bbae..f085dd5 100644
--- a/src/containers/Teams/index.tsx
+++ b/src/containers/Teams/index.tsx
@@ -127,13 +127,12 @@ const Teams: FC = () => {
   const renderTeamMembers = useCallback((): ReactNode => {
     if (!filteredMembers.length) return <EmptyPage />;
     return filteredMembers.map(
-      ({contributorId, displayName, githubUsername, isLead, payPerDay, profileImage, slackUsername, titles}) => (
+      ({contributorId, displayName, githubUsername, isLead, profileImage, slackUsername, titles}) => (
         <TeamMemberCard
           displayName={displayName}
           githubUsername={githubUsername}
           isLead={isLead}
           key={contributorId}
-          payPerDay={payPerDay}
           profileImage={profileImage}
           slackUsername={slackUsername}
           titles={titles}
diff --git a/src/containers/TopNav/TopNavDesktopItems/index.tsx b/src/containers/TopNav/TopNavDesktopItems/index.tsx
index 1512797..a174633 100644
--- a/src/containers/TopNav/TopNavDesktopItems/index.tsx
+++ b/src/containers/TopNav/TopNavDesktopItems/index.tsx
@@ -59,13 +59,6 @@ const morePopoverItems: TopNavPopoverItemType[] = [
     title: 'Project Proposals',
     to: '/project-proposals/overview',
   },
-  {
-    description: 'Stay updated on crypto and thenewboston',
-    iconType: IconType.textBox,
-    isExternal: true,
-    title: 'Blog',
-    to: 'https://thenewboston.blog/',
-  },
   {
     description: 'Download thenewboston assets',
     iconType: IconType.fileDownload,
diff --git a/src/data/teams.json b/src/data/teams.json
index bf03ad4..653b1be 100644
--- a/src/data/teams.json
+++ b/src/data/teams.json
@@ -18,7 +18,6 @@
       {
         "title": "Lead Auditor",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "83",
@@ -31,7 +30,6 @@
       {
         "title": "Auditor",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "33",
@@ -44,7 +42,6 @@
       {
         "title": "Auditor",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "52",
@@ -88,7 +85,6 @@
       {
         "title": "Lead Blockchain Developer",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "4",
@@ -132,7 +128,6 @@
       {
         "title": "Head of Community",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "1",
@@ -145,7 +140,6 @@
       {
         "title": "Product Manager",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2021-03-02T02:14:59.307535Z",
         "contributor": {
           "contributorId": "88",
@@ -154,19 +148,6 @@
           "profileImage": "https://avatars.githubusercontent.com/u/60430226?v=4",
           "slackUsername": "Muhammad Anas Azam Bhatti"
         }
-      },
-      {
-        "title": "Technical Writer",
-        "isLead": false,
-        "payPerDay": 2800,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "76",
-          "displayName": "Vyz",
-          "githubUsername": "led76marx",
-          "profileImage": "https://avatars.githubusercontent.com/u/20023713?v=4",
-          "slackUsername": "Vyz"
-        }
       }
     ],
     "responsibilities": [
@@ -198,7 +179,6 @@
       {
         "title": "Design Lead",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "2",
@@ -207,6 +187,18 @@
           "profileImage": "https://avatars1.githubusercontent.com/u/68207101?s=460&u=f001c3eb8dfc9444d1abff7ec2ef5e4f0f1ccd5e&v=4",
           "slackUsername": "Kristy KJ"
         }
+      },
+      {
+        "title": "UI/UX Designer",
+        "isLead": false,
+        "createdDate": "2020-07-08T02:14:59.307535Z",
+        "contributor": {
+          "contributorId": "7",
+          "displayName": "Pitchapa Nickonpol",
+          "githubUsername": "pitchapa-n",
+          "profileImage": "https://avatars.githubusercontent.com/u/79086524?v=4",
+          "slackUsername": "Pitchapa Nickonpol"
+        }
       }
     ],
     "responsibilities": [
@@ -255,11 +247,10 @@
       {
         "title": "Front-End Lead",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "5",
-          "displayName": "Angle943",
+          "displayName": "Justin",
           "githubUsername": "angle943",
           "profileImage": "https://avatars2.githubusercontent.com/u/5943963?v=4",
           "slackUsername": "Justin"
@@ -268,7 +259,6 @@
       {
         "title": "Front-End Developer",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "3",
@@ -281,7 +271,6 @@
       {
         "title": "Front-End Developer",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2020-27-11",
         "contributor": {
           "contributorId": "21",
@@ -290,6 +279,18 @@
           "profileImage": "https://avatars0.githubusercontent.com/u/32864116?s=460&u=0c2a53c6f1476da904d2b3c820bab43b64b7185b&v=4",
           "slackUsername": "James Pang"
         }
+      },
+      {
+        "title": "Technical Writer",
+        "isLead": false,
+        "createdDate": "2020-07-08T02:14:59.307535Z",
+        "contributor": {
+          "contributorId": "76",
+          "displayName": "Vyz",
+          "githubUsername": "led76marx",
+          "profileImage": "https://avatars.githubusercontent.com/u/20023713?v=4",
+          "slackUsername": "Vyz"
+        }
       }
     ],
     "responsibilities": [
@@ -319,11 +320,10 @@
       {
         "title": "Head of Human Resources",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "6",
-          "displayName": "MsChrishaph",
+          "displayName": "Chrisha",
           "githubUsername": "Chrisha1212",
           "profileImage": "https://avatars.githubusercontent.com/u/72809444?s=460&u=e2138725222fb09a546d7d1e164cf64f5583648b&v=4",
           "slackUsername": "MsChrishaph"
@@ -335,6 +335,10 @@
         "item": "Recruit candidates",
         "subitems": []
       },
+      {
+        "item": "Manage faucet payments",
+        "subitems": []
+      },
       {
         "item": "Update policies",
         "subitems": []
@@ -342,6 +346,14 @@
       {
         "item": "Conduct benefit analysis",
         "subitems": []
+      },
+      {
+        "item": "Respond to comments and questions from the community",
+        "subitems": []
+      },
+      {
+        "item": "Welcome new members and encourage collaboration and community engagement",
+        "subitems": []
       }
     ]
   },
@@ -359,7 +371,6 @@
       {
         "title": "Head of Marketing Team",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "65",
@@ -370,9 +381,8 @@
         }
       },
       {
-        "title": "Reddit Moderator",
+        "title": "Social Media Moderator",
         "isLead": false,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "9",
@@ -381,6 +391,18 @@
           "profileImage": "https://avatars2.githubusercontent.com/u/58598872?s=460&v=4",
           "slackUsername": "Bojan Ilijevski"
         }
+      },
+      {
+        "title": "Discord Moderator",
+        "isLead": false,
+        "createdDate": "2020-07-08T02:14:59.307535Z",
+        "contributor": {
+          "contributorId": "28",
+          "displayName": "Rajput Usman",
+          "githubUsername": "Rajputusman",
+          "profileImage": "https://avatars0.githubusercontent.com/u/65516140?s=460&v=4",
+          "slackUsername": "Rajput Usman"
+        }
       }
     ],
     "responsibilities": [
@@ -416,7 +438,6 @@
       {
         "title": "Lead Website API Developer",
         "isLead": true,
-        "payPerDay": 2800,
         "createdDate": "2020-07-08T02:14:59.307535Z",
         "contributor": {
           "contributorId": "18",
diff --git a/src/types/teams.ts b/src/types/teams.ts
index 47f200d..ddd8c35 100644
--- a/src/types/teams.ts
+++ b/src/types/teams.ts
@@ -41,7 +41,6 @@ export interface TeamContributor {
   contributor: Contributor;
   createdDate: string;
   isLead: boolean;
-  payPerDay: number;
   title: string;
 }
 
@@ -55,7 +54,6 @@ export interface TeamMember {
   displayName: string;
   githubUsername: string;
   isLead: boolean;
-  payPerDay: number;
   profileImage: string;
   slackUsername: string;
   teams: TeamLead[];
diff --git a/src/utils/data.ts b/src/utils/data.ts
index cc23590..9d75f12 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -40,13 +40,12 @@ export const getTeamMemberByGithubUsername = (github_username: string): TeamMemb
     const {title: teamTitle, contributors: teamContributors} = team;
     teamContributors.forEach((teamMember: any) => {
       if (teamMember.contributor.githubUsername === github_username) {
-        const {title: userTitle, isLead, payPerDay, contributor} = teamMember;
+        const {title: userTitle, isLead, contributor} = teamMember;
         const {contributorId, ...otherProps} = contributor;
         if (!member) {
           member = {
             contributorId,
             isLead,
-            payPerDay,
             teams: [{isLead, title: teamTitle}],
             titles: [userTitle],
             ...otherProps,
@@ -75,14 +74,13 @@ export const getTeamMembers = (): TeamMember[] => {
   const members: any = {};
   teams.forEach((team) => {
     team.contributors.forEach((teamMember: any) => {
-      const {title: userTitle, isLead, payPerDay, createdDate, contributor} = teamMember;
+      const {title: userTitle, isLead, createdDate, contributor} = teamMember;
       const {contributorId, ...otherProps} = contributor;
       if (!members[contributorId]) {
         members[contributorId] = {
           contributorId,
           createdDate,
           isLead,
-          payPerDay,
           teams: [{isLead, title: team.title}],
           titles: [userTitle],
           ...otherProps,


Test patch:
diff --git a/src/components/CodeSnippet/BaseCodeSnippet/BaseCodeSnippet.test.tsx b/src/components/CodeSnippet/BaseCodeSnippet/BaseCodeSnippet.test.tsx
index 3f8a511..6628f09 100644
--- a/src/components/CodeSnippet/BaseCodeSnippet/BaseCodeSnippet.test.tsx
+++ b/src/components/CodeSnippet/BaseCodeSnippet/BaseCodeSnippet.test.tsx
@@ -27,20 +27,20 @@ describe('RequestResponseSnippet', () => {
     expect(screen.getByText("console.log('TNB is heading to the moon');")).toBeTruthy();
   });
 
-  it('renders with the default obsidian style', () => {
+  it('renders with the default duotone dark style', () => {
     render(<BaseCodeSnippet {...baseProps} />);
 
-    // distinct style for obsidian in hljs
-    expect(screen.getByTestId(baseTestId).style).toHaveProperty('background-color', 'rgb(40, 43, 46)');
-    expect(screen.getByTestId(baseTestId).style).toHaveProperty('color', 'rgb(224, 226, 228)');
+    // distinct style for duotone dark in prism
+    expect(screen.getByTestId(baseTestId).style).toHaveProperty('background-color', 'rgb(42, 39, 52)');
+    expect(screen.getByTestId(baseTestId).style).toHaveProperty('color', 'rgb(154, 134, 253)');
   });
 
   it('renders without crashing when light passed in', () => {
     render(<BaseCodeSnippet {...baseProps} light />);
 
-    // distinct style for routeros in hljs
-    expect(screen.getByTestId(baseTestId).style).toHaveProperty('background-color', 'rgb(240, 240, 240)');
-    expect(screen.getByTestId(baseTestId).style).toHaveProperty('color', 'rgb(68, 68, 68)');
+    // distinct style for solarized light in prism
+    expect(screen.getByTestId(baseTestId).style).toHaveProperty('background-color', 'rgb(253, 246, 227)');
+    expect(screen.getByTestId(baseTestId).style).toHaveProperty('color', 'rgb(101, 123, 131)');
   });
 
   it('renders with showLineNumbers passed in', () => {
diff --git a/src/components/CodeSnippet/CodeSnippet/CodeSnippet.test.tsx b/src/components/CodeSnippet/CodeSnippet/CodeSnippet.test.tsx
index 7931763..9ea23e2 100644
--- a/src/components/CodeSnippet/CodeSnippet/CodeSnippet.test.tsx
+++ b/src/components/CodeSnippet/CodeSnippet/CodeSnippet.test.tsx
@@ -35,8 +35,8 @@ describe('CodeSnippet component', () => {
     expect(code).toBeTruthy();
     expect(code).toHaveClass('language-bash');
 
-    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('background-color', 'rgb(240, 240, 240)');
-    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('color', 'rgb(68, 68, 68)');
+    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('background-color', 'rgb(253, 246, 227)');
+    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('color', 'rgb(101, 123, 131)');
   });
 
   test('renders dark code for language-json', () => {
@@ -45,8 +45,8 @@ describe('CodeSnippet component', () => {
     expect(code).toBeTruthy();
     expect(code).toHaveClass('language-json');
 
-    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('background-color', 'rgb(40, 43, 46)');
-    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('color', 'rgb(224, 226, 228)');
+    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('background-color', 'rgb(42, 39, 52)');
+    expect(screen.getByTestId('BaseCodeSnippet').style).toHaveProperty('color', 'rgb(154, 134, 253)');
   });
 
   test('renders component with custom className CustomCodeSnippet', () => {