Syle/melhora layout de diversas páginas

Co-authored-by: Rodrigo Gyodai <[email protected]>

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%;
 }

app/assets/stylesheets/navbar.scss

@@ -12,4 +12,14 @@
 
 .personal-info-visibility{
   list-style: disc !important;
-}
+}
+
+.notification-badge{
+  position: absolute;
+  right: 5% !important;
+}
+
+.badge-container{
+  position: relative !important;
+}
+

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">

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>

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>
 

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 } ) %>

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>

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>

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 %>

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:

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: ''

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

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!'

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'