Style/identidade visual

app/assets/stylesheets/application.bootstrap.scss

@@ -18,109 +18,3 @@ $primary: #a130fd;
 @import 'posts.scss';
 @import 'profile.scss';
 @import 'layout.scss';
-
-body{
-  min-width: 400px;
-}
-
-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);
-}
-
-.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;
-}
-
-.comment-message, .reply-form{
-  margin-left: 5.2rem !important;
-}
-
-.comment-actions{
-  margin-left: 5.0rem !important;
-}
-
-.reply-content{
-  margin-left: 4.5rem !important;
-}
-
-.reply-form{
-  min-width: 350px;
-}
-
-.reply-collapser{
-  margin-left: 4.8rem !important;
-  color: #065fd4 !important;
-  font-size: large;
-}
-
-.reply-content, .comment-message{
-  font-size: large;
-}

app/assets/stylesheets/layout.scss

@@ -1,5 +1,10 @@
+:root{
+  font-size: 0.8rem;
+}
+
 body{
   min-width: 400px;
+  background-color: #F6F7F8 !important;
 }
 
 ul{
@@ -26,3 +31,73 @@ input[type="checkbox"]:checked {
 .categories{
   width: 35% !important;
 }
+
+.most-followed-users{
+  size: 22rem;
+  margin-top: 0.15rem;
+}
+
+.home-cards-title{
+  margin-bottom: 2px !important;
+}
+
+.home-cards{
+  padding: 1rem !important;
+  margin-bottom: 2px !important;
+}
+
+.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;
+}
+
+.page-header{
+  margin: 0 -0.66rem 0 -0.66rem;
+}
+
+.search-result-title:hover{
+  text-decoration: underline !important;
+}
+
+.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% !important;
+  margin-right: 21% !important;
+}

app/assets/stylesheets/navbar.scss

@@ -8,4 +8,21 @@
 
 .dropdown-item:active {
   background-color: #9030df !important;
+}
+
+.personal-info-visibility{
+  list-style: disc !important;
+}
+
+.notification-badge{
+  position: absolute;
+  right: 5% !important;
+}
+
+.badge-container{
+  position: relative !important;
+}
+
+.dropdown-profile-picture{
+  width: 5rem !important;
 }

app/assets/stylesheets/posts.scss

@@ -5,4 +5,49 @@
 
 .trix-content{
   color: rgb(10, 10, 10);
+  text-align: left !important;
+}
+
+.post-title{
+  font-size: 1.8rem;
+}
+
+figure.attachment{
+  width: 50% !important;
+}
+
+.share-link{
+  width: 15rem;
+}
+
+.home-publication-button{
+  width: 25vw !important;
+  margin-right: 5rem;
+  text-align: left !important;
+}
+
+.comment-message, .reply-form{
+  margin-left: 5.2rem !important;
+}
+
+.comment-actions{
+  margin-left: 5.0rem !important;
+}
+
+.reply-content{
+  margin-left: 4.5rem !important;
+}
+
+.reply-form{
+  min-width: 350px;
+}
+
+.reply-collapser{
+  margin-left: 4.8rem !important;
+  color: #065fd4 !important;
+  font-size: medium;
+}
+
+.reply-content, .comment-message{
+  font-size: small;
 }

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

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

app/views/connections/_connection_cards.html.erb

@@ -2,9 +2,11 @@
   <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' %>
+        <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: '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">
@@ -14,7 +16,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>