Added bootstrap library.

We now have better looking assets!

5 files changed, 16 insertions, 66 deletions

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 01cc586..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
diff --git a/src/App.jsx b/src/App.jsx
index 7fbcae5..f12edb5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,12 @@
 import React from "react";
-import "./App.css";
 import { Counter } from "./features/counter/Counter";
 
 function App() {
-  return (
-    <div>
-      <Counter />
-    </div>
-  );
+    return (
+        <div>
+            <Counter />
+        </div>
+    );
 }
 
 export default App;
diff --git a/src/features/counter/Counter.jsx b/src/features/counter/Counter.jsx
index d589bf9..b8453b2 100644
--- a/src/features/counter/Counter.jsx
+++ b/src/features/counter/Counter.jsx
@@ -8,17 +8,19 @@ export function Counter() {
 
   return (
     <div>
+      <h1>{count}</h1>
       <div>
         <button
           aria-label="Increment value"
           onClick={() => dispatch(increment())}
+          className='btn btn-outline-primary'
         >
           Increment
         </button>
-        <span>{count}</span>
         <button
           aria-label="Decrement value"
           onClick={() => dispatch(decrement())}
+          className='btn btn-outline-primary'
         >
           Decrement
         </button>
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 4a1df4d..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/main.jsx b/src/main.jsx
index a7ca55d..38d8b53 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,14 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Provider } from 'react-redux'
+import { Provider } from "react-redux";
 import { store } from "./app/store";
 import App from "./App";
-import "./index.css";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap/dist/js/bootstrap";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
-  </React.StrictMode>
+    <React.StrictMode>
+        <Provider store={store}>
+            <App />
+        </Provider>
+    </React.StrictMode>
 );