From 3df20a20a2ea4e9755b5c3b4bd073e3a02f2fa55 Mon Sep 17 00:00:00 2001
From: Rustam <tabarzin@gmail.com>
Date: Sun, 4 Feb 2024 14:44:37 +0300
Subject: [PATCH] refactor: change icons

---
 frontend/src/templates/pages/ui/index.njk | 20 +++++++++-----------
 frontend/src/templates/ui/icon.njk        | 16 ++++++++--------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/src/templates/pages/ui/index.njk b/frontend/src/templates/pages/ui/index.njk
index ea26fe1..629230a 100644
--- a/frontend/src/templates/pages/ui/index.njk
+++ b/frontend/src/templates/pages/ui/index.njk
@@ -56,19 +56,17 @@ UI
     <h2>Icons</h2>
 
     <div class="ui-element-group">
-      {{ icon(type='donate')}}
-      {{ icon(type='phone')}}
-      {{ icon(type='pin')}}
-      {{ icon(type='email')}}
+      {{ icon(type='donate', color='accent', size='small')}}
+      {{ icon(type='phone', color='accent', size='medium')}}
+      {{ icon(type='pin', color='accent', size='medium')}}
+      {{ icon(type='email', color='accent', size='medium')}}
 
       <div class="ui-inverse-block--icons">
-       {{ icon(type='donate', color='white')}}
-
-        {{ icon(type='email', color='semi-white')}}
-
-      {{ icon(type='email', color='accent')}}
-      {{ icon(type='email', color='inverse')}}
-      {{ icon(type='email', color='secondary-inverse')}}
+       {{ icon(type='donate', color='inverse', size='small')}}
+       {{ icon(type='phone', color='secondary-inverse', size='medium')}}
+       {{ icon(type='pin', color='secondary-inverse', size='medium')}}
+       {{ icon(type='email', color='secondary-inverse', size='medium')}}
+     
       </div>
     </div>
   </div>
diff --git a/frontend/src/templates/ui/icon.njk b/frontend/src/templates/ui/icon.njk
index 3d772ea..c1cb96b 100644
--- a/frontend/src/templates/ui/icon.njk
+++ b/frontend/src/templates/ui/icon.njk
@@ -1,8 +1,8 @@
-{% macro icon(type, color='') -%}
+{% macro icon(type, color='', size) -%}
 
-<i class="icon icon--{{type}} {{ color }}">
-   
-    {% if type == 'donate' %}
+<i class="icon icon--color-{{color}} icon--size-{{size}}">
+
+   {% if type == 'donate' %}
         <svg viewBox="0 0 12 12" >
   
     <path d="M8 1.375C8 2.4565 6.59 3.8005 5.8875 4.364C5.77757 4.45213 5.64089 4.50015 5.5 4.50015C5.35911 4.50015 5.22243 4.45213 5.1125 4.364C4.41 3.8 3 2.4565 3 1.375C2.98423 1.02711 3.10689 0.687135 3.34115 0.429453C3.5754 0.17177 3.90219 0.0173592 4.25 0C4.59781 0.0173592 4.9246 0.17177 5.15885 0.429453C5.39311 0.687135 5.51577 1.02711 5.5 1.375C5.48423 1.02711 5.60689 0.687135 5.84115 0.429453C6.0754 0.17177 6.40219 0.0173592 6.75 0C7.09781 0.0173592 7.4246 0.17177 7.65885 0.429453C7.89311 0.687135 8.01577 1.02711 8 1.375ZM11.669 6.175L7.819 10.3795C7.35026 10.8906 6.78033 11.2986 6.14542 11.5776C5.5105 11.8566 4.8245 12.0004 4.131 12H2C1.46957 12 0.960859 11.7893 0.585786 11.4142C0.210714 11.0391 0 10.5304 0 10V7.5C0 6.96957 0.210714 6.46086 0.585786 6.08579C0.960859 5.71071 1.46957 5.5 2 5.5H5.8935C6.05878 5.50032 6.22189 5.53758 6.37092 5.60905C6.51995 5.68052 6.65111 5.78439 6.75483 5.91308C6.85854 6.04176 6.93218 6.192 6.97036 6.35281C7.00854 6.51362 7.0103 6.68093 6.9755 6.8425C6.92137 7.06851 6.79945 7.27258 6.62608 7.42736C6.45271 7.58214 6.23618 7.68024 6.0055 7.7085L3.924 8C3.79281 8.01882 3.67446 8.08895 3.59495 8.19499C3.51545 8.30103 3.4813 8.43429 3.5 8.5655C3.5187 8.69678 3.58878 8.81526 3.69483 8.89487C3.80089 8.97448 3.93422 9.0087 4.0655 8.99L6.1915 8.69C6.69224 8.61625 7.14998 8.36554 7.48176 7.98331C7.81354 7.60108 7.99739 7.11263 8 6.6065C7.99755 6.49948 7.98668 6.39282 7.9675 6.2875L9.7385 4.419C9.97204 4.16612 10.2962 4.01593 10.6401 4.00122C10.984 3.98651 11.3197 4.10848 11.574 4.3405C11.827 4.57236 11.9787 4.89435 11.9965 5.23705C12.0143 5.57976 11.8967 5.91572 11.669 6.1725V6.175Z" />
@@ -20,17 +20,17 @@
   {% if type == 'pin' %}
 
 <svg >
-  <svg >
+
   <path d="M10.2083 11.6667C10.2083 9.57259 11.9059 7.875 14 7.875C16.0941 7.875 17.7917 9.57259 17.7917 11.6667C17.7917 13.7608 16.0941 15.4583 14 15.4583C11.9059 15.4583 10.2083 13.7608 10.2083 11.6667Z" />
   <path fill-rule="evenodd" clip-rule="evenodd" d="M4.40247 10.357C4.80338 5.49319 8.8678 1.75 13.7481 1.75H14.252C19.1323 1.75 23.1967 5.49319 23.5976 10.357C23.8134 12.9757 23.0045 15.5759 21.3413 17.61L15.7494 24.4488C14.8452 25.5545 13.1548 25.5545 12.2507 24.4488L6.65878 17.6101C4.99551 15.5759 4.18661 12.9757 4.40247 10.357ZM14 6.125C10.9394 6.125 8.45833 8.60609 8.45833 11.6667C8.45833 14.7272 10.9394 17.2083 14 17.2083C17.0606 17.2083 19.5417 14.7272 19.5417 11.6667C19.5417 8.60609 17.0606 6.125 14 6.125Z" />
 </svg>
   
-</svg>
+
  {% endif %}
 
   {% if type == 'email' %}
 
- <svg >
+
  
   <svg >
   <path d="M8.50404 5.72549C12.1611 5.40758 15.8389 5.40758 19.496 5.72549L21.2579 5.87865C22.4308 5.98061 23.4354 6.68022 23.9559 7.68096C24.0225 7.80899 23.9726 7.964 23.8499 8.03995L16.5396 12.5654C14.9718 13.5359 12.9948 13.5563 11.4073 12.6182L4.0482 8.26965C3.9293 8.1994 3.87473 8.05478 3.92831 7.92749C4.40449 6.79633 5.47506 5.98879 6.7421 5.87865L8.50404 5.72549Z" />
@@ -38,7 +38,7 @@
 </svg>
   
 
-</svg>
+
  {% endif %}
 </i>