Resolves cmu-sei/Gameboard#286

cmu-sei · Feb 18, 2025 · a494998 · a494998
1 parent d6b6679
commit a494998
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 36 deletions.
diff --git a/...nsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.html b/...nsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.html
@@ -21,11 +21,12 @@ <h2 *ngIf="!hideHeader" class="parent-header no-parent">Other Sponsors</h2>
 </ng-template>
 
 <ng-template #sponsorCard let-sponsor>
-    <div class="card h-100" *ngIf="localUser$ | async as localUser" [class.active]="localUser.sponsor.id === sponsor.id"
-        (click)="updateUserSponsor(localUser, sponsor)">
+    <div class="sponsor-card" *ngIf="localUser$ | async as localUser"
+        [class.active]="localUser.sponsor.id === sponsor.id" (click)="updateUserSponsor(localUser, sponsor)">
         <div class="card-body p-1">
             <div class="card-title">{{sponsor.name || sponsor.id}}</div>
         </div>
-        <img class="card-img-bottom" [src]="sponsor | sponsorToLogoUri" [alt]="sponsor.name">
+        <div class="flex-grow-1"></div>
+        <img class="card-img-bottom rounded-circle" [src]="sponsor | sponsorToLogoUri" [alt]="sponsor.name">
     </div>
 </ng-template>
diff --git a/...nsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.scss b/...nsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.scss
@@ -1,50 +1,66 @@
 @import "../../../../scss/variables";
 
 :host {
-    display: block;
+  display: block;
 }
 
-.card {
-    width: 150px;
-    display: inline-block;
-    margin: 1rem;
-    cursor: pointer;
-    transition: all 0.25s linear;
+.sponsor-card {
+  align-items: center;
+  background-color: $gray-900;
+  border-bottom-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 1rem;
+  text-align: center;
+  transition: all 0.2s linear;
+  width: 154px;
+
+  .card-img-bottom {
+    aspect-ratio: 1 / 1;
+    background-color: #eee;
+    object-fit: cover;
+    // width: 154px;
+  }
 }
 
 .active {
-    background-color: lightgray !important;
-    color: black;
+  background-color: lightgray !important;
+  color: black;
 
-    h2 {
-        color: black;
-    }
+  h2 {
+    color: black;
+  }
 }
 
 .parent-header {
-    font-size: 2.2rem;
+  font-size: 2.2rem;
 
-    &.no-parent {
-        background-color: $gray-900;
-        padding: 0.5rem 1rem;
-    }
+  &.no-parent {
+    background-color: $gray-900;
+    padding: 0.5rem 1rem;
+  }
 }
 
 .parent-sponsor-button {
-    background-color: $gray-900;
-    border-radius: 8px;
-    color: $foreground;
-    position: relative;
-    padding: 0.5rem 0.5rem 0.5rem 100px;
-    margin: 24px 0;
-
-    img {
-        aspect-ratio: 1/1;
-        border-radius: 50%;
-        height: 96px;
-        width: 96px;
-        position: absolute;
-        left: -16px;
-        top: -16px;
-    }
+  background-color: $gray-900;
+  border-radius: 8px;
+  color: $foreground;
+  position: relative;
+  padding: 0.5rem 0.5rem 0.5rem 100px;
+  margin: 24px 0;
+
+  img {
+    aspect-ratio: 1/1;
+    background-color: #eee;
+    border-radius: 50%;
+    height: 96px;
+    object-fit: cover;
+    width: 96px;
+    position: absolute;
+    left: -16px;
+    top: -16px;
+  }
 }