the style of the buttons are improved

pablo-sch · pablo-sch · commit d1f33594d4bf · 2025-05-02T22:05:07.000+02:00
diff --git a/index.html b/index.html
@@ -11,6 +11,10 @@
     <link rel="stylesheet" href="src/styles/normalize.css">
     <link rel="stylesheet" href="src/styles/common.css">
 
+    <link rel="stylesheet" href="src/styles/components/buttons.css">
+    <link rel="stylesheet" href="src/styles/components/inputs.css">
+    <link rel="stylesheet" href="src/styles/components/selects.css">
+
     <link rel="stylesheet" href="src/styles/navbar.css">
     <link rel="stylesheet" href="src/styles/footer.css">
 
@@ -22,7 +26,7 @@
     <link rel="stylesheet" href="src/styles/components/post-card-container.css">
     <link rel="stylesheet" href="src/styles/components/post.css">
 
-    <link rel="stylesheet" href="src/styles/components/buttons.css">
+    
 
     <link rel="stylesheet" href="src/styles/components/pagination.css">
 
diff --git a/src/js/components/navbar/navbarView.js b/src/js/components/navbar/navbarView.js
@@ -12,28 +12,28 @@ export function navbarView() {
   return `
     <div class='navbar-container'>
     <div class="nav-left">
-          <a id="index-btn">Home</a>
+          <a id="index-btn" class="btn btn-home">Home</a>
     </div>
       
       <div class="nav-center">
         <form id="search-form">
 
-          <input id="search" name="search" type="text" placeholder="Search" />
+          <input id="search" class="input-search" name="search" type="text" placeholder="Search" />
 
-          <select id="post-tag" name="tag">
+          <select id="post-tag" class="select-search" name="tag">
             ${tagSelector}
           </select>
 
-            <button type="submit">Search</button>
+            <button type="submit" class="btn btn-search">Search</button>
 
           </form>
       </div>
 
       <div class="nav-right">
-        <a id="create-post-btn">Create Post</a>
-        <a id="login-btn">Login</a>
-        <a id="signup-btn">Sign Up</a>
-        <a id="logout-btn">Log Out</a>
+        <a id="create-post-btn" class="btn btn-primary-navbar">Create Post</a>
+        <a id="login-btn" class="btn btn-primary-navbar">Login</a>
+        <a id="signup-btn" class="btn btn-primary-navbar">Sign Up</a>
+        <a id="logout-btn" class="btn btn-secondary-navbar">Log Out</a>
       </div>
     </div>
   `;
diff --git a/src/js/components/notifications/notificationsView.js b/src/js/components/notifications/notificationsView.js
@@ -1,7 +1,7 @@
 export const buildNotification = (message) => {
     return `
         <p>${message}</p>
-        <button>X</button>
+        <button class="btn-exit">X</button>
       `
   }
   
diff --git a/src/js/modules/create-post/createPostView.js b/src/js/modules/create-post/createPostView.js
@@ -45,7 +45,7 @@ export const buildCreatePostForm = () => {
           <select id='post-tag'>${tagSelector}</select>
         </div>
 
-        <button>Create Post</button>
+        <button class="btn btn-primary">Create Post</button>
     `;
 
     return createPostFormView
diff --git a/src/js/modules/post-detail/postDetailController.js b/src/js/modules/post-detail/postDetailController.js
@@ -74,7 +74,8 @@ export const postDetailController = async (postContainer, postId) => {
     cancel.addEventListener("click", (event) => {
       event.preventDefault();
 
-      render_ReadOnlyView(postDetail, true);
+      postContainer.innerHTML = buildReadOnlyView(post, true);
+      renderReadOnlyView(post, true)
     });
   }
 
diff --git a/src/js/modules/post-detail/postDetailView.js b/src/js/modules/post-detail/postDetailView.js
@@ -33,8 +33,10 @@ export const buildReadOnlyView = (post, isOwner) => {
       <p><strong>Last update at: </strong>${formattedDate}</p>
 
       ${isOwner ? `
-        <button id="edit-post">Edit</button>
-        <button id="delete-post">Delete</button>
+        <div class="buttons-container">
+          <button id="edit-post" class="btn btn-primary">Edit</button>
+          <button id="delete-post"class="btn btn-secondary">Delete</button>
+        </div>
       ` : ''}
   `;
 
@@ -59,7 +61,7 @@ export const buildEditableView = (post) => {
   const postHTML = `
     <form id="edit-post-form" class="form">
 
-      <div class="image-preview">
+      <div class="image-container">
         <img src="${post.image}" alt="Current Image" class="post-image" />
       </div>
 
@@ -97,8 +99,8 @@ export const buildEditableView = (post) => {
         </div>
 
         <div class="buttons-container">
-          <button id="save-changes">Save</button>
-          <button id="cancel-edit">Cancel</button>
+          <button id="save-changes" class="btn btn-primary">Save</button>
+          <button id="cancel-edit" class="btn btn-secondary">Cancel</button>
         </div>
     </form>
   `;
diff --git a/src/js/modules/show-posts/showPostsController.js b/src/js/modules/show-posts/showPostsController.js
@@ -75,6 +75,8 @@ export async function showPostsController(container) { // the container is ".pos
     
         for (let i = 1; i <= pageCount; i++) {
             const btn = document.createElement('button');
+            btn.classList.add('btn');
+
             btn.textContent = i;
     
             if (i === currentPage) {
diff --git a/src/styles/common.css b/src/styles/common.css
@@ -6,9 +6,23 @@
     --bg-color-4: #b3b3b3;
 
     --bg-post: white;
+    --bg-search: rgb(157, 234, 248);
+    --bg-search-2: rgb(245, 254, 255);
 
-    --btn-X-notification-success: #1e84be;
-    --btn-X-notification-error: brown;
+    --btn-home: rgb(226, 228, 119);
+    --btn-search: rgb(38, 192, 219);
+
+    --btn-p-navbar: rgb(160, 231, 94) ;
+    --btn-s-navbar: rgb(247, 117, 66) ;
+
+    --btn-p: rgb(191, 243, 142) ;
+    --btn-s: rgb(248, 71, 48) ;
+
+    --btn-X-notification: rgb(255, 255, 255);
+    --font-X-notification: rgb(255, 0, 0);
+
+    --font-btn-p: rgb(0, 0, 0);
+    --font-btn-s: rgb(0, 0, 0);
 
     font-family: Arial, sans-serif;
     font-size: clamp(2px, 5vw, 16px);
@@ -74,9 +88,10 @@ textarea,
 label,
 p,
 textarea,
-button,
 select {
     padding: 7px;
+    border-radius: 6px;
+    border: none;
 }
 
 .radio-button{
diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css
@@ -1,7 +1,73 @@
-button{
+button,
+.btn {
     font-weight: bold;
+    font-size: large;
     align-self: self-start;
     width: auto;
+    padding: 0.5rem;
     padding-right: 1rem;
     padding-left: 1rem;
+
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+}
+
+button,
+a.btn {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+
+button:hover,
+a.btn:hover {
+    opacity: 0.8;
+}
+
+a.btn {
+    display: flex;
+
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn-primary,
+.btn-secondary {
+    font-size: larger;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.btn-primary {
+    background-color: var(--btn-p);
+}
+
+.btn-secondary {
+    background-color: var(--btn-s);
+    color: white;
+}
+
+
+.btn-primary-navbar {
+    background-color: var(--btn-p-navbar);
+    color: var(--font-btn-p);
+}
+
+.btn-secondary-navbar {
+    background-color: var(--btn-s-navbar);
+    color: var(--font-btn-s);
+}
+
+.btn-search {
+    background-color: var(--btn-search);
+}
+
+.btn-home {
+    background-color: var(--btn-home);
+}
+
+.btn-exit{
+    background-color: var(--btn-X-notification);
+    color: var(--font-X-notification);
 }
diff --git a/src/styles/components/inputs.css b/src/styles/components/inputs.css
@@ -0,0 +1,7 @@
+.input-search{
+    background-color: var(--bg-search);
+}
+
+.input-search::placeholder{
+    color: black;
+}
diff --git a/src/styles/components/notifications.css b/src/styles/components/notifications.css
@@ -53,17 +53,9 @@
 .notification.success {
   background-color: lightblue;
   border-color: rgb(0, 172, 230);
-
-  button {
-    background-color: var(--btn-X-notification-success)
-  }
 }
 
 .notification.error {
   background-color: lightcoral;
   border-color: rgb(242, 8, 8);
-
-  button {
-    background-color: var(--btn-X-notification-error)
-  }
 }
diff --git a/src/styles/components/pagination.css b/src/styles/components/pagination.css
@@ -1,6 +1,6 @@
 .pages{
     display: flex;
     justify-content: center;
-
+    gap: 5px;
     margin-top: 1rem;
 }
diff --git a/src/styles/components/post-detail.css b/src/styles/components/post-detail.css
@@ -16,8 +16,8 @@
   .post-image {
     display: block;
 
-    max-height: 720px;
-    width: 100%;
+    max-height: 500px;
+    width: auto;
 }
 
 p {
diff --git a/src/styles/components/selects.css b/src/styles/components/selects.css
@@ -0,0 +1,8 @@
+.select-search{
+    background-color: var(--bg-search);
+}
+
+.select-search option{
+    background-color: var(--bg-search-2);
+}
+
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
@@ -16,39 +16,13 @@
     padding-top: clamp(1px, 5vw, 16px);
     padding-bottom: clamp(1px, 5vw, 16px);
 
-
     max-width: 1440px;
-
-    font-weight: bold;
-}
-
-.navbar a {
-    padding: clamp(1px, 5vw, 8px);
-
-    cursor: pointer;
-    background-color: var(--bg-color-4);
-}
-
-.nav-right a {
-    display: flex;
-
-    width: 100%;
-    justify-content: center;
-    align-items: center;
 }
 
 .nav-left {
     grid-area: 1 / 1 / 2 / 4;
 }
 
-.nav-left a {
-    display: flex;
-
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-}
-
 .nav-center {
     grid-area: 2 / 1 / 3 / 7;
 }
@@ -69,7 +43,6 @@
 
 .nav-right {
     display: flex;
-    justify-content: flex-end;
     gap: 1rem;
     grid-area: 1 / 4 / 2 / 7;
 }
diff --git a/views/login.html b/views/login.html
@@ -45,7 +45,7 @@ <h1>Login</h1>
       <input type="password" id="password" name="password" placeholder="Introduce your password" minlength="4"
         required />
 
-      <button type="submit">Login</button>
+      <button type="submit" class="btn btn-primary">Login</button>
     </form>
   </main>
 
diff --git a/views/signup.html b/views/signup.html
@@ -55,7 +55,7 @@ <h1>Signup</h1>
       <input id="password-confirm" name="password-confirm" type="password" placeholder="Confirm your password" required
         minlength="6" />
 
-      <button type="submit">Sign Up</button>
+      <button type="submit" class="btn btn-primary">Sign Up</button>
     </form>
 
   </main>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`export const buildNotification = (message) => {`
`2`	`2`	return `
`3`	`3`	`<p>${message}</p>`
`4`		`- <button>X</button>`
	`4`	`+ <button class="btn-exit">X</button>`
`5`	`5`	`
`6`	`6`	`}`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,8 @@ export const postDetailController = async (postContainer, postId) => {`
`74`	`74`	`cancel.addEventListener("click", (event) => {`
`75`	`75`	`event.preventDefault();`
`76`	`76`
`77`		`- render_ReadOnlyView(postDetail, true);`
	`77`	`+ postContainer.innerHTML = buildReadOnlyView(post, true);`
	`78`	`+ renderReadOnlyView(post, true)`
`78`	`79`	`});`
`79`	`80`	`}`
`80`	`81`