From 2c4a0be0f59c4ed0a80415be4fcc663a6f0a67e3 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Wed, 14 Feb 2024 19:50:04 -0300
Subject: [PATCH 1/8] Style/melhora layout da homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Altera cor de fundo da aplicação. Melhora alinhamento de algumas divs.

GyodaiDDA <rodrigo.gyodai@gmail.com>
---
 .../stylesheets/application.bootstrap.scss    |  6 ++++
 app/assets/stylesheets/layout.scss            | 17 +++++++++++
 app/assets/stylesheets/posts.scss             |  9 ++++++
 app/views/home/index.html.erb                 | 29 +++++++++++--------
 app/views/posts/_listing.html.erb             |  4 +--
 app/views/posts/show.html.erb                 |  6 ++--
 app/views/profiles/_profile_details.html.erb  | 10 +++----
 app/views/profiles/show.html.erb              |  2 +-
 app/views/shared/_navbar.html.erb             |  2 +-
 db/schema.rb                                  |  4 +--
 db/seeds/superseed.rb                         | 15 ++++++++--
 .../posts/user_edits_post_status_spec.rb      |  2 --
 12 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index 12c3489..d660425 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -19,8 +19,13 @@ $primary: #a130fd;
 @import 'profile.scss';
 @import 'layout.scss';
 
