make virgin and virgin only cocktails more distinguishable

Author: AndreWohnsland

src/ui/cocktail_view.py

@@ -46,10 +46,7 @@ def generate_image_block(cocktail: Cocktail | None, mainscreen: MainScreen):
     header_font_size = round(square_size / 15.8)
     header_height = round(square_size / 6.3)
     single_ingredient_label = UI_LANGUAGE.get_translation("label_single_ingredient", "main_window")
-    name_label = single_ingredient_label
-    if cocktail is not None:
-        prefix = "V. " if cocktail.only_virgin else ""
-        name_label = f"{prefix}{cocktail.name}"
+    name_label = single_ingredient_label if cocktail is None else cocktail.name
     button = create_button(
         name_label,
         font_size=header_font_size,
@@ -59,7 +56,8 @@ def generate_image_block(cocktail: Cocktail | None, mainscreen: MainScreen):
         css_class="btn-inverted btn-half-top",
     )
     if cocktail is not None and cocktail.virgin_available:
-        icon = ICONS.generate_icon(PresetIcon.virgin, ICONS.color.background)
+        button.setText(f" {name_label}")
+        icon = ICONS.generate_icon(PresetIcon.virgin, ICONS.color.background, border=cocktail.only_virgin)
         button.setIcon(icon)
         button.setIconSize(QSize(20, 20))
     label = ClickableLabel(name_label)

src/ui/icons.py

@@ -1,7 +1,7 @@
 from __future__ import annotations
 
 from dataclasses import dataclass
-from typing import TYPE_CHECKING, Literal
+from typing import TYPE_CHECKING, Any, Literal
 
 import qtawesome as qta
 from PyQt5.QtCore import QSize
@@ -36,6 +36,7 @@
 _SEARCH_ICON = "fa.search"
 _UPLOAD_ICON = "fa.upload"
 _QUESTION_ICON = "fa5.question-circle"
+_BORDER_ICON = "fa5.square"
 BUTTON_SIZE = QSize(36, 36)
 SMALL_BUTTON_SIZE = QSize(24, 24)
 
@@ -61,6 +62,7 @@ class PresetIcon:
     huge_glass = _HUGE_GLASS
     skull = _SKULL
     easy = _EASY
+    border = _BORDER_ICON
 
 
 @dataclass
@@ -160,19 +162,28 @@ def set_picture_window_icons(self, w: Ui_PictureWindow):
             fa_icon: QIcon = qta.icon(icon, color=self.color.background)
             self.set_icon(ui_element, fa_icon, no_text)
 
-    def generate_icon(self, icon_name: str, color: str, color_active: str | None = None) -> QIcon:
+    def generate_icon(self, icon_name: str, color: str, color_active: str | None = None, border: bool = False) -> QIcon:
         """Generate an icon with the given color and size.
 
         Args:
         ----
             icon_name (str): icon name in qta, e.g. "fa5s.cog"
             color (str): given color name in hex, e.g. "#007bff"
             color_active (str): given active color name, will use color if None, defaults to None
+            border (bool): if True, add a border to the icon, defaults to False
 
         """
-        if color_active is None:
-            color_active = color
-        return qta.icon(icon_name, color=color, color_active=color_active)
+        icon_option: dict[str, Any] = {
+            "color": color,
+            "color_active": color if color_active is None else color_active,
+        }
+        if not border:
+            return qta.icon(icon_name, options=[icon_option])
+        return qta.icon(
+            icon_name,
+            _BORDER_ICON,
+            options=[icon_option, {**icon_option, "scale_factor": 1.3}],
+        )
 
     def set_wait_icon(self, button: QPushButton, icon: Literal["spin", "time"] = "time", primary=False):
         """Set a spinner button to the icon."""

src/ui/setup_cocktail_selection.py

@@ -110,7 +110,7 @@ def update_cocktail_data(self):
         self.prepare_button.setText(
             UI_LANGUAGE.get_translation("prepare_button", "cocktail_selection", amount=amount, unit=cfg.EXP_MAKER_UNIT)
         )
