replace bulma with chakra ui

src/App.js

@@ -1,10 +1,12 @@
 import './App.css';
-import DefaultViewer from './features/viewers/DefaultViewer';
+import Editor from './features/editors/Editor';
+import DefaultPresenter from './features/viewers/DefaultPresenter';
 
 function App() {
   return (
     <div className='App'>
-      <DefaultViewer />
+      {/* <Editor /> */}
+      <DefaultPresenter />
     </div>
   );
 }

src/features/viewers/viewers.css

@@ -6,7 +6,7 @@
   color: #ffffff;
   display: flex;
   flex-direction: column;
-  border: red 1px solid;
+  padding: 1em;
 }
 
 .presentationTitle {

src/index.js

@@ -4,9 +4,15 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+// 1. import `ChakraProvider` component
+import { ChakraProvider } from "@chakra-ui/react"
+
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );