Styling consistency

[Joepock123]

• Lots of styling for each styled component (is the styling copied from Figma?) There may be some styles that are common. Styled components are in JS we can utilise variables for things such as spacings, breakpoints, colours by importing them from designated files. Like global css styles this can help keep our styling consistent across the app and means we only need to change the value in one place.
• For small components the styled components can go in the same file instead of a separate .styles file. Generally I follow that pattern even with bigger components as it gets rid of loads of files (although it's a preference thing!).