front end styling improved

agiledev-students-spring2024 · Apr 18, 2024 · b1ad779 · b1ad779
1 parent edd5021
commit b1ad779
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/front-end/src/screens/AddItem.js b/front-end/src/screens/AddItem.js
@@ -139,7 +139,7 @@ const AddItem = () => {
           required
         />
 
-        <label htmlFor="type">Type:</label>
+        <label htmlFor="type">Style:</label>
         <input
           type="text"
           id="type"
@@ -165,6 +165,7 @@ const AddItem = () => {
           id="picture"
           name="picture"
           onChange={handleChange}
+          required
         />
 
         <button type="submit" className="submit-button">Add Item</button>

diff --git a/front-end/src/screens/ItemDetail.js b/front-end/src/screens/ItemDetail.js
@@ -96,7 +96,7 @@ const ItemDetail = () => {
         <div className="ItemDetail-info">
           <h3>{item.nameItem}</h3>
           <p>Brand: {item.brand}</p>
-          <p>Type: {item.type}</p>
+          <p>Style: {item.type}</p>
           <p>Color: {item.color}</p>
           <p>Notes: {item.notes}</p>
         </div>

diff --git a/front-end/src/styles/Generator.css b/front-end/src/styles/Generator.css
@@ -38,7 +38,7 @@
     padding: 0.5rem; 
     justify-content: center;
     border-radius: 4px;
-    height: 400px;
+    height: 350px;
     margin: 0.5em;  
   }
 

diff --git a/front-end/src/styles/ItemDetail.css b/front-end/src/styles/ItemDetail.css
@@ -29,13 +29,14 @@
     flex-direction: column;
     align-items: center;
     padding: 1rem;
+    position: relative;
 }
 
 /* Style for the image placeholder within the Item Detail */
 .ItemDetail-image {
-    width: 90%;
-    height: 300px; /* Adjust the height as needed */
-    background-color: #ddd; /* Placeholder color */
+    /* width: 90%;
+    height: 300px; 
+    background-color: #ddd;  */
     margin: 1rem 0;
     display: flex;
     flex-direction: column;

diff --git a/front-end/src/styles/RandomOutfitGenerator.css b/front-end/src/styles/RandomOutfitGenerator.css
@@ -70,14 +70,15 @@
     margin-top: 5px;
     border: 1px solid #a9a3a3;
     border-radius: 3px;
-    font-size: 15px;
+    font-size: 13px;
     text-align: center;
+
 }
 .outfitname-save{
     display: flex;
     flex-direction: column;
     margin: 10px auto;
-    width: 60%; 
+    width: 80%; 
 }
 
 .item-container-random{