-        virgin_prefix = "V. " if self.cocktail.is_virgin else ""
+        virgin_prefix = "Virgin " if self.cocktail.is_virgin else ""
         self.LAlkoholname.setText(f"{virgin_prefix}{self.cocktail.name}")
         display_volume = self._decide_rounding(amount * cfg.EXP_MAKER_FACTOR, 20)
         self.LMenge.setText(f"{display_volume} {cfg.EXP_MAKER_UNIT}")

web_client/src/components/cocktail/CocktailList.tsx

@@ -54,8 +54,9 @@ const CocktailList: React.FC = () => {
               role='button'
             >
               <h2 className='text-center py-1 flex items-center justify-center'>
-                {cocktail.virgin_available && <MdNoDrinks className='mr-2' />}
-                {cocktail.only_virgin && 'V. '}
+                {cocktail.virgin_available && (
+                  <MdNoDrinks className={`mr-2 ${cocktail.only_virgin && 'border-2 border-background rounded-full'}`} />
+                )}
                 {cocktail.name}
               </h2>
               <div className='relative w-full' style={{ paddingTop: '100%' }}>

web_client/src/components/cocktail/CocktailSelection.tsx

@@ -34,7 +34,9 @@ const alcoholFactor = {
 const CocktailSelection: React.FC<CocktailModalProps> = ({ selectedCocktail, handleCloseModal }) => {
   const originalCocktail = JSON.parse(JSON.stringify(selectedCocktail));
   const [alcohol, setAlcohol] = useState<alcoholState>(selectedCocktail.only_virgin ? 'virgin' : 'normal');
-  const [displayCocktail, setDisplayCocktail] = useState<Cocktail>(selectedCocktail);
+  const [displayCocktail, setDisplayCocktail] = useState<Cocktail>(
+    selectedCocktail.only_virgin ? scaleCocktail(originalCocktail, alcoholFactor['virgin']) : selectedCocktail,
+  );
   const [isProgressModalOpen, setIsProgressModalOpen] = useState(false);
   // Refill state
   const [isRefillOpen, setIsRefillOpen] = useState(false);
@@ -52,8 +54,7 @@ const CocktailSelection: React.FC<CocktailModalProps> = ({ selectedCocktail, han
       setDisplayCocktail(originalCocktail);
     } else {
       setAlcohol(state);
-      const factor = alcoholFactor[state];
-      setDisplayCocktail(scaleCocktail(originalCocktail, factor));
+      setDisplayCocktail(scaleCocktail(originalCocktail, alcoholFactor[state]));
     }
   };
 
@@ -142,13 +143,13 @@ const CocktailSelection: React.FC<CocktailModalProps> = ({ selectedCocktail, han
               <AiOutlineCloseCircle className='text-danger' size={34} />
             </button>
           </div>
-          <div>
-            <h2 className='text-2xl font-bold text-center text-neutral underline'>
-              {alcohol === 'virgin' && 'V. '}
+          <div className='flex-grow flex flex-col justify-center w-full'>
+            <h2 className='text-2xl md:text-3xl lg:text-4xl font-bold text-center text-neutral underline mb-2'>
+              {alcohol === 'virgin' && 'Virgin '}
               {selectedCocktail.name}
             </h2>
-            <div className='mt-2'>
-              <ul className='text-center'>
+            <div className='my-2'>
+              <ul className='text-center text-base md:text-lg lg:text-xl space-y-1'>
                 {machineIngredients.map((ingredient) => (
                   <li key={ingredient.id} className='text-text'>
                     {ingredient.name}:

web_client/src/components/ingredient/IngredientList.tsx

@@ -136,7 +136,7 @@ const IngredientList: React.FC = () => {
         overlayClassName='overlay z-20'
       >
         {selectedIngredient && (
-          <div className='px-4 rounded w-full h-full flex flex-col'>
+          <div className='px-1 rounded w-full h-full flex flex-col'>
             <div className='flex justify-between items-center mb-2'>
               <h2 className='text-xl font-bold text-secondary'>
                 {selectedIngredient.name || t('ingredients.newIngredient')}