commit 22b15f833d388d2fed12b7f4dcd917c57712cbec
parent f929e5156cb1941beb2f5329e7b9b8fae4c7691b
Author: Adrián Oliva <[email protected]>
Date: Wed, 17 May 2023 18:33:41 -0600
Added bootstrap library.
We now have better looking assets!
Diffstat:
7 files changed, 46 insertions(+), 66 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
+ "bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5"
@@ -779,6 +780,16 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.7",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+ "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+ "peer": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@reduxjs/toolkit": {
"version": "1.9.5",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
@@ -875,6 +886,24 @@
"node": ">=4"
}
},
+ "node_modules/bootstrap": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+ "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.6"
+ }
+ },
"node_modules/browserslist": {
"version": "4.21.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
+ "bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5"
diff --git a/src/App.css b/src/App.css
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
);
