From 34daf23cb4ac0067f1a92b0233679201c30ef90c Mon Sep 17 00:00:00 2001
From: sarahcssiqueira <sarahcso@hotmail.com>
Date: Sat, 28 Sep 2024 22:06:41 -0300
Subject: [PATCH] update: css style improvements

---
 app/assets/stylesheets/application.scss | 30 +++++++++++++++-
 app/views/home/index.html.erb           | 31 ++++++++--------
 app/views/layouts/_navbar.html.erb      | 27 +++++++-------
 app/views/pets/_pet.html.erb            | 48 ++++++++-----------------
 app/views/pets/index.html.erb           | 30 +++++++++-------
 app/views/pets/show.html.erb            | 11 +++---
 app/views/users/_user.html.erb          |  3 --
 app/views/users/show.html.erb           | 43 +++++++++++++---------
 8 files changed, 126 insertions(+), 97 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 05c538d..8409f9a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -14,4 +14,32 @@
  *= require_self
  */
 
- @import "bootstrap";
\ No newline at end of file
+ @import "bootstrap";
+
+
+ .image-crop {
+    width: 200px; 
+    height: 200px; 
+    overflow: hidden;
+    position: relative;
+    border-radius: 50%; 
+    border: 5px solid #fff;
+    box-shadow: 0 0 10px #333333; 
+}
+
+.image-crop img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%; 
+    min-height: 100%; 
+    transform: translate(-50%, -50%);
+    object-fit: cover; 
+}
+
+.qr-code {
+    width: 300px; 
+    height: 300px; 
+    border: 1px solid #fff;
+    box-shadow: 0 0 10px #333333; 
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index b997b68..7f4b5cc 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -4,19 +4,19 @@
     </div>
 </header>
 
-<div class="container my-5">
-    <div class="bg-light py-4 mb-5 rounded">
-        <h2 class="display-5">Give Your Pet the Safety They Deserve</h2>
+<div class="container my-5 ">
+    <div class="bg-light py-4 mb-5 rounded p-5">
+        <h2 class="display-5 text-center mb-3">Give Your Pet the Safety They Deserve</h2>
         <p>We believe every pet deserves to be safe and secure. That's why we're excited to introduce our <strong>Free Pet Tag Generator</strong> – a simple and efficient way to ensure your furry friends are always protected.</p>
     </div>
 
-    <div class="bg-light py-4 mb-5 rounded">
-        <h2 class="display-5">What is the Free Pet Tag Generator?</h2>
+    <div class="bg-light py-4 mb-5 rounded p-5">
+        <h2 class="display-5 text-center mb-3">What is the Free Pet Tag Generator?</h2>
         <p>Our Free Pet Tag Generator is an easy-to-use online tool that lets you create personalized pet tags at no cost. With just a few clicks, you can generate a unique QR code that will be linked to a dedicated webpage with all the information you provide about your pet.</p>
     </div>
 
-    <div class="bg-light py-4 mb-5 rounded">
-        <h2 class="display-5">How It Works</h2>
+    <div class="bg-light py-4 mb-5 rounded p-5">
+        <h2 class="display-5 text-center mb-3">How It Works</h2>
         <ul class="list-unstyled">
             <li><strong>Register Your Pet:</strong> Fill out a simple form with details about your pet, including their name, your contact information, and any other important notes.</li>
             <li><strong>Generate a QR Code:</strong> Our generator will create a custom QR code that you can print on a tag. This QR code will direct anyone who scans it to a webpage with the information you’ve provided.</li>
@@ -25,8 +25,8 @@
         </ul>
     </div>
 
-    <div class="bg-light py-4 mb-5 rounded">
-        <h2 class="display-5">Why Use This Pet Tag Generator?</h2>
+    <div class="bg-light py-4 mb-5 rounded p-5">
+        <h2 class="display-5 text-center mb-3">Why Use This Pet Tag Generator?</h2>
         <ul class="list-unstyled">
             <li><strong>Free and Easy:</strong> No costs, no hassle. Create your pet's tag in minutes.</li>
             <li><strong>Instant Access:</strong> The QR code provides quick access to your pet's information.</li>
@@ -35,18 +35,21 @@
         </ul>
     </div>
 
-    <div class="bg-light py-4 mb-5 rounded">
-        <h2 class="display-5">Ready to Get Started?</h2>
+    <div class="bg-light py-4 mb-5 rounded p-5">
+        <h2 class="display-5 text-center mb-3">Ready to Get Started?</h2>
         <ol>
-            <li><strong>Create a free <%= link_to 'account: ',  new_user_path, class: 'cta-button' %></strong> Sign up to access the pet management features.</li>
+            <li><strong>Create a free <%= link_to 'account',  new_user_path, class: 'cta-button' %></strong>: Sign up to access the pet management features.</li>
             <li><strong>Add Your Pet: </strong>Enter details about your pet to create a profile.</li>
             <li><strong>Fill in the pet's information: </strong>Provide important details like name, breed, and any special notes.</li>
             <li><strong>Print and Attach the QR Code: </strong>A QR code is automatically generated—simply print it and attach it wherever needed (e.g., on a pet tag, collar, or carrier).</li>
         </ol>
 
-        <p>Make sure your pet is always safe and secure with our Free Pet Tag Generator. It’s a small step that can make a big difference.</p>
+        <h2 class="display-5 text-center mb-3 mt-5">Make sure your pet is always safe and secure with our Free Pet Tag Generator!</h2>
+        <p class="text-center">It’s a small step that can make a big difference.</p>
 
-        <%= link_to 'Get Started Now!',  new_user_path, class: 'cta-button' %>
+        <div class="text-center">
+            <%= link_to 'Get Started Now!', new_user_path, class: 'btn btn-primary m-3 p-3' %>
+        </div>
     </div>
 </div>
 
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
index 93c47d4..b435c9c 100644
--- a/app/views/layouts/_navbar.html.erb
+++ b/app/views/layouts/_navbar.html.erb
@@ -1,29 +1,32 @@
-<!-- app/views/layouts/_navbar.html.erb -->
-
-<div class="container-flouid">
+<div class="container-fluid">
   <nav class="navbar navbar-expand-lg bg-light">
     <div class="container">
+
       <a class="navbar-brand" href="/">
-        <h3>Pet Tag Generator</h3>
+        <h1>Pet Tag Generator</h1>
       </a>
+
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
+
       <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
+
+        <ul class="navbar-nav me-auto d-flex">
+          <li class="nav-item mt-3">
             <%= link_to 'Home', root_path, class: 'nav-link active' %>
           </li>
-          <li class="nav-item">
+          <li class="nav-item mt-3">
             <%= link_to 'Pet Members', pets_path, class: 'nav-link active' %>
           </li>
-            <li class="nav-item">
+            <li class="nav-item mt-3">
             <%= link_to 'Open Source', github_repo_path, class: 'nav-link active', target: '_blank' %>
           </li>
-            <li class="nav-item">   
-                <%= link_to "Add Pet", new_pet_path, class: "btn btn-primary mt-3" %>
-            </li>
+            <div class="nav-item mb-3">   
+                <%= link_to "Add Your Pet", new_pet_path, class: "btn btn-primary mt-3" %>
+            </div>
         </ul>
+
         <form class="form-inline" method="post" action="<%= logout_path %>">
             <%= hidden_field_tag :_method, :delete %>
             <% if current_user %>
@@ -34,7 +37,7 @@
                 <%= submit_tag 'Logout', class: 'btn btn-outline-success' %>
             <% else %>
             <%= link_to 'Login', login_path, class: 'btn btn-outline-primary mr-2' %>
-            <%= link_to 'Become Member', new_user_path, class: 'btn btn-outline-success' %>
+            <%= link_to 'Become Registered Tutor', new_user_path, class: 'btn btn-outline-success' %>
             <% end %>
         </form>
 
diff --git a/app/views/pets/_pet.html.erb b/app/views/pets/_pet.html.erb
index 4336189..8dde1a8 100644
--- a/app/views/pets/_pet.html.erb
+++ b/app/views/pets/_pet.html.erb
@@ -1,25 +1,16 @@
 <div id="<%= dom_id pet %>" class="text-center mx-auto">
-  <div class="container">
-
-    <!-- Pet Name and ID -->
-    <p>
-      <strong>Name:</strong>
-      <%= pet.name.present? ? pet.name : "N/D" %>
-    </p>
-    <p>
-      <strong>ID:</strong>
-      <%= pet.id %>
-    </p>
-
-    <!-- Pet Photo -->
-    <p>
-      <%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name || 'Pet'} photo", class: "img-fluid mx-auto d-block", size: "250x250") %>
-    </p>
+  <div class="container my-3">
+    <div>
+        <strong class="display-3 my-3"><%= pet.name.present? ? pet.name : "N/D" %></strong>
+        <p>ID:
+            <strong><%= pet.id %></strong>
+        </p>
+    </div>
 
-    <!-- Three Column Layout for Tutor Info, Pet Details, and Social Media -->
-    <div class="row mt-4">
+      <%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name || 'Pet'} photo", class: "img-fluid mx-auto d-block image-crop") %>
+    
+     <div class="row bg-light py-5 rounded">
       
-      <!-- Tutor Info Column -->
       <div class="col-md-4">
         <h5><strong>Tutor Info</strong></h5>
         <p>
@@ -36,7 +27,6 @@
         </p>
       </div>
 
-      <!-- Pet Details Column -->
       <div class="col-md-4">
         <h5><strong>Pet Details</strong></h5>
         <p>
@@ -47,17 +37,9 @@
           <strong>Coat Color:</strong>
           <%= pet.pet_coat_color.present? ? pet.pet_coat_color : "N/D" %>
         </p>
-        <%
-=begin%>
- <p>
-          <strong>Birthday:</strong>
-          <%= pet.birthday.present? ? pet.birthday.strftime("%B %d, %Y") : "N/D" %>
-        </p> 
-<%
-=end%>
+        
       </div>
 
-      <!-- Social Media Column -->
       <div class="col-md-4">
         <h5><strong>Social Media</strong></h5>
         <p>
@@ -71,14 +53,12 @@
       </div>
     </div>
 
-    <!-- QR Code Section with Highlighting -->
-    <div id="printableArea" class="qr-code-container mb-4 mt-4">
-      <strong>QR Code:</strong><br>
-      <%= image_tag(url_for(pet.qrcode), class: "img-fluid mx-auto d-block", style: "width: 300px; height: 300px;") %>
+    <div id="printableArea" class="my-5">
+      <%= image_tag(url_for(pet.qrcode), class: "img-fluid mx-auto d-block qr-code") %>
     </div>
 
-    <!-- Print QR Code Button -->
     <button type="button" class="btn btn-primary" onclick="printDiv('printableArea')">Print QR Code</button>
+
   </div>
 </div>
 
diff --git a/app/views/pets/index.html.erb b/app/views/pets/index.html.erb
index 7a4e798..6885bd5 100644
--- a/app/views/pets/index.html.erb
+++ b/app/views/pets/index.html.erb
@@ -2,11 +2,11 @@
 
 <% content_for :title, "Pets" %>
 
-<h1>Pet Members</h1>
+<h1 class="text-center mb-5">Pet Members</h1>
 
-<div class="mb-3">
+<div class="mb-3 text-center mb-5">
     <% if current_user %>
-        <%= link_to "Add Pet", new_pet_path, class: "btn btn-primary mt-3" %>
+        <%= link_to "Add New Pet", new_pet_path, class: "btn btn-primary mt-3" %>
     <% end %>
 </div>
 
@@ -16,21 +16,25 @@
     <div class="row">
       <% @pets.each do |pet| %>
         <div class="col-12 col-sm-6 col-md-4 mb-4">
-          <div class="card">
+          <div class="card bg-light">
             <div class="card-body">
-                <h5 class="card-title"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
-                <p><strong>ID:</strong> <%= pet.id %></p>
+                <h5 class="card-title text-center"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
+                <p class="text-center"><strong>ID:</strong> <%= pet.id %></p>
                 
                     <%= link_to pet_path(pet) do %>
-                        <%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block", size: "250x250" )%>
+                        <%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block image-crop" )%>
                     <% end %>
                 
-                <% if current_user %>
-                    <%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
-                <% end %>
-                <% if !current_user %>
-                    <%= link_to "More", pet, class: "btn btn-primary mt-3" %>
-                <% end %>
+                <div class="text-center">
+
+                    <% if current_user %>
+                        <%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
+                    <% end %>
+                    <% if !current_user %>
+                        <%= link_to "More", pet, class: "btn btn-primary mt-3" %>
+                    <% end %>
+
+                </div>
             </div>
           </div>
         </div>
diff --git a/app/views/pets/show.html.erb b/app/views/pets/show.html.erb
index 97995e3..45dd660 100644
--- a/app/views/pets/show.html.erb
+++ b/app/views/pets/show.html.erb
@@ -1,9 +1,12 @@
-<%= render @pet %>
+<div class="container">
 
 <div>
     <% if @pet.user == current_user %>
-        <%= link_to "Update pet", edit_pet_path(@pet) %>
-        <%= link_to "Delete this pet", @pet, method: :delete , data: { confirm: "Are you sure?" }%>
-        <%= link_to "Back to pet members", pets_path %>
+        <%= link_to "Update pet", edit_pet_path(@pet), class: "btn btn-primary" %>
+        <%= link_to "Delete this pet", @pet, method: :delete , data: { confirm: "Are you sure?" }, class: "btn btn-primary"%>
     <% end %>
 </div>
+
+<%= render @pet %>
+
+</div>
\ No newline at end of file
diff --git a/app/views/users/_user.html.erb b/app/views/users/_user.html.erb
index d6223ba..356340c 100644
--- a/app/views/users/_user.html.erb
+++ b/app/views/users/_user.html.erb
@@ -4,7 +4,4 @@
     <%= user.name %>
   </p>
 
-
-
-
 </div>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 0923476..dc54be7 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,34 +1,45 @@
 <% if @user %>
-<p>Welcome <strong><%= @user.name %>!</strong></p>
+<p class="">Welcome <strong><%= @user.name %>!</strong></p>
 <% else %>
-  <p>Welcome, guest!</p>
+  <p class="3">Welcome, guest!</p>
 <% end %>
 
 <% if @user %>
-<div class="d-flex justify-content-center">
+<div class="d-flex">
   <div class="me-2">
-    <%= link_to 'Edit Profile', edit_user_path(@user), class: 'btn btn-primary w-100' %>
+    <%= link_to 'Edit Your Profile', edit_user_path(@user), class: 'btn btn-primary w-100' %>
   </div>
   <div>
     <%= link_to "Add Pet", new_pet_path, class: "btn btn-primary w-100" %>
   </div>
 </div>
 
-<h2 class="mb-5">My Pets</h2>
+<h2 class="mb-5 mt-5">My Pets</h2>
 <div class="row">
   <% @user.pets.each do |pet| %>
-    <div class="col-md-4 mb-4">
-      <div class="card text-center">
-        <div class="card-body">
-          <h5 class="card-title"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
-            <p><strong>ID:</strong> <%= pet.id %></p>
-            <% if pet.pet_photo.present? %>
-                <%= image_tag pet.pet_photo, alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block" %>
-            <% end%>
-          <%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
+            <div class="col-12 col-sm-6 col-md-4 mb-4">
+          <div class="card bg-light">
+            <div class="card-body">
+                <h5 class="card-title text-center"><%= link_to pet.name, pet_path(pet), class: 'text-decoration-none' %></h5>
+                <p class="text-center"><strong>ID:</strong> <%= pet.id %></p>
+                
+                    <%= link_to pet_path(pet) do %>
+                        <%= image_tag(pet.pet_photo.present? ? pet.pet_photo : 'pet-img-placeholder.jpg', alt: "#{pet.name} photo", class: "img-fluid mx-auto d-block image-crop" )%>
+                    <% end %>
+                
+                <div class="text-center">
+
+                    <% if current_user %>
+                        <%= link_to 'Edit & Print QR', pet_path(pet), class: 'btn btn-primary mt-3' %>
+                    <% end %>
+                    <% if !current_user %>
+                        <%= link_to "More", pet, class: "btn btn-primary mt-3" %>
+                    <% end %>
+
+                </div>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
   <% end %>
 </div>
 <% else %>