Adjust desktop add edit testimony

[hanboyu]

Summary

Closes #1305

Adjusted add/edit testimony pages for the desktop according to the new design on Figma https://www.figma.com/file/NPlnWH6AiI2IQMebd8ardO/Mobile-Screens?type=design&node-id=558%3A8200&mode=design&t=k0B4pQcwXIj2PFa8-1

Checklist

• On the frontend, I've made my strings translate-able.
• If I've added shared components, I've added a storybook story.
• I've made pages responsive and look good on mobile.

Screenshots

Steps to test/reproduce

1. Go any bill.
2. Click "Create Testimony" on the right side of the page.
3. Follow the instructions to complete your testimony to see the changes on those pages.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maple-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2023 1:43am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
maple-prod	⬜️ Ignored (Inspect)	Visit Preview		Oct 11, 2023 1:43am

[vercel]

Someone is attempting to deploy a commit to the Maple Testimony Team on Vercel.

A member of the Team first needs to authorize it.

[sashamaryl]

Here is the error logs from the vercel build. This is failing because StepChip props type doesn't include 'style'.

[12:41:53.237] Failed to compile.
[12:41:53.237] 
[12:41:53.237] ./components/publish/StepHeader.tsx:9:48
[12:41:53.237] Type error: No overload matches this call.
[12:41:53.237]   Overload 1 of 2, '(props: (({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; }): ReactElement<...>', gave the following error.
[12:41:53.237]     Type '{ children: number; scale: number; className: string; style: { backgroundColor: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & ((({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; })'.
[12:41:53.237]       Property 'style' does not exist on type 'IntrinsicAttributes & ((({ ref?: Ref<Component<PropsWithChildren<{ active?: boolean | undefined; scale?: number | undefined; } & { className?: string | undefined; }>, any, any>> | undefined; ... 4 more ...; key?: Key | ... 1 more ... | undefined; } | { ...; }) & { ...; } & ({} | { ...; })) & { ...; })'.
[12:41:53.238]   Overload 2 of 2, '(props: StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>>): ReactElement<...>', gave the following error.
[12:41:53.238]     Type '{ children: number; scale: number; className: string; style: { backgroundColor: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<...>>'.
[12:41:53.238]       Property 'style' does not exist on type 'IntrinsicAttributes & StyledComponentPropsWithAs<Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, any, {}, never, Comp<{ active?: boolean | undefined; scale?: number | undefined; }>, Comp<...>>'.
[12:41:53.238] 
[12:41:53.238] �[0m �[90m  7 | �[39m      �[33m<�[39m�[33mdiv�[39m {�[33m...�[39mrest}�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m  8 | �[39m        {�[33m!�[39m�[33m!�[39mstep �[33m&&�[39m (�[0m
[12:41:53.238] �[0m�[31m�[1m>�[22m�[39m�[90m  9 | �[39m          �[33m<�[39m�[33mStepChip�[39m scale�[33m=�[39m{�[35m2�[39m} className�[33m=�[39m�[32m"me-4"�[39m style�[33m=�[39m{{backgroundColor�[33m:�[39m �[32m"#1A3185"�[39m�[33m,�[39m color�[33m:�[39m �[32m"white"�[39m}}�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m    | �[39m                                               �[31m�[1m^�[22m�[39m�[0m
[12:41:53.238] �[0m �[90m 10 | �[39m            {step}�[0m
[12:41:53.238] �[0m �[90m 11 | �[39m          �[33m<�[39m�[33m/�[39m�[33mStepChip�[39m�[33m>�[39m�[0m
[12:41:53.238] �[0m �[90m 12 | �[39m        )}�[0m
[12:41:53.355] error Command failed with exit code 1.
[12:41:53.355] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[12:41:53.380] Error: Command "yarn run vercel-build" exited with 1

One way to resolve this error, since it's already a styled component, would be to extend it using styledcomponents when you need to: https://styled-components.com/docs/basics#extending-styles

[oherma01]

I think that now that that error is fixed, all you should need to do is run prettier and commit, then you should be g2g!

[sashamaryl]

looks good to me!