refactor: change icons

qase-tms · Feb 4, 2024 · 3df20a2 · 3df20a2
1 parent 998112f
commit 3df20a2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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,25 +20,25 @@
   {% 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" />
   <path d="M3.92232 10.228C3.74036 10.1204 3.50819 10.2362 3.48698 10.4464C3.19096 13.3813 3.2626 16.344 3.70192 19.2655C3.93352 20.8056 5.1905 21.9863 6.7421 22.1212L8.50404 22.2744C12.1611 22.5923 15.8389 22.5923 19.496 22.2744L21.2579 22.1212C22.8095 21.9863 24.0665 20.8056 24.2981 19.2655C24.7502 16.2589 24.8129 13.2086 24.4862 10.1899C24.4633 9.97816 24.2272 9.86458 24.0461 9.9767L17.4607 14.0533C15.3395 15.3665 12.6649 15.394 10.5171 14.1249L3.92232 10.228Z" />
 </svg>
 
 
-</svg>
+
  {% endif %}
 </i>