Add the original group names for the OGs as subtext found underneath the current group name where possible

pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx

@@ -14,6 +14,8 @@ import { usePromise, useTransport } from '@polkadot/joy-utils/react/hooks';
 import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { WorkerData } from '@polkadot/joy-utils/types/workingGroups';
 import { LeadInfo } from '@polkadot/joy-utils/react/components/working-groups/LeadInfo';
+import styled from 'styled-components';
+import _ from 'lodash';
 
 export type FormValues = GenericFormValues & {
   workingGroup: WorkingGroupKey;
@@ -45,18 +47,32 @@ export type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValu
 
 const OPERATIONS_GROUP_NAMES = { Alpha: 'Builders', Beta: 'Human Resources', Gamma: 'Marketing' };
 
+const OperationsGroupSubtext = styled('p')`
+  font-size: 11px !important;
+  margin-top: -12px !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+`;
+
 const availableGroupsOptions = Object.keys(WorkingGroupDef)
   .filter((wgKey) => wgKey !== 'Gateway') // Gateway group not yet supported!
   .map((wgKey) => {
     let operationsGroupName;
+    let operationsGroupSubtext;
 
     if (wgKey.toLowerCase().includes('operations')) {
       const operationsGroupType = wgKey.slice('operations'.length) as 'Alpha' | 'Beta' | 'Gamma';
 
       operationsGroupName = OPERATIONS_GROUP_NAMES[operationsGroupType];
+      operationsGroupSubtext = `Operations Working Group ${operationsGroupType}`;
     }
 
-    return { text: `${operationsGroupName ?? wgKey} Working Group`, value: wgKey };
+    return { text: (
+      <>
+        <p>{operationsGroupName ?? `${wgKey} Working Group`}</p>
+        {operationsGroupName ? <OperationsGroupSubtext>{operationsGroupSubtext}</OperationsGroupSubtext> : null}
+      </>
+    ),
+    value: wgKey };
   });
 
 export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {

pioneer/packages/joy-roles/src/tabs/Opportunities.tsx

@@ -486,18 +486,18 @@ type OpeningViewProps = WorkingGroupOpening & BlockTimeProps & MemberIdProps
 
 const renderWorkingGroupName = (workingGroup: WorkingGroups) => {
   if (workingGroup === WorkingGroups.OperationsAlpha) {
-    return 'Builders';
+    return { text: 'Builders', subtext: 'Operations Working Group Alpha' };
   }
 
   if (workingGroup === WorkingGroups.OperationsBeta) {
-    return 'Human Resources';
+    return { text: 'Human Resources', subtext: 'Operations Working Group Beta' };
   }
 
   if (workingGroup === WorkingGroups.OperationsGamma) {
-    return 'Marketing';
+    return { text: 'Marketing', subtext: 'Operations Working Group Gamma' };
   }
 
-  return workingGroup;
+  return { text: workingGroup };
 };
 
 export const OpeningView = Loadable<OpeningViewProps>(
@@ -511,7 +511,7 @@ export const OpeningView = Loadable<OpeningViewProps>(
         <OpeningTitle>
           {text.job.title}
           <OpeningLabel>
-            { _.startCase(renderWorkingGroupName(props.meta.group)) }{ isLeadOpening ? ' Lead' : '' }
+            { _.startCase(renderWorkingGroupName(props.meta.group).text) }{ isLeadOpening ? ' Lead' : '' }
           </OpeningLabel>
         </OpeningTitle>
         <Card fluid className='container'>
@@ -547,6 +547,12 @@ const FilterOpportunitiesDropdown = styled(Dropdown)`
   width: 250px !important;
 `;
 
+const OperationsGroupSubtext = styled('p')`
+  font-size: 11px !important;
+  margin-top: -12px !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+`;
+
 export type OpeningsViewProps = MemberIdProps & {
   openings?: Array<WorkingGroupOpening>;
   block_time_in_seconds?: number;
@@ -568,10 +574,21 @@ export const OpeningsView = Loadable<OpeningsViewProps>(
       if (newPath !== location.pathname) { history.push(newPath as string); }
     };
 
-    const groupOption = (group: WorkingGroups | null, lead = false) => ({
-      value: `${basePath}${group ? `/${group}` : ''}${lead ? '/lead' : ''}`,
-      text: _.startCase(`${group ? renderWorkingGroupName(group) : 'All opportunities'}`) + (lead ? ' (Lead)' : '')
-    });
+    const groupOption = (group: WorkingGroups | null, lead = false) => {
+      const subtext = group ? renderWorkingGroupName(group).subtext : null;
+      const text = (
+        <>
+          <p>{_.startCase(`${group ? renderWorkingGroupName(group).text : 'All opportunities'}`) + (lead ? ' (Lead)' : '')}</p>
+          {subtext ? <OperationsGroupSubtext>{subtext}</OperationsGroupSubtext> : null}
+        </>
+      );
+
+      return {
+        value: `${basePath}${group ? `/${group}` : ''}${lead ? '/lead' : ''}`,
+        text
+      };
+    };
+
     // Can assert "props.openings!" because we're using "Loadable" which prevents them from beeing undefined
     const filteredOpenings = props.openings!.filter((o) =>
       (!group || o.meta.group === group) &&

pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx

@@ -154,15 +154,24 @@ export const OperationsGroup = (props: OperationsGroupProps) => (
   />
 );
 
+const OperationsGroupName = styled('p')`
+  font-size: 14px !important;
+  color: rgba(0,0,0,0.5) !important;
+  margin-top: -2px !important;
+`;
+
 export const OperationsGroupAlpha = (props: GroupOverviewOuterProps) => (
   <OperationsGroup
     group={WorkingGroups.OperationsAlpha}
     customGroupName='Builders'
     description={
-      <span>
-        The Builders (Operations Group Alpha) working group is comprised of a diverse set of contributors that facilitate
-        the evolution and maintenance of the platform.
-      </span>
+      <>
+        <OperationsGroupName>Operations Group Alpha</OperationsGroupName>
+        <span>
+          The Builders working group is comprised of a diverse set of contributors that facilitate
+          the evolution and maintenance of the platform.
+        </span>
+      </>
     }
     {...props}
   />
@@ -173,10 +182,13 @@ export const OperationsGroupBeta = (props: GroupOverviewOuterProps) => (
     group={WorkingGroups.OperationsBeta}
     customGroupName='Human Resources'
     description={
-      <span>
-        The Human Resources (Operations Group Beta) working group is responsible for the Human Resources tasks required
-        for the operation and growth of the platform and community.
-      </span>
+      <>
+        <OperationsGroupName>Operations Group Beta</OperationsGroupName>
+        <span>
+          The Human Resources working group is responsible for the Human Resources tasks required
+          for the operation and growth of the platform and community.
+        </span>
+      </>
     }
     {...props}
   />
@@ -187,10 +199,13 @@ export const OperationsGroupGamma = (props: GroupOverviewOuterProps) => (
     group={WorkingGroups.OperationsGamma}
     customGroupName='Marketing'
     description={
-      <span>
-        The Marketing (Operations Group Gamma) working group is responsible for developing and executing strategies to
-        promote the Joystream platform.
-      </span>
+      <>
+        <OperationsGroupName>Operations Group Gamma</OperationsGroupName>
+        <span>
+          The Marketing working group is responsible for developing and executing strategies to
+          promote the Joystream platform.
+        </span>
+      </>
     }
     {...props}
   />

pioneer/packages/joy-tokenomics/src/Overview/SpendingAndStakeDistributionTable.tsx

@@ -76,6 +76,11 @@ const StyledTableRow = styled(Table.Row)`
   }
 `;
 
+const ExtraInfoText = styled('p')`
+  color: rgba(0,0,0,0.7) !important;
+  font-size: 11px !important;
+`;
+
 const SpendingAndStakeTableRow: React.FC<{
   role: string;
   numberOfActors?: string;
@@ -88,7 +93,8 @@ const SpendingAndStakeTableRow: React.FC<{
   color?: string;
   active?: boolean;
   helpContent?: string;
-}> = ({ role, numberOfActors, groupEarning, groupEarningDollar, earningShare, groupStake, groupStakeDollar, stakeShare, color, active, helpContent }) => {
+  extraInfo?: { full: string, short: string };
+}> = ({ role, numberOfActors, groupEarning, groupEarningDollar, earningShare, groupStake, groupStakeDollar, stakeShare, color, active, helpContent, extraInfo }) => {
   const parseData = (data: string | undefined): string | JSX.Element => {
     if (data && active) {
       return <em>{data}</em>;
@@ -102,12 +108,15 @@ const SpendingAndStakeTableRow: React.FC<{
   return (
     <StyledTableRow color={active && 'rgb(150, 150, 150)'}>
       <Table.Cell>
-        {active ? <strong>{role}</strong> : role}
-        {helpContent && <Popup
-          trigger={<Icon className='help-icon' name='help circle' color='grey'/>}
-          content={helpContent}
-          position='right center'
-        />}
+        <div>
+          {active ? <strong>{role}</strong> : role}
+          {helpContent && <Popup
+            trigger={<Icon className='help-icon' name='help circle' color='grey'/>}
+            content={helpContent}
+            position='right center'
+          />}
+          {extraInfo && <ExtraInfoText>{extraInfo.full}</ExtraInfoText>}
+        </div>
       </Table.Cell>
       <Table.Cell>{parseData(numberOfActors)}</Table.Cell>
       <Table.Cell>{parseData(groupEarning)}</Table.Cell>
@@ -182,7 +191,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
             />
           );
         })}
-        {WORKING_GROUPS.map(({ groupType, titleCutoff, shortTitle, title, helpText, color, lead }) => {
+        {WORKING_GROUPS.map(({ groupType, titleCutoff, shortTitle, title, helpText, color, lead, extraInfo }) => {
           return (
             <React.Fragment key={groupType}>
               <SpendingAndStakeTableRow
@@ -196,6 +205,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
                 groupStakeDollar={displayStatusData(groupType, 'totalStake')}
                 stakeShare={data && `${round(data[groupType].stakeShare * 100)}`}
                 color={color}
+                extraInfo={extraInfo}
               />
               <SpendingAndStakeTableRow
                 role={width <= lead.titleCutoff ? lead.shortTitle : lead.title}
@@ -208,6 +218,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
                 groupStakeDollar={displayStatusData(groupType, 'totalStake', true)}
                 stakeShare={data && `${round(data[groupType].lead.stakeShare * 100)}`}
                 color={lead.color}
+                extraInfo={extraInfo}
               />
             </React.Fragment>
           );

pioneer/packages/joy-tokenomics/src/Overview/TokenomicsCharts.tsx

@@ -34,13 +34,13 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
         <ChartContainer>
           <StyledPieChart
             values={[
-              ...WORKING_GROUPS.map(({ color, title, groupType, lead }) => [{
+              ...WORKING_GROUPS.map(({ color, title, groupType, lead, extraInfo }) => [{
                 colors: [color],
-                label: title,
+                label: `${title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].rewardsShare * 100
               }, {
                 colors: [lead.color],
-                label: lead.title,
+                label: `${lead.title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].lead.rewardsShare * 100
               }]).flat(),
               ...NON_WORKING_GROUPS.map(({ color, shortTitle, groupType }) => ({
@@ -62,13 +62,13 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
         <ChartContainer>
           <StyledPieChart
             values={[
-              ...WORKING_GROUPS.map(({ color, title, groupType, lead }) => [{
+              ...WORKING_GROUPS.map(({ color, title, groupType, lead, extraInfo }) => [{
                 colors: [color],
-                label: title,
+                label: `${title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].stakeShare * 100
               }, {
                 colors: [lead.color],
-                label: lead.title,
+                label: `${lead.title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].lead.stakeShare * 100
               }]).flat(),
               ...NON_WORKING_GROUPS.map(({ color, shortTitle, groupType }) => ({

pioneer/packages/joy-tokenomics/src/tokenomicsGroupsData.ts

@@ -57,6 +57,10 @@ export const WORKING_GROUPS = [
     title: 'Builders',
     helpText: 'The current Builders (Operations Group Alpha), and the sum of their projected rewards and stakes.',
     color: '#009688',
+    extraInfo: {
+      full: 'Operations Working Group Alpha',
+      short: 'OWG Alpha'
+    },
     lead: {
       titleCutoff: 1015,
       shortTitle: 'Builders Lead',
@@ -72,6 +76,10 @@ export const WORKING_GROUPS = [
     title: 'Human Resources',
     helpText: 'The current Human Resources (Operations Group Beta) Workers, and the sum of their projected rewards and stakes.',
     color: '#03a9f4',
+    extraInfo: {
+      full: 'Operations Working Group Beta',
+      short: 'OWG Beta'
+    },
     lead: {
       titleCutoff: 1015,
       shortTitle: 'HR Lead',
@@ -87,6 +95,10 @@ export const WORKING_GROUPS = [
     title: 'Marketing',
     helpText: 'The current Marketers (Operations Group Gamma), and the sum of their projected rewards and stakes.',
     color: '#3f51b5',
+    extraInfo: {
+      full: 'Operations Working Group Gamma',
+      short: 'OWG Gamma'
+    },
     lead: {
       titleCutoff: 1015,
       shortTitle: 'Marketing Lead',