[DEV-3593] Fix api page layout (#1998)

* fix chips and apirestsection selector style

* add changeset

* fixes as requested by review

* fix text clamp

* merge with main and fix compile

Author: MarBert

.changeset/free-colts-attack.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix chip colors, fix api selector style

apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx

@@ -64,6 +64,19 @@ const ApiViewer: FC<ApiViewerProps> = ({ specURL }) => {
           #api-info {
             margin-left: 0 !important;
           }
+          .nav-method {
+            border-radius: 4px !important; 
+            min-width: 48px !important;
+            min-height: 22px !important;
+            padding-top: 2px !important;
+            font-size: 12px !important;
+            font-weight: 600 !important;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            background-color: ${palette.info[100]} !important;
+            margin-right: 8px !important; 
+          }
         `;
         rapidocEl.shadowRoot.appendChild(style);
       }
@@ -80,7 +93,7 @@ const ApiViewer: FC<ApiViewerProps> = ({ specURL }) => {
     return () => {
       rapidocEl.removeEventListener('spec-loaded', injectStyles);
     };
-  }, []);
+  }, [palette.info]);
 
   // Cast strict TS error for custom element
   const RapiDoc = 'rapi-doc' as unknown as ElementType;

apps/nextjs-website/src/components/molecules/ApiRestSection/ApiRestSection.styles.ts

@@ -5,18 +5,18 @@ export const getStyles = (palette: Palette) => {
   return {
     select: {
       minWidth: { sx: 'auto', sm: '400px' },
-      color: white,
+      color: palette.text.primary,
       margin: 1,
       '& .MuiOutlinedInput-notchedOutline': {
-        borderColor: `${white} !important`, // !important is needed due to MUI that overwrite style via javascript
+        borderColor: `${palette.primary.main} !important`, // !important is needed due to MUI that overwrite style via javascript
       },
 
       '& .MuiSelect-icon': {
-        color: white,
+        color: palette.primary.main,
       },
     },
     selectContainer: {
-      background: palette.primary.dark,
+      background: white,
       height: 72,
       paddingRight: 2,
     },

apps/nextjs-website/src/components/molecules/ApiRestSection/ApiRestSection.tsx

@@ -55,7 +55,7 @@ const ApiRestSection = ({
   specURLs,
   specURLsName,
 }: ApiRestPageProps) => {
-  const { palette } = useTheme();
+  const { palette, spacing } = useTheme();
 
   const [selectedItemURL, setSelectedItemURL] = useState(specURLs[0].url);
 
@@ -105,11 +105,19 @@ const ApiRestSection = ({
         <Stack
           sx={styles.selectContainer}
           direction='row'
-          justifyContent='flex-end'
+          justifyContent='flex-start'
           alignContent='center'
+          marginLeft={spacing(2.125)}
         >
           <StyledFormControl size='medium'>
-            <InputLabel id='select-api-label'>{specURLsName}</InputLabel>
+            <InputLabel
+              id='select-api-label'
+              sx={{
+                color: `${palette.primary.main} !important`,
+              }}
+            >
+              {specURLsName}
+            </InputLabel>
             <Select
               labelId='select-api-label'
               value={selectedItemURL}