third-party components

package.json

@@ -24,14 +24,19 @@
     "vite-plugin-virtual-html": "1.0.2"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "axios": "^1.6.2",
     "firebase": "^9.23.0",
+    "framer-motion": "^10.16.16",
     "mobx": "^6.8.0",
     "mobx-react-lite": "^3.4.2",
     "openai": "^4.20.1",
     "parse-git-config": "^3.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-native-scrollable-tab-view": "^1.0.0",
     "react-router-dom": "^6.21.0",
     "solid-js": "^1.6.10",
     "terser": "5.16.5"

src/presenter/testPresenter.jsx

@@ -108,10 +108,10 @@ export default observer(function Test(props) {
         if (nextQuestionIndex < questions.length && questionRefs.current[nextQuestionIndex]) {
           const nextQuestionEl = questionRefs.current[nextQuestionIndex].current;
           if (nextQuestionEl) {
-            nextQuestionEl.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            });
+            // nextQuestionEl.scrollIntoView({
+            //   behavior: 'smooth',
+            //   block: 'center',
+            // });
           }
         }
       }, 0);

src/views/pokemonDetailsView.jsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { getPokemonDetails, getPokemonSpecies } from '../model/pokemonService';
 import Banner from './components/banner';
-import PokeItem from './components/pokeItem';
+// import PokeItem from './components/pokeItem';
+import { Image } from '@chakra-ui/react'
 
 function PokemonDetailsView() {
   const { name } = useParams();
@@ -30,10 +31,11 @@ function PokemonDetailsView() {
       <Banner text={name} />
       <div className="columnContainer">
         {pokemon ? (
-          <PokeItem
-            key={pokemon.id}
-            name={pokemon.name}
-            image={pokemonImageURL}
+          <Image
+          borderRadius='full'
+          boxSize='200px'
+          src={pokemonImageURL}
+          alt={pokemon.name}
           />
         ) : (
           <p>Loading...</p>

src/views/testResultsView.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { getPokemonDetails, getPokemonSpecies } from "../model/pokemonService";
 import Banner from "./components/banner";
 import PokeItem from "./components/pokeItem";
+import { Image } from '@chakra-ui/react'
 import Icon1 from "../assets/images/icon_1.png";
 import Icon2 from "../assets/images/icon_2.png";
 import Icon3 from "../assets/images/insignia.png";
@@ -35,9 +36,11 @@ function TestResultsView(props) {
       <div className="columnContainer">
         {pokemon && species ? (
           <>
-            <PokeItem
-              name={pokemon.name}
-              image={`https://img.pokemondb.net/artwork/large/${pokemon.name}.jpg`}
+            <Image
+            borderRadius='full'
+            boxSize='200px'
+            src={`https://img.pokemondb.net/artwork/large/${pokemon.name}.jpg`}
+            alt={pokemon.name}
             />
             <div className="textBox">
               <div className="introText">

src/views/testView.jsx

@@ -10,7 +10,7 @@ import "/src/style.css";
 function TestView(props) {
 
   return (
-    <div className="testViewContainer">
+    <div>
       <Banner text="Test" />
       <div className="questionContainer">
         {questions.map((question, index) => {