+:root{
+  font-size: 0.8rem;
+}
+
 body{
   min-width: 400px;
+  background-color: #F6F7F8 !important;
 }
 
 input[type="checkbox"]:checked {
@@ -69,6 +74,7 @@ input[type="checkbox"]:checked {
 
 .trix-content{
   color: rgb(10, 10, 10);
+  text-align: left !important;
 }
 
 .dropdown-item:active {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 23973fc..97b86ce 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -26,3 +26,20 @@ input[type="checkbox"]:checked {
 .categories{
   width: 35% !important;
 }
+
+.most-followed-users{
+  size: 22rem;
+}
+
+.most-followed-title{
+  margin-bottom: 2px !important;
+}
+
+.most-followed-cards{
+  padding: 1rem !important;
+  margin-bottom: 2px !important;
+}
+
+.most-followed-cards a{
+  text-decoration: none !important;
+}
diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss
index 6329e43..c83926a 100644
--- a/app/assets/stylesheets/posts.scss
+++ b/app/assets/stylesheets/posts.scss
@@ -5,4 +5,13 @@
 
 .trix-content{
   color: rgb(10, 10, 10);
+  text-align: left !important;
+}
+
+.post-title{
+  font-size: 1.8rem;
+}
+
+figure.attachment{
+  width: 50% !important;
 }
\ No newline at end of file
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 3d4861f..63add0f 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,8 +1,8 @@
 <div class="container">
   <% if user_signed_in? %>
     <div class="row">
+      <button class="btn btn-primary w-75 mb-3 fs-5"> Crie você sua publicação +</button>
       <section class="col-md-9 y-5">
-        <h2><%= t('.feed') %></h2>
         <% if current_user.profile.followed_count > 0 %>
           <% if @followed_posts.any? %>
             <div>
@@ -10,29 +10,34 @@
             </div>
           <% else %>
             <div>
-              <h4> <%= t('.what_people_are_posting') %>: </h4>
+              <h5> <%= t('.what_people_are_posting') %>: </h5>
               <%= render partial: 'posts/listing', locals: { posts: @posts } %>
             </div>
           <% end %>
         <% else %>
           <div>
-            <h4> <%= t('.follow_someone') %> </h4>
+            <h5> <%= t('.follow_someone') %> </h5>
             <%= render partial: 'posts/listing', locals: { posts: @posts } %>
           </div>
         <% end %>
       </section>
 
       <aside class="col-md-3">
-        <h2> <%= t('.most_followed') %> </h2>
-
-        <div class="py-2"  style="width: 18rem;">
+        <div class="most-followed-users">
+          <h3 class="most-followed-title bg-white text-center py-4 my-0"> <%= t('.most_followed') %> </h3>
           <% @most_followed.each do |profile| %>
-            <div class="card mb-3 bg-light-subtle text-center">
-              <div class="card-body">
-                <h5 class="card-title"><%= profile.full_name %></h5>
-                <p class="card-text"><%= profile.followers_count %> <%= t('followers', count: profile.followers_count) %></p>
-                <a href="<%= profile_path(profile) %>" class="btn btn-primary"> <%= t('.view_profile_btn') %> </a>
-              </div>
+            <div class="bg-white text-center most-followed-cards my-0 py-0">
+              <%= link_to profile_path(profile), class: 'row' do %>
+                <% if profile.photo.present? && profile.valid? %>
+                  <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                <% else %>
+                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                <% end %>
+                <div class="col-md-8 mt-4">
+                  <h5><%= profile.full_name %></h5>
+                  <p class="text-dark"><%= profile.followers_count %> <%= t('followers', count: profile.followers_count) %></p>
+                </div>
+              <% end %>
             </div>
           <% end %>
         </div>
diff --git a/app/views/posts/_listing.html.erb b/app/views/posts/_listing.html.erb
index 69c2728..d3ddedd 100644
--- a/app/views/posts/_listing.html.erb
+++ b/app/views/posts/_listing.html.erb
@@ -1,8 +1,8 @@
 <% posts.each do |post| %>
-  <div class="feed-post shadow mb-4 p-3 rounded row" id="post-list">
+  <div class="feed-post mb-3 p-3 rounded row bg-white" id="post-list">
     <%= link_to post, class: "text-decoration-none link-dark col-md-10" do %>
       <div class="card-body">
-        <h4 class="text-break text-primary"><%= post.title %></h4>
+        <h4 class="text-break text-primary text-center"><%= post.title %></h4>
         <% if post.exists_image_attached? %>
           <%= image_tag post.first_image_attached.representation(resize_to_limit: [ 1024, 300 ]), class:"img-fluid rounded mx-auto d-block mb-2"  %>
         <% end %>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index 721ecee..c7c9a33 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -1,14 +1,14 @@
 <div class="card text-muted">
   <div class="card-body">
-    <h2 class="card-title"><%= @post.title %></h2>
+    <h2 class="card-title post-title"><%= @post.title %></h2>
     <div class="my-4">
       <% if current_user == @post.user %>
-        <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary', data: { turbo: false } %>
-        <%= Post.human_attribute_name @post.status %>
+        <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary py-0', data: { turbo: false } %>
       <% else %>
         <%= link_to t('reports.report_btn'), new_report_path(reportable: @post, reportable_type: @post.class), class: 'btn btn-secondary btn-sm' %>
       <% end %>
     </div>
+ 
 
     <h6 class="card-subtitle mb-2">
       <%= link_to t('.authored_by', author_name: @post.user.full_name), @post.user.profile %>
diff --git a/app/views/profiles/_profile_details.html.erb b/app/views/profiles/_profile_details.html.erb
index 26295a2..bf24895 100644
--- a/app/views/profiles/_profile_details.html.erb
+++ b/app/views/profiles/_profile_details.html.erb
@@ -1,7 +1,7 @@
 <div>
   <% user_is_owner = profile.user == current_user %>
   <br>
-  <div class="border py-1 px-2 rounded mb-3">
+  <div class="border py-1 px-2 rounded mb-3 bg-white">
     <div class="d-flex gap-1">
       <%= image_tag 'about-icon', width: '23rem', class: 'mb-2'  %>
       <h3><%= Profile.human_attribute_name(:cover_letter) %></h3>
@@ -10,7 +10,7 @@
   </div>
 
   <% if profile.personal_info[:visibility] || user_is_owner %>
-    <div class="border py-1 px-2 rounded mb-3">
+    <div class="border py-1 px-2 rounded mb-3 bg-white">
       <div class="d-flex gap-1">
         <%= image_tag 'person-fill', width: '28rem', class: 'mb-2' %>
         <h3><%= PersonalInfo.model_name.human %></h3>  
@@ -20,7 +20,7 @@
     </div>
   <% end %>
 
-  <div class="border py-1 px-2 rounded mb-3">
+  <div class="border py-1 px-2 rounded mb-3 bg-white">
     <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
       <div class="d-flex gap-1">
         <%= image_tag 'briefcase-solid', width: '24rem', class: 'mb-2 mx-1' %>
@@ -65,7 +65,7 @@
     <% end %>
   </div>
   
-  <div class="border py-1 px-2 rounded mb-3">
+  <div class="border py-1 px-2 rounded mb-3 bg-white">
     <% if profile.education_infos.visibles_list.any? || user_is_owner %>
       <div class="d-flex gap-2">
         <%= image_tag 'user-graduate-solid', width: '24rem', class: 'mb-2 mx-1' %>
@@ -103,7 +103,7 @@
       <% end %>
   </div>
 </div>
-<div id='profile-job-categories' class="border py-1 px-2 rounded mb-3">
+<div id='profile-job-categories' class="border py-1 px-2 rounded mb-3 bg-white">
   <% if profile.profile_job_categories.any? || user_is_owner %> 
     <div class="d-flex gap-1">
       <%= image_tag 'person-working', width: '28rem', class: 'mb-2 mx-1' %>
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index 87b2c00..519a88f 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -25,7 +25,7 @@
 
   <div class="col-md-5">
     <aside class="px-5">
-      <section class="text-center d-flex flex-column align-items-center border rounded">
+      <section class="text-center d-flex flex-column align-items-center border rounded bg-white">
         <div class="w-100">
           <div class="bg-primary profile-header mb-4 w-100 rounded-top d-flex flex-column">
             <%= render partial: 'profile_photo', locals: { profile: @profile } %>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 9f54c3e..34b4f1b 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg border-bottom bg-light">
+<nav class="navbar navbar-expand-lg border-bottom bg-white">
   <div class="container-fluid">
     <div class="w-25 mx-3">
       <%= link_to root_path do %>
diff --git a/db/schema.rb b/db/schema.rb
index 02e02c2..c7de8d0 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -55,8 +55,8 @@
     t.integer "user_id", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.text "old_message"
     t.integer "status", default: 0
+    t.text "old_message"
     t.index ["post_id"], name: "index_comments_on_post_id"
     t.index ["user_id"], name: "index_comments_on_user_id"
   end
@@ -162,7 +162,7 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "pin", default: 0
-    t.datetime "edited_at", default: "2024-02-13 03:11:57"
+    t.datetime "edited_at"
     t.integer "status", default: 0
     t.datetime "published_at"
     t.string "old_status"
diff --git a/db/seeds/superseed.rb b/db/seeds/superseed.rb
index 5590cff..bc3a8be 100644
--- a/db/seeds/superseed.rb
+++ b/db/seeds/superseed.rb
@@ -19,7 +19,7 @@
 
 
 # Setup
-@number_of_users = 40
+@number_of_users = 20
 
 
 # 30 categorias de Trabalho
@@ -88,9 +88,18 @@
 
   # Cria um post com imagem e outros posts somente texto (WIP)
   html_post = %(<action-text-attachment sgid="#{images_for_posts.sample.attachable_sgid}"></action-text-attachment>)
-  user.posts.create(title: Faker::Lorem.sentence, content: "#{Faker::Lorem.paragraph} #{html_post}", tag_list: [tags].sample)
+  FactoryBot.create(:post,
+                    :published,
+                    title: Faker::Lorem.sentence, content: "#{Faker::Lorem.paragraphs(number: rand(3..6)).join(' ')} #{html_post}",
+                    tag_list: [tags].sample,
+                    user:)
   rand(1..3).times do
-    user.posts.create(title: Faker::Lorem.sentence, content: "#{Faker::Lorem.paragraph}", tag_list: [tags].sample)
+    FactoryBot.create(:post,
+                    :published,
+                    title: Faker::Lorem.sentence,
+                    content: "#{Faker::Lorem.paragraphs(number: rand(3..6)).join(' ')}",
+                    tag_list: [tags].sample,
+                    user:)
   end
 end
 
diff --git a/spec/system/posts/user_edits_post_status_spec.rb b/spec/system/posts/user_edits_post_status_spec.rb
index febe592..2100c44 100644
--- a/spec/system/posts/user_edits_post_status_spec.rb
+++ b/spec/system/posts/user_edits_post_status_spec.rb
@@ -23,7 +23,6 @@
 
     expect(page).to have_current_path post_path(post)
     expect(Post.last.status).to eq 'draft'
-    expect(page).to have_content('Rascunho')
   end
 
   it 'publica rascunho' do
@@ -36,6 +35,5 @@
 
     expect(page).to have_current_path post_path(post)
     expect(Post.last.status).to eq 'published'
-    expect(page).to have_content('Publicada')
   end
 end

From d0fbb09d5636ea777bad93257c4f7d5e6dd028d8 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 10:48:01 -0300
Subject: [PATCH 2/8] =?UTF-8?q?Style/melhora=20layout=20e=20adiciona=20bot?=
 =?UTF-8?q?=C3=A3o=20de=20compartilhar=20nos=20posts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: GyodaiDDA <rodrigo.gyodai@gmail.com>
---
 app/assets/images/share.svg                   |  3 +
 .../stylesheets/application.bootstrap.scss    | 88 +------------------
 app/assets/stylesheets/layout.scss            | 32 ++++++-
 app/assets/stylesheets/posts.scss             | 10 +++
 app/assets/stylesheets/profile.scss           |  2 +-
 app/helpers/posts_helper.rb                   |  8 ++
 app/views/home/index.html.erb                 | 30 ++++++-
 app/views/posts/_listing.html.erb             |  2 +-
 app/views/posts/show.html.erb                 | 35 +++++---
 config/locales/models/posts.pt-BR.yml         |  3 +-
 .../posts/user_edits_post_status_spec.rb      |  2 +
 11 files changed, 108 insertions(+), 107 deletions(-)
 create mode 100644 app/assets/images/share.svg

diff --git a/app/assets/images/share.svg b/app/assets/images/share.svg
new file mode 100644
index 0000000..cf17966
--- /dev/null
+++ b/app/assets/images/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="dark" class="bi bi-share" viewBox="0 0 16 16">
+  <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index d660425..c568cd6 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -17,90 +17,4 @@ $primary: #a130fd;
 @import 'navbar.scss';
 @import 'posts.scss';
 @import 'profile.scss';
-@import 'layout.scss';
-
-:root{
-  font-size: 0.8rem;
-}
-
-body{
-  min-width: 400px;
-  background-color: #F6F7F8 !important;
-}
-
-input[type="checkbox"]:checked {
-  background-color: #a130fd !important;
-}
-
-.feed-post:hover{
-  transform: scale(1.01, 1.01);
-  transition-duration: 300ms;
-}
-
-.img-cover{
-  object-fit: cover;
-  object-position: center;
-}
-
-.field_with_errors input{
-  border: 1px solid red !important;
-}
-
-.home_logo{
-  width: 12rem;
-  margin: 0 7rem 0 7rem;
-}
-
-.drop-menu{
-  margin-right: 2.5rem !important;
-}
-
-#searchText{
-  width: 380px !important;
-}
-
-.dropdown-menu[data-bs-popper]{
-  left: -20px !important;
-}
-
-.follower-card:hover{
-  transform: scale(1.01, 1.01);
-  transition-duration: 300ms;
-}
-  
-.profile-image{
-   min-width: 80px;
-}
-
-.trix-content{
-  color: rgb(10, 10, 10);
-  text-align: left !important;
-}
-
-.dropdown-item:active {
-  background-color: #9030df !important; 
-}
-
-.categories{
-  width: 35% !important;
-}
-
-.highlighted {
-  transform: scale(1.01s);
-  background-color: hsla(256, 85%, 82%, 0.2);
-  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
-  transition: 
-              transform 1.5s ease-in-out,
-              box-shadow 1.5s ease-in-out,
-              background-color 1.5s ease-in-out;
-}
-
-[id^='comment_'] {
-  transform: reset;
-  background-color: reset;
-  box-shadow: reset;
-  transition: 
-              transform 1s ease-in-out,
-              box-shadow 1s ease-in-out,
-              background-color 1s ease-in-out;
-}
+@import 'layout.scss';
\ No newline at end of file
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 97b86ce..10aac2c 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,5 +1,10 @@
+:root{
+  font-size: 0.8rem;
+}
+
 body{
   min-width: 400px;
+  background-color: #F6F7F8 !important;
 }
 
 ul{
@@ -29,17 +34,38 @@ input[type="checkbox"]:checked {
 
 .most-followed-users{
   size: 22rem;
+  margin-top: 0.15rem;
 }
 
-.most-followed-title{
+.home-cards-title{
   margin-bottom: 2px !important;
 }
 
-.most-followed-cards{
+.home-cards{
   padding: 1rem !important;
   margin-bottom: 2px !important;
 }
 
-.most-followed-cards a{
+.home-cards a{
   text-decoration: none !important;
 }
+
+.highlighted {
+  transform: scale(1.01s);
+  background-color: hsla(256, 85%, 82%, 0.2);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
+  transition: 
+              transform 1.5s ease-in-out,
+              box-shadow 1.5s ease-in-out,
+              background-color 1.5s ease-in-out;
+}
+
+[id^='comment_'] {
+  transform: reset;
+  background-color: reset;
+  box-shadow: reset;
+  transition: 
+              transform 1s ease-in-out,
+              box-shadow 1s ease-in-out,
+              background-color 1s ease-in-out;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss
index c83926a..eed3996 100644
--- a/app/assets/stylesheets/posts.scss
+++ b/app/assets/stylesheets/posts.scss
@@ -14,4 +14,14 @@
 
 figure.attachment{
   width: 50% !important;
+}
+
+.share-link{
+  width: 15rem;
+}
+
+.home-publication-button{
+  width: 25vw !important;
+  margin-right: 5rem;
+  text-align: left !important;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
index f4e0f8e..090686b 100644
--- a/app/assets/stylesheets/profile.scss
+++ b/app/assets/stylesheets/profile.scss
@@ -10,4 +10,4 @@
 .img-cover{
   object-fit: cover;
   object-position: center;
-}
\ No newline at end of file
+}
diff --git a/app/helpers/posts_helper.rb b/app/helpers/posts_helper.rb
index e09f6ef..da4665d 100644
--- a/app/helpers/posts_helper.rb
+++ b/app/helpers/posts_helper.rb
@@ -12,4 +12,12 @@ def date_fixer(post)
   def content_fixer(post)
     post.content.to_plain_text.truncate(300, separator: ' ').gsub(/\[[^\]]+\.\w+\]/, '')
   end
+
+  def get_tags(amount)
+    tags = []
+    Post.last(amount).each do |post|
+      tags.concat(post.tag_list)
+    end
+    tags.last(11).uniq
+  end
 end
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 63add0f..8de0d84 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,7 +1,21 @@
 <div class="container">
   <% if user_signed_in? %>
     <div class="row">
-      <button class="btn btn-primary w-75 mb-3 fs-5"> Crie você sua publicação +</button>
+      <div class="px-0 border w-75 border bg-white rounded mb-2 d-flex align-items-center justify-content-center">
+          <%= link_to current_user.profile, class: 'd-flex justify-content-center w-25' do %>
+            <% if current_user.profile.photo.present? && current_user.profile.valid? %>
+              <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'rounded-circle home-profile-picture my-3 w-50' %>
+            <% else %>
+              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'rounded-circle home-profile-picture my-3 w-50' %>
+            <% end %>
+          <% end %>
+        <div>
+          <%= button_to new_post_path, data: { turbo: false }, method: :get, class: 'btn btn-outline-primary rounded-5 py-3 home-publication-button mt-2 fw-bold' do %>
+            <span class="mx-3 text-decoration-underline"><%=t('posts.new.new_post_home')%></span>
+          <% end %>
+        </div>
+      </div>
+
       <section class="col-md-9 y-5">
         <% if current_user.profile.followed_count > 0 %>
           <% if @followed_posts.any? %>
@@ -24,9 +38,9 @@
 
       <aside class="col-md-3">
         <div class="most-followed-users">
-          <h3 class="most-followed-title bg-white text-center py-4 my-0"> <%= t('.most_followed') %> </h3>
+          <h3 class="home-cards-title bg-white text-center py-4 my-0 rounded-1"> <%= t('.most_followed') %> </h3>
           <% @most_followed.each do |profile| %>
-            <div class="bg-white text-center most-followed-cards my-0 py-0">
+            <div class="bg-white text-center home-cards my-0 py-0 rounded-1">
               <%= link_to profile_path(profile), class: 'row' do %>
                 <% if profile.photo.present? && profile.valid? %>
                   <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'img-cover rounded-circle mx-auto mt-2 col-md-4' %>
@@ -41,6 +55,16 @@
             </div>
           <% end %>
         </div>
+        <div>
+          <h3 class="text-center home-cards-title bg-white text-center py-4 my-0 rounded-1 mt-4">Pode te interessar</h3>
+          <div class="d-flex flex-column">
+            <% get_tags(10).uniq.each do |tag| %>
+              <%= link_to searches_path(query: "##{tag}"), class:"bg-white text-center home-cards my-0 py-0 rounded-1" do %>
+                <h6>#<%= tag %></h6>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
       </aside>
     </div>
   <% else %>
diff --git a/app/views/posts/_listing.html.erb b/app/views/posts/_listing.html.erb
index d3ddedd..0868d0c 100644
--- a/app/views/posts/_listing.html.erb
+++ b/app/views/posts/_listing.html.erb
@@ -1,5 +1,5 @@
 <% posts.each do |post| %>
-  <div class="feed-post mb-3 p-3 rounded row bg-white" id="post-list">
+  <div class="feed-post mb-3 p-3 rounded row bg-white border" id="post-list">
     <%= link_to post, class: "text-decoration-none link-dark col-md-10" do %>
       <div class="card-body">
         <h4 class="text-break text-primary text-center"><%= post.title %></h4>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index c7c9a33..8fdf667 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -4,10 +4,12 @@
     <div class="my-4">
       <% if current_user == @post.user %>
         <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary py-0', data: { turbo: false } %>
+        <%= Post.human_attribute_name @post.status %>
       <% else %>
         <%= link_to t('reports.report_btn'), new_report_path(reportable: @post, reportable_type: @post.class), class: 'btn btn-secondary btn-sm' %>
       <% end %>
     </div>
+
  
 
     <h6 class="card-subtitle mb-2">
@@ -41,19 +43,30 @@
       <% end %>
     </p>
 
-    <div class="btn-group">
-      <div class="me-2 mt-2">
+    <div class="btn-group d-flex justify-content-between">
+      <div class="me-2 mt-2 d-flex align-items-center">
         <%= @likes_count %> <%= Like.model_name.human(count: @likes_count) %>
-      </div>
-      <% if @liked %>
-        <%= button_to post_like_path(@post, @liked), method: :delete, class: 'btn btn-sm', id: 'unlike' do %>
-          <%= image_tag 'thumbs-up-solid', width: '20rem' %>
-        <% end %>
-      <% else %>
-        <%= button_to post_likes_path(@post), method: :post, class: 'btn btn-sm', id: 'like' do %>
-          <%= image_tag 'thumbs-up-regular', width: '20rem' %>
+        <% if @liked %>
+          <%= button_to post_like_path(@post, @liked), method: :delete, class: 'btn btn-sm', id: 'unlike' do %>
+            <%= image_tag 'thumbs-up-solid', width: '20rem' %>
+          <% end %>
+        <% else %>
+          <%= button_to post_likes_path(@post), method: :post, class: 'btn btn-sm', id: 'like' do %>
+            <%= image_tag 'thumbs-up-regular', width: '20rem' %>
+          <% end %>
         <% end %>
-      <% end %>
+      </div>
+      <div class="dropdown">
+        <button type="button" class="btn btn-outline-primary rounded-5" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+          <%= image_tag 'share' %> <%= t('posts.share')%>
+        </button>
+        <form class="dropdown-menu p-4">
+          <div class="mb-3 share-link">
+            <label for="dropdownShare" class="form-label">Link</label>
+            <input type="text" class="form-control" id="dropdownShare" value = <%= request.url %>>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>
diff --git a/config/locales/models/posts.pt-BR.yml b/config/locales/models/posts.pt-BR.yml
index 6df4cea..6df4a33 100644
--- a/config/locales/models/posts.pt-BR.yml
+++ b/config/locales/models/posts.pt-BR.yml
@@ -61,7 +61,8 @@ pt-BR:
       edit_post: Editar Publicação
     new:
       new_post: Criar Nova Publicação
-
+      new_post_home: Começar publicação
+    share: Compartilhar
     helpers:
       created_at: 'Criado em: '
       scheduled_for: 'Agendado para: '
diff --git a/spec/system/posts/user_edits_post_status_spec.rb b/spec/system/posts/user_edits_post_status_spec.rb
index 2100c44..febe592 100644
--- a/spec/system/posts/user_edits_post_status_spec.rb
+++ b/spec/system/posts/user_edits_post_status_spec.rb
@@ -23,6 +23,7 @@
 
     expect(page).to have_current_path post_path(post)
     expect(Post.last.status).to eq 'draft'
+    expect(page).to have_content('Rascunho')
   end
 
   it 'publica rascunho' do
@@ -35,5 +36,6 @@
 
     expect(page).to have_current_path post_path(post)
     expect(Post.last.status).to eq 'published'
+    expect(page).to have_content('Publicada')
   end
 end

From 21ec9beb0e3d5b190f9f0f002f1e1a7bc67bd6e1 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 11:44:12 -0300
Subject: [PATCH 3/8] Style/adiciona dropdown de denuncia no perfil

Co-authored-by: GyodaiDDA <rodrigo.gyodai@gmail.com>
---
 app/views/profiles/show.html.erb        | 20 ++++++++++++++++----
 spec/system/reports/user_report_spec.rb |  1 +
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index b58f239..6fd81fb 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -33,7 +33,22 @@
             <%= render partial: 'profile_photo', locals: { profile: @profile } %>
             <%= link_to t('profiles.edit.change_photo'), edit_profile_path(@profile), class: 'badge bg-secondary mt-3' if current_user == @profile.user %>
           </div>
-          <h4><%= @user.full_name %></h4>
+          <div class="d-flex justify-content-between">
+            <h4 class="mx-auto"><%= @user.full_name %></h4>
+            <% if current_user.profile != @profile %>
+              <div class="dropdown">
+                <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white rounded-5 border-0" id="report-profile-dropdown">
+                  <%= image_tag 'three-dots-vertical'%>
+                </button>
+                <div class="dropdown-menu">
+                  <%= link_to new_report_path(reportable: @profile.id, reportable_type: @profile.class), class: 'btn btn-secondary btn-sm dropdown-item' do %>
+                    <%= image_tag 'flag' %>
+                    <span class="mx-2"><%= t('reports.report_btn') %></span>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          </div>
           <p><%= @user.email %></p>
           <div class="d-flex gap-4 justify-content-center">
             <div class="d-flex flex-column" id="followers-count">
@@ -63,9 +78,6 @@
                 <%= button_to t('.follow_btn'), profile_connections_path(@profile), class: 'btn btn-primary w-50' %>
               <% end %>
             </div>
-            <div class="mt-2">
-              <%= link_to t('reports.report_btn'), new_report_path(reportable: @profile.id, reportable_type: @profile.class), class: 'btn btn-secondary btn-sm' %>
-            </div>
           <% end %>
         </div>
 
diff --git a/spec/system/reports/user_report_spec.rb b/spec/system/reports/user_report_spec.rb
index cbca24f..077e2f0 100644
--- a/spec/system/reports/user_report_spec.rb
+++ b/spec/system/reports/user_report_spec.rb
@@ -167,6 +167,7 @@
       login_as user, scope: :user
       visit profile_path(reported_user.profile)
 
+      click_button id: 'report-profile-dropdown'
       click_on 'Denunciar'
       fill_in 'Mensagem', with: 'Isso é discurso de ódio'
       select 'Discurso de ódio', from: 'Tipo de ofensa'

From 758a92d6184f0d638d6e111376a35f6c8a531da0 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 16:24:14 -0300
Subject: [PATCH 4/8] =?UTF-8?q?Style/melhora=20layout=20de=20diversas=20p?=
 =?UTF-8?q?=C3=A1ginas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixa tamanho de cards de publicações em página na página de busca

- Melhora tags de categorias de trabalho de usuários na página de busca

- Removemos alguns botões da página de perfil e mudamos para um ícone

- Adiciona background color para fotos de perfil

Co-authored-by: GyodaiDDA <rodrigo.gyodai@gmail.com>
---
 app/assets/images/pencil-square.svg           |  4 +
 app/assets/stylesheets/layout.scss            | 12 +++
 app/assets/stylesheets/navbar.scss            |  4 +
 app/assets/stylesheets/profile.scss           | 29 +++++-
 .../connections/_connection_cards.html.erb    |  4 +-
 app/views/home/index.html.erb                 | 32 +++----
 app/views/layouts/application.html.erb        |  2 +-
 app/views/posts/_listing.html.erb             |  2 +-
 app/views/posts/show.html.erb                 | 20 ++--
 app/views/profiles/_personal_info.html.erb    |  8 +-
 app/views/profiles/_profile_details.html.erb  | 88 +++++++++--------
 app/views/profiles/_profile_photo.html.erb    |  4 +-
 app/views/profiles/show.html.erb              | 96 ++++++++++---------
 app/views/searches/index.html.erb             | 17 ++--
 app/views/shared/_navbar.html.erb             |  4 +-
 config/locales/models/posts.pt-BR.yml         |  2 +-
 16 files changed, 193 insertions(+), 135 deletions(-)
 create mode 100644 app/assets/images/pencil-square.svg

diff --git a/app/assets/images/pencil-square.svg b/app/assets/images/pencil-square.svg
new file mode 100644
index 0000000..d8433c6
--- /dev/null
+++ b/app/assets/images/pencil-square.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-pencil-square" viewBox="0 0 16 16">
+  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
+  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 10aac2c..c8191fa 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -68,4 +68,16 @@ input[type="checkbox"]:checked {
               transform 1s ease-in-out,
               box-shadow 1s ease-in-out,
               background-color 1s ease-in-out;
+}
+
+.page-header{
+  margin: 0 -0.66rem 0 -0.66rem;
+}
+
+.search-result-title:hover{
+  text-decoration: underline !important;
+}
+
+.edit-button{
+  margin-left: 8rem !important;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index 06a2365..a19d811 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -8,4 +8,8 @@
 
 .dropdown-item:active {
   background-color: #9030df !important;
+}
+
+.personal-info-visibility{
+  list-style: disc !important;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
index 090686b..4d1a0e1 100644
--- a/app/assets/stylesheets/profile.scss
+++ b/app/assets/stylesheets/profile.scss
@@ -3,11 +3,32 @@
   transition-duration: 300ms;
 }
   
-.profile-image{
-   min-width: 80px;
-}
-
 .img-cover{
   object-fit: cover;
   object-position: center;
 }
+
+.profile-header-title{
+  margin: 0 -0.66rem 0.66rem -0.66rem;
+}
+
+.profile-header-picture{
+  transform: translateY(-50%);
+}
+
+.profile-picture{
+  background-color: #F6F7F8 !important;
+}
+
+.profile-card-body{
+  color: #F6F7F8 !important;
+}
+
+.profile-info-content{
+  font-size: 1.11rem;
+  margin-left: 2.12rem;
+}
+
+.profile-info-title{
+  margin-left: 2rem !important;
+}
\ No newline at end of file
diff --git a/app/views/connections/_connection_cards.html.erb b/app/views/connections/_connection_cards.html.erb
index d48083b..4ba5742 100644
--- a/app/views/connections/_connection_cards.html.erb
+++ b/app/views/connections/_connection_cards.html.erb
@@ -2,9 +2,9 @@
   <div class="card-body row justify-content-center align-items-center">
     <div class="col-md-3 col-sm-3 profile-image">
       <% if connection_profile.photo.present? %>
-        <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+        <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
       <% else %>
-        <%= image_tag 'default_portfoliorrr_photo.png', width: '85rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+        <%= image_tag 'default_portfoliorrr_photo.png', width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
       <% end %>
     </div>
     <div class="col-md-6">
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 4aaaf58..51ad68e 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,51 +1,51 @@
 <div class="container">
   <% if user_signed_in? %>
     <div class="row">
-      <div class="px-0 border w-75 border bg-white rounded mb-2 d-flex align-items-center justify-content-center">
+      <section class="col-md-9">
+         <div class="border bg-white rounded mb-5 d-flex align-items-center justify-content-center page-header">
           <%= link_to current_user.profile, class: 'd-flex justify-content-center w-25' do %>
             <% if current_user.profile.photo.present? && current_user.profile.valid? %>
-              <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'rounded-circle home-profile-picture my-3 w-50' %>
+              <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'rounded-circle home-profile-picture my-3 w-50' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
             <% end %>
           <% end %>
-        <div>
-          <%= button_to new_post_path, data: { turbo: false }, method: :get, class: 'btn btn-outline-primary rounded-5 py-3 home-publication-button mt-2 fw-bold' do %>
-            <span class="mx-3 text-decoration-underline"><%=t('posts.new.new_post_home')%></span>
-          <% end %>
+          <div>
+            <%= button_to new_post_path, data: { turbo: false }, method: :get, class: 'btn btn-outline-primary rounded-5 py-3 home-publication-button mt-2 fw-bold' do %>
+              <span class="mx-3 text-decoration-underline"><%=t('posts.new.new_post_home')%></span>
+            <% end %>
+          </div>
         </div>
-      </div>
-
-      <section class="col-md-9 y-5">
+        <h3>Últimas postagens</h3>
         <% if current_user.profile.followed_count > 0 %>
           <% if @followed_posts.any? %>
-            <div>
+            <div class="border-top border-dark-subtle pt-5">
               <%= render partial: 'posts/listing', locals: { posts: @followed_posts.each } %>
             </div>
           <% else %>
-            <div>
+            <div class="border-top border-dark-subtle pt-5">
               <h5> <%= t('.what_people_are_posting') %>: </h5>
               <%= render partial: 'posts/listing', locals: { posts: @posts } %>
             </div>
           <% end %>
         <% else %>
-          <div>
+          <div class="border-top border-dark-subtle pt-5">
             <h5> <%= t('.follow_someone') %> </h5>
             <%= render partial: 'posts/listing', locals: { posts: @posts } %>
           </div>
         <% end %>
       </section>
 
-      <aside class="col-md-3">
+      <aside class="home-aside-container col-md-3">
         <div class="most-followed-users">
           <h3 class="home-cards-title bg-white text-center py-4 my-0 rounded-1"> <%= t('.most_followed') %> </h3>
           <% @most_followed.each do |profile| %>
             <div class="bg-white text-center home-cards my-0 py-0 rounded-1">
               <%= link_to profile_path(profile), class: 'row' do %>
                 <% if profile.photo.present? && profile.valid? %>
-                  <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
                 <% else %>
-                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
                 <% end %>
                 <div class="col-md-8 mt-4">
                   <h5><%= profile.full_name %></h5>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8676f77..90e6015 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,7 +22,7 @@
           </div>
         <% end %>
         <% if notice %>
-          <div class="alert bg-primary-subtle text-center fw-bold" role="alert">
+          <div class="alert bg-success-subtle text-center fw-bold" role="alert">
             <%= notice %>
           </div>
         <% end %>
diff --git a/app/views/posts/_listing.html.erb b/app/views/posts/_listing.html.erb
index 0868d0c..5a85c5a 100644
--- a/app/views/posts/_listing.html.erb
+++ b/app/views/posts/_listing.html.erb
@@ -2,7 +2,7 @@
   <div class="feed-post mb-3 p-3 rounded row bg-white border" id="post-list">
     <%= link_to post, class: "text-decoration-none link-dark col-md-10" do %>
       <div class="card-body">
-        <h4 class="text-break text-primary text-center"><%= post.title %></h4>
+        <h4 class="text-break text-primary mb-5"><%= post.title %></h4>
         <% if post.exists_image_attached? %>
           <%= image_tag post.first_image_attached.representation(resize_to_limit: [ 1024, 300 ]), class:"img-fluid rounded mx-auto d-block mb-2"  %>
         <% end %>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index 5ea03d5..81d49d1 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -3,10 +3,12 @@
     <div class="mb-3 d-flex justify-content-between">
       <h2 class="card-title post-title"><%= @post.title %></h2>
       <% if current_user == @post.user %>
-        <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary py-0', data: { turbo: false } %>
-        <%= button_to t('publish_btn'), publish_post_path(@post), method: :patch,
-          class: 'btn btn-primary', data: { turbo: false } if @post.scheduled? %>
-        <%= Post.human_attribute_name @post.status %>
+        <div class="d-flex flex-column">
+          <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary py-0', data: { turbo: false } %>
+          <%= button_to t('publish_btn'), publish_post_path(@post), method: :patch,
+            class: 'btn btn-primary', data: { turbo: false } if @post.scheduled? %>
+          <span><%= Post.human_attribute_name @post.status %></span>
+        </div>
       <% else %>
         <div class="dropdown">
           <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white rounded-5 border-0" id="report-post-dropdown">
@@ -22,8 +24,6 @@
       <% end %>
     </div>
 
- 
-
     <h6 class="card-subtitle mb-2">
       <%= link_to t('.authored_by', author_name: @post.user.full_name), @post.user.profile %>
     </h6>
@@ -101,9 +101,9 @@
         <footer>
           <h5>
             <% if comment.user.profile.photo.present? %>
-              <%= image_tag comment.user.profile.photo, alt: 'Foto de perfil', width: '35rem', class: 'rounded-circle mx-3' %>
+              <%= image_tag comment.user.profile.photo, alt: 'Foto de perfil', width: '35rem', class: 'profile-picture rounded-circle mx-3' %>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', alt: 'Foto de perfil', width: '35rem', class: 'rounded-circle mx-3' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', alt: 'Foto de perfil', width: '35rem', class: 'profile-picture rounded-circle mx-3' %>
             <% end %>
             <%= link_to comment.user.full_name, comment.user.profile %> <%= '(autor)' if comment.user == @post.user %>
           </h5>
@@ -164,9 +164,9 @@
                     <% comment.replies.each do |reply| %>
                       <h6 class="mt-2">
                         <% if reply.user.profile.photo.present? %>
-                          <%= image_tag reply.user.profile.photo, alt: 'Foto de perfil', width: '30rem', class: 'rounded-circle mx-3' %>
+                          <%= image_tag reply.user.profile.photo, alt: 'Foto de perfil', width: '30rem', class: 'profile-picture rounded-circle mx-3' %>
                         <% else %>
-                          <%= image_tag 'default_portfoliorrr_photo.png', alt: 'Foto de perfil', width: '30rem', class: 'rounded-circle mx-3' %>
+                          <%= image_tag 'default_portfoliorrr_photo.png', alt: 'Foto de perfil', width: '30rem', class: 'profile-picture rounded-circle mx-3' %>
                         <% end %>
                         <%= link_to reply.user.full_name, reply.user.profile %> <%= '(autor)' if reply.user == @post.user %>
                         <small datetime="<%= reply.created_at.to_datetime %>">
diff --git a/app/views/profiles/_personal_info.html.erb b/app/views/profiles/_personal_info.html.erb
index 2841028..93e3076 100644
--- a/app/views/profiles/_personal_info.html.erb
+++ b/app/views/profiles/_personal_info.html.erb
@@ -1,14 +1,14 @@
-<ul>
+<ul class="mx-2">
   <% if personal_info.has_key?('visibility') && user_is_owner %>
-    <li class="fs-5 mb-3">
-      <span class="fw-bold"><%= t(personal_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+    <li class="fs-5 mb-3 personal-info-visibility">
+      <span class="fw-semibold"><%= t(personal_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
     </li>
   <% end %>
   <% personal_info.each do |attribute, value| %>    
     <% next if attribute == 'visibility' %>
       <% new_value = (value && attribute == 'birth_date') ? l(value.to_date) : value  %>
     <li>
-      <span class="fw-bold"><%= PersonalInfo.human_attribute_name(attribute) %></span>:
+      <span class="fw-semibold"><%= PersonalInfo.human_attribute_name(attribute) %></span>:
       <%= info_fixer(new_value) %>
     </li>
   <% end %>
diff --git a/app/views/profiles/_profile_details.html.erb b/app/views/profiles/_profile_details.html.erb
index bf24895..693093b 100644
--- a/app/views/profiles/_profile_details.html.erb
+++ b/app/views/profiles/_profile_details.html.erb
@@ -1,26 +1,30 @@
 <div>
   <% user_is_owner = profile.user == current_user %>
   <br>
-  <div class="border py-1 px-2 rounded mb-3 bg-white">
+  <div class="border p-3 rounded mb-3 bg-white">
     <div class="d-flex gap-1">
       <%= image_tag 'about-icon', width: '23rem', class: 'mb-2'  %>
-      <h3><%= Profile.human_attribute_name(:cover_letter) %></h3>
+      <h4><%= Profile.human_attribute_name(:cover_letter) %></h4>
     </div>
-    <h5><%= profile.cover_letter %></h5><br>
+    <p class="profile-info-content pb-0 mb-0"><%= profile.cover_letter %></p>
   </div>
 
   <% if profile.personal_info[:visibility] || user_is_owner %>
-    <div class="border py-1 px-2 rounded mb-3 bg-white">
+    <div class="border p-3 rounded mb-3 bg-white">
       <div class="d-flex gap-1">
         <%= image_tag 'person-fill', width: '28rem', class: 'mb-2' %>
         <h3><%= PersonalInfo.model_name.human %></h3>  
+        <% if user_is_owner %>
+          <%= link_to edit_user_profile_path, id: 'edit-personal-info', class:'edit-button btn btn-outline-info border-0 p-2 rounded-5' do %>
+            <%= image_tag 'pencil-square', width: '20 rem' %>
+          <% end %>
+        <% end %>
       </div>
       <%= render 'personal_info', personal_info: personal_info, user_is_owner: user_is_owner %>
-      <%= link_to 'Editar Informações Pessoais', edit_user_profile_path, class:'btn btn-secondary mx-4 mb-3' if user_is_owner %>
     </div>
   <% end %>
 
-  <div class="border py-1 px-2 rounded mb-3 bg-white">
+  <div class="border p-3 rounded mb-3 bg-white">
     <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
       <div class="d-flex gap-1">
         <%= image_tag 'briefcase-solid', width: '24rem', class: 'mb-2 mx-1' %>
@@ -29,39 +33,41 @@
     <% end %>
     
     <p>
-      <%= link_to 'Adicionar Experiência Profissional', new_user_profile_professional_info_path, class:'btn btn-primary' if user_is_owner %>
+      <%= link_to 'Adicionar Experiência Profissional', new_user_profile_professional_info_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
     </p>
     <% professional_infos.each do |professional_info| %>
       <% if professional_info.visibility || user_is_owner %>
-        <h4>
-          <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
-        </h4>
-        <ul>
-          <% if user_is_owner %>
-            <li class="fs-5 mb-3">
-              <span class="fw-bold"><%= t(professional_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
-            </li>
-          <% end %>
-          <li>
-            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:current_job) %></span>: <%= t(professional_info.current_job) %>
+        <% if user_is_owner %>
+          <li class="fs-5 mb-3">
+            <span class="fw-semibold"><%= t(professional_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+            <% if user_is_owner %>
+              <%= link_to edit_professional_info_path(professional_info), id: 'edit-professional-info', class:'edit-button btn btn-outline-info border-0 p-2 rounded-5' do %>
+                <%= image_tag 'pencil-square', width: '20 rem' %>
+              <% end %>
+            <% end %>
           </li>
+        <% end %>
+        <div>
+          <h5 class="fw-semibold profile-info-title"><%= ProfessionalInfo.human_attribute_name(:position) %>: <%= professional_info.position %></h5>
+          <h6 class="profile-info-title">
+            <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
+          </h6>
+        </div>
+        <ul>
           <li>
-            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:position) %></span>: <%= professional_info.position %>
+            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:current_job) %></span>: <%= t(professional_info.current_job) %>
           </li>
           <li>
-            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:description) %></span>: <%= professional_info.description %>
+            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:description) %></span>: <%= professional_info.description %>
           </li>
           <li>
-            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:start_date) %></span>: <%= l professional_info.start_date if professional_info.start_date%>
+            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:start_date) %></span>: <%= l professional_info.start_date if professional_info.start_date%>
           </li>
           <li>
-            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:end_date) %></span>: <%= l professional_info.end_date if professional_info.end_date %>
+            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:end_date) %></span>: <%= l professional_info.end_date if professional_info.end_date %>
           </li>
         </ul>
       <% end %>
-      <p>
-        <%= link_to 'Editar Experiência Profissional', edit_professional_info_path(professional_info), class:'btn btn-secondary' if user_is_owner %>
-      </p>
     <% end %>
   </div>
   
@@ -73,33 +79,35 @@
       </div>
     <% end %>
     <p>
-      <%= link_to 'Adicionar Formação Acadêmica', new_user_profile_education_info_path, class:'btn btn-primary' if user_is_owner %>
+      <%= link_to 'Adicionar Formação Acadêmica', new_user_profile_education_info_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
     </p>
       <% profile.education_infos.each do |education_info| %>
         <% if education_info.visibility || user_is_owner %>
-          <h4>  
+          <% if user_is_owner %>
+            <li class="fs-5 mb-3">
+              <span class="fw-semibold"><%= t(education_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+              <% if user_is_owner %>
+                <%= link_to edit_education_info_path(education_info), id: 'edit-education-info', class:'edit-button btn btn-outline-info border-0 p-2 rounded-5' do %>
+                  <%= image_tag 'pencil-square', width: '20 rem' %>
+                <% end %>
+              <% end %>
+            </li>
+          <% end %>
+          <h5 class="profile-info-title">  
             <%= EducationInfo.human_attribute_name(:institution) %>: <%= education_info.institution %>
-          </h4>
+          </h5>
           <ul>
-            <% if user_is_owner %>
-              <li class="fs-5 mb-3">
-                <span class="fw-bold"><%= t(education_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
-              </li>
-            <% end %>
             <li>
-              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:course) %></span>: <%= education_info.course %>
+              <span class="fw-semibold"><%= EducationInfo.human_attribute_name(:course) %></span>: <%= education_info.course %>
             </li>
             <li>
-              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:start_date) %></span>: <%= l education_info.start_date if education_info.start_date%>
+              <span class="fw-semibold"><%= EducationInfo.human_attribute_name(:start_date) %></span>: <%= l education_info.start_date if education_info.start_date%>
             </li>
             <li>
-              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:end_date) %></span>: <%= l education_info.end_date if education_info.end_date %>
+              <span class="fw-semibold"><%= EducationInfo.human_attribute_name(:end_date) %></span>: <%= l education_info.end_date if education_info.end_date %>
             </li>
           </ul>
         <% end %>
-        <p>
-          <%= link_to 'Editar Formação Acadêmica', edit_education_info_path(education_info), class:'btn btn-secondary' if user_is_owner %>
-        </p>
       <% end %>
   </div>
 </div>
@@ -111,7 +119,7 @@
     </div>
   <% end %> 
 
-  <%= link_to t('links.new_profile_job_category_path'), new_profile_job_category_path, class:'btn btn-primary' if user_is_owner %>
+  <%= link_to t('links.new_profile_job_category_path'), new_profile_job_category_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
   <div class='mt-2'>
     <% profile.profile_job_categories.each do |profile_job_category| %>
       <p><strong><%= profile_job_category.job_category.name %></strong></p>
diff --git a/app/views/profiles/_profile_photo.html.erb b/app/views/profiles/_profile_photo.html.erb
index 4f9c4ed..9cd35c8 100644
--- a/app/views/profiles/_profile_photo.html.erb
+++ b/app/views/profiles/_profile_photo.html.erb
@@ -1,5 +1,5 @@
 <% if profile.photo.present? && profile.valid? %>
-  <%= image_tag profile.photo, alt: t('.alt_text'), width: '130rem', class: 'img-cover rounded-circle mx-auto mt-2' %>
+  <%= image_tag profile.photo, alt: t('.alt_text'), width: '130rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2' %>
 <% else %>
-  <%= image_tag 'default_portfoliorrr_photo.png', width: '130rem', alt: t('.alt_text'), class: 'img-cover rounded-circle mx-auto mt-2' %>
+  <%= image_tag 'default_portfoliorrr_photo.png', width: '130rem', alt: t('.alt_text'), class: 'profile-picture img-cover rounded-circle mx-auto mt-2' %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index 6fd81fb..1a67e8d 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -9,9 +9,10 @@
         </section>
       </div>
     <% end %>
-
     <div id="publications">
-      <h2 id="post-list-title"><%= Post.model_name.human(count: 2) %></h2>
+      <div class="mb-3 border-bottom border-dark">
+        <h2 id="post-list-title"><%= Post.model_name.human(count: 2) %></h2>
+      </div>
       <% published_posts = @profile.user.posts.published %>
       
       <% if published_posts.count - @profile.user.posts.pinned.count < 1 %>
@@ -29,58 +30,65 @@
     <aside class="px-5">
       <section class="text-center d-flex flex-column align-items-center border rounded bg-white">
         <div class="w-100">
-          <div class="bg-primary profile-header mb-4 w-100 rounded-top d-flex flex-column">
-            <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+          <div class="bg-primary mb-4 rounded-top d-flex flex-column profile-header">
+            <div class="profile-card-body">
+              <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+              <h2><%= @user.full_name %></h2>
+              <p><%= @user.email %></p>
+            </div>
             <%= link_to t('profiles.edit.change_photo'), edit_profile_path(@profile), class: 'badge bg-secondary mt-3' if current_user == @profile.user %>
           </div>
-          <div class="d-flex justify-content-between">
-            <h4 class="mx-auto"><%= @user.full_name %></h4>
-            <% if current_user.profile != @profile %>
-              <div class="dropdown">
-                <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white rounded-5 border-0" id="report-profile-dropdown">
-                  <%= image_tag 'three-dots-vertical'%>
-                </button>
-                <div class="dropdown-menu">
-                  <%= link_to new_report_path(reportable: @profile.id, reportable_type: @profile.class), class: 'btn btn-secondary btn-sm dropdown-item' do %>
-                    <%= image_tag 'flag' %>
-                    <span class="mx-2"><%= t('reports.report_btn') %></span>
+          <div class="row">
+            <div class="col-md-2 g-0">
+            </div>
+            <div class="col-md-8">
+              <div class="d-flex gap-4 justify-content-center">
+                <div class="d-flex flex-column" id="followers-count">
+                  <%= link_to profile_connections_path(@profile), class: "text-decoration-none fs-5" do %>
+                    <p><%= @profile.followers_count %> <%= t(Connection.human_attribute_name(:follower_id, count: @profile.followers_count ))%></p>
                   <% end %>
                 </div>
+                <div class="text-center d-flex flex-column" id="following-count">
+                  <%= link_to profile_following_path(@profile), class: "text-decoration-none fs-5" do %>
+                    <p><%= @profile.followed_count %> <%= t(Connection.human_attribute_name(:followed_profile_id))%> </p>
+                  <% end %>
+                </div>
+                <div class="fs-5">
+                  <p><%= @profile.user.posts.count %> <%= Post.model_name.human(count: @profile.user.posts.count) %> </p>
+                </div>
+              </div>
+              <div>
+                <% if current_user.profile != @profile %>
+                  <div class="mb-2">
+                    <% if @profile.following?(current_user.profile) %>
+                      <%= button_to t('.unfollow_btn'), connection_unfollow_path(@profile.followers.find_by(follower: current_user.profile)), method: :patch, class: 'btn btn-danger w-50' %>
+                    <% elsif @profile.inactive_follower?(current_user.profile) %>
+                      <%= button_to t('.follow_btn'), connection_follow_again_path(@profile.followers.find_by(follower: current_user.profile)), method: :patch, class: 'btn btn-primary w-50' %>
+                    <% else %>
+                      <%= button_to t('.follow_btn'), profile_connections_path(@profile), class: 'btn btn-primary w-50' %>
+                    <% end %>
+                  </div>
+                <% end %>
               </div>
-            <% end %>
-          </div>
-          <p><%= @user.email %></p>
-          <div class="d-flex gap-4 justify-content-center">
-            <div class="d-flex flex-column" id="followers-count">
-              <%= link_to profile_connections_path(@profile), class: "text-decoration-none fs-5" do %>
-                <p><%= @profile.followers_count %> <%= t(Connection.human_attribute_name(:follower_id, count: @profile.followers_count ))%></p>
-              <% end %>
             </div>
-            <div class="text-center d-flex flex-column" id="following-count">
-              <%= link_to profile_following_path(@profile), class: "text-decoration-none fs-5" do %>
-                <p><%= @profile.followed_count %> <%= t(Connection.human_attribute_name(:followed_profile_id))%> </p>
+            <div class="col-md-2 mt-2 g-0">
+              <% if current_user.profile != @profile %>
+                <div class="dropdown col-md-2">
+                  <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white rounded-5 border-0" id="report-profile-dropdown">
+                    <%= image_tag 'three-dots-vertical'%>
+                  </button>
+                  <div class="dropdown-menu">
+                    <%= link_to new_report_path(reportable: @profile.id, reportable_type: @profile.class), class: 'btn btn-secondary btn-sm dropdown-item' do %>
+                      <%= image_tag 'flag' %>
+                      <span class="mx-2"><%= t('reports.report_btn') %></span>
+                    <% end %>
+                  </div>
+                </div>
               <% end %>
             </div>
-            <div class="fs-5">
-              <p><%= @profile.user.posts.count %> <%= Post.model_name.human(count: @profile.user.posts.count) %> </p>
-            </div>
           </div>
+          
         </div>
-        <br>
-        <div class="w-75">
-          <% if current_user.profile != @profile %>
-            <div>
-              <% if @profile.following?(current_user.profile) %>
-                <%= button_to t('.unfollow_btn'), connection_unfollow_path(@profile.followers.find_by(follower: current_user.profile)), method: :patch, class: 'btn btn-danger w-50' %>
-              <% elsif @profile.inactive_follower?(current_user.profile) %>
-                <%= button_to t('.follow_btn'), connection_follow_again_path(@profile.followers.find_by(follower: current_user.profile)), method: :patch, class: 'btn btn-primary w-50' %>
-              <% else %>
-                <%= button_to t('.follow_btn'), profile_connections_path(@profile), class: 'btn btn-primary w-50' %>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-
       </section>
       <section>
         <%= render 'profile_details', profile: @profile, professional_infos: @professional_infos, personal_info: @personal_info %>
diff --git a/app/views/searches/index.html.erb b/app/views/searches/index.html.erb
index d48e75d..1ef75e1 100644
--- a/app/views/searches/index.html.erb
+++ b/app/views/searches/index.html.erb
@@ -6,22 +6,22 @@
     <% @profiles.each do |profile| %>
       <%= link_to profile, class: "search-result card text-decoration-none py-2 px-5 rounded follower-card bg-light-subtle mt-3 w-50" do %>
         <div class="card-body row justify-content-center align-items-center">
-          <div class="col-md-4 col-sm-3 profile-image">
+          <div class="col-md-2 col-sm-3 profile-image">
             <% if profile.photo.present? %>
-              <%= image_tag profile.photo_attachment, width: '100rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+              <%= image_tag profile.photo_attachment, width: '100rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', width: '100rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', width: '100rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% end %>
           </div>
-          <div class="col-md-8">
-            <h3 class="card-title text-primary text-decoration-underline text-center"><%= profile.full_name %></h3>
+          <div class="col-md-10">
+            <h3 class="card-title search-result-title text-primary text-center"><%= profile.full_name %></h3>
             <% if profile.personal_info.city && profile.personal_info.state %>
               <p class="text-center"><%= profile.personal_info.city %> - <%= profile.personal_info.state %></p>
             <% end %>
             <% if profile.job_categories.any? %>
               <div class="d-flex gap-3 justify-content-center">
                 <% profile.job_categories.first(3).each do |category| %>
-                  <p class="border border-1 border-light rounded bg-primary p-1 text-center text-light"> <%= category.name %> </p>
+                  <p class="text-center text-primary fw-bold"> <%= category.name %> </p>
                 <% end %>
               </div>
             <% end %>
@@ -31,8 +31,9 @@
     <% end %>
   <% elsif @posts&.any? %>
       <h3 class="mb-3"><%= @posts.size %> <%= Post.model_name.human count: @posts.size %> <%= t('.with') %>: #<%= @tags.join(', #') %></h3>
-  
-      <%= render partial: 'posts/listing', locals: { posts: @posts.each } %>
+      <div class="w-75">
+        <%= render partial: 'posts/listing', locals: { posts: @posts.each } %>
+      </div>
       
   <% else %>
     <p><%= t('.empty_state') %>: <%= @query %></p>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index f194b59..23443c1 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -24,9 +24,9 @@
         <% if user_signed_in? %>
           <button class="btn dropdown-toggle mx-5" data-bs-toggle="dropdown" aria-expanded="false">
             <% if current_user.profile.photo_attachment %>
-              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', width: '55rem', alt: 'Foto de perfil', class: 'rounded rounded-circle px-2' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% end %>
           </button>
           <ul class="dropdown-menu dropdown-menu-white">
diff --git a/config/locales/models/posts.pt-BR.yml b/config/locales/models/posts.pt-BR.yml
index c81e40b..00dcc55 100644
--- a/config/locales/models/posts.pt-BR.yml
+++ b/config/locales/models/posts.pt-BR.yml
@@ -63,7 +63,7 @@ pt-BR:
       edit_post: Editar Publicação
     new:
       new_post: Criar Nova Publicação
-      new_post_home: Começar publicação
+      new_post_home: Crie a sua publicação
     share: Compartilhar
     helpers:
       created_at: 'Criado em: '

From c74a86ed02fef581d101c09ea4cb9af983df2fb4 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 18:09:50 -0300
Subject: [PATCH 5/8] =?UTF-8?q?Syle/melhora=20layout=20de=20diversas=20p?=
 =?UTF-8?q?=C3=A1ginas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Rodrigo Gyodai <GyodaiDDA@users.noreply.github.com>
---
 app/assets/images/bell.svg                    |   3 +
 app/assets/images/newpost.svg                 |   4 +
 app/assets/stylesheets/layout.scss            |  20 ++++
 app/assets/stylesheets/navbar.scss            |  12 +-
 app/views/invitation_requests/index.html.erb  |   4 +-
 app/views/invitations/index.html.erb          |   4 +-
 app/views/invitations/show.html.erb           |   4 +-
 app/views/notifications/index.html.erb        |   4 +-
 app/views/profile/_profile.html.erb           | 105 ------------------
 app/views/projects/index.html.erb             |   6 +-
 app/views/shared/_navbar.html.erb             |  32 +++---
 app/views/subscriptions/index.html.erb        |  13 +--
 config/locales/models/posts.pt-BR.yml         |   2 +-
 .../user_edits_education_info_spec.rb         |   4 +-
 .../user_edits_personal_info_spec.rb          |   2 +-
 spec/system/posts/user_creates_post_spec.rb   |   2 +-
 .../user_edits_professional_info_spec.rb      |   2 +-
 .../admin_sees_reports_listing_page_spec.rb   |  18 +--
 18 files changed, 89 insertions(+), 152 deletions(-)
 create mode 100644 app/assets/images/bell.svg
 create mode 100644 app/assets/images/newpost.svg
 delete mode 100644 app/views/profile/_profile.html.erb

diff --git a/app/assets/images/bell.svg b/app/assets/images/bell.svg
new file mode 100644
index 0000000..a71eba3
--- /dev/null
+++ b/app/assets/images/bell.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
+  <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/newpost.svg b/app/assets/images/newpost.svg
new file mode 100644
index 0000000..964e855
--- /dev/null
+++ b/app/assets/images/newpost.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+  <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5"/>
+  <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c8191fa..5b3eba2 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -80,4 +80,24 @@ input[type="checkbox"]:checked {
 
 .edit-button{
   margin-left: 8rem !important;
+}
+
+.page-title{
+  margin-left: 15.4%;
+  margin-right: 15.4%;
+}
+
+.project-search{
+  margin-left: 24.9%;
+  margin-right: 24.9%;
+}
+
+.invitation-request-title{
+  margin-left: 7%;
+  margin-right: 7%;
+}
+
+.notifications{
+  margin-left: 21%;
+  margin-right: 21%;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index a19d811..eec4b39 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -12,4 +12,14 @@
 
 .personal-info-visibility{
   list-style: disc !important;
-}
\ No newline at end of file
+}
+
+.notification-badge{
+  position: absolute;
+  right: 5% !important;
+}
+
+.badge-container{
+  position: relative !important;
+}
+
diff --git a/app/views/invitation_requests/index.html.erb b/app/views/invitation_requests/index.html.erb
index 6d8d007..0f8ce04 100644
--- a/app/views/invitation_requests/index.html.erb
+++ b/app/views/invitation_requests/index.html.erb
@@ -1,4 +1,4 @@
-<h2 class="text-center mb-5"><%= InvitationRequest.model_name.human(count: @invitation_request_infos.length) %></h2>
+<h2 class="invitation-request-title border-bottom border-dark mb-5"><%= InvitationRequest.model_name.human(count: @invitation_request_infos.length) %></h2>
 
 <% if current_user.subscription.inactive? %>
   <div class="text-center become-premium-div mt-5">
@@ -20,7 +20,7 @@
 
       <% if @invitation_request_infos.any? %>
         <% @invitation_request_infos.each do |invitation_request| %>
-          <div class="col-5 rounded border p-3" id="request_<%= invitation_request.id %>">
+          <div class="col-5 rounded border bg-white p-3" id="request_<%= invitation_request.id %>">
             <div class="card-body">
               <div class="d-flex flex-column gap-4">
                 <div class="d-flex flex-column gap-2">
diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index b6d9679..24f2870 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <section>
-      <h2 class="text-center"><%= Invitation.model_name.human(count: 2) %></h2>
+      <h2 class="border-bottom border-dark mb-3"><%= Invitation.model_name.human(count: 2) %></h2>
 
       <div class="nav-scroller border-bottom mb-4">
         <nav class="d-flex nav nav-underline">          
@@ -19,7 +19,7 @@
           <p class="text-center"> <%= t('.empty_state') %> </p>
         <% else %>
           <% @invitations.each do |invitation| %>
-            <div class="col-md-5 p-4 m-4 rounded border w-25">
+            <div class="col-md-5 p-4 m-4 rounded border w-25 bg-white">
               <%= link_to invitation_path(invitation), class: "text-decoration-none" do %>
                 <div class="card-body">
                   <h4 class="text-break text-dark"><%= invitation.project_title %></h4>
diff --git a/app/views/invitations/show.html.erb b/app/views/invitations/show.html.erb
index e6c2f0a..d3d18be 100644
--- a/app/views/invitations/show.html.erb
+++ b/app/views/invitations/show.html.erb
@@ -1,7 +1,7 @@
-<h2 class="text-center"><%= Invitation.model_name.human %></h2>
 
 <div class="col-md-6 offset-md-3">
-  <div class="card shadow rounded">
+  <div class="card text-center rounded">
+    <h2 class="text-center"><%= Invitation.model_name.human %></h2>
     <div class="card-body">
       <h4 class="text-break text-primary"><%= @invitation.project_title %></h4>
       
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 4b08d24..daa1188 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,9 +1,9 @@
+<h2 class="notifications border-bottom border-dark"><%= Notification.model_name.human(count: 2) %></h2>
 <div class="container d-flex flex-column align-items-center">
-  <h2><%= Notification.model_name.human(count: 2) %></h2>
   <% if @notifications.any? %>
     <ul class="list-group list-group-action">
       <% @notifications.each do |notification| %>
-        <li class="list-group-item <%= 'list-group-item-primary' if notification.seen? %> ">
+        <li class="list-group-item <%= 'list-group-item-secondary' if notification.seen? %> ">
           <%= button_to notification_path(notification), method: :patch, class: 'btn btn-link' do %>
             <%= render( partial: "#{notification.notifiable.class.name.downcase}",
                         locals: { notification: notification } ) %>
diff --git a/app/views/profile/_profile.html.erb b/app/views/profile/_profile.html.erb
deleted file mode 100644
index fcd5fec..0000000
--- a/app/views/profile/_profile.html.erb
+++ /dev/null
@@ -1,105 +0,0 @@
-<div>
-  <% user_is_owner = profile.user == current_user %>
-  <br>
-  <p><%= profile.user.email %></p>
-
-  <h5><%= profile.cover_letter %></h5><br>
-
-  <% if profile.personal_info[:visibility] || user_is_owner %>
-    <h3><%= PersonalInfo.model_name.human %></h3>
-    <%= render 'profile/personal_info', personal_info: personal_info, user_is_owner: user_is_owner %>
-  <% end %>
-
-  <%= link_to t('profiles.profile.edit_personal_info'), edit_user_profile_path, class:'btn btn-secondary' if user_is_owner %>
-
-  <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
-    <h3 class='mt-5'><%= ProfessionalInfo.model_name.human %></h3>
-  <% end %>
-
-  <p>
-    <%= link_to t('profiles.profile.add_professional_info'), new_user_profile_professional_info_path, class:'btn btn-primary' if user_is_owner %>
-  </p>
-  <% professional_infos.each do |professional_info| %>
-    <% if professional_info.visibility || user_is_owner %>
-      <h4>
-        <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
-      </h4>
-      <ul>
-        <li>
-          <%= ProfessionalInfo.human_attribute_name(:current_job) %>: <%= t(professional_info.current_job) %>
-        </li>
-        <li>
-          <%= ProfessionalInfo.human_attribute_name(:position) %>: <%= professional_info.position %>
-        </li>
-        <li>
-          <%= ProfessionalInfo.human_attribute_name(:description) %>: <%= professional_info.description %>
-        </li>
-        <li>
-          <%= ProfessionalInfo.human_attribute_name(:start_date) %>: <%= l professional_info.start_date if professional_info.start_date%>
-        </li>
-        <li>
-          <%= ProfessionalInfo.human_attribute_name(:end_date) %>: <%= l professional_info.end_date if professional_info.end_date %>
-        </li>
-        <% if user_is_owner %>
-          <li>
-            <%= ProfessionalInfo.human_attribute_name(:visibility) %>: <%= t(professional_info.visibility) %>
-          </li>
-        <% end %>
-      </ul>
-    <% end %>
-    <p>
-      <%= link_to t('profiles.profile.edit_professional_info'), edit_professional_info_path(professional_info), class:'btn btn-secondary' if user_is_owner %>
-    </p>
-  <% end %>
-
-  <% if profile.education_infos.visibles_list.any? || user_is_owner %>
-    <h3 class='mt-5'><%= EducationInfo.model_name.human %></h3>
-  <% end %>
-
-  <p>
-    <%= link_to t('profiles.profile.add_educational_info'), new_user_profile_education_info_path, class:'btn btn-primary' if user_is_owner %>
-  </p>
-    <% profile.education_infos.each do |education_info| %>
-      <% if education_info.visibility || user_is_owner %>
-        <h4>
-          <%= EducationInfo.human_attribute_name(:institution) %>: <%= education_info.institution %>
-        </h4>
-        <ul>
-          <li>
-            <%= EducationInfo.human_attribute_name(:course) %>: <%= education_info.course %>
-          </li>
-          <li>
-            <%= EducationInfo.human_attribute_name(:start_date) %>: <%= l education_info.start_date if education_info.start_date%>
-          </li>
-          <li>
-            <%= EducationInfo.human_attribute_name(:end_date) %>: <%= l education_info.end_date if education_info.end_date %>
-          </li>
-          <% if user_is_owner %>
-            <li>
-              <%= EducationInfo.human_attribute_name(:visibility) %>: <%= t(education_info.visibility) %>
-            </li>
-          <% end %>
-        </ul>
-      <% end %>
-      <p>
-        <%= link_to t('profiles.profile.edit_educational_info'), edit_education_info_path(education_info), class:'btn btn-secondary' if user_is_owner %>
-      </p>
-    <% end %>
-</div>
-<div id='profile-job-categories'>
-  <% if profile.profile_job_categories.any? || user_is_owner %>
-    <h3><%= t('content.section_title') %></h3>
-  <% end %>
-
-  <%= link_to t('links.new_profile_job_category_path'), new_profile_job_category_path, class:'btn btn-primary' if user_is_owner %>
-  <div class='mt-2'>
-    <% profile.profile_job_categories.each do |profile_job_category| %>
-      <p><strong><%= profile_job_category.job_category.name %></strong></p>
-      <% if profile_job_category.description.present? %>
-        <p><%= profile_job_category.description %></p>
-      <% else %>
-        <p><%= t('content.profile_job_category_without_description') %></p>
-      <% end %>
-    <% end %>
-  </div>
-</div>
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 40bbd77..b35c450 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -1,5 +1,5 @@
 <div class="container" id="vue-projects-app">
-  <h2 class="text-center"><%= t('.index_title') %> </h2>
+  <h2 class="project-search border-bottom border-dark"><%= t('.index_title') %> </h2>
 
   <div v-if="freeUser" class="text-center become-premium-div mt-5">
     <h2 class="become-premium-text"><%= t('subscriptions.become') %> <%= link_to t('subscriptions.subscriber'), subscriptions_path %> <%= t('subscriptions.see_listed_projects') %></h2 class="become-premium-text">
@@ -10,7 +10,7 @@
   </div>
 
   <div class="row" v-else>
-    <div class="col-md-4 mx-auto mt-3">
+    <div class="col-md-4 project-search mt-3">
       <label class="form-label visually-hidden" for="searchText"><%= t('.search') %></label>
       <input class="form-control" v-model="searchText" type="text" name="searchText" id="searchText" placeholder="Digite sua pesquisa">
 
@@ -46,7 +46,7 @@
     </h3>
 
     <div v-else>
-      <div class="mt-5 border-top w-50 mx-auto" v-for="project in filteredProjects" :key="project.id">
+      <div class="mt-5 bg-white rounded px-3 pb-3 border w-50 mx-auto" v-for="project in filteredProjects" :key="project.id">
         <h3 class="mt-3">{{ project.title }}</h3>
         <p><%= t('projects.attributes.description') %>: {{ project.description }}</p>
         <p><%= t('projects.attributes.category') %>: {{ project.category }}</p>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 23443c1..3249900 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -17,9 +17,26 @@
           </div>
         <% end %>
       </div>
+      <div class="d-flex align-items-center gap-5 w-25 justify-content-center">
+        <%= link_to notifications_path, class: 'd-flex flex-column text-decoration-none' do %>
+          <div class="badge-container">
+            <span class="badge bg-primary mx-auto notification-badge"><%= current_user.profile.notifications.unseen.count %></span>
+          </div>
+          <%= image_tag 'bell', class: 'mx-auto', width: '25rem' %>
+          <div>
+            <p class="text-muted fw-semibold"><%= Notification.model_name.human(count: 2) %></p>
+          </div>
+        <% end %>
+        <div>
+          <%= link_to new_post_path, class: 'd-flex flex-column text-decoration-none', data: { turbo: false } do %>
+            <%= image_tag 'newpost', class: 'mx-auto', width: '25rem' %>
+            <p class="text-muted fw-semibold text-justify"><%= t('posts.new.new_post')%></p>
+          <% end %>
+        </div>
+      </div>
     <% end %>
     <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ms-auto">
+      <ul class="navbar-nav">
         <li class="nav-item dropdown drop-menu">
         <% if user_signed_in? %>
           <button class="btn dropdown-toggle mx-5" data-bs-toggle="dropdown" aria-expanded="false">
@@ -36,16 +53,6 @@
             <li class="dropdown-item">
               <%= link_to Invitation.model_name.human(count: 2), invitations_path, class: 'nav-link' %>
             </li>
-            <li class="dropdown-item">
-              <%= link_to notifications_path, class: 'nav-link' do %>
-                <%= Notification.model_name.human(count: 2) %>
-                <% if current_user.profile.notifications.unseen.count > 0 %>
-                  <span class="badge bg-primary">
-                    <%= current_user.profile.notifications.unseen.count %>
-                  </span>
-                <% end %>
-              <% end %>
-            </li>
             <% if current_user.admin? %>
               <li class="dropdown-item" href="#">
                 <%= link_to JobCategory.model_name.human(count: 2), job_categories_path, class: 'nav-link' %>
@@ -55,9 +62,6 @@
                 <%= link_to Report.model_name.human(count: 2), reports_path, class: 'nav-link' %>
               </li>
             <% end %>
-            <li class="dropdown-item" href="#">
-              <%= link_to t('posts.new.new_post'), new_post_path, class: 'nav-link', data: { turbo: false }  %>
-            </li>
             <li class="dropdown-item" href="#">
               <%= link_to t('settings.index.settings'), profile_settings_path(current_user.profile), class: 'nav-link' %>
             </li>
diff --git a/app/views/subscriptions/index.html.erb b/app/views/subscriptions/index.html.erb
index 2940330..e132f33 100644
--- a/app/views/subscriptions/index.html.erb
+++ b/app/views/subscriptions/index.html.erb
@@ -1,8 +1,7 @@
-<h2 class="text-center"><%= Subscription.model_name.human %></h2>
-
-<div class="container justify-items-center text-center mt-5">
+<h2 class="page-title subscription-title border-bottom border-dark pb-2"><%= Subscription.model_name.human %></h2>
+<div class="container justify-items-center text-center mt-3">
   <div class="d-flex row gap-5 justify-content-center">
-    <div class="card column col-4 shadow">
+    <div class="card column col-4 bg-white">
       <div id="free-account-div" class="card-body d-flex flex-column justify-content-between">
         <div>
           <h3 class="card-title"><%= t('.free_account') %></h3>
@@ -15,14 +14,14 @@
         </div>
 
         <% if current_user.subscription.inactive? %>
-          <div class="card-footer">
+          <div class="card-footer bg-success text-white">
             <h4><%= t('.current_tier') %></h4>
           </div>
         <% end %>
       </div>
     </div>
 
-    <div class="card column col-4 shadow">
+    <div class="card column col-4 bg-white">
       <div id="premium-account-div" class="card-body d-flex flex-column justify-content-between">
         <h3 class="card-title"><%= t('.premium_account') %></h3>
 
@@ -36,7 +35,7 @@
         <% if current_user.subscription.inactive? %>
           <%= button_to t('.subscribe_btn'), subscription_path(current_user.subscription), method: :patch, class: "btn btn-primary btn-lg mt-4" %>
         <% else %>
-          <div class="card-footer">
+          <div class="card-footer bg-success text-white">
             <h4><%= t('.current_tier') %></h4>
           </div>
         <% end %>
diff --git a/config/locales/models/posts.pt-BR.yml b/config/locales/models/posts.pt-BR.yml
index 00dcc55..c604966 100644
--- a/config/locales/models/posts.pt-BR.yml
+++ b/config/locales/models/posts.pt-BR.yml
@@ -62,7 +62,7 @@ pt-BR:
     edit:
       edit_post: Editar Publicação
     new:
-      new_post: Criar Nova Publicação
+      new_post: Criar Publicação
       new_post_home: Crie a sua publicação
     share: Compartilhar
     helpers:
diff --git a/spec/system/education_info/user_edits_education_info_spec.rb b/spec/system/education_info/user_edits_education_info_spec.rb
index 1dc92fc..41dd54f 100644
--- a/spec/system/education_info/user_edits_education_info_spec.rb
+++ b/spec/system/education_info/user_edits_education_info_spec.rb
@@ -8,7 +8,7 @@
 
       login_as user
       visit profile_path(user.profile)
-      click_on 'Editar Formação Acadêmica'
+      click_on(id: 'edit-education-info')
       fill_in 'Instituição', with: 'UFJF'
       fill_in 'Curso', with: 'Bacharelado em Ciência da Computação'
       fill_in 'Início', with: '2012-12-25'
@@ -30,7 +30,7 @@
 
       login_as user
       visit profile_path(user.profile)
-      click_on 'Editar Formação Acadêmica'
+      click_on(id: 'edit-education-info')
       fill_in 'Instituição', with: ''
       fill_in 'Curso', with: ''
       fill_in 'Início', with: ''
diff --git a/spec/system/personal_info/user_edits_personal_info_spec.rb b/spec/system/personal_info/user_edits_personal_info_spec.rb
index c85269a..9c23dfc 100644
--- a/spec/system/personal_info/user_edits_personal_info_spec.rb
+++ b/spec/system/personal_info/user_edits_personal_info_spec.rb
@@ -11,7 +11,7 @@
       visit root_path
       click_button class: 'dropdown-toggle'
       click_on user_name
-      click_on 'Editar Informações Pessoais'
+      click_on(id: 'edit-personal-info')
 
       expect(page).to have_current_path edit_user_profile_path
       expect(page).not_to have_link 'Preencher Depois', href: root_path
diff --git a/spec/system/posts/user_creates_post_spec.rb b/spec/system/posts/user_creates_post_spec.rb
index cd0bb75..6ebc5d4 100644
--- a/spec/system/posts/user_creates_post_spec.rb
+++ b/spec/system/posts/user_creates_post_spec.rb
@@ -16,7 +16,7 @@
       click_button class: 'dropdown-toggle'
 
       within 'nav' do
-        click_on 'Criar Nova Publicação'
+        click_on 'Criar Publicação'
       end
 
       fill_in 'Título da Publicação', with: 'Olá Mundo!'
diff --git a/spec/system/professional_info/user_edits_professional_info_spec.rb b/spec/system/professional_info/user_edits_professional_info_spec.rb
index d7db6b6..4e462f7 100644
--- a/spec/system/professional_info/user_edits_professional_info_spec.rb
+++ b/spec/system/professional_info/user_edits_professional_info_spec.rb
@@ -8,7 +8,7 @@
 
       login_as user
       visit profile_path(user.profile)
-      click_on 'Editar Experiência Profissional'
+      click_on(id: 'edit-professional-info')
 
       expect(page).to have_content 'Experiência Profissional'
 
diff --git a/spec/system/reports/admin_sees_reports_listing_page_spec.rb b/spec/system/reports/admin_sees_reports_listing_page_spec.rb
index 8fd5b7b..b13dfa1 100644
--- a/spec/system/reports/admin_sees_reports_listing_page_spec.rb
+++ b/spec/system/reports/admin_sees_reports_listing_page_spec.rb
@@ -37,14 +37,16 @@
     click_on 'Conteúdo removido'
 
     expect(page).not_to have_content report.truncated_message
-    expect(page).not_to have_content 'Discurso de ódio'
-    expect(page).not_to have_content 'Publicação'
-    expect(page).to have_content other_report.truncated_message
-    expect(page).to have_content 'Abuso/Perseguição'
-    expect(page).to have_content 'Comentário'
-    expect(page).not_to have_content another_report.truncated_message
-    expect(page).not_to have_content 'Spam'
-    expect(page).not_to have_content 'Perfil'
+    within 'main' do
+      expect(page).not_to have_content 'Discurso de ódio'
+      expect(page).not_to have_content 'Publicação'
+      expect(page).to have_content other_report.truncated_message
+      expect(page).to have_content 'Abuso/Perseguição'
+      expect(page).to have_content 'Comentário'
+      expect(page).not_to have_content another_report.truncated_message
+      expect(page).not_to have_content 'Spam'
+      expect(page).not_to have_content 'Perfil'
+    end
     expect(page).to have_current_path reports_path({ filter: 'granted' })
   end
 

From 39a08b8dd1e218731d808f596839ac6291632ab1 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 19:30:39 -0300
Subject: [PATCH 6/8] Fix/arruma alguns bugs de layout e melhora algumas views

Co-authored-by: Rodrigo Gyodai <GyodaiDDA@users.noreply.github.com>
---
 app/assets/stylesheets/layout.scss            |  4 +-
 app/assets/stylesheets/navbar.scss            |  3 +-
 .../connections/_connection_cards.html.erb    |  2 +-
 app/views/home/index.html.erb                 |  2 +-
 app/views/posts/show.html.erb                 | 14 ++-
 app/views/profiles/_profile_details.html.erb  | 96 +++++++++----------
 app/views/profiles/show.html.erb              |  6 +-
 app/views/shared/_navbar.html.erb             | 22 +++--
 .../connections/user_views_followers_spec.rb  |  3 -
 .../user_views_following_users_spec.rb        |  3 -
 10 files changed, 80 insertions(+), 75 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 5b3eba2..d1c3a24 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -98,6 +98,6 @@ input[type="checkbox"]:checked {
 }
 
 .notifications{
-  margin-left: 21%;
-  margin-right: 21%;
+  margin-left: 21% !important;
+  margin-right: 21% !important;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index eec4b39..65d421b 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -21,5 +21,4 @@
 
 .badge-container{
   position: relative !important;
-}
-
+}
\ No newline at end of file
diff --git a/app/views/connections/_connection_cards.html.erb b/app/views/connections/_connection_cards.html.erb
index 4ba5742..1a84fa5 100644
--- a/app/views/connections/_connection_cards.html.erb
+++ b/app/views/connections/_connection_cards.html.erb
@@ -14,7 +14,7 @@
             <p class="card-text fw-bold"><%= job.position %> | <%= job.company %></p>
           <% end %>
         <% else %>
-          <p class="card-text fw-bold"><%= t Profile.human_attribute_name("work_status.#{connection_profile.work_status}") %></p>
+          <p class="card-text fw-bold"><%= connection_profile.cover_letter%></p>
         <% end %>
     </div>
   </div>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 51ad68e..d44588b 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -56,7 +56,7 @@
           <% end %>
         </div>
         <div>
-          <h3 class="text-center home-cards-title bg-white text-center py-4 my-0 rounded-1 mt-4">Pode te interessar</h3>
+          <h3 class="text-center home-cards-title bg-white text-center py-4 my-0 rounded-1 mt-4">Publicado recentemente</h3>
           <div class="d-flex flex-column">
             <% get_tags(10).uniq.each do |tag| %>
               <%= link_to searches_path(query: "##{tag}"), class:"bg-white text-center home-cards my-0 py-0 rounded-1" do %>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
index 81d49d1..60ccb79 100644
--- a/app/views/posts/show.html.erb
+++ b/app/views/posts/show.html.erb
@@ -6,7 +6,7 @@
         <div class="d-flex flex-column">
           <%= link_to t('edit_btn'), edit_post_path(@post), class: 'btn btn-primary py-0', data: { turbo: false } %>
           <%= button_to t('publish_btn'), publish_post_path(@post), method: :patch,
-            class: 'btn btn-primary', data: { turbo: false } if @post.scheduled? %>
+            class: 'btn btn-primary py-0', data: { turbo: false } if @post.scheduled? %>
           <span><%= Post.human_attribute_name @post.status %></span>
         </div>
       <% else %>
@@ -95,7 +95,17 @@
   </div>
   <% @post.comments.each do |comment| %>
     <% if comment.removed?%>
-      <p><%= t('comments.removed_content') %> </p>
+    <footer class="mx-3">
+      <h5>
+        <% if comment.user.profile.photo.present? %>
+          <%= image_tag comment.user.profile.photo, alt: 'Foto de perfil', width: '35rem', class: 'profile-picture rounded-circle mx-3' %>
+        <% else %>
+          <%= image_tag 'default_portfoliorrr_photo.png', alt: 'Foto de perfil', width: '35rem', class: 'profile-picture rounded-circle mx-3' %>
+        <% end %>
+        <%= link_to comment.user.full_name, comment.user.profile %> <%= '(autor)' if comment.user == @post.user %>
+      </h5>
+      <p class="comment-message"><%= t('comments.removed_content') %> </p>
+    </footer>
     <% else %>
       <div class="card-body" id="<%= dom_id(comment) %>">
         <footer>
diff --git a/app/views/profiles/_profile_details.html.erb b/app/views/profiles/_profile_details.html.erb
index 693093b..26cc722 100644
--- a/app/views/profiles/_profile_details.html.erb
+++ b/app/views/profiles/_profile_details.html.erb
@@ -1,15 +1,14 @@
 <div>
   <% user_is_owner = profile.user == current_user %>
   <br>
-  <div class="border p-3 rounded mb-3 bg-white">
-    <div class="d-flex gap-1">
-      <%= image_tag 'about-icon', width: '23rem', class: 'mb-2'  %>
-      <h4><%= Profile.human_attribute_name(:cover_letter) %></h4>
-    </div>
-    <p class="profile-info-content pb-0 mb-0"><%= profile.cover_letter %></p>
-  </div>
-
   <% if profile.personal_info[:visibility] || user_is_owner %>
+    <div class="border p-3 rounded mb-3 bg-white">
+      <div class="d-flex gap-1">
+        <%= image_tag 'about-icon', width: '23rem', class: 'mb-2'  %>
+        <h4><%= Profile.human_attribute_name(:cover_letter) %></h4>
+      </div>
+      <p class="profile-info-content pb-0 mb-0"><%= profile.cover_letter %></p>
+    </div>
     <div class="border p-3 rounded mb-3 bg-white">
       <div class="d-flex gap-1">
         <%= image_tag 'person-fill', width: '28rem', class: 'mb-2' %>
@@ -24,55 +23,54 @@
     </div>
   <% end %>
 
-  <div class="border p-3 rounded mb-3 bg-white">
-    <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
+  <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
+    <div class="border p-3 rounded mb-3 bg-white">
       <div class="d-flex gap-1">
         <%= image_tag 'briefcase-solid', width: '24rem', class: 'mb-2 mx-1' %>
         <h3><%= ProfessionalInfo.model_name.human %></h3>
       </div>
-    <% end %>
-    
-    <p>
-      <%= link_to 'Adicionar Experiência Profissional', new_user_profile_professional_info_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
-    </p>
-    <% professional_infos.each do |professional_info| %>
-      <% if professional_info.visibility || user_is_owner %>
-        <% if user_is_owner %>
-          <li class="fs-5 mb-3">
-            <span class="fw-semibold"><%= t(professional_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
-            <% if user_is_owner %>
-              <%= link_to edit_professional_info_path(professional_info), id: 'edit-professional-info', class:'edit-button btn btn-outline-info border-0 p-2 rounded-5' do %>
-                <%= image_tag 'pencil-square', width: '20 rem' %>
+      <p>
+        <%= link_to 'Adicionar Experiência Profissional', new_user_profile_professional_info_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
+      </p>
+      <% professional_infos.each do |professional_info| %>
+        <% if professional_info.visibility || user_is_owner %>
+          <% if user_is_owner %>
+            <li class="fs-5 mb-3">
+              <span class="fw-semibold"><%= t(professional_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+              <% if user_is_owner %>
+                <%= link_to edit_professional_info_path(professional_info), id: 'edit-professional-info', class:'edit-button btn btn-outline-info border-0 p-2 rounded-5' do %>
+                  <%= image_tag 'pencil-square', width: '20 rem' %>
+                <% end %>
               <% end %>
-            <% end %>
-          </li>
+            </li>
+          <% end %>
+          <div>
+            <h5 class="fw-semibold profile-info-title"><%= ProfessionalInfo.human_attribute_name(:position) %>: <%= professional_info.position %></h5>
+            <h6 class="profile-info-title">
+              <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
+            </h6>
+          </div>
+          <ul>
+            <li>
+              <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:current_job) %></span>: <%= t(professional_info.current_job) %>
+            </li>
+            <li>
+              <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:description) %></span>: <%= professional_info.description %>
+            </li>
+            <li>
+              <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:start_date) %></span>: <%= l professional_info.start_date if professional_info.start_date%>
+            </li>
+            <li>
+              <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:end_date) %></span>: <%= l professional_info.end_date if professional_info.end_date %>
+            </li>
+          </ul>
         <% end %>
-        <div>
-          <h5 class="fw-semibold profile-info-title"><%= ProfessionalInfo.human_attribute_name(:position) %>: <%= professional_info.position %></h5>
-          <h6 class="profile-info-title">
-            <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
-          </h6>
-        </div>
-        <ul>
-          <li>
-            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:current_job) %></span>: <%= t(professional_info.current_job) %>
-          </li>
-          <li>
-            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:description) %></span>: <%= professional_info.description %>
-          </li>
-          <li>
-            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:start_date) %></span>: <%= l professional_info.start_date if professional_info.start_date%>
-          </li>
-          <li>
-            <span class="fw-semibold"><%= ProfessionalInfo.human_attribute_name(:end_date) %></span>: <%= l professional_info.end_date if professional_info.end_date %>
-          </li>
-        </ul>
       <% end %>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
   
-  <div class="border py-1 px-2 rounded mb-3 bg-white">
     <% if profile.education_infos.visibles_list.any? || user_is_owner %>
+    <div class="border py-1 px-2 rounded mb-3 bg-white">
       <div class="d-flex gap-2">
         <%= image_tag 'user-graduate-solid', width: '24rem', class: 'mb-2 mx-1' %>
         <h3><%= EducationInfo.model_name.human %></h3>
@@ -111,8 +109,8 @@
       <% end %>
   </div>
 </div>
-<div id='profile-job-categories' class="border py-1 px-2 rounded mb-3 bg-white">
   <% if profile.profile_job_categories.any? || user_is_owner %> 
+  <div id='profile-job-categories' class="border py-1 px-2 rounded mb-3 bg-white">
     <div class="d-flex gap-1">
       <%= image_tag 'person-working', width: '28rem', class: 'mb-2 mx-1' %>
       <h3><%= t('content.section_title') %></h3>
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index 1a67e8d..891b345 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -3,7 +3,9 @@
   <% if @profile.active? %>
     <% if @posts.pinned.any? %>
       <div id="fixed">
-        <h2 id="post-list-title"><%= t('.highlight') %></h2>
+        <div class="mb-3 border-bottom border-dark">
+          <h2 id="post-list-title"><%= t('.highlight') %></h2>
+        </div
         <section>
           <%= render partial: 'posts/listing', locals: { posts: @posts.pinned } %>
         </section>
@@ -15,7 +17,7 @@
       </div>
       <% published_posts = @profile.user.posts.published %>
       
-      <% if published_posts.count - @profile.user.posts.pinned.count < 1 %>
+      <% if published_posts.count - @profile.user.posts.published.pinned.count < 1 %>
         <p><%= t('.nothing_here') %> <br> <%= t('.new_posts') %> :)</p>
       <% end %>
 
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 3249900..9029c30 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -1,9 +1,11 @@
 <nav class="navbar navbar-expand-lg border-bottom bg-white">
   <div class="container-fluid">
     <div class="w-25 mx-3">
-      <%= link_to root_path do %>
-        <%= image_tag 'logo.svg', class:'w-50' %>
-      <% end %>
+      <div>
+        <%= link_to root_path do %>
+          <%= image_tag 'logo.svg', class:'w-50' %>
+        <% end %>
+      </div>
     </div>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false">
       <span class="navbar-toggler-icon"></span>
@@ -81,14 +83,14 @@
           </ul>
         </li>
         <% else %>
-          <li class="nav-item">
-            <%= link_to t('sign_up'), new_user_registration_path, class: 'btn btn-secondary btn-lg mx-3' %>
-          </li>
-          <li class="nav-item">
-            <%= link_to t('log_in'), new_user_session_path, class: 'btn btn-primary btn-lg mx-3' %>
-          </li>
-        <% end %>
       </ul>
+      <% end %>
     </div>
+    <% if !user_signed_in? %>
+      <div class="nav-button-control d-flex justify-content-end">
+        <%= link_to t('sign_up'), new_user_registration_path, class: 'btn btn-secondary btn-lg mx-3' %>
+        <%= link_to t('log_in'), new_user_session_path, class: 'btn btn-primary btn-lg mx-3' %>
+      </div>
+    <% end %>
   </div>
 </nav>
diff --git a/spec/system/connections/user_views_followers_spec.rb b/spec/system/connections/user_views_followers_spec.rb
index 223e4fd..14e5290 100644
--- a/spec/system/connections/user_views_followers_spec.rb
+++ b/spec/system/connections/user_views_followers_spec.rb
@@ -32,13 +32,10 @@
       expect(page).not_to have_link first_followed.full_name
 
       expect(page).to have_link second_followed.full_name, href: profile_path(second_followed.profile)
-      expect(page).to have_content 'Disponível Para Trabalho'
 
       expect(page).to have_link third_followed.full_name, href: profile_path(third_followed.profile)
-      expect(page).to have_content 'Indisponível Para Trabalho'
 
       expect(page).to have_link fourth_followed.full_name, href: profile_path(fourth_followed.profile)
-      expect(page).to have_content 'Dev Senior | Rebase'
     end
 
     it 'e deve estar logado' do
diff --git a/spec/system/connections/user_views_following_users_spec.rb b/spec/system/connections/user_views_following_users_spec.rb
index d21543f..ca3dc57 100644
--- a/spec/system/connections/user_views_following_users_spec.rb
+++ b/spec/system/connections/user_views_following_users_spec.rb
@@ -32,13 +32,10 @@
     expect(page).not_to have_link first_follower.full_name
 
     expect(page).to have_link second_follower.full_name, href: profile_path(second_follower.profile)
-    expect(page).to have_content 'Disponível Para Trabalho'
 
     expect(page).to have_link third_follower.full_name, href: profile_path(third_follower.profile)
-    expect(page).to have_content 'Indisponível Para Trabalho'
 
     expect(page).to have_link fourth_follower.full_name, href: profile_path(fourth_follower.profile)
-    expect(page).to have_content 'Dev Senior | Rebase'
   end
 
   it 'e deve estar logado' do

From 89869dda52048f65f494430f72a419b902d62706 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 20:01:39 -0300
Subject: [PATCH 7/8] =?UTF-8?q?Style/melhora=20resolu=C3=A7=C3=A3o=20de=20?=
 =?UTF-8?q?fotos=20de=20perfil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Rodrigo Gyodai <GyodaiDDA@users.noreply.github.com>
---
 app/assets/stylesheets/navbar.scss            |  4 +++
 .../connections/_connection_cards.html.erb    |  4 ++-
 app/views/home/index.html.erb                 | 12 ++++---
 app/views/posts/_form.html.erb                | 34 +++++++++++--------
 app/views/profiles/show.html.erb              |  5 +--
 app/views/shared/_navbar.html.erb             |  4 ++-
 6 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index 65d421b..53866d4 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -21,4 +21,8 @@
 
 .badge-container{
   position: relative !important;
+}
+
+.dropdown-profile-picture{
+  width: 5rem !important;
 }
\ No newline at end of file
diff --git a/app/views/connections/_connection_cards.html.erb b/app/views/connections/_connection_cards.html.erb
index 1a84fa5..7a948fc 100644
--- a/app/views/connections/_connection_cards.html.erb
+++ b/app/views/connections/_connection_cards.html.erb
@@ -2,7 +2,9 @@
   <div class="card-body row justify-content-center align-items-center">
     <div class="col-md-3 col-sm-3 profile-image">
       <% if connection_profile.photo.present? %>
-        <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
+        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+          <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'img-cover profile-picture rounded rounded-circle px-2' %>
+        </div>
       <% else %>
         <%= image_tag 'default_portfoliorrr_photo.png', width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
       <% end %>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index d44588b..b7dbb37 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -5,9 +5,11 @@
          <div class="border bg-white rounded mb-5 d-flex align-items-center justify-content-center page-header">
           <%= link_to current_user.profile, class: 'd-flex justify-content-center w-25' do %>
             <% if current_user.profile.photo.present? && current_user.profile.valid? %>
