From 3e55db8f9bd1e158918de3d78fb6bd070aa321f9 Mon Sep 17 00:00:00 2001
From: NoHara42 <mailned42@gmail.com>
Date: Wed, 5 Apr 2023 17:30:20 +0200
Subject: [PATCH 1/5] feat(platform): add color toggle to follow button on
 research page

---
 packages/components/src/Button/Button.tsx          | 3 ++-
 src/pages/Research/Content/ResearchDescription.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
index 950d5a0a60..5c15f65ccf 100644
--- a/packages/components/src/Button/Button.tsx
+++ b/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
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index c33257e162..1d92515dd3 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -110,6 +110,13 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
             <Button
               icon="thunderbolt"
               variant="outline"
+              iconColor={
+                research.subscribers?.includes(
+                  props?.loggedInUser?.userName || '',
+                )
+                  ? 'orange'
+                  : 'black'
+              }
               sx={{
                 fontSize: 2,
                 py: 0,

From 12d1bf21e58ce63cf58a3e0e79c787ab61d18b28 Mon Sep 17 00:00:00 2001
From: NoHara42 <mailned42@gmail.com>
Date: Tue, 25 Apr 2023 18:42:30 +0200
Subject: [PATCH 2/5] feat(platform): add tests for 'Follow'/'Following' states
 of ResearchArticle button

---
 .../Research/Content/ResearchArticle.test.tsx | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/pages/Research/Content/ResearchArticle.test.tsx b/src/pages/Research/Content/ResearchArticle.test.tsx
index 6c111bb9a0..6d3d858fad 100644
--- a/src/pages/Research/Content/ResearchArticle.test.tsx
+++ b/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

From b1304d94b17c26dcdbab38a12fe4f9265a50a833 Mon Sep 17 00:00:00 2001
From: NoHara42 <mailned42@gmail.com>
Date: Wed, 26 Apr 2023 19:35:27 +0200
Subject: [PATCH 3/5] refactor(theme): extract common colors from themes to an
 exportable var

re #2205
---
 packages/themes/src/common/colors.ts          | 21 +++++++++++++++++++
 packages/themes/src/fixing-fashion/styles.ts  | 19 ++---------------
 .../themes/src/precious-plastic/styles.ts     | 19 ++---------------
 packages/themes/src/project-kamp/styles.ts    | 21 +++----------------
 packages/themes/src/types/index.ts            |  2 ++
 5 files changed, 30 insertions(+), 52 deletions(-)
 create mode 100644 packages/themes/src/common/colors.ts

diff --git a/packages/themes/src/common/colors.ts b/packages/themes/src/common/colors.ts
new file mode 100644
index 0000000000..1c0a8b8f94
--- /dev/null
+++ b/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",
+}
\ No newline at end of file
diff --git a/packages/themes/src/fixing-fashion/styles.ts b/packages/themes/src/fixing-fashion/styles.ts
index dfdca28fca..32731bd72c 100644
--- a/packages/themes/src/fixing-fashion/styles.ts
+++ b/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 = {
diff --git a/packages/themes/src/precious-plastic/styles.ts b/packages/themes/src/precious-plastic/styles.ts
index 01981fc15d..451faf90c0 100644
--- a/packages/themes/src/precious-plastic/styles.ts
+++ b/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 = {
diff --git a/packages/themes/src/project-kamp/styles.ts b/packages/themes/src/project-kamp/styles.ts
index 32d75c51de..b42b094b07 100644
--- a/packages/themes/src/project-kamp/styles.ts
+++ b/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',
+  yellow: { base: '#8ab57f', hover: 'hsl(108, 25%, 68%)' }
 }
 
 export const zIndex = {
diff --git a/packages/themes/src/types/index.ts b/packages/themes/src/types/index.ts
index 0eef27a07f..4149494af0 100644
--- a/packages/themes/src/types/index.ts
+++ b/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[]

From cfed652e67e335735abb0a96a57529b386d2a19f Mon Sep 17 00:00:00 2001
From: NoHara42 <mailned42@gmail.com>
Date: Wed, 26 Apr 2023 19:38:37 +0200
Subject: [PATCH 4/5] refactor(Icons in ResearchDescription): adapt thunderbolt
 button to use theming

---
 packages/components/src/Icon/Icon.tsx         |  6 +++--
 .../Research/Content/ResearchDescription.tsx  | 22 ++++++++-----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
index d4202ac012..54ba5687a1 100644
--- a/packages/components/src/Icon/Icon.tsx
+++ b/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,7 @@ 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' },
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index 1d92515dd3..4ffc28ebda 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/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,21 +110,17 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
             <Button
               icon="thunderbolt"
               variant="outline"
-              iconColor={
-                research.subscribers?.includes(
-                  props?.loggedInUser?.userName || '',
-                )
-                  ? 'orange'
-                  : 'black'
-              }
+              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 || '',

From 3d39ad254961e2ac1983b2648a611a73d44d15f4 Mon Sep 17 00:00:00 2001
From: NoHara42 <mailned42@gmail.com>
Date: Wed, 26 Apr 2023 20:01:02 +0200
Subject: [PATCH 5/5] style(formatting): format fix

---
 packages/components/src/Icon/Icon.tsx              |  9 +++++++--
 packages/themes/src/common/colors.ts               |  4 ++--
 packages/themes/src/fixing-fashion/styles.ts       |  2 +-
 packages/themes/src/precious-plastic/styles.ts     |  2 +-
 packages/themes/src/project-kamp/styles.ts         |  2 +-
 packages/themes/src/types/index.ts                 |  2 +-
 src/pages/Research/Content/ResearchDescription.tsx | 14 ++++++++------
 7 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
index 54ba5687a1..7f13c336f5 100644
--- a/packages/components/src/Icon/Icon.tsx
+++ b/packages/components/src/Icon/Icon.tsx
@@ -1,4 +1,4 @@
- /** @jsxImportSource theme-ui */
+/** @jsxImportSource theme-ui */
 import styled from '@emotion/styled'
 import type { VerticalAlignProps, SpaceProps } from 'styled-system'
 import { verticalAlign, space } from 'styled-system'
@@ -155,7 +155,12 @@ export const Icon = (props: Props) => {
   }
 
   return (
-    <IconWrapper {...props} sx={{color: props.color ? `${props.color}` : 'inherit'}} 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' },
diff --git a/packages/themes/src/common/colors.ts b/packages/themes/src/common/colors.ts
index 1c0a8b8f94..c7125707b3 100644
--- a/packages/themes/src/common/colors.ts
+++ b/packages/themes/src/common/colors.ts
@@ -17,5 +17,5 @@ export const commonColors = {
   lightgrey: '#ababac',
   darkGrey: '#686868',
   subscribed: 'orange',
-  "not-subscribed": "#1b1b1b",
-}
\ No newline at end of file
+  'not-subscribed': '#1b1b1b',
+}
diff --git a/packages/themes/src/fixing-fashion/styles.ts b/packages/themes/src/fixing-fashion/styles.ts
index 32731bd72c..6cd5d98dd5 100644
--- a/packages/themes/src/fixing-fashion/styles.ts
+++ b/packages/themes/src/fixing-fashion/styles.ts
@@ -1,4 +1,4 @@
-import { commonColors } from './../common/colors';
+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'
diff --git a/packages/themes/src/precious-plastic/styles.ts b/packages/themes/src/precious-plastic/styles.ts
index 451faf90c0..e581021e82 100644
--- a/packages/themes/src/precious-plastic/styles.ts
+++ b/packages/themes/src/precious-plastic/styles.ts
@@ -1,4 +1,4 @@
-import { commonColors } from './../common/colors';
+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'
diff --git a/packages/themes/src/project-kamp/styles.ts b/packages/themes/src/project-kamp/styles.ts
index b42b094b07..db8524141d 100644
--- a/packages/themes/src/project-kamp/styles.ts
+++ b/packages/themes/src/project-kamp/styles.ts
@@ -10,7 +10,7 @@ export type { ButtonVariants } from '../common/button'
 export const colors = {
   ...commonColors,
   primary: 'green',
-  yellow: { base: '#8ab57f', hover: 'hsl(108, 25%, 68%)' }
+  yellow: { base: '#8ab57f', hover: 'hsl(108, 25%, 68%)' },
 }
 
 export const zIndex = {
diff --git a/packages/themes/src/types/index.ts b/packages/themes/src/types/index.ts
index 4149494af0..6fd6c358fb 100644
--- a/packages/themes/src/types/index.ts
+++ b/packages/themes/src/types/index.ts
@@ -98,7 +98,7 @@ export interface ThemeWithName {
     lightgrey: string
     darkGrey: string
     subscribed: string
-    "not-subscribed": string
+    'not-subscribed': string
   }
 
   fontSizes: number[]
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index 4ffc28ebda..e5be3ba93f 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -47,7 +47,7 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
   let didInit = false
   const store = useResearchStore()
   const [viewCount, setViewCount] = useState<number | undefined>()
-  const theme = useTheme();
+  const theme = useTheme()
 
   const incrementViewCount = async () => {
     const sessionStorageArray = retrieveSessionStorageArray('research')
@@ -110,11 +110,13 @@ 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']}
+              iconColor={
+                research.subscribers?.includes(
+                  props?.loggedInUser?.userName || '',
+                )
+                  ? theme.colors.subscribed
+                  : theme.colors['not-subscribed']
+              }
               sx={{
                 fontSize: 2,
                 py: 0,