Final-imp-done

Author: itsabubakarshf

src/App.css

@@ -1,3 +1,6 @@
+body {
+    overflow: hidden;
+}
 .App {
     display: flex;
     justify-content: center;
@@ -15,11 +18,55 @@
     font-size: 2rem;
     letter-spacing: 10px;
 }
-.App .Inc-btn {
+.App .btn-group {
+    display: flex;
+    width: 80vh;
+    justify-content: space-around;
+}
+.App .btn-group .Inc-btn,
+.App .btn-group .Dec-btn {
     font-size: 1rem;
     font-weight: 600;
     padding: 1rem;
-    width: 10rem;
     letter-spacing: 3px;
     cursor: pointer;
+    width: 40%;
+}
+@media only screen and (max-width: 1000px) {
+    .App .App-Name {
+        font-size: 2rem;
+    }
+    .App .Current-State {
+        font-size: 1.7rem;
+    }
+}
+@media only screen and (max-width: 510px) {
+    .App .btn-group {
+        width: 50vh;
+    }
+    .App .btn-group .Inc-btn,
+    .App .btn-group .Dec-btn {
+        font-size: 1rem;
+        font-weight: 600;
+        padding: 0.5rem;
+        letter-spacing: 3px;
+        cursor: pointer;
+        width: 40%;
+    }
+}
+@media only screen and (max-width: 308px) {
+    .App .App-Name {
+        font-size: 1.3rem;
+    }
+    .App .Current-State {
+        font-size: 1rem;
+    }
+    .App .btn-group {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    .App .btn-group > button {
+        margin: 5px 0px;
+    }
 }

src/App.js

@@ -1,17 +1,31 @@
 import "./App.css";
-import Increment from "./redux/actions/counter.action.js";
+import React from "react";
+// import Increment from "./redux/actions/counter.action.js";
 import { useSelector, useDispatch } from "react-redux";
 function App() {
     const counter = useSelector((store) => store.counter);
     const trigger = useDispatch();
     return (
-        <div className="App">
-            <h1 className="App-Name">CounterApp</h1>
-            <h3 className="Current-State">Counter: {counter}</h3>
-            <button onClick={() => trigger(Increment)} className="Inc-btn">
-                Increment
-            </button>
-        </div>
+        <React.Fragment>
+            <div className="App">
+                <h1 className="App-Name">CounterApp</h1>
+                <h3 className="Current-State">Counter: {counter}</h3>
+                <div className="btn-group">
+                    <button
+                        onClick={() => trigger({ type: "INCREMENT" })}
+                        className="Inc-btn"
+                    >
+                        Increment
+                    </button>
+                    <button
+                        onClick={() => trigger({ type: "DECREMENT" })}
+                        className="Dec-btn"
+                    >
+                        Decrement
+                    </button>
+                </div>
+            </div>
+        </React.Fragment>
     );
 }