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

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 import styled from '@emotion/styled'
 import type { VerticalAlignProps, SpaceProps } from 'styled-system'
 import { verticalAlign, space } from 'styled-system'
@@ -40,6 +41,7 @@ import { iconMap } from './svgs'
 import { DownloadIcon } from './DownloadIcon'
 import { ExternalUrl } from './ExternalUrl'
 import type { IGlyphs } from './types'
+import type { ThemeUIStyleObject } from 'theme-ui'
 
 interface IGlyphProps {
   glyph: keyof IGlyphs
@@ -51,6 +53,7 @@ export interface IProps {
   marginRight?: string
   color?: string
   onClick?: () => void
+  sx?: ThemeUIStyleObject
 }
 
 export const glyphs: IGlyphs = {
@@ -115,7 +118,6 @@ 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}
 
@@ -153,7 +155,12 @@ export const Icon = (props: Props) => {
   }
 
   return (
-    <IconWrapper {...props} size={definedSize} style={{ marginRight }}>
+    <IconWrapper
+      {...props}
+      sx={{ color: props.color ? `${props.color}` : 'inherit' }}
+      size={definedSize}
+      style={{ marginRight }}
+    >
       <IconContext.Provider
         value={{
           style: { width: definedSize + 'px', height: definedSize + 'px' },

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',
+  'not-subscribed': '#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
+    'not-subscribed': 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,36 @@ describe('Research Article', () => {
     expect(wrapper.getAllByText('another-example-username')).toHaveLength(1)
   })
 
+  it('displays "Follow" button text if not subscribed', async () => {
+    // Arrange
+    ;(useResearchStore as jest.Mock).mockReturnValue({
+      ...mockResearchStore,
+    })
+
+    // Act
+    const wrapper = getWrapper()
+
+    // Assert
+    expect(wrapper.getAllByText('Follow').length).toBeGreaterThan(0)
+  })
+
+  it('displays "Following" button text if user is subscribed', async () => {
+    // Arrange
+    ;(useResearchStore as jest.Mock).mockReturnValue({
+      ...mockResearchStore,
+      activeResearchItem: FactoryResearchItem({
+        subscribers: [activeUser.userName],
+      }),
+      activeUser,
+    })
+
+    // Act
+    const wrapper = getWrapper()
+
+    // Assert
+    expect(wrapper.getAllByText('Following').length).toBeGreaterThan(0)
+  })
+
   describe('Research Update', () => {
     it('displays contributors', async () => {
       // Arrange
@@ -147,7 +182,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

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+import { useTheme } from '@emotion/react'
 import { format } from 'date-fns'
 import {
   Button,
@@ -14,9 +16,6 @@ import { isUserVerified } from 'src/common/isUserVerified'
 import type { IResearch } from 'src/models/research.models'
 import type { IUser } from 'src/models/user.models'
 import { useResearchStore } from 'src/stores/Research/research.store'
-// TODO: Remove direct usage of Theme
-import { preciousPlasticTheme } from 'oa-themes'
-const theme = preciousPlasticTheme.styles
 import {
   addIDToSessionStorageArray,
   retrieveSessionStorageArray,
@@ -48,6 +47,7 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
   let didInit = false
   const store = useResearchStore()
   const [viewCount, setViewCount] = useState<number | undefined>()
+  const theme = useTheme()
 
   const incrementViewCount = async () => {
     const sessionStorageArray = retrieveSessionStorageArray('research')
@@ -110,14 +110,19 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
             <Button
               icon="thunderbolt"
               variant="outline"
+              iconColor={
+                research.subscribers?.includes(
+                  props?.loggedInUser?.userName || '',
+                )
+                  ? theme.colors.subscribed
+                  : theme.colors['not-subscribed']
+              }
               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 || '',