Fix part of oppia#18384: Updated CSS classes for learner dashboard re…

…design (oppia#20807) * Updated community-lessons (new progress) style * Updated home style * Resolved conflicts * Added large button class * Added small button and inverse color classes * Added selectors * Migrate classes to learner dashboard css and removed shared file * Removed shared file and references * Add transitions to buttons * Resolved conflicts * Attempt at fixing e2e issue for learnerFlow * Fixed karma errors * Removed comment and changed to community-lessons var
mon4our · Aug 27, 2024 · a51466d · a51466d
1 parent a876fd7
commit a51466d
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 60 deletions.
diff --git a/core/templates/components/summary-tile/learner-topic-summary-tile.component.html b/core/templates/components/summary-tile/learner-topic-summary-tile.component.html
@@ -94,6 +94,7 @@
     box-shadow: 0 2px 2px 0 #00000040;
     height: 220px;
     padding: 0;
+    transition: all 300ms ease-out;
     width: 210px;
   }
 

diff --git a/core/templates/components/summary-tile/lesson-card.component.html b/core/templates/components/summary-tile/lesson-card.component.html
@@ -32,11 +32,17 @@
     font-weight: 500;
     height: 36px;
     padding: 10px 8px;
+    transition: all 300ms ease-out;
     width: 122px;
   }
 
   .lesson-card-button:hover {
-    background-color: #00645c;
+    background-color: #cadbda;
+  }
+
+  .lesson-card-button:focus {
+    background-color: #429488;
+    border-color: #429488;
     color: #fff;
   }
 

diff --git a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html
@@ -37,6 +37,7 @@
     display: flex;
     height: 24px;
     justify-content: center;
+    transition: all 300ms ease-out;
     width: 24px;
   }
 

diff --git a/core/templates/pages/learner-dashboard-page/community-lessons-tab.component.css b/core/templates/pages/learner-dashboard-page/community-lessons-tab.component.css
@@ -309,22 +309,3 @@
     left: 595px;
   }
 }
-
-.oppia-learner-dash-greeting {
-  color: #00645c;
-  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
-  font-size: 32px;
-}
-
-.oppia-learner-dash-section {
-  background-color: #fff;
-  border-radius: .25em;
-  margin-bottom: 16px;
-  padding: 16px;
-}
-
-.oppia-learner-dash-section-heading {
-  color: #205d86;
-  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
-  font-size: 24px;
-}
diff --git a/core/templates/pages/learner-dashboard-page/home-tab.component.css b/core/templates/pages/learner-dashboard-page/home-tab.component.css
@@ -218,49 +218,20 @@
   }
 }
 
