feat(platform): add color toggle to follow button on research page

packages/components/src/Button/Button.tsx

@@ -11,6 +11,7 @@ export interface IBtnProps extends React.ButtonHTMLAttributes<HTMLElement> {
   small?: boolean
   large?: boolean
   showIconOnly?: boolean
+  iconColor?: string
 }
 
 type ToArray<Type> = [Type] extends [any] ? Type[] : never
@@ -112,7 +113,7 @@ export const Button = (props: BtnProps) => {
             pointerEvents: 'none',
           }}
         >
-          <Icon glyph={props.icon} />
+          <Icon glyph={props.icon} color={props.iconColor} />
         </Flex>
       )}
       <Text

packages/components/src/Icon/Icon.tsx

@@ -115,15 +115,13 @@ const IconWrapper = styled.div<Props>`
   min-width: ${(props) => (props.size ? `${props.size}px` : '32px')};
   min-height: ${(props) => (props.size ? `${props.size}px` : '32px')};
   position: relative;
-  color: ${(props) => (props.color ? `${props.color}` : 'inherit')};
-  ${verticalAlign}
-  ${space}
-
-  ${(props) =>
+  color: ${(props) => props.color || 'inherit'};
+  ${verticalAlign} ${space}
+    ${(props) =>
     props.onClick &&
     `
     cursor: pointer;
-  `}
+  `};
 `
 
 const sizeMap = {

packages/components/src/UserStatistics/__snapshots__/UserStatistics.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`UserStatistics > renders correctly 1`] = `
         class="css-i1ihic-Box"
       >
         <div
-          class="css-sqxgz6"
+          class="css-gz1tr0"
           size="22"
         >
           <img
@@ -35,7 +35,7 @@ exports[`UserStatistics > renders correctly 1`] = `
           class="css-i1ihic-Box"
         >
           <div
-            class="css-sqxgz6"
+            class="css-gz1tr0"
             size="22"
           >
             <svg
@@ -64,7 +64,7 @@ exports[`UserStatistics > renders correctly 1`] = `
         class="css-i1ihic-Box"
       >
         <div
-          class="css-sqxgz6"
+          class="css-gz1tr0"
           size="22"
         >
           <img

packages/themes/src/common/colors.ts

@@ -0,0 +1,21 @@
+export const commonColors = {
+  white: 'white',
+  offwhite: '#ececec',
+  black: '#1b1b1b',
+  softyellow: '#f5ede2',
+  blue: '#83ceeb',
+  red: '#eb1b1f',
+  red2: '#f58d8e',
+  softblue: '#e2edf7',
+  bluetag: '#5683b0',
+  grey: '#61646b',
+  green: '#00c3a9',
+  error: 'red',
+  background: '#f4f6f7',
+  silver: '#c0c0c0',
+  softgrey: '#c2d4e4',
+  lightgrey: '#ababac',
+  darkGrey: '#686868',
+  subscribed: 'orange',
+  notSubscribed: '#1b1b1b',
+}

packages/themes/src/fixing-fashion/styles.ts

@@ -1,3 +1,4 @@
+import { commonColors } from './../common/colors'
 import type { ThemeWithName } from '../types'
 import spaceBadge from '../../assets/images/themes/fixing-fashion/avatar_space_lg.svg'
 import memberBadgeLowDetail from '../../assets/images/themes/fixing-fashion/avatar_member_sm.svg'
