From 9c9b6d5aa591e4339cf0a6cc20f6aa873f530b91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 15 Apr 2021 13:17:49 +0200
Subject: [PATCH] Change height of process bar and button to small

---
 webapp/components/DonationInfo/DonationInfo.vue | 2 +-
 webapp/components/ProgressBar/ProgressBar.vue   | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index f82b7b747..4abadea60 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -2,7 +2,7 @@
   <div class="donation-info">
     <progress-bar :title="computedTitle" :label="label" :goal="goal" :progress="progress">
       <a target="_blank" :href="links.DONATE">
-        <base-button filled>{{ $t('donations.donate-now') }}</base-button>
+        <base-button size="small" filled>{{ $t('donations.donate-now') }}</base-button>
       </a>
     </progress-bar>
   </div>
diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue
index 3905ee734..561c9bb5d 100644
--- a/webapp/components/ProgressBar/ProgressBar.vue
+++ b/webapp/components/ProgressBar/ProgressBar.vue
@@ -53,12 +53,14 @@ export default {
 <style lang="scss">
 .progress-bar-component {
   height: 100%;
+  position: relative;
   // width: 150px;
   // width: 100%;
   // flex: 0 0 100%;
   // align-self: stretch;
   flex: 1;
   display: flex;
+  top: $space-xx-small;
   // margin-right: $space-x-small;
 
   // @media (max-width: 680px) {
@@ -109,7 +111,7 @@ export default {
 
 .progress-bar__goal {
   position: relative;
-  height: 36px; // styleguide-button-size
+  height: 26px; // styleguide-button-size
   // Wolle width: 100%;
   border: 1px solid $color-primary;
   // Wolle background-color: $color-neutral-100;
@@ -122,7 +124,7 @@ export default {
   position: absolute;
   top: 0px;
   left: 0px;
-  height: 36px; // styleguide-button-size
+  height: 26px; // styleguide-button-size
   max-width: 100%;
   // Wolle background-color: $color-yellow;
   // background: repeating-linear-gradient(60deg, $color-primary-light, $color-primary-light 35px, $color-primary 35px, $color-primary 70px);
@@ -144,7 +146,7 @@ export default {
   position: absolute;
   top: 0px;
   left: 0px;
-  height: 36px; // styleguide-button-size
+  height: 26px; // styleguide-button-size
   max-width: 100%;
   display: inline-flex;
   align-items: center;
@@ -169,6 +171,7 @@ export default {
 }
 
 .progress-bar-button {
+  position: relative;
   float: right;
 }
 </style>