style adjustments for presidential version

kalkulacka-one · Dec 6, 2024 · 93d0573 · 93d0573
1 parent 8a86914
commit 93d0573
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/frontend/src/components/design-system/containers/FilledCircle.vue b/frontend/src/components/design-system/containers/FilledCircle.vue
@@ -31,7 +31,7 @@ const classes = computed(() => ({
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  overflow: visible;
+  overflow: hidden;
 
   &--extra-small {
     width: var(--sizing-medium);

diff --git a/frontend/src/components/design-system/other/AvatarComponent.vue b/frontend/src/components/design-system/other/AvatarComponent.vue
@@ -124,7 +124,7 @@ const initials = computed(() => {
   }
 
   .image {
-    object-fit: contain;
+    object-fit: cover;
     width: 100%;
     height: 100%;
   }

diff --git a/frontend/src/routes/preferred-candidate/CandidateCard.vue b/frontend/src/routes/preferred-candidate/CandidateCard.vue
@@ -58,7 +58,7 @@ const hovered = ref(false);
   >
     <div class="avatar desktop">
       <AvatarComponent
-        size="medium"
+        size="extra-large"
         background-color="rgb(var(--palette-primary-90))"
         :background-image="
           candidate?.img_url ||
@@ -71,7 +71,7 @@ const hovered = ref(false);
     </div>
     <div class="avatar mobile">
       <AvatarComponent
-        size="medium"
+        size="large"
         :background-color="
           order === 1
             ? 'rgb(var(--palette-primary-50))'
@@ -87,19 +87,19 @@ const hovered = ref(false);
       </AvatarComponent>
     </div>
     <div class="text">
-      <BodyText class="desktop" tag="p" size="medium">
+      <BodyText class="desktop" tag="p" size="large">
         <strong>{{ candidate?.name }}</strong>
       </BodyText>
       <BodyText class="mobile" tag="p" size="medium">
-        <strong>{{ candidate?.short_name }}</strong>
+        <strong>{{ candidate?.name }}</strong>
       </BodyText>
     </div>
     <ButtonComponent
         v-show="true"
         class="vote-button"
         kind="outlined"
         color="neutral"
-        size="small"
+        size="medium"
         selected
         @click="handleVote(candidate?.id ?? null)"
         @mouseover="hovered = true"
@@ -157,7 +157,7 @@ const hovered = ref(false);
   }
 
   @media (max-width: 700px) {
-    grid-template-columns: 3rem 1fr auto;
+    grid-template-columns: 4rem 1fr auto;
     column-gap: var(--responsive-spacing-extra-small);
   }