From 861568069c2855e2328fd017d9905be902455d53 Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Wed, 9 Sep 2020 12:13:21 +0200
Subject: [PATCH 1/6] working mobile

---
 src/ui/RequestedWineCard.vue | 39 ++++++++++++++----------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/ui/RequestedWineCard.vue b/src/ui/RequestedWineCard.vue
index e43ab5f..6475c7f 100644
--- a/src/ui/RequestedWineCard.vue
+++ b/src/ui/RequestedWineCard.vue
@@ -7,22 +7,20 @@
       :class="{ 'fullscreen': fullscreen }"
     />
     <img v-else class="wine-placeholder" alt="Wine image" />
-    <section class="wine-info">
-      <h3 v-if="wine.name">{{ wine.name }}</h3>
-      <h3 v-else>(no name)</h3>
-      <p>Antall ganger denne har blitt foreslått: {{requestedElement.count}}</p>
-      <section class="buttons">
-          <button class="vin-button" @click="request(wine)" v-if="!locallyRequested">Foreslå denne</button>
-          <a
-          v-if="wine.vivinoLink"
-          :href="wine.vivinoLink"
-          class="wine-link"
-        >Les mer på polet</a>
-        </section>
-        <button @click="deleteWine(wine)" v-if="showDeleteButton == true">
-          Slett vinen
-        </button>
-      </section>
+    <h3 v-if="wine.name">{{ wine.name }}</h3>
+    <h3 v-else>(no name)</h3>
+    <p class="requested-amount">Foreslått: <strong>{{requestedElement.count}}</strong></p>
+
+    <button class="vin-button" @click="request(wine)" v-if="!locallyRequested">Foreslå denne</button>
+    <a
+    v-if="wine.vivinoLink"
+    :href="wine.vivinoLink"
+    class="wine-link">
+      Les mer
+    </a>
+    <button @click="deleteWine(wine)" v-if="showDeleteButton == true" class="vin-button danger">
+      Slett vinen
+    </button>
     </div>
 </template>
 
@@ -68,13 +66,6 @@ export default {
 </script>
 
 <style lang="scss" scoped> 
+@import "../styles/requested-wine-card.scss";
 
-.requested-wine{
-  padding: 20px;
-  border-radius: 1px;
-  margin: 1rem 0;
-  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
-}
 </style>
\ No newline at end of file

From d2ad209d139fccfa06194dd34fd52c61c906a52a Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Wed, 9 Sep 2020 12:52:31 +0200
Subject: [PATCH 2/6] added grid for all requested wines, also added new
 media-breakpoints

---
 src/components/AllRequestedWines.vue | 40 ++++++++++++++++---
 src/styles/media-queries.scss        | 21 ++++++++++
 src/ui/RequestedWineCard.vue         | 58 +++++++++++++++++++++++++++-
 3 files changed, 112 insertions(+), 7 deletions(-)

diff --git a/src/components/AllRequestedWines.vue b/src/components/AllRequestedWines.vue
index f8415fb..1249fa0 100644
--- a/src/components/AllRequestedWines.vue
+++ b/src/components/AllRequestedWines.vue
@@ -39,14 +39,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
+.requested-wines-container{
+  display: grid;
+  grid-gap: 1.5rem;
+  justify-items: center;
+
+  @media #{$mobileOnly}{
+    display: flex;
+    justify-content: space-around;
+    flex-flow: row wrap;
+    row-gap: 1.5rem;
+    margin: 2rem;
+  }
+
+  @media #{$tabletOnly}{
+    margin: 1em;
+    grid: 1fr / 1fr 1fr;
+    justify-items: center;
+  }
+
+  @media #{$desktopOnly}{
+    margin: 1em;
+    grid: 1fr / repeat(4, 1fr);
+  }
+
+  @media #{$widescreenAndUp}{
+    width: 80%;
+    margin: auto;
+    grid: 1fr / repeat(5, 1fr);
+    justify-items: center;
+  }
+}
+
 h1{
   text-align: center;
 }
 
-.requested-wines-container{
-  display: flex;
-  justify-content: space-around;
-  flex-flow: row wrap;
-  align-items: stretch
-}
 </style>
