Merge pull request #9 from JMarques1196/dev

feat: more styles

Author: JMarques1196

src/components/Menu/activity-menu.tsx

@@ -67,18 +67,24 @@ const Menu = () => {
       }
       <menu className="activity-menu">
         <h1>Menu</h1>
-        <button onClick={() => selectActivity("run")}>Run</button>
-        <button onClick={() => selectActivity("mountain-biking")}>
-          Mountain Biking
-        </button>
-        <label htmlFor="dates">Choose a date</label>
-        <select name="dates" id="dates">
-          {dateId.map((date) => (
-            <option value={date} id={date} key={date}>
-              {date}
-            </option>
-          ))}
-        </select>
+        <div className="buttons-container">
+          <button onClick={() => selectActivity("run")}>Run</button>
+          <button onClick={() => selectActivity("mountain-biking")}>
+            Mountain Biking
+          </button>
+        </div>
+        <div>
+          <label className="date" htmlFor="dates">
+            Choose a date:
+          </label>
+          <select name="dates" id="dates">
+            {dateId.map((date) => (
+              <option value={date} id={date} key={date}>
+                {date}
+              </option>
+            ))}
+          </select>
+        </div>
       </menu>
       <section className="graph">
         <div className="selection">

src/components/Menu/activity.css

@@ -1,10 +1,11 @@
 button{
-    width: 200px;
+    width: auto;
 }
 
 select{
     width: 200px;
 }
+
 .activity-menu{
     padding-top: 3rem;
     padding-left: 3rem;
@@ -15,6 +16,17 @@ select{
 
 }
 
+.buttons-container{
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    display: grid;
+    gap: 0.5rem;
+}
+
+.date{
+    padding-right: 0.5rem;
+}
+
 .graph{
     padding-left: 3rem;
     display: flex;