fix(openchallenges): implement UI suggestions from Stockard (#2952)

Sage-Bionetworks · Dec 19, 2024 · 3abb320 · 3abb320
1 parent 1264788
commit 3abb320
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 68 deletions.
diff --git a/libs/openchallenges/challenge/src/lib/_challenge-theme.scss b/libs/openchallenges/challenge/src/lib/_challenge-theme.scss
@@ -11,31 +11,39 @@
   .base {
     background-color: white;
   }
+
   #profile-top,
   #profile-stats {
     border-color: transparent;
     background-color: map.get($figma, dl-color-default-hover1);
   }
+
   .featured {
     border-color: transparent;
     color: #71c663;
   }
+
   .username {
     color: map.get($figma, dl-color-default-secondary1);
   }
+
   .profile-nav-group {
     border-color: map.get($figma, dl-color-default-primary2);
-    background-color: rgba(255, 255, 255, 1);
+    background-color: rgb(255 255 255 / 100%);
   }
+
   .profile-nav-item {
     border-color: transparent;
+
     &:focus,
     &:hover {
       background-color: map.get($figma, dl-color-default-primary1);
       color: white;
     }
+
     color: black;
   }
+
   .profile-nav-item.active-tab {
     background-color: map.get($figma, dl-color-default-navbardark);
     color: white;
@@ -60,11 +68,7 @@
     }
   }
 
