Update button style to prevent bounce when hovering over

RoBizMan · Nov 26, 2024 · 4f7c339 · 4f7c339
1 parent 48cfa53
commit 4f7c339
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 47 deletions.
diff --git a/booking/templates/booking/booking_create.html b/booking/templates/booking/booking_create.html
@@ -297,7 +297,6 @@ <h5 id="loadingMessage">Processing Payment<span id="loadingDots">...</span></h5>
 
         // Get the tutor ID
         const tutorId = $('#tutor-id').val();
-        console.log("Tutor ID:", tutorId);
 
         // Create a Payment Intent on your server
         $.ajax({

diff --git a/home/templates/home/index.html b/home/templates/home/index.html
@@ -88,9 +88,9 @@ <h6 class="text-center"><strong>Sign up to our newsletters for discount
         <form method="post" action="{% url 'subscribe_newsletter' %}">
             {% csrf_token %}
             <div class="input-group">
-                <input type="email" name="email" class="form-control" autocomplete="off" placeholder="Enter your email"
-                    required>
-                <button type="submit" class="btn btn-warning">Subscribe</button>
+                <input type="email" name="email" class="form-control news-input" autocomplete="off"
+                    placeholder="Enter your email" required>
+                <button type="submit" class="btn btn-land-color">Subscribe</button>
             </div>
         </form>
     </div>

diff --git a/static/css/base.css b/static/css/base.css
@@ -21,15 +21,20 @@ main {
     color: #F9F6EE;
 }
 
-.logo-custom:hover {
+.logo-custom:hover,
+.logo-custom:focus {
     color: yellow;
 }
 
 .navbar-custom-color,
 .footer-custom-color,
-.container-custom-color,
+.container-custom-color {
+    background-color: #3C0008;
+}
+
 .btn-custom-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
 }
 
 .nav-link {
@@ -46,7 +51,8 @@ main {
     position: relative;
 }
 
-.navbar-nav .nav-link:hover {
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link:focus {
     color: yellow;
 }
 
@@ -113,7 +119,8 @@ main {
     color: #F9F6EE;
 }
 
-.foot-logo:hover {
+.foot-logo:hover,
+.foot-logo:focus {
     color: yellow;
 }
 
@@ -123,7 +130,9 @@ main {
 }
 
 .social-media-custom:hover,
-.nav-footer-custom:hover {
+.social-media-custom:focus,
+.nav-footer-custom:hover,
+.nav-footer-custom:focus {
     color: yellow;
 }
 
@@ -151,6 +160,42 @@ main {
 }
 
 /* Override Django's default button */
+.signlog-button-sm {
+    background-color: #3C0008;
+    color: #F9F6EE;
+    border: 1px solid #F9F6EE;
+    font-size: 1rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition: background-color 0.3s ease;
+}
+
+.signlog-button-sm:hover,
+.signlog-button-sm:focus {
+    background-color: #F9F6EE;
+    color: #3C0008;
+    border: 1px solid #F9F6EE;
+}
+
+.signlog-button {
+    background-color: #F9F6EE;
+    color: #3C0008;
+    border: 1px solid #F9F6EE;
+    font-size: 1rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition: background-color 0.3s ease;
+}
+
+.signlog-button:hover,
+.signlog-button:focus {
+    background-color: #3C0008;
+    color: #F9F6EE;
+    border: 1px solid #F9F6EE;
+}
+
 button.btn-custom-color,
 .btn-acc-color {
     background-color: #3C0008;
@@ -165,7 +210,9 @@ button.btn-custom-color,
 }
 
 button.btn-custom-color:hover,
-.btn-acc-color:hover {
+button.btn-custom-color:focus,
+.btn-acc-color:hover,
+.btn-acc-color:focus {
     background-color: #F9F6EE;
     color: #3C0008;
     border: 1px solid #3C0008;

diff --git a/static/css/booking.css b/static/css/booking.css
@@ -9,24 +9,28 @@
 /* Book Sessions & Cancel buttons */
 .btn-profile-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-profile-color:hover {
+.btn-profile-color:hover,
+.btn-profile-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
 /* Cancel Button for Add or Update a Tutor */
 .btn-canc-color {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
-.btn-canc-color:hover {
+.btn-canc-color:hover,
+.btn-canc-color:focus {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 

diff --git a/static/css/contact.css b/static/css/contact.css
@@ -1,11 +1,13 @@
 /* Return to Home button */
 .btn-contact-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-contact-color:hover {
+.btn-contact-color:hover,
+.btn-contact-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
diff --git a/static/css/error.css b/static/css/error.css
@@ -1,10 +1,12 @@
 .btn-web-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-web-color:hover {
+.btn-web-color:hover,
+.btn-web-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
diff --git a/static/css/home.css b/static/css/home.css
@@ -19,27 +19,35 @@ h4 {
 /* Find a Tutor button */
 .btn-land-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-land-color:hover {
+.btn-land-color:hover,
+.btn-land-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
 /* Sign Up/Login buttons */
 .btnout-land-color {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
-.btnout-land-color:hover {
+.btnout-land-color:hover,
+.btnout-land-color:focus {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
+.news-input {
+    border: 1px solid #3C0008;
+}
+
 /* Horizontal rules style */
 .hr-land-page {
     border: none;

diff --git a/static/css/personaluser.css b/static/css/personaluser.css
@@ -1,23 +1,27 @@
 /* The website's button scheme */
 .btn-profile-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-profile-color:hover {
+.btn-profile-color:hover,
+.btn-profile-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
 /* Cancel Button for Edit User's First Name and Last Name */
 .btn-canc-color {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
-.btn-canc-color:hover {
+.btn-canc-color:hover,
+.btn-canc-color:focus {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
diff --git a/static/css/tutor.css b/static/css/tutor.css
@@ -1,24 +1,28 @@
 /* View profile button & Add and Update a Tutor button */
 .btn-profile-color {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 
-.btn-profile-color:hover {
+.btn-profile-color:hover,
+.btn-profile-color:focus {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
 /* Cancel Button for Add or Update a Tutor */
 .btn-canc-color {
     background-color: #F9F6EE;
-    border: 0.1rem solid #3C0008;
+    border: 1px solid #3C0008;
     color: #3C0008;
 }
 
-.btn-canc-color:hover {
+.btn-canc-color:hover,
+.btn-canc-color:focus {
     background-color: #3C0008;
+    border: 1px solid #3C0008;
     color: #F9F6EE;
 }
 

diff --git a/templates/allauth/layouts/base.html b/templates/allauth/layouts/base.html
@@ -105,15 +105,15 @@
                     <!-- Sign Out button appears once registered user is logged in / Add a New Tutor button for superuser -->
                     {% if user.is_authenticated %}
                     {% if user.is_superuser %}
-                    <a class="btn btn-warning signlog-button" role="button" href="{% url 'add_tutor' %}"><i
+                    <a class="btn signlog-button" role="button" href="{% url 'add_tutor' %}"><i
                             class="fa-solid fa-user-plus"></i> Add a New Tutor</a>
                     {% endif %}
-                    <a class="btn btn-outline-light signlog-button" role="button" href="{% url 'account_logout' %}">Sign
+                    <a class="btn signlog-button-sm" role="button" href="{% url 'account_logout' %}">Sign
                         Out <i class="fa-solid fa-right-from-bracket"></i></a>
                     {% else %}
-                    <a class="btn btn-warning signlog-button" role="button" href="{% url 'account_signup' %}"><i
+                    <a class="btn signlog-button" role="button" href="{% url 'account_signup' %}"><i
                             class="fa-solid fa-id-card"></i> Register</a>
-                    <a class="btn btn-outline-light signlog-button-sm" role="button" href="{% url 'account_login' %}"><i
+                    <a class="btn signlog-button-sm" role="button" href="{% url 'account_login' %}"><i
                             class="fa-solid fa-right-to-bracket"></i> Login</a>
                     {% endif %}
                 </div>
@@ -161,7 +161,8 @@ <h6 class="custom-text-h6"><strong>Site Navigation:</strong></h6>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12 contact-footer-column">
                 <h6 class="custom-text-h6">If you have any enquiries, please contact us</h6>
-                <a class="btn btn-warning" role="button" href="{% url 'contact' %}"><i class="fa-solid fa-envelope"></i>
+                <a class="btn signlog-button" role="button" href="{% url 'contact' %}"><i
+                        class="fa-solid fa-envelope"></i>
                     Contact form</a>
             </div>
             <div class="horizontal-rule"></div>
@@ -211,9 +212,7 @@ <h6 class="custom-text-h6 custom-socmed-links-h6"><strong>Social Media:</strong>
         if (!$('.error-page').length) { // Exclude error pages
             setTimeout(function () {
                 const messageContainers = document.querySelectorAll('.alert');
-                console.log("Message containers found:", messageContainers.length); // Debugging
                 messageContainers.forEach(function (container) {
-                    console.log("Fading out message:", container.innerText); // Debugging
                     container.style.transition = 'opacity 1s ease-out';
                     container.style.opacity = 0;
                     setTimeout(function () {

diff --git a/templates/base.html b/templates/base.html
@@ -105,15 +105,15 @@
                     <!-- Sign Out button appears once registered user is logged in / Add a New Tutor button for superuser -->
                     {% if user.is_authenticated %}
                     {% if user.is_superuser %}
-                    <a class="btn btn-warning signlog-button" role="button" href="{% url 'add_tutor' %}"><i
+                    <a class="btn signlog-button" role="button" href="{% url 'add_tutor' %}"><i
                             class="fa-solid fa-user-plus"></i> Add a New Tutor</a>
                     {% endif %}
-                    <a class="btn btn-outline-light signlog-button" role="button" href="{% url 'account_logout' %}">Sign
+                    <a class="btn signlog-button-sm" role="button" href="{% url 'account_logout' %}">Sign
                         Out <i class="fa-solid fa-right-from-bracket"></i></a>
                     {% else %}
-                    <a class="btn btn-warning signlog-button" role="button" href="{% url 'account_signup' %}"><i
+                    <a class="btn signlog-button" role="button" href="{% url 'account_signup' %}"><i
                             class="fa-solid fa-id-card"></i> Register</a>
-                    <a class="btn btn-outline-light signlog-button-sm" role="button" href="{% url 'account_login' %}"><i
+                    <a class="btn signlog-button-sm" role="button" href="{% url 'account_login' %}"><i
                             class="fa-solid fa-right-to-bracket"></i> Login</a>
                     {% endif %}
                 </div>
@@ -161,7 +161,8 @@ <h6 class="custom-text-h6"><strong>Site Navigation:</strong></h6>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12 contact-footer-column">
                 <h6 class="custom-text-h6">If you have any enquiries, please contact us</h6>
-                <a class="btn btn-warning" role="button" href="{% url 'contact' %}"><i class="fa-solid fa-envelope"></i>
+                <a class="btn signlog-button" role="button" href="{% url 'contact' %}"><i
+                        class="fa-solid fa-envelope"></i>
                     Contact form</a>
             </div>
             <div class="horizontal-rule"></div>
@@ -211,9 +212,7 @@ <h6 class="custom-text-h6 custom-socmed-links-h6"><strong>Social Media:</strong>
         if (!$('.error-page').length) { // Exclude error pages
             setTimeout(function () {
                 const messageContainers = document.querySelectorAll('.alert');
-                console.log("Message containers found:", messageContainers.length); // Debugging
                 messageContainers.forEach(function (container) {
-                    console.log("Fading out message:", container.innerText); // Debugging
                     container.style.transition = 'opacity 1s ease-out';
                     container.style.opacity = 0;
                     setTimeout(function () {

diff --git a/tutor/templates/tutor/tutors_profile.html b/tutor/templates/tutor/tutors_profile.html
@@ -13,13 +13,13 @@ <h1 class="text-center mt-5 mb-5"><strong>Tutor Profile <i class="fa-solid fa-id
     {% if user.is_superuser %}
     <div class="row d-flex justify-content-center align-items-center mb-3">
         <div class="col-auto">
-            <a class="btn btn-warning" role="button" href="{% url 'edit_tutor' tutor.id %}"><i
+            <a class="btn btn-warning mb-2" role="button" href="{% url 'edit_tutor' tutor.id %}"><i
                     class="fa-solid fa-pen-to-square"></i> Update a Tutor
                 Profile</a>
         </div>
         <div class="col-auto">
-            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteTutorModal"><i
-                    class="fa-solid fa-user-xmark"></i> Delete a Tutor</button>
+            <button type="button" class="btn btn-danger mb-2" data-bs-toggle="modal"
+                data-bs-target="#deleteTutorModal"><i class="fa-solid fa-user-xmark"></i> Delete a Tutor</button>
         </div>
     </div>