rework some stuff

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx

@@ -1,4 +1,5 @@
 import { styled, Typography } from '@mui/material';
+import type { PropsWithChildren } from 'react';
 
 export const Deleted = styled(Typography)(({ theme }) => ({
     color: theme.palette.error.main,
@@ -7,8 +8,30 @@ export const Deleted = styled(Typography)(({ theme }) => ({
 
 export const Added = styled(Typography)(({ theme }) => ({
     '::before': { content: '"+ "' },
+    color: theme.palette.success.dark,
 }));
 
-export const Added = styled(Typography)(({ theme }) => ({
-    '::before': { content: '"+ "' },
+export const AddedStrategy = styled(Added, {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled?: boolean }>(({ theme, disabled }) => ({
+    color: disabled ? theme.palette.text.disabled : undefined,
+}));
+
+const Change = styled('span')({
+    fontWeight: 'bold',
+});
+
+export const ChangeItemInfo = styled(
+    ({ children, ...props }: PropsWithChildren) => (
+        <Typography {...props}>
+            <Change>Change:</Change>
+            {children}
+        </Typography>
+    ),
+)(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row',
+    alignItems: 'center',
+    flex: 'auto',
+    gap: `1ch`,
 }));

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import { formatStrategyName } from 'utils/strategyNames';
-import { Typography, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { textTruncated } from 'themes/themeStyles';
 import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+import { Truncator } from 'component/common/Truncator/Truncator.tsx';
 
 interface IStrategyTooltipLinkProps {
     name: string;
@@ -10,7 +11,7 @@ interface IStrategyTooltipLinkProps {
     previousTitle?: string;
 }
 
-const Truncated = styled('div')(() => ({
+const Truncated = styled('span')(() => ({
     ...textTruncated,
     maxWidth: 500,
 }));
@@ -22,7 +23,7 @@ export const ChangeStrategyName: FC<IStrategyTooltipLinkProps> = ({
 }) => {
     return (
         <Truncated>
-            <Typography component='span'>{formatStrategyName(name)}</Typography>
+            <Truncator component='span'>{formatStrategyName(name)}</Truncator>
             <NameWithChangeInfo newName={title} previousName={previousTitle} />
         </Truncated>
     );

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -20,6 +20,7 @@ import type { IFeatureStrategy } from 'interfaces/strategy';
 import { Tab, TabList, TabPanel, Tabs } from './ChangeTabComponents.tsx';
 import { ChangeStrategyName } from './ChangeStrategyName.tsx';
 import { StrategyDiff } from './StrategyDiff.tsx';
+import { AddedStrategy, ChangeItemInfo, Deleted } from './Change.styles.tsx';
 
 export const ChangeItemWrapper = styled(Box)({
     display: 'flex',
@@ -36,17 +37,6 @@ const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     width: '100%',
 }));
 
-const ChangeItemInfo: FC<{ children?: React.ReactNode }> = styled(Box)(
-    ({ theme }) => ({
-        display: 'flex',
-        flexFlow: 'row',
-        alignItems: 'center',
-        flex: 'auto',
-        gap: theme.spacing(1),
-        '::before': { content: '"Change: "', fontWeight: 'bold' },
-    }),
-);
-
 const StyledBox: FC<{ children?: React.ReactNode }> = styled(Box)(
     ({ theme }) => ({
         marginTop: theme.spacing(2),
@@ -112,7 +102,7 @@ const EditHeader: FC<{
         return <Typography color='success.dark'>Editing strategy</Typography>;
     }
 
-    return <Typography>Editing strategy:</Typography>;
+    return <Typography>Editing strategy</Typography>;
 };
 
 const hasDiff = (object: unknown, objectToCompare: unknown) =>
@@ -141,14 +131,7 @@ const DeleteStrategy: FC<{
         <>
             <ChangeItemCreateEditDeleteWrapper>
                 <ChangeItemInfo>
-                    <Typography
-                        sx={(theme) => ({
-                            color: theme.palette.error.main,
-                            '::before': { content: '"- "' },
-                        })}
-                    >
-                        Deleting strategy
-                    </Typography>
+                    <Deleted>Deleting strategy</Deleted>
                     <ChangeStrategyName name={name || ''} title={title} />
                 </ChangeItemInfo>
                 {actions}
@@ -272,16 +255,9 @@ const AddStrategy: FC<{
     <>
         <ChangeItemCreateEditDeleteWrapper>
             <ChangeItemInfo>
-                <Typography
-                    color={
-                        change.payload?.disabled
-                            ? 'action.disabled'
-                            : 'success.dark'
-                    }
-                    sx={{ '::before': { content: '"+ "' } }}
-                >
+                <AddedStrategy disabled={change.payload?.disabled}>
                     Adding strategy
-                </Typography>
+                </AddedStrategy>
                 <ChangeStrategyName
                     name={change.payload.name}
                     title={change.payload.title}