add some more basic styles for the demos:

Author: arximughal

src/features/counter/Counter.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../app/rootReducer";
 import { increment, decrement, incrementByAmount } from "./counterSlice";
 import Button from "../../components/Button";
+import styles from "./styles.module.scss";
 
 // Define a counter component that uses the redux state and actions
 const Counter: React.FC = () => {
@@ -46,13 +47,20 @@ const Counter: React.FC = () => {
 
   // Return the JSX element for the counter component
   return (
-    <div>
+    <div className={styles.container}>
       <h1>Counter</h1>
-      <p>The current counter value is {counter}</p>
-      <Button onClick={handleIncrement}>Increment</Button>
-      <Button onClick={handleDecrement}>Decrement</Button>
-      <input value={incrementAmount} onChange={handleIncrementAmountChange} />
-      <Button onClick={handleIncrementByAmount}>Increment by amount</Button>
+      <div>
+        <p>
+          The current counter value is{" "}
+          <span className={styles.counterValue}>{counter}</span>
+        </p>
+        <Button onClick={handleIncrement}>Increment</Button>
+        <Button onClick={handleDecrement}>Decrement</Button>
+      </div>
+      <div>
+        <input value={incrementAmount} onChange={handleIncrementAmountChange} />
+        <Button onClick={handleIncrementByAmount}>Increment by amount</Button>
+      </div>
     </div>
   );
 };

src/features/counter/styles.module.scss

@@ -0,0 +1,14 @@
+@import '/src/theme/colors.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+
+  .counterValue {
+    display: inline-flex;
+    font-size: 42px;
+    background: $theme-accent;
+    padding: 10px 25px;
+    font-weight: bold;
+  }
+}

src/pages/Home.tsx

@@ -37,8 +37,14 @@ const Home: React.FC = () => {
           (scss modules).
         </p>
       </div>
-      <Counter />
-      <TodoList />
+      <div className={styles.demoContainer}>
+        <div>
+          <Counter />
+        </div>
+        <div>
+          <TodoList />
+        </div>
+      </div>
     </div>
   );
 };

src/pages/styles/home.module.scss

@@ -34,4 +34,15 @@
       padding: 0 69px;
     }
   }
+
+  .demoContainer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    
+    div {
+      flex: 1;
+      padding: 25px;
+    }
+  }
 }