-  .text-grey {
-    color: rgba(black, 0.38);
-  }
-
-  @media (max-width: 479px) {
+  @media (width <= 479px) {
     .profile-pic {
       background-color: map.get($figma, dl-color-default-hover2);
     }
@@ -75,18 +79,22 @@
   .username {
     font-size: 28px;
   }
+
   .profile-featured > .mat-icon {
     font-size: 60px;
   }
+
   .profile-pic {
     div.avatar-content {
-      font-family: 'Lato', sans-serif !important;
+      font-family: Lato, sans-serif !important;
     }
   }
-  @media screen and (max-width: 641px) {
+
+  @media screen and (width <= 641px) {
     #profile-details > h2 {
       font-size: 32px;
     }
+
     #profile-details > h3 {
       font-size: 21px;
     }
@@ -95,12 +103,14 @@
 
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
-  @if $color-config != null {
+
+  @if $color-config {
     @include color($theme);
   }
 
   $typography-config: mat.m2-get-typography-config($theme);
-  @if $typography-config != null {
+
+  @if $typography-config {
     @include typography($theme);
   }
 }
diff --git a/...openchallenges/challenge/src/lib/challenge-organizers/challenge-organizers.component.html b/...openchallenges/challenge/src/lib/challenge-organizers/challenge-organizers.component.html
@@ -13,7 +13,7 @@ <h3>Organizers</h3>
       </div>
     </ng-container>
     <ng-template #na_text>
-      <h4 class="text-grey">Not available</h4>
+      <p class="text-grey">There are no active OpenChallenges users at this time.</p>
     </ng-template>
   </div>
 </main>
diff --git a/libs/openchallenges/challenge/src/lib/challenge-stats/challenge-stats.component.html b/libs/openchallenges/challenge/src/lib/challenge-stats/challenge-stats.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="challenge" class="stats-group">
-  <div class="stat-item">
+  <!-- <div class="stat-item">
     <h3>N</h3>
     <p [ngPlural]="mockViews || 0" class="mat-caption">
       <ng-template ngPluralCase="=1">view</ng-template>
       <ng-template ngPluralCase="other">views</ng-template>
     </p>
-  </div>
+  </div> -->
   <!-- <div class="stat-item">
     <h3>{{ shorthand(mockStargazers) }}</h3>
     <p [ngPlural]="mockStargazers || 0" class="mat-caption">
@@ -27,11 +27,11 @@ <h3>{{ shorthand(mockStargazers) }}</h3>
       rel="noopener noreferrer"
     >
       <mat-icon aria-hidden="true" class="stats-card-icon">open_in_new</mat-icon>
-      Go to Website
+      Go to Challenge Site
     </a>
     <div class="stat-item disabled-btn" *ngSwitchCase="false">
       <mat-icon aria-hidden="true" class="stats-card-icon">link_off</mat-icon>
-      Website Not Found
+      Challenge Site Not Found
     </div>
   </div>
 </div>
diff --git a/libs/openchallenges/challenge/src/lib/challenge-stats/challenge-stats.component.scss b/libs/openchallenges/challenge/src/lib/challenge-stats/challenge-stats.component.scss
@@ -0,0 +1,4 @@
+// Temporarily add padding to button until more stats are implemented
+.action-btn {
+  padding: 28px 3px;
+}
diff --git a/libs/openchallenges/org-profile/src/lib/_org-profile-theme.scss b/libs/openchallenges/org-profile/src/lib/_org-profile-theme.scss
@@ -11,44 +11,50 @@
   .base {
     background-color: white;
   }
+
   #profile-top,
   #profile-stats {
     border-color: transparent;
     background-color: map.get($figma, dl-color-default-hover1);
   }
+
   .verified {
     border-color: transparent;
     color: map.get($figma, dl-color-default-darkaccent1);
   }
+
   .username {
     color: map.get($figma, dl-color-default-secondary1);
   }
+
   .profile-type {
     border-color: map.get($figma, dl-color-default-secondary2);
     background-color: map.get($figma, dl-color-default-accent2);
   }
+
   .profile-nav-group {
     border-color: map.get($figma, dl-color-default-primary2);
-    background-color: rgba(255, 255, 255, 1);
+    background-color: rgb(255 255 255 / 100%);
   }
+
   .profile-nav-item {
     border-color: transparent;
+
     &:focus,
     &:hover {
       background-color: map.get($figma, dl-color-default-primary1);
       color: white;
     }
+
     color: black;
   }
+
   .profile-nav-item.active-tab {
     background-color: map.get($figma, dl-color-default-navbardark);
     color: white;
   }
-  .text-grey {
-    color: rgba(black, 0.38);
-  }
 
-  @media (max-width: 479px) {
+  @media (width <= 479px) {
     .profile-pic {
       background-color: map.get($figma, dl-color-default-hover2);
     }
@@ -59,15 +65,18 @@
   .username {
     font-size: 28px;
   }
+
   .profile-pic {
     div.avatar-content {
-      font-family: 'Lato', sans-serif !important;
+      font-family: Lato, sans-serif !important;
     }
   }
-  @media screen and (max-width: 641px) {
+
+  @media screen and (width <= 641px) {
     #profile-details > h2 {
       font-size: 32px;
     }
+
     #profile-details > h3 {
       font-size: 21px;
     }
@@ -76,12 +85,14 @@
 
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
-  @if $color-config != null {
+
+  @if $color-config {
     @include color($theme);
   }
 
   $typography-config: mat.m2-get-typography-config($theme);
-  @if $typography-config != null {
+
+  @if $typography-config {
     @include typography($theme);
   }
 }
diff --git a/...openchallenges/org-profile/src/lib/org-profile-members/org-profile-members.component.html b/...openchallenges/org-profile/src/lib/org-profile-members/org-profile-members.component.html
@@ -12,7 +12,7 @@ <h3>Members</h3>
       </div>
     </ng-container>
     <ng-template #na_text>
-      <h4 class="text-grey">Not available</h4>
+      <p class="text-grey">There are no active OpenChallenges users at this time.</p>
     </ng-template>
   </div>
 </main>
diff --git a/libs/openchallenges/org-profile/src/lib/org-profile-stats/org-profile-stats.component.html b/libs/openchallenges/org-profile/src/lib/org-profile-stats/org-profile-stats.component.html
@@ -6,13 +6,13 @@ <h3>{{ shorthand(org.challengeCount) }}</h3>
       <ng-template ngPluralCase="other">challenges</ng-template>
     </p>
   </div>
-  <div class="stat-item">
+  <!-- <div class="stat-item">
     <h3>{{ shorthand(mockMembers) }}</h3>
     <p [ngPlural]="mockMembers || 0" class="mat-caption">
       <ng-template ngPluralCase="=1">member</ng-template>
       <ng-template ngPluralCase="other">members</ng-template>
     </p>
-  </div>
+  </div> -->
   <!-- <div class="stat-item action-btn" *ngIf="loggedIn">
     <mat-icon aria-hidden="true" class="stats-card-icon">edit</mat-icon> Edit Profile
   </div> -->

diff --git a/libs/openchallenges/ui/src/lib/person-card/mock-challenge-organizers.ts b/libs/openchallenges/ui/src/lib/person-card/mock-challenge-organizers.ts
@@ -1,18 +1,18 @@
 import { ChallengeOrganizer } from './challenge-organizer';
 
 export const MOCK_CHALLENGE_ORGANIZERS: ChallengeOrganizer[] = [
-  {
-    id: '',
-    challengeId: '1',
-    login: 'awesome-lead',
-    name: 'Awesome Lead',
-    roles: ['ChallengeLead'],
-  },
-  {
-    id: '',
-    challengeId: '2',
-    name: 'Awesome Engineer',
-    login: 'awesome-engineer',
-    roles: ['InfrastructureLead'],
-  },
+  // {
+  //   id: '',
+  //   challengeId: '1',
+  //   login: 'awesome-lead',
+  //   name: 'Awesome Lead',
+  //   roles: ['ChallengeLead'],
+  // },
+  // {
+  //   id: '',
+  //   challengeId: '2',
+  //   name: 'Awesome Engineer',
+  //   login: 'awesome-engineer',
+  //   roles: ['InfrastructureLead'],
+  // },
 ];
diff --git a/libs/openchallenges/ui/src/lib/person-card/mock-org-members.ts b/libs/openchallenges/ui/src/lib/person-card/mock-org-members.ts
@@ -1,31 +1,31 @@
 import { OrgMembership } from './org-membership';
 
 export const MOCK_ORG_MEMBERS: OrgMembership[] = [
-  {
-    id: '',
-    name: 'Awesome Admin',
-    state: 'active',
-    roles: ['admin'],
-    avatarUrl: '',
-    organizationId: '',
-    userId: '',
-  },
-  {
-    id: '',
-    name: 'Awesome Member1',
-    state: 'active',
-    roles: ['member'],
-    avatarUrl: '',
-    organizationId: '',
-    userId: '',
-  },
-  {
-    id: '',
-    name: 'Awesome Member2',
-    state: 'active',
-    roles: ['member'],
-    avatarUrl: '',
-    organizationId: '',
-    userId: '',
-  },
+  // {
+  //   id: '',
+  //   name: 'Awesome Admin',
+  //   state: 'active',
+  //   roles: ['admin'],
+  //   avatarUrl: '',
+  //   organizationId: '',
+  //   userId: '',
+  // },
+  // {
+  //   id: '',
+  //   name: 'Awesome Member1',
+  //   state: 'active',
+  //   roles: ['member'],
+  //   avatarUrl: '',
+  //   organizationId: '',
+  //   userId: '',
+  // },
+  // {
+  //   id: '',
+  //   name: 'Awesome Member2',
+  //   state: 'active',
+  //   roles: ['member'],
+  //   avatarUrl: '',
+  //   organizationId: '',
+  //   userId: '',
+  // },
 ];