\ No newline at end of file
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index 0f7f91a..021102c 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -16,3 +16,24 @@ $mobile-width: 768px;
     @content;
   }
 }
+
+$sm: 320;
+$md: 756;
+$lg: 1200;
+$xl: 1704;
+
+$minMobileWidth: $sm + 0px;
+$maxMobileWidth: $md - 1px;
+$minTabletWidth: $md + 0px;
+$maxTabletWidth: $lg - 1px;
+$minDesktopWidth: $lg + 0px;
+$maxDesktopWidth: $xl - 1px;
+$minWidescreenWidth: $xl + 0px;
+
+$mobileOnly: "only screen and ( max-width: #{$maxMobileWidth} )";
+$tabletOnly: "only screen and( min-width: #{$minTabletWidth} ) and ( max-width: #{$maxTabletWidth} )";
+$desktopOnly: "only screen and ( min-width: #{$minDesktopWidth} ) and ( max-width: #{$maxDesktopWidth} )";
+$widescreenOnly: "only screen and ( min-width: #{$minWidescreenWidth} )";
+$tabletAndUp: "only screen and ( min-width: #{$minTabletWidth} )";
+$desktopAndUp: "only screen and ( min-width: #{$minDesktopWidth} )";
+$widescreenAndUp: "only screen and ( min-width: #{$minWidescreenWidth} )";
\ No newline at end of file
diff --git a/src/ui/RequestedWineCard.vue b/src/ui/RequestedWineCard.vue
index 6475c7f..44e362c 100644
--- a/src/ui/RequestedWineCard.vue
+++ b/src/ui/RequestedWineCard.vue
@@ -66,6 +66,62 @@ export default {
 </script>
 
 <style lang="scss" scoped> 
-@import "../styles/requested-wine-card.scss";
+@import "../styles/global.scss";
+
+.requested-wine{
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  text-align: center;
+  display: grid;
+  grid: auto-flow min-content / 2fr 1fr;
+  grid-template-areas: "top top"
+                       "middle-left middle-right1"
+                       "middle-left middle-right2"
+                       "bottom1 bottom1"
+                       "bottom2 bottom2";
+  grid-gap: 1em;
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+  
+  h3{
+    grid-area: top;
+    word-break: keep-all;
+    width: 90%;
+  }
+
+  img{
+    height: 13em;
+    grid-area: middle-left;
+  }
+
+  .requested-amount{
+    grid-area: middle-right1;
+    width: 90%;
+    word-break: keep-all;
+  }
+  
+  .wine-link{
+    grid-area: middle-right2;
+    color: #333333;
+    font-family: Arial;
+    text-decoration: none;
+    font-weight: bold;
+    border-bottom: 1px solid $link-color;
+    height: 1em;
+  }
+
+  .vin-button{
+    grid-area: bottom1;
+    margin-bottom: 1em;
+
+    &.danger{
+      grid-area: bottom2;
+      background-color: red;
+
+    }
+  }
+}
 
 </style>
\ No newline at end of file

From ef367bd1dbddeab7d436579461ae1ddddd9fd0ea Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Wed, 9 Sep 2020 15:46:16 +0200
Subject: [PATCH 3/6] reworked requestwine css

---
 src/components/RequestWine.vue | 177 +++++++++++++++++++++------------
 src/ui/RequestedWineCard.vue   |   4 +-
 2 files changed, 118 insertions(+), 63 deletions(-)

diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue
index 2dee37b..90f84e4 100644
--- a/src/components/RequestWine.vue
+++ b/src/components/RequestWine.vue
@@ -1,20 +1,20 @@
 <template>
-  <main>
-    <h1>
-      Foreslå en vin!
-    </h1>
+  <section class="main-container">
     <Modal 
       v-if="showModal" 
       modalText="Ønsket ditt har blitt lagt til" 
       :buttons="modalButtons"
       @click="emitFromModalButton"
     ></Modal>
-    <section>
+    <h1>
+      Foreslå en vin!
+    </h1>
+    <section class="search-container">
       <section class="search-section">
-        <input type="text" v-model="searchString" @keyup.enter="fetchWineFromVin()" placeholder="Søk etter en vin du liker her!🍷">
+        <input type="text" v-model="searchString" @keyup.enter="fetchWineFromVin()" placeholder="Søk etter en vin du liker her!🍷" class="search-input-field">
         <button :disabled="!searchString" @click="fetchWineFromVin()" class="vin-button">Søk</button>
       </section>
-      <section v-for="(wine, index) in this.wines" :key="index" class="search-results-container">
+      <section v-for="(wine, index) in this.wines" :key="index" class="single-result">
         <img
           v-if="wine.image"
           :src="wine.image"
@@ -25,26 +25,24 @@
         <section class="wine-info">
           <h2 v-if="wine.name">{{ wine.name }}</h2>
           <h2 v-else>(no name)</h2>
-          <div class="__details">
+          <div class="details">
             <span v-if="wine.rating">{{ wine.rating }}%</span>
             <span v-if="wine.price">{{ wine.price }} NOK</span>
             <span v-if="wine.country">{{ wine.country }}</span>
           </div>
         </section>
-        <section class="buttons">
           <button class="vin-button" @click="request(wine)">Foreslå denne</button>
           <a
           v-if="wine.vivinoLink"
           :href="wine.vivinoLink"
           class="wine-link"
-        >Les mer på polet</a>
-        </section>
+        >Les mer</a>
       </section>
       <p v-if="this.wines && this.wines.length == 0">
         Fant ingen viner med det navnet!
       </p>
     </section>
-  </main>
+  </section>
 </template>
 
 <script>
@@ -103,93 +101,150 @@ export default {
 @import "./src/styles/global";
 @import "./src/styles/variables";
 
-main{
+.main-container{
   margin: auto;
-  width: 80%;
-  text-align: center;
-  z-index: 0;
+  max-width: 1200px;
 }
 
 input[type="text"] {
-  width: 100%;
+  width: 90%;
   color: black;
   border-radius: 4px;
-  padding: 0.5rem 1rem;
+  padding: 1rem 1rem;
   border: 1px solid black;
-  max-width: 80%;
+  max-width: 90%;
+}
+
+.search-container{
+  margin: 1rem;
+  margin-left: 2rem;
+}
+
+@media #{$mobileOnly}{
+  h2{
+    font-size: 1em;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+  }  
+}
+
+@media #{$tabletOnly}{
+  h2{
+    font-size: 1.2em;
+  }
+}
+@media #{$desktopAndUp}{
+  h2{
+    font-size: 1.6em;
+  }
 }
 
 .search-section{
-  display: flex;
-  justify-content: space-around;
-  flex-flow: row;
+  display: grid;
+  grid: 1fr / 1fr .2fr;
+  grid-template-areas: "search-area button";
+
+  @media #{$mobileOnly}{
+    .vin-button{
+      display: none;
+    }
+    .search-input-field{
+      // grid-row: 1 / -1;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  @media #{$tabletAndUp}{
+    .search-input-field{
+      grid-area: search-area;
+    }
+    .vin-button{
+      grid-area: button;
+    }
+  }
+  
 }
 
