From 500f71356eabe62a66691dbc50b17e0655578efc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sat, 3 Oct 2026 21:44:07 +0200
Subject: [PATCH] custom icons

---
 .../homebrew/pages/basePages/listPage/listPage.jsx  |  6 +++---
 .../homebrew/pages/basePages/listPage/listPage.less |  4 ++++
 client/icons/compressed-grid.svg                    | 13 +++++++++++++
 client/icons/customIcons.less                       |  2 ++
 client/icons/format-card.svg                        |  6 ++++++
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 client/icons/compressed-grid.svg
 create mode 100644 client/icons/format-card.svg

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 2bfce14ea..76f15b471 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -294,19 +294,19 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				<div className='layout-option' title='grid'>
 					<label>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
-						<i className='fas fa-grip-vertical'></i>
+						<i className='fac compressed-grid'></i>
 					</label>
 				</div>
 				<div className='layout-option' title='list'>
 					<label>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
-						<i className='fas fa-list'></i>
+						<i className='fas fa-bars'></i>
 					</label>
 				</div>
 				<div className='layout-option' title='card'>
 					<label>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
-						<i className='fas fa-table'></i>
+						<i className='fac format-card'></i>
 					</label>
 				</div>
 			</div>			
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 3e0799307..c0a43dc8f 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
 @import '@sharedStyles/colors.less';
+@import '../../../../icons/customIcons.less';
 
 .noColumns() {
 	-webkit-column-width : auto;
@@ -21,6 +22,9 @@
 		--bg-clr: white;
 	.content {
 		padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
+		@media screen and (max-width : 1200px) {
+			padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
+		}
 		@media screen and (max-width : 800px) {
 			padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
 		}
diff --git a/client/icons/compressed-grid.svg b/client/icons/compressed-grid.svg
new file mode 100644
index 000000000..23f825236
--- /dev/null
+++ b/client/icons/compressed-grid.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.76 400.41">
+  <g id="Layer_1-2" data-name="Layer 1">
+    <rect width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect x="216.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect x="216.6" y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect x="216.6" y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+    <rect x="216.6" y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less
index a2caffc57..a0678555d 100644
--- a/client/icons/customIcons.less
+++ b/client/icons/customIcons.less
@@ -32,3 +32,5 @@
 .single-spread { mask-image : url('../icons/single-spread.svg'); }
 .facing-spread { mask-image : url('../icons/facing-spread.svg'); }
 .flow-spread { mask-image : url('../icons/flow-spread.svg'); }
+.format-card { mask-image: url('../icons/format-card.svg'); }
+.compressed-grid { mask-image: url('../icons//compressed-grid.svg'); }
diff --git a/client/icons/format-card.svg b/client/icons/format-card.svg
new file mode 100644
index 000000000..484ca3d75
--- /dev/null
+++ b/client/icons/format-card.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.38 433.46" width="324.38" height="433.46" xml:space="preserve">
+  <g id="Layer_2-2" data-name="Layer 2">
+    <path d="M267.61,0H56.77C25.42,0,0,25.42,0,56.77v319.92c0,31.35,25.42,56.77,56.77,56.77h210.84c31.35,0,56.77-25.42,56.77-56.77V56.77c0-31.35-25.42-56.77-56.77-56.77ZM94.52,45.62c12.6,0,22.81,10.21,22.81,22.81s-10.21,22.81-22.81,22.81-22.81-10.21-22.81-22.81,10.21-22.81,22.81-22.81ZM73.06,187.38l34.38-57.2c4.29-7.14,14.6-7.26,19.05-.22l7.7,12.17c1.02,1.61,3.36,1.65,4.44.08l31.31-45.56c4.44-6.45,13.96-6.47,18.42-.04l62.23,89.65c5.3,7.63-.16,18.07-9.45,18.07H82.65c-8.7.01-14.07-9.49-9.59-16.95ZM258.24,388.61H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,348.81H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,309H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31Z"/>
+  </g>
+</svg>
\ No newline at end of file