update colors body - refs #2681

assets/css/scss/_base.scss

@@ -128,13 +128,13 @@ hr {
 // ---------------------------------------------------------
 
 .main-content {
-  padding: 85px 20px 20px;
+  padding: 75px 20px 20px;
   min-height: calc(100vh - 61px);
   &.bg-content{
     background-color: $page-background;
   }
   .box-body{
-    background-color: $default-white;
+    background-color: transparent;
   }
   @include to($breakpoint-md) {
     padding: 85px 5px 5px;
@@ -258,8 +258,14 @@ footer {
   max-width: 100%;
   height: auto;
 }
-
 .card{
+  border: 0;
+  border-radius: 2px;
+  .card-body{
+    padding: 1.88rem 1.81rem;
+  }
+}
+.card-course{
   transform: perspective(1px) translateZ(0);
   transition-property: box-shadow;
   transition-duration: 0.3s;
@@ -273,27 +279,6 @@ footer {
       font-size: 12px;
     }
   }
-  /*&.card-line{
-    &:hover{
-      &:before{
-        transition: all .3s;
-        width: 100%;
-        left: 0;
-      }
-    }
-    &:before {
-      content: "";
-      margin: 0 auto;
-      width: 0;
-      height: 4px;
-      background: $default-link;
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      transition: all .3s;
-    }
-  }*/
   .category{
     position: absolute;
     border-radius: 10px;

assets/css/scss/_topbar.scss

@@ -1,7 +1,10 @@
 // ---------------------------------------------------------
 // TOPBAR USER
 // ---------------------------------------------------------
-
+.breadcrumb{
+  background-color: $breadcrumb-color;
+  padding: 0.5rem 0.75rem;
+}
 .header {
   background: $menu-background;
   border-bottom: 1px solid $border-color;
@@ -50,7 +53,7 @@
         }
 
         > a {
-          color: $default-text-color;
+          color: $header-link;
           display: block;
           line-height: $header-height;
           min-height: $header-height;
@@ -69,7 +72,7 @@
 
           &:hover,
           &:focus {
-            color: $default-dark;
+            color: $header-hover;
             text-decoration: none;
           }
 
@@ -126,6 +129,7 @@
     }
 
     .show {
+      font-size: 14px;
       .dropdown-menu {
         transform: scale(1, 1);
       }
@@ -150,6 +154,7 @@
             line-height: 1.5;
             min-height: auto;
             padding: 10px 15px;
+            color: $sidebar-link;
           }
         }
       }

assets/css/scss/_variables.scss

@@ -45,11 +45,13 @@ $default-link         : rgb(0, 153, 255);
 // ---------------------------------------------------------
 
 $page-background      : #f2f8f9;
-$menu-background      :linear-gradient(120deg, #00e4d0, #5983e8);
+$menu-background      :linear-gradient(120deg, #00a5e4, #4a71d0);
 $sidebar-link         : #54667A;
 $sidebar-bg           : #FFFFFF;
 $sidebar-focus        : rgba(0, 0, 0, 0.07);
-
+$header-link          : #FFFFFF;
+$header-hover         : #eddf0e;
+$breadcrumb-color     : #d2f1ff;
 // ---------------------------------------------------------
 // OTHERS
 // ---------------------------------------------------------

src/ThemeBundle/Resources/views/Index/page.html.twig

@@ -1,3 +1,6 @@
+{% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
+
+{% set content %}
 {% if is_granted('ROLE_ADMIN') and show_edit_page_link %}
     <div class="box-header">
         <div class="float-right">
@@ -10,3 +13,6 @@
 {% endif %}
 
 {{ sonata_page_render_container('content', page) }}
+
+{% endset %}
+{{ macro.panel('', '', content, '', '', '', '') }}

src/ThemeBundle/Resources/views/Layout/topbar.html.twig

@@ -109,12 +109,6 @@
 
             {% if app.user is not null and is_granted('IS_AUTHENTICATED_FULLY') %}
             <ul class="nav-right">
-                <li class="btn-padding">
-                    <a class="btn btn-light btn-create-three btn-sm" href="{{ path('legacy_main', { 'name' : '../user_portal.php'}) }}">
-                        <i class="fa fa-graduation-cap fa-lg" aria-hidden="true"></i>
-                        {{ "MyCourses"|trans }}
-                    </a>
-                </li>
 
                 <li class="btn-menu">
                     <a href="{{ url('legacy_main', { 'name' : 'calendar/agenda_js.php' }) }}">
@@ -134,20 +128,17 @@
                         <i class="far fa-envelope"></i>
                     </a>
                 </li>
+
                 <li class="dropdown">
-                    <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
-                        <div class="peer mR-10">
-                            <img
-                                class="rounded-circle"
-                                src="{{ url('legacy_public') ~ app.user.avatarOrAnonymous(32) }}"
-                                alt="{{ app.user.completeName }}"
-                            >
-                        </div>
-                        <div class="peer">
-                            <span class="fsz-sm">{{ app.user.completeName }}</span>
-                        </div>
+                    <a href="" class="dropdown-toggle" data-toggle="dropdown">
+                        <span class="profile-text">{{ app.user.firstname }} {{ app.user.lastname }}</span>
+                        <img
+                            class="rounded-circle"
+                            src="{{ url('legacy_public') ~ app.user.avatarOrAnonymous(32) }}"
+                            alt="{{ app.user.firstname }} {{ app.user.lastname }}"
+                        >
                     </a>
-                    <ul class="dropdown-menu fsz-sm">
+                    <ul class="dropdown-menu">
                         <li>
                             <a title="{{ "Inbox"|trans }}" class="dropdown-item"
                                href="{{ url('legacy_main', { 'name' : 'messages/inbox.php' }) }}">

src/ThemeBundle/Resources/views/Macros/box.html.twig

@@ -161,7 +161,7 @@
             {% if top_image %}
                 {{ top_image }}
             {% endif %}
-            <div class="card-body p-3">
+            <div class="card-body">
                 {% if title %}
                     <h5 class="card-title">{{ title }}</h5>
                 {% endif %}
@@ -183,7 +183,7 @@
 
 {% macro panel_course(id, header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
-        <div class="card card-{{ id }} mt-3 mb-3">
+        <div class="card-course card-{{ id }} mt-3 mb-3">
             {% if header %}
                 <div class="card-header"> {{ header }} </div>
             {% endif %}

src/ThemeBundle/Resources/views/News/slider.html.twig

@@ -1,4 +1,7 @@
+{% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
+
 {% autoescape false %}
+    {% set content %}
     <div class="box-header">
         {% if is_granted('ROLE_ADMIN') %}
             <div class="float-right">
@@ -42,4 +45,6 @@
             <span class="sr-only">Next</span>
         </a>
     </div>
+    {% endset %}
+    {{ macro.panel('', '', content, '', '', '', '') }}
 {% endautoescape %}

src/ThemeBundle/Resources/views/default/layout/hot_courses.html.twig

@@ -1,4 +1,6 @@
+{% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
 {% autoescape false %}
+
     {% if hot_courses is not null and hot_courses is not empty %}
         <script>
             $(document).ready(function () {
@@ -20,6 +22,7 @@
                 });
             });
         </script>
+        {% set content %}
         <div class="box-header">
             <h5>
                 {% if is_granted('ROLE_ADMIN') %}
@@ -37,5 +40,7 @@
         <div class="row">
             {% include '@ChamiloTheme/default/layout/hot_course_item.html.twig' %}
         </div>
+        {% endset %}
+        {{ macro.panel('', '', content, '', '', '', '') }}
     {% endif %}
 {% endautoescape %}