-.search-results-container{
-  display: flex;
-  padding: 3px;
-  border-radius: 1px;
-  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);   
-  margin: 1rem 0;
-  justify-content: space-around;
-  flex-flow: row wrap;
-  align-items: stretch;
+.single-result{
+  margin-top: 1rem;
+  display: grid;
+  grid: 1fr / .5fr 2fr .5fr .5fr;
+  grid-template-areas: "picture details button1 button2";
+  justify-items: center;
+  align-items: center;
+  grid-gap: 1em;
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+  box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
 
+  @media #{$mobileOnly}{
+
+    grid: 1fr .5fr / .5fr 1fr;
+    grid-template-areas: "picture details"
+                         "button1 button2";
+    grid-gap: .5em;
+
+    .vin-button{
+      grid-area: button2;
+      padding: .5em;
+      font-size: 1em;
+      line-height: 1em;
+      height: 2em;
+    }
+
+    .wine-link{
+      grid-area: button1;
+    }
+
+  }
 
   .wine-image {
     height: 100px;
+    grid-area: picture;
   }
 
   .wine-placeholder {
     height: 100px;
     width: 70px;
+    grid-area: picture;
   }
 
   .wine-info{
-    display: flex;
-    flex-direction: column;
-    .__details{
+    grid-area: details;
+    width: 100%;
+    
+    h2{
+      margin: 0;
+    }
+    .details{
+      top: 0;
       display: flex;
       flex-direction: column;
     }
   }
   .wine-link {
+    grid-area: button1;
     color: #333333;
     font-family: Arial;
     text-decoration: none;
     font-weight: bold;
     border-bottom: 1px solid $link-color;
-    width: fit-content;
+    height: 1.2em;
+    width: max-content;
   }
 
-  .buttons{
-    display: flex;
-    align-items: center;
-    order: 2;
-    justify-content: space-between;
-    width: 40%;
-    margin-right: 1rem;
-  }
-  @include mobile {
-    display: flex;
-    flex-direction: column;
-    .wine-image {
-      height: 100px;
-      width: 50px;
-      align-self: center;
-    }
-    .buttons{
-      display: flex;
-      flex-direction: column;
-      align-self: center;
-      margin: 1em;
-      .wine-link{
-        margin-top: 1em;
-      }
-    }
-    
+  .vin-button{
+    grid-area: button2;
   }
 }
 
 
+h1{
+  text-align: center;
+}
+
+
 </style>
\ No newline at end of file
diff --git a/src/ui/RequestedWineCard.vue b/src/ui/RequestedWineCard.vue
index 44e362c..cbac483 100644
--- a/src/ui/RequestedWineCard.vue
+++ b/src/ui/RequestedWineCard.vue
@@ -118,8 +118,8 @@ export default {
 
     &.danger{
       grid-area: bottom2;
-      background-color: red;
-
+      background-color: $light-red;
+      color: $red;
     }
   }
 }