-              <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
+              <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-50 my-3">
+                <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'img-cover rounded-circle' %>
+              </div>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'rounded-circle my-3 w-50' %>
             <% end %>
           <% end %>
           <div>
@@ -43,9 +45,11 @@
             <div class="bg-white text-center home-cards my-0 py-0 rounded-1">
               <%= link_to profile_path(profile), class: 'row' do %>
                 <% if profile.photo.present? && profile.valid? %>
-                  <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-25">
+                    <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  </div>
                 <% else %>
-                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'rounded-circle mx-auto mt-2 col-md-4' %>
                 <% end %>
                 <div class="col-md-8 mt-4">
                   <h5><%= profile.full_name %></h5>
diff --git a/app/views/posts/_form.html.erb b/app/views/posts/_form.html.erb
index f9a9503..e4948e7 100644
--- a/app/views/posts/_form.html.erb
+++ b/app/views/posts/_form.html.erb
@@ -9,21 +9,27 @@
     <%= f.rich_text_area :content, id: 'conteudo', class: 'form-control' %>
   </div>
 
-  <div class="form-group my-3">
-    <%= f.label :status_published, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'published', class: 'me-2 form-check-input' %> <br>
-
-    <%= f.label :status_draft, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'draft', class:'me-2 form-check-input' %> <br>
-
-    <%= f.label :status_archived, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'archived', class:'me-2 form-check-input' %> <br>
+  <div class="form-group my-3 d-flex flex-column">
+    <div>
+      <%= f.radio_button :status, 'published', class: 'me-2 form-check-input' %>
+      <%= f.label :status_published, class: 'form-check-label' %>
+    </div>
+    <div>
+      <%= f.radio_button :status, 'draft', class:'me-2 form-check-input' %>
+      <%= f.label :status_draft, class: 'form-check-label' %>
+    </div>
+    <div>
+      <%= f.radio_button :status, 'archived', class:'me-2 form-check-input' %>
+      <%= f.label :status_archived, class: 'form-check-label' %>
+    </div>
     
-    <% if !@post.published? || request.path == new_post_path %>
-      <%= f.label :status_scheduled, class: 'form-check-label' %>
-      <%= f.radio_button :status, 'scheduled', class: 'me-2 form-check-input mb-3' %>
-      <%= f.datetime_field :published_at, class: 'form-control w-25' %>
-    <% end %>
+    <div>
+      <% if !@post.published? || request.path == new_post_path %>
+        <%= f.radio_button :status, 'scheduled', class: 'me-2 form-check-input mb-3' %>
+        <%= f.label :status_scheduled, class: 'form-check-label' %>
+        <%= f.datetime_field :published_at, class: 'form-control w-25' %>
+      <% end %>
+    </div>
   </div>
 
   <div class="form-group">
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index 891b345..f8e248e 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -25,7 +25,6 @@
         <%= render partial: 'posts/listing', locals: { posts: @posts.unpinned.order(created_at: :desc) } %>
       </section>
     </div>
-
   </div>
 
   <div class="col-md-5">
@@ -34,7 +33,9 @@
         <div class="w-100">
           <div class="bg-primary mb-4 rounded-top d-flex flex-column profile-header">
             <div class="profile-card-body">
-              <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+              <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-25 mx-auto">
+                <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+              </div>
               <h2><%= @user.full_name %></h2>
               <p><%= @user.email %></p>
             </div>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 9029c30..156a684 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -43,7 +43,9 @@
         <% if user_signed_in? %>
           <button class="btn dropdown-toggle mx-5" data-bs-toggle="dropdown" aria-expanded="false">
             <% if current_user.profile.photo_attachment %>
-              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
+            <div class="dropdown-profile-picture ratio ratio-1x1 rounded-circle overflow-hidden">
+              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'img-cover rounded rounded-circle' %>
+            </div>
             <% else %>
               <%= image_tag 'default_portfoliorrr_photo.png', width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% end %>

From 5e3e6b86c63f12b49861dc354eb3b9037a16e8e2 Mon Sep 17 00:00:00 2001
From: Gabriel Manika Koeb <gmkoeb@gmail.com>
Date: Thu, 15 Feb 2024 21:58:34 -0300
Subject: [PATCH 8/8] Style/arruma padding de algumas divs do show de perfil

---
 app/views/profiles/_profile_details.html.erb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/profiles/_profile_details.html.erb b/app/views/profiles/_profile_details.html.erb
index 26cc722..73b62e9 100644
--- a/app/views/profiles/_profile_details.html.erb
+++ b/app/views/profiles/_profile_details.html.erb
@@ -70,7 +70,7 @@
   <% end %>
   
     <% if profile.education_infos.visibles_list.any? || user_is_owner %>
-    <div class="border py-1 px-2 rounded mb-3 bg-white">
+    <div class="border p-3 rounded mb-3 bg-white">
       <div class="d-flex gap-2">
         <%= image_tag 'user-graduate-solid', width: '24rem', class: 'mb-2 mx-1' %>
         <h3><%= EducationInfo.model_name.human %></h3>
@@ -110,7 +110,7 @@
   </div>
 </div>
   <% if profile.profile_job_categories.any? || user_is_owner %> 
-  <div id='profile-job-categories' class="border py-1 px-2 rounded mb-3 bg-white">
+  <div id='profile-job-categories' class="border p-3 rounded mb-3 bg-white">
     <div class="d-flex gap-1">
       <%= image_tag 'person-working', width: '28rem', class: 'mb-2 mx-1' %>
       <h3><%= t('content.section_title') %></h3>
@@ -118,7 +118,7 @@
   <% end %> 
 
   <%= link_to t('links.new_profile_job_category_path'), new_profile_job_category_path, class:'btn btn-primary rounded-5 mt-3' if user_is_owner %>
-  <div class='mt-2'>
+  <div class='mt-2 mx-4'>
     <% profile.profile_job_categories.each do |profile_job_category| %>
       <p><strong><%= profile_job_category.job_category.name %></strong></p>
       <% if profile_job_category.description.present? %>