Tweak skills progress section in user dashboard

app/assets/stylesheets/components/dashboard/course_button.scss

@@ -0,0 +1,11 @@
+.course-button {
+  @include media-breakpoint-down(sm) {
+    margin-top: 20px;
+    text-align: center;
+  }
+
+  &--completed {
+    font-size: 1.2rem;
+    color: $button-primary;
+  }
+}

app/assets/stylesheets/components/dashboard/dashboard.scss

@@ -0,0 +1,75 @@
+#dashboard {
+  .profile-card {
+    margin-bottom: 100px;
+
+    .user-avatar {
+      width:100px;
+      height:100px;
+      margin: 0 auto 0 0;
+      background-color:#fff;
+      border-radius:50%;
+      overflow: hidden;
+
+      @include media-breakpoint-down(sm) {
+        margin: 0 auto;
+      }
+    }
+
+    .user-avatar-img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .welcome-text {
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+      color: $text-primary;
+      font-size: 24px;
+      margin-top: 20px;
+      padding-bottom: 18px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+
+      .learning-goal {
+        a {
+          text-decoration: underline;
+          color: $grey;
+        }
+        @include word-wrap();
+      }
+
+      .completion-date {
+        margin-top: 20px;
+      }
+    }
+
+    &.card-main .row {
+      align-items: center;
+    }
+  }
+
+  .skills-progress {
+    .skills-progress-heading {
+      margin-bottom: 100px;
+
+      &__sub-heading {
+        width: 60%;
+        margin: 0 auto;
+
+        @include media-breakpoint-down(md) {
+          width: 90%;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/components/dashboard/project_submissions.scss

@@ -0,0 +1,14 @@
+.project-submissions {
+  @include box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.3));
+  margin-top: 100px;
+  margin-bottom: 100px;
+  padding: 60px;
+
+  .solutions-heading {
+    margin-bottom: 70px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding: 30px;
+  }
+}

app/assets/stylesheets/components/dashboard/skill_progress.scss

@@ -0,0 +1,31 @@
+.skill-progress {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+
+  .course-info {
+    @include media-breakpoint-down(sm) {
+      text-align: center;
+    }
+  }
+
+  &__course-title {
+    font-size: 18px;
+
+    @include media-breakpoint-down(sm) {
+      text-align: center;
+      padding-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+
+  &__course-title, &__lessons-count {
+    color: $grey;
+  }
+
+  @include media-breakpoint-down(sm) {
+    .course-badge {
+      width: 80px;
+    }
+  }
+}

app/views/shared/_course_badge.html.erb

@@ -1,6 +1,6 @@
 <% unless user_signed_in? && course_started_by_user?(course, @user) %>
   <div class="course-badge">
-      <%= image_tag course.badge, alt: "#{course.title} badge", class: 'course-badge__image' %>
+    <%= image_tag course.badge, alt: "#{course.title} badge", class: 'course-badge__image' %>
   </div>
 <% else %>
   <div class="course-badge progress-circle" data-progress="<%= percentage_completed_by_user(course, @user) %>">

app/views/users/_course_buttons.html.erb

@@ -1,8 +1,12 @@
-<div class="col-12 col-md-3 course-progress-wrapper">
+<div class="col-12 col-md-4 course-button text-center">
   <% if course_completed_by_user?(course, user) %>
-    <span class="completed-text pale-grey bold text-uppercase">Completed</span>
+    <span class="course-button--completed pale-grey bold text-uppercase">
+      <i class="fa fa-check-circle-o"></i>&nbsp;Completed
+    </span>
   <% elsif course_started_by_user?(course, user) && !course_completed_by_user?(course, user) %>
-    <%= link_to 'Resume', lesson_path(next_lesson_to_complete(course, user.lesson_completions)), class: ' button button--primary' %>
+    <%= link_to 'Resume',
+      lesson_path(next_lesson_to_complete(course, user.lesson_completions)),
+      class: 'button button--primary' %>
   <% else %>
     <%= link_to 'Start', course_path(course), class: 'button button--primary' %>
   <% end %>

app/views/users/_skill_progress.html.erb

@@ -1,23 +1,14 @@
-<div class="container skill-progress">
+<div class="container">
   <div class="row">
     <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-      <div class="row align-items-center skill-progress-wrapper">
-        <div class="col-12 col-md-2 text-center">
+      <div class="row align-items-center skill-progress">
+        <div class="col-12 col-md-3 text-center">
           <%= render 'shared/course_badge', course: course, user: @user %>
         </div>
 
-        <div class="col-12 col-md-4">
-          <p class="text-uppercase course-title">
-            <span class="bold"><%= course.title %></span>
-          </p>
-        </div>
-
-        <div class="col-12 col-md-3 lessons-count-wrapper">
-          <p class="text-uppercase">
-            <span class="grey small lessons-count">
-              <%= course.lessons.size %> lessons
-            </span>
-          </p>
+        <div class="col-12 col-md-5 course-info text-uppercase">
+          <h2 class="skill-progress__course-title bold"><%= course.title %></h2>
+          <span class="skill-progress__lessons-count small"><%= course.lessons.size %> lessons</span>
         </div>
 
         <%= render 'users/course_buttons', course: course, user: @user %>