@@ -12,25 +13,9 @@ const fonts = {
 
 // use enum to specify list of possible colors for typing
 export const colors = {
-  white: 'white',
-  offwhite: '#ececec',
-  black: '#1b1b1b',
+  ...commonColors,
   primary: 'green',
-  softyellow: '#f5ede2',
   yellow: { base: '#E95628', hover: 'hsl(14, 81%, 43%)' },
-  blue: '#83ceeb',
-  red: '#eb1b1f',
-  red2: '#f58d8e',
-  softblue: '#e2edf7',
-  bluetag: '#5683b0',
-  grey: '#61646b',
-  green: '#00c3a9',
-  error: 'red',
-  background: '#f4f6f7',
-  silver: '#c0c0c0',
-  softgrey: '#c2d4e4',
-  lightgrey: '#ababac',
-  darkGrey: '#686868',
 }
 
 export const zIndex = {

packages/themes/src/precious-plastic/styles.ts

@@ -1,3 +1,4 @@
+import { commonColors } from './../common/colors'
 import memberBadgeLowDetail from '../../assets/images/themes/precious-plastic/avatar_member_sm.svg'
 import memberBadgeHighDetail from '../../assets/images/themes/precious-plastic/avatar_member_lg.svg'
 import CollectionBadge from '../../assets/images/badges/pt-collection-point.svg'
@@ -20,25 +21,9 @@ const fonts = {
 
 // use enum to specify list of possible colors for typing
 export const colors = {
-  white: 'white',
-  offwhite: '#ececec',
-  black: '#1b1b1b',
+  ...commonColors,
   primary: 'red',
-  softyellow: '#f5ede2',
   yellow: { base: '#fee77b', hover: '#ffde45' },
-  blue: '#83ceeb',
-  red: '#eb1b1f',
-  red2: '#f58d8e',
-  softblue: '#e2edf7',
-  bluetag: '#5683b0',
-  grey: '#61646b',
-  green: '#00c3a9',
-  error: 'red',
-  background: '#f4f6f7',
-  silver: '#c0c0c0',
-  softgrey: '#c2d4e4',
-  lightgrey: '#ababac',
-  darkGrey: '#686868',
 }
 
 export const zIndex = {

packages/themes/src/project-kamp/styles.ts

@@ -3,29 +3,14 @@ import memberBadgeHighDetail from '../../assets/images/themes/project-kamp/avata
 import logo from '../../assets/images/themes/project-kamp/project-kamp-header.png'
 import type { ThemeWithName } from '../types'
 import { getButtons } from '../common/button'
+import { commonColors } from '../common/colors'
 export type { ButtonVariants } from '../common/button'
 
 // use enum to specify list of possible colors for typing
 export const colors = {
-  white: 'white',
-  offwhite: '#ececec',
-  black: '#1b1b1b',
+  ...commonColors,
   primary: 'green',
-  softyellow: '#f5ede2',
   yellow: { base: '#8ab57f', hover: 'hsl(108, 25%, 68%)' },
-  blue: '#83ceeb',
-  red: '#eb1b1f',
-  red2: '#f58d8e',
-  softblue: '#e2edf7',
-  bluetag: '#5683b0',
-  grey: '#61646b',
-  green: '#00c3a9',
-  error: 'red',
-  background: '#f4f6f7',
-  silver: '#c0c0c0',
-  softgrey: '#c2d4e4',
-  lightgrey: '#ababac',
-  darkGrey: '#686868',
 }
 
 export const zIndex = {

packages/themes/src/types/index.ts

@@ -97,6 +97,8 @@ export interface ThemeWithName {
     offwhite: string
     lightgrey: string
     darkGrey: string
+    subscribed: string
+    notSubscribed: string
   }
 
   fontSizes: number[]

src/pages/Research/Content/ResearchArticle.test.tsx

@@ -9,6 +9,9 @@ import {
   FactoryResearchItemUpdate,
 } from 'src/test/factories/ResearchItem'
 import { preciousPlasticTheme } from 'oa-themes'
+import ResearchArticle from './ResearchArticle'
+import { FactoryUser } from 'src/test/factories/User'
+
 const Theme = preciousPlasticTheme.styles
 
 jest.mock('src/index', () => ({
@@ -28,7 +31,9 @@ jest.mock('src/index', () => ({
 
 jest.mock('src/stores/Research/research.store')
 
-import ResearchArticle from './ResearchArticle'
+const activeUser = FactoryUser({
+  userRoles: ['beta-tester'],
+})
 
 describe('Research Article', () => {
   const mockResearchStore = {
@@ -75,6 +80,49 @@ describe('Research Article', () => {
     expect(wrapper.getAllByText('another-example-username')).toHaveLength(1)
   })
 
+  it('displays "Follow" button text and color if not subscribed', async () => {
+    // Arrange
+    ;(useResearchStore as jest.Mock).mockReturnValue({
+      ...mockResearchStore,
+    })
+
+    // Act
+    const wrapper = getWrapper()
+    const followingButton = wrapper.getByTestId('following-button')
+
+    // Assert
+    expect(wrapper.getAllByText('Follow').length).toBeGreaterThan(0)
+    expect(followingButton).toBeInTheDocument()
+    expect(followingButton).toHaveAttribute(
+      'iconcolor',
+      Theme.colors.notSubscribed,
+    )
+  })
+
+  it('displays "Following" button text and color if user is subscribed', async () => {
+    // Arrange
+    ;(useResearchStore as jest.Mock).mockReturnValue({
+      ...mockResearchStore,
+      activeResearchItem: FactoryResearchItem({
+        subscribers: [activeUser.userName],
+      }),
+      activeUser,
+    })
+
+    // Act
+    const wrapper = getWrapper()
+    const followingButton = wrapper.getByTestId('following-button')
+
+    // Assert
+    expect(wrapper.getAllByText('Following').length).toBeGreaterThan(0)
+
+    expect(followingButton).toBeInTheDocument()
+    expect(followingButton).toHaveAttribute(
+      'iconcolor',
+      Theme.colors.subscribed,
+    )
+  })
+
   describe('Research Update', () => {
     it('displays contributors', async () => {
       // Arrange
@@ -147,7 +195,11 @@ describe('Research Article', () => {
 
 const getWrapper = () => {
   return render(
-    <Provider userStore={{}}>
+    <Provider
+      userStore={{
+        user: activeUser,
+      }}
+    >
       <ThemeProvider theme={Theme}>
         <MemoryRouter initialEntries={['/research/article']}>
           <Route

src/pages/Research/Content/ResearchDescription.tsx

@@ -108,16 +108,22 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
           )}
           <AuthWrapper roleRequired="beta-tester">
             <Button
+              data-testid="following-button"
               icon="thunderbolt"
               variant="outline"
+              iconColor={
+                research.subscribers?.includes(
+                  props?.loggedInUser?.userName || '',
+                )
+                  ? theme.colors.subscribed
+                  : theme.colors.notSubscribed
+              }
               sx={{
                 fontSize: 2,
                 py: 0,
                 height: '41.5px', // TODO: Ideally this is a standard size
               }}
-              onClick={() => {
-                props.onFollowingClick()
-              }}
+              onClick={props.onFollowingClick}
             >
               {research.subscribers?.includes(
                 props?.loggedInUser?.userName || '',