From c2c12c3236000532c8208356b1ae23a70bc5dcb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karlo=20Miku=C5=A1?= <karlo.mikus1@gmail.com>
Date: Sun, 15 Dec 2024 13:28:32 +0100
Subject: [PATCH] Update chips design

---
 src/assets/chips.css                            |  8 ++++----
 src/components/Cocktail/CocktailDetails.vue     | 10 +++++-----
 src/components/Ingredient/IngredientDetails.vue | 14 +++++++-------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/assets/chips.css b/src/assets/chips.css
index 82225886..d61af3ca 100644
--- a/src/assets/chips.css
+++ b/src/assets/chips.css
@@ -1,13 +1,13 @@
 .item-details__chips {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
+    gap: var(--gap-size-2);
     margin-bottom: 1rem;
 }
 
 .item-details__chips__group__title {
-    font-size: 0.7rem;
-    margin-bottom: 0.2rem;
+    font-size: 0.65rem;
+    margin-bottom: -2px;
     color: var(--clr-gray-600);
 }
 
@@ -25,7 +25,7 @@
     margin: 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
+    gap: var(--gap-size-2);
 }
 
 .chip {
diff --git a/src/components/Cocktail/CocktailDetails.vue b/src/components/Cocktail/CocktailDetails.vue
index 637c8850..9293e089 100644
--- a/src/components/Cocktail/CocktailDetails.vue
+++ b/src/components/Cocktail/CocktailDetails.vue
@@ -543,7 +543,7 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('tag.tags') }}:</div>
                             <ul class="chips-list">
                                 <li v-for="tag in cocktail.tags" :key="tag.id">
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
@@ -551,7 +551,7 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('glass-type.title') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
@@ -559,7 +559,7 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('method.title') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
@@ -567,7 +567,7 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('ABV') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
                                 </li>
                             </ul>
                         </div>
@@ -575,7 +575,7 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('avg-rating') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
                                 </li>
                             </ul>
                         </div>
diff --git a/src/components/Ingredient/IngredientDetails.vue b/src/components/Ingredient/IngredientDetails.vue
index 40b25b1e..a6524b29 100644
--- a/src/components/Ingredient/IngredientDetails.vue
+++ b/src/components/Ingredient/IngredientDetails.vue
@@ -26,7 +26,7 @@ import UnitHandler from '../../UnitHandler.js'
                     <h3 class="page-subtitle">{{ $t('see-also') }}</h3>
                     <ul class="ingredient-chips-list">
                         <li v-for="variety in ingredient.varieties" :key="variety.slug">
-                            <RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: variety.slug } }">{{ variety.name }}</RouterLink>
+                            <RouterLink :to="{ name: 'ingredients.show', params: { id: variety.slug } }">{{ variety.name }}</RouterLink>
                         </li>
                     </ul>
                 </div>
@@ -34,7 +34,7 @@ import UnitHandler from '../../UnitHandler.js'
                     <h3 class="page-subtitle">{{ $t('ingredient.used_as_substitute_for') }}</h3>
                     <ul class="ingredient-chips-list">
                         <li v-for="s in ingredient.used_as_substitute_for" :key="s.slug">
-                            <RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
+                            <RouterLink :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
                         </li>
                         <li>
                             <RouterLink :to="{name: 'cocktails', query: {'filter[ingredient_substitute_id]': ingredient.id}}">
@@ -47,7 +47,7 @@ import UnitHandler from '../../UnitHandler.js'
                     <h3 class="page-subtitle">{{ $t('ingredient.can_be_substituted_with') }}</h3>
                     <ul class="ingredient-chips-list">
                         <li v-for="s in ingredient.can_be_substituted_with" :key="s.slug">
-                            <RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
+                            <RouterLink :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
                         </li>
                     </ul>
                 </div>
@@ -87,15 +87,15 @@ import UnitHandler from '../../UnitHandler.js'
                             <div class="item-details__chips__group__title">{{ $t('strength') }}:</div>
                             <ul v-if="ingredient.strength > 0" class="chips-list">
                                 <li>
-                                    <span class="chip"><abbr :title="$t('ABV-definition')">{{ $t('ABV') }}</abbr>: {{ ingredient.strength + '%' }}</span>
+                                    <span><abbr :title="$t('ABV-definition')">{{ $t('ABV') }}</abbr>: {{ ingredient.strength + '%' }}</span>
                                 </li>
                                 <li>
-                                    <span class="chip">{{ $t('alcohol-proof') }}: {{ ingredient.strength * 2 }}</span>
+                                    <span>{{ $t('alcohol-proof') }}: {{ ingredient.strength * 2 }}</span>
                                 </li>
                             </ul>
                             <ul v-else class="chips-list">
                                 <li>
-                                    <span class="chip">{{ $t('non-alcoholic') }}</span>
+                                    <span>{{ $t('non-alcoholic') }}</span>
                                 </li>
                             </ul>
                         </div>
@@ -103,7 +103,7 @@ import UnitHandler from '../../UnitHandler.js'
                             <div class="item-details__chips__group__title">{{ $t('origin') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <span class="chip">{{ ingredient.origin }}</span>
+                                    <span>{{ ingredient.origin }}</span>
                                 </li>
                             </ul>
                         </div>