-.oppia-learner-dash-greeting {
-  color: #00645c;
-  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
-  font-size: 32px;
-}
-
-.oppia-learner-dash-section {
+.oppia-learner-dash-button-lg--classroom {
   background-color: #fff;
-  border-radius: .25em;
-  margin-bottom: 16px;
-  padding: 16px;
-}
-
-.oppia-learner-dash-section-heading {
+  border-color: #205d86;
   color: #205d86;
-  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
-  font-size: 24px;
 }
 
-.oppia-learner-dash-section-subheading {
-  color: #333;
-  font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 0;
-}
-
-.oppia-learner-dash-home-classes {
-  -webkit-appearance: none;
-}
-
-.oppia-learner-dash-home-button {
-  background-color: #fff;
-  border: 2px solid #205d86;
-  border-radius: .25em;
+.oppia-learner-dash-button-lg--classroom:hover {
+  background-color: #cadbda;
+  border-color: #205d86;
   color: #205d86;
-  font-weight: 700;
-  padding: 10px 0;
-  text-decoration: none;
-  width: 344px;
 }
 
-.oppia-learner-dash-home-button:hover {
-  background-color: #cadbda;
-  color: #205d86;
-  text-decoration: none;
+.oppia-learner-dash-button-lg--classroom:focus {
+  background-color: #429488;
+  border-color: #205d86;
+  color: #fff;
 }
diff --git a/core/templates/pages/learner-dashboard-page/home-tab.component.html b/core/templates/pages/learner-dashboard-page/home-tab.component.html
@@ -127,7 +127,7 @@
           </ng-container>
         </oppia-card-display>
         <a [href]="getClassroomLink(item.key)" target="{{ openInNewWindow ? '_blank' : '_self' }}"
-           class="align-items-center d-inline-flex justify-content-center mb-4 oppia-learner-dash-home-button text-center">
+           class="align-items-center d-inline-flex justify-content-center mb-4 oppia-learner-dash-button-lg oppia-learner-dash-button-lg--classroom text-center">
           <span class="fas fa-arrow-right mr-2"></span>
           {{ 'I18N_LEARNER_DASHBOARD_HOME_CLASSROOM_SECTION_LINK' | translate }}
         </a>

diff --git a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css
@@ -399,6 +399,7 @@ oppia-learner-dashboard-page .oppia-learner-groups-icon {
     font-size: 14px;
     height: max-content;
     margin-bottom: 0;
+    transition: all 300ms ease-out;
     width: 120px !important;
   }
 
@@ -464,3 +465,84 @@ oppia-learner-dashboard-page .oppia-learner-groups-icon {
   }
 
 }
+
+.oppia-learner-dash-button-lg {
+  border: 1px solid;
+  border-radius: 4px;
+  font-weight: 700;
+  max-width: 344px;
+  padding: 10px 0;
+  text-decoration: none;
+  transition: all 300ms ease-out;
+  width: 100%;
+}
+
+.oppia-learner-dash-button-lg:hover {
+  text-decoration: none;
+}
+
+.oppia-learner-dash-button-lg:focus {
+  text-decoration: none;
+}
+
+@media screen and (max-width: 500px) {
+  .oppia-learner-dash-button-lg {
+    padding: 10px 8px;
+    width: 90%;
+  }
+}
+
+.oppia-learner-dash-button-sm {
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 36px;
+  padding: 10px 8px;
+  text-decoration: none;
+  transition: all 300ms ease-out;
+}
+
+.oppia-learner-dash-button-sm:hover {
+  text-decoration: none;
+}
+
+.oppia-learner-dash-button-sm:focus {
+  text-decoration: none;
+}
+
+.oppia-learner-dash-button--inverse {
+  background-color: #fff;
+  border-color: #00645c;
+  color: #00645c;
+}
+
+.oppia-learner-dash-button--inverse:hover {
+  background-color: #cadbda;
+  color: #00645c;
+}
+
+.oppia-learner-dash--inverse:focus {
+  background-color: #429488;
+  border-color: #429488;
+  color: #fff;
+}
+
+.oppia-learner-dash-greeting {
+  color: #00645c;
+  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
+  font-size: 32px;
+}
+
+.oppia-learner-dash-section {
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  padding: 16px;
+}
+
+.oppia-learner-dash-section-heading {
+  color: #205d86;
+  font-family: 'Capriola', 'Roboto', Arial, sans-serif;
+  font-size: 24px;
+}
diff --git a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html
@@ -69,7 +69,7 @@
         </li>
         <li>
           <button class="align-items-center d-inline-flex e2e-test-community-lessons-section rounded oppia-learner-dash-sidebar_btn text-left w-100" tabindex="0"
-                  [ngClass]="{'oppia-learner-dash-sidebar_btn--active': activeSection === LEARNER_DASHBOARD_SECTION_I18N_IDS.PROGRESS}"
+                  [ngClass]="{'oppia-learner-dash-sidebar_btn--active': activeSection === LEARNER_DASHBOARD_SECTION_I18N_IDS.COMMUNITY_LESSONS}"
                   (click)="setActiveSection(LEARNER_DASHBOARD_SECTION_I18N_IDS.COMMUNITY_LESSONS)"
                   (keyup.enter)="setActiveSection(LEARNER_DASHBOARD_SECTION_I18N_IDS.COMMUNITY_LESSONS)">
             <span class="fas fa-chart-line fa-lg"></span>