refactor: move cascaded CSS from templates to JS objects

src/components/Developers/styles.ts

@@ -9,26 +9,26 @@ export const Details = styled('span')({
   alignItems: 'center',
 });
 
-export const Content = styled('div')`
-  margin: 10px 0 10px 0;
-  display: flex;
-  flex-wrap: wrap;
-  > * {
-    margin: 5px;
-  }
-`;
+export const Content = styled('div')({
+  margin: '10px 0 10px 0',
+  display: 'flex',
+  flexWrap: 'wrap',
+  '> *': {
+    margin: '5px',
+  },
+});
 
-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    margin-bottom: 10px;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    marginBottom: '10px',
+    textTransform: 'capitalize',
+  },
+});
 
-export const Fab = styled(MuiFab)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-  }
-`;
+export const Fab = styled(MuiFab)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+  },
+});