fix: jsx pragma change needed with upgradet to react 17

 - https://dev.to/arisa_dev/migrating-react-17-emotion-11-pragma-and-pragmafrag-cannot-be-set-when-runtime-is-automatic-kpa
 - emotion-js/emotion#2041
 - facebook/create-react-app#9847

src/components/Common/SpinningLoader.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import styled from "@emotion/styled";
 import { jsx, keyframes } from "@emotion/react";

src/components/Hub/__snapshots__/HubOverviewActionsContainer.test.tsx.snap

@@ -15,11 +15,30 @@ Array [
       Find out what you can do in Jina hub and how you platform works.
     </p>
     <button
-      className="css-y3x934"
+      className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1hb5non-MuiButtonBase-root-MuiButton-root"
       data-name="hubOverviewActionButtonLabel"
+      disabled={false}
+      onBlur={[Function]}
       onClick={[Function]}
+      onContextMenu={[Function]}
+      onDragLeave={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="button"
     >
-      Read more
+      <span
+        className="MuiButton-label css-8xplcm-MuiButton-label"
+      >
+        Read more
+      </span>
     </button>
   </div>,
   <div
@@ -35,11 +54,30 @@ Array [
       Create flow
     </p>
     <button
-      className="css-y3x934"
+      className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1hb5non-MuiButtonBase-root-MuiButton-root"
       data-name="hubOverviewActionButtonLabel"
+      disabled={false}
+      onBlur={[Function]}
       onClick={[Function]}
+      onContextMenu={[Function]}
+      onDragLeave={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="button"
     >
-      Let's Go
+      <span
+        className="MuiButton-label css-8xplcm-MuiButton-label"
+      >
+        Let's Go
+      </span>
     </button>
   </div>,
 ]

src/components/LogStream/LogItem.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from "@emotion/react"
 import { Row, Col } from "react-bootstrap"

src/components/LogStream/LogsTableHeader.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
 import { Row, Col } from "react-bootstrap";

src/components/Styleguide/ColorsPage.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx, useTheme } from "@emotion/react";
 import { PageTitle } from "../Common/PageTitle";

src/components/Styleguide/MiscPage.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx, useTheme } from "@emotion/react";
 import { PageTitle } from "../Common/PageTitle";

src/components/Styleguide/TypographyPage.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
 import { PageTitle } from "../Common/PageTitle";