From e9e7b60f2263334aae62929aa13ec31435564052 Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Wed, 9 Sep 2020 15:59:49 +0200
Subject: [PATCH 4/6] cleanup

---
 src/components/RequestWine.vue | 70 ++++++++++++++--------------------
 1 file changed, 29 insertions(+), 41 deletions(-)

diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue
index 90f84e4..ceb8a96 100644
--- a/src/components/RequestWine.vue
+++ b/src/components/RequestWine.vue
@@ -101,6 +101,12 @@ export default {
 @import "./src/styles/global";
 @import "./src/styles/variables";
 
+
+h1{
+  text-align: center;
+}
+
+
 .main-container{
   margin: auto;
   max-width: 1200px;
@@ -115,57 +121,23 @@ input[type="text"] {
   max-width: 90%;
 }
 
+
 .search-container{
   margin: 1rem;
-  margin-left: 2rem;
-}
-
-@media #{$mobileOnly}{
-  h2{
-    font-size: 1em;
-    max-width: 80%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-  }  
-}
-
-@media #{$tabletOnly}{
-  h2{
-    font-size: 1.2em;
-  }
-}
-@media #{$desktopAndUp}{
-  h2{
-    font-size: 1.6em;
-  }
 }
 
 .search-section{
   display: grid;
   grid: 1fr / 1fr .2fr;
-  grid-template-areas: "search-area button";
 
   @media #{$mobileOnly}{
     .vin-button{
       display: none;
     }
     .search-input-field{
-      // grid-row: 1 / -1;
-      width: 100%;
-      max-width: 100%;
+      grid-column: 1 / -1;
     }
   }
-
-  @media #{$tabletAndUp}{
-    .search-input-field{
-      grid-area: search-area;
-    }
-    .vin-button{
-      grid-area: button;
-    }
-  }
-  
 }
 
 .single-result{
@@ -199,7 +171,16 @@ input[type="text"] {
       grid-area: button1;
     }
 
+    h2{
+      font-size: 1em;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis
+    }
+
   }
+ 
 
   .wine-image {
     height: 100px;
@@ -239,11 +220,18 @@ input[type="text"] {
   .vin-button{
     grid-area: button2;
   }
-}
-
-
-h1{
-  text-align: center;
+  
+  @media #{$tabletOnly}{
+    h2{
+      font-size: 1.2em;
+    }
+  }
+  
+  @media #{$desktopAndUp}{
+    h2{
+      font-size: 1.6em;
+    }
+  }
 }
 
 

From 036958b2798918f71d61a79a08ebe477614c1e4b Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Thu, 10 Sep 2020 15:08:15 +0200
Subject: [PATCH 5/6] rework media breakpoints

---
 src/components/AllRequestedWines.vue |  8 ++---
 src/components/RequestWine.vue       |  8 ++---
 src/styles/media-queries.scss        | 46 +++++++++++-----------------
 3 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/components/AllRequestedWines.vue b/src/components/AllRequestedWines.vue
index 1249fa0..9297427 100644
--- a/src/components/AllRequestedWines.vue
+++ b/src/components/AllRequestedWines.vue
@@ -46,7 +46,7 @@ export default {
   grid-gap: 1.5rem;
   justify-items: center;
 
-  @media #{$mobileOnly}{
+  @include mobile {
     display: flex;
     justify-content: space-around;
     flex-flow: row wrap;
@@ -54,18 +54,18 @@ export default {
     margin: 2rem;
   }
 
-  @media #{$tabletOnly}{
+  @include tablet {
     margin: 1em;
     grid: 1fr / 1fr 1fr;
     justify-items: center;
   }
 
-  @media #{$desktopOnly}{
+  @include desktop {
     margin: 1em;
     grid: 1fr / repeat(4, 1fr);
   }
 
-  @media #{$widescreenAndUp}{
+  @include widescreen {
     width: 80%;
     margin: auto;
     grid: 1fr / repeat(5, 1fr);
diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue
index ceb8a96..453b008 100644
--- a/src/components/RequestWine.vue
+++ b/src/components/RequestWine.vue
@@ -130,7 +130,7 @@ input[type="text"] {
   display: grid;
   grid: 1fr / 1fr .2fr;
 
-  @media #{$mobileOnly}{
+  @include mobile{
     .vin-button{
       display: none;
     }
@@ -152,7 +152,7 @@ input[type="text"] {
   margin-bottom: 1em;
   box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
 
-  @media #{$mobileOnly}{
+  @include mobile{
 
     grid: 1fr .5fr / .5fr 1fr;
     grid-template-areas: "picture details"
@@ -221,13 +221,13 @@ input[type="text"] {
     grid-area: button2;
   }
   
-  @media #{$tabletOnly}{
+  @include tablet{
     h2{
       font-size: 1.2em;
     }
   }
   
-  @media #{$desktopAndUp}{
+  @include desktop{
     h2{
       font-size: 1.6em;
     }
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index 021102c..2c41be8 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -1,15 +1,7 @@
-$phone-xs-width: 480px;
-$tablet-p-width: 768px;
-$tablet-l-width: 1024px;
-$desktop-width:  1200px;
-$desktop-l-width: 1600px;
 $mobile-width: 768px;
+$tablet-max: 1200px;
+$desktop-max: 1704;
 
-@mixin desktop {
-  @media (min-width: #{$mobile-width + 1px}) {
-    @content;
-  }
-}
 
 @mixin mobile {
   @media (max-width: #{$mobile-width}) {
@@ -17,23 +9,21 @@ $mobile-width: 768px;
   }
 }
 
-$sm: 320;
-$md: 756;
-$lg: 1200;
-$xl: 1704;
+@mixin tablet {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
 
-$minMobileWidth: $sm + 0px;
-$maxMobileWidth: $md - 1px;
-$minTabletWidth: $md + 0px;
-$maxTabletWidth: $lg - 1px;
-$minDesktopWidth: $lg + 0px;
-$maxDesktopWidth: $xl - 1px;
-$minWidescreenWidth: $xl + 0px;
 
-$mobileOnly: "only screen and ( max-width: #{$maxMobileWidth} )";
-$tabletOnly: "only screen and( min-width: #{$minTabletWidth} ) and ( max-width: #{$maxTabletWidth} )";
-$desktopOnly: "only screen and ( min-width: #{$minDesktopWidth} ) and ( max-width: #{$maxDesktopWidth} )";
-$widescreenOnly: "only screen and ( min-width: #{$minWidescreenWidth} )";
-$tabletAndUp: "only screen and ( min-width: #{$minTabletWidth} )";
-$desktopAndUp: "only screen and ( min-width: #{$minDesktopWidth} )";
-$widescreenAndUp: "only screen and ( min-width: #{$minWidescreenWidth} )";
\ No newline at end of file
+@mixin desktop {
+  @media (min-width: #{$tablet-max + 1px}) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media (min-width: #{$desktop-max + 1px}){
+    @content;
+  }
+}
\ No newline at end of file

From 1327650492291f1252e840173c96d50687d26a94 Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Thu, 10 Sep 2020 15:10:53 +0200
Subject: [PATCH 6/6] rename grid areas

---
 src/components/RequestWine.vue | 12 ++++++------
 src/ui/RequestedWineCard.vue   | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue
index 453b008..22fa042 100644
--- a/src/components/RequestWine.vue
+++ b/src/components/RequestWine.vue
@@ -144,7 +144,7 @@ input[type="text"] {
   margin-top: 1rem;
   display: grid;
   grid: 1fr / .5fr 2fr .5fr .5fr;
-  grid-template-areas: "picture details button1 button2";
+  grid-template-areas: "picture details button-left button-right";
   justify-items: center;
   align-items: center;
   grid-gap: 1em;
@@ -156,11 +156,11 @@ input[type="text"] {
 
     grid: 1fr .5fr / .5fr 1fr;
     grid-template-areas: "picture details"
-                         "button1 button2";
+                         "button-left button-right";
     grid-gap: .5em;
 
     .vin-button{
-      grid-area: button2;
+      grid-area: button-right;
       padding: .5em;
       font-size: 1em;
       line-height: 1em;
@@ -168,7 +168,7 @@ input[type="text"] {
     }
 
     .wine-link{
-      grid-area: button1;
+      grid-area: button-left;
     }
 
     h2{
@@ -207,7 +207,7 @@ input[type="text"] {
     }
   }
   .wine-link {
-    grid-area: button1;
+    grid-area: button-left;
     color: #333333;
     font-family: Arial;
     text-decoration: none;
@@ -218,7 +218,7 @@ input[type="text"] {
   }
 
   .vin-button{
-    grid-area: button2;
+    grid-area: button-right;
   }
   
   @include tablet{
diff --git a/src/ui/RequestedWineCard.vue b/src/ui/RequestedWineCard.vue
index cbac483..04d560f 100644
--- a/src/ui/RequestedWineCard.vue
+++ b/src/ui/RequestedWineCard.vue
@@ -76,10 +76,10 @@ export default {
   display: grid;
   grid: auto-flow min-content / 2fr 1fr;
   grid-template-areas: "top top"
-                       "middle-left middle-right1"
-                       "middle-left middle-right2"
-                       "bottom1 bottom1"
-                       "bottom2 bottom2";
+                       "middle-left middle-right-top"
+                       "middle-left middle-right-bot"
+                       "bottom-top bottom-top"
+                       "bottom-bot bottom-bot";
   grid-gap: 1em;
   justify-items: center;
   align-items: center;
@@ -97,13 +97,13 @@ export default {
   }
 
   .requested-amount{
-    grid-area: middle-right1;
+    grid-area: middle-right-top;
     width: 90%;
     word-break: keep-all;
   }
   
   .wine-link{
-    grid-area: middle-right2;
+    grid-area: middle-right-bot;
     color: #333333;
     font-family: Arial;
     text-decoration: none;
@@ -113,11 +113,11 @@ export default {
   }
 
   .vin-button{
-    grid-area: bottom1;
+    grid-area: bottom-top;
     margin-bottom: 1em;
 
     &.danger{
-      grid-area: bottom2;
+      grid-area: bottom-bot;
       background-color: $light-red;
       color: $red;
     }