style: estilos melhorados

index.html

@@ -21,11 +21,11 @@
     <main class="app__container">
       <h1 class="app__main-title bold uppercase">Lista de Compras</h1>
       <section class="app__input-section">
-        <div>
+        <div class="app__input-wrapper">
           <label for="app__add-item">Adicionar item:</label>
           <input type="text" id="app__add-item" />
         </div>
-        <div>
+        <div class="app__input-wrapper">
           <label for="app__item-category">Categoria:</label>
           <select id="app__item-category">
             <option value="need" selected>Preciso</option>

src/sass/module/app/app-addItem.scss

@@ -0,0 +1,8 @@
+#app__add-item {
+  flex: 1;
+  background-color: transparent;
+  border: 1px solid white;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: white;
+}

src/sass/module/app/app-addItemButton.scss

@@ -1,7 +1,8 @@
 .app__add-item-button {
   background-color: #737;
+  border-radius: 0.7em;
   color: white;
-  padding: 0.5em;
+  padding: 0.7em;
   transition: background-color 0.3s;
 
   &:hover {

src/sass/module/app/app-inputWrapper.scss

@@ -0,0 +1,5 @@
+.app__input-wrapper {
+  display: flex;
+  column-gap: 0.5em;
+  align-items: center;
+}

src/sass/module/app/app-item.scss

@@ -5,4 +5,5 @@
   display: flex;
   justify-content: space-between;
   padding-inline: 0.5em;
+  border-radius: 0.5em;
 }

src/sass/module/app/app-itemCategory.scss

@@ -0,0 +1,7 @@
+#app__item-category {
+  background-color: transparent;
+  border: 1px solid white;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: white;
+}

src/sass/style.scss

@@ -4,6 +4,9 @@
 @import "./module/app/app-container.scss";
 @import "./module/app/app-mainTitle.scss";
 @import "./module/app/app-inputSection.scss";
+@import "./module/app/app-inputWrapper.scss";
+@import "./module/app/app-addItem.scss";
+@import "./module/app/app-itemCategory.scss";
 @import "./module/app/app-addItemButton.scss";
 @import "./module/app/app-section.scss";
 @import "./module/app/app-secondaryTitle.scss";