feat: add icons and make customer data cards editable

This commit is contained in:
José Oliveira 2021-10-12 13:54:36 +01:00
parent 4b461c0a57
commit 5cc63d05a6
25 changed files with 431 additions and 94 deletions

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<desc>Created with Sketch.</desc>
<g id="icon/action/edit/disabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18" id="Stroke-1" stroke="#5f668a" stroke-width="2"></path>
<polygon id="Stroke-3" stroke="#5f668a" stroke-width="2" points="6 12 17 1 21 5 10 16 6 16"></polygon>
</g>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/button/loyalty/comet</title>
<g id="icon/button/loyalty/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Stroke-2" stroke="#5f668a" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
<path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#5f668a"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/button/loyalty/white</title>
<g id="icon/button/loyalty/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Stroke-2" stroke="#FFFFFF" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
<path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/button/loyalty/zodiac</title>
<g id="icon/button/loyalty/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Stroke-2" stroke="#1B2559" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
<path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#1B2559"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/sf-small/listing/white</title>
<g id="icon/sf-small/listing/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#FFFFFF" stroke-width="2"></line>
<line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#FFFFFF" stroke-width="2"></line>
<line x1="1" y1="13" x2="19.0952381" y2="13" id="Path-4-Copy-2" stroke="#FFFFFF" stroke-width="2"></line>
<line x1="1" y1="19" x2="19.0952381" y2="19" id="Path-4-Copy-3" stroke="#FFFFFF" stroke-width="2"></line>
</g>
</svg>

After

Width:  |  Height:  |  Size: 840 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/sf-small/listing/zodiac</title>
<g id="icon/sf-small/listing/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#1B2559" stroke-width="2"></line>
<line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#1B2559" stroke-width="2"></line>
<line x1="1" y1="13" x2="19.0952381" y2="13" id="Path-4-Copy-2" stroke="#1B2559" stroke-width="2"></line>
<line x1="1" y1="19" x2="19.0952381" y2="19" id="Path-4-Copy-3" stroke="#1B2559" stroke-width="2"></line>
</g>
</svg>

After

Width:  |  Height:  |  Size: 842 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/sf-small/overview/comet</title>
<g id="icon/sf-small/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#5F668A" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#5F668A" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/sf-small/overview/white</title>
<g id="icon/sf-small/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#FFFFFF" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#FFFFFF" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/sf-small/overview/zodiac</title>
<g id="icon/sf-small/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#1B2559" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#1B2559" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 821 B

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/data/comet</title>
<g id="icon/customer-nav/data/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
<path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
<ellipse id="Oval-Copy-3" stroke="#5F668A" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
</g>
</svg>

After

Width:  |  Height:  |  Size: 820 B

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/data/white</title>
<g id="icon/customer-nav/data/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
<path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
<ellipse id="Oval-Copy-3" stroke="#FFFFFF" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
</g>
</svg>

After

Width:  |  Height:  |  Size: 820 B

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/data/zodiac</title>
<g id="icon/customer-nav/data/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
<path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
<ellipse id="Oval-Copy-3" stroke="#1B2559" stroke-width="2" cx="10" cy="5" rx="9" ry="4"></ellipse>
</g>
</svg>

After

Width:  |  Height:  |  Size: 822 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/overview/comet</title>
<g id="icon/customer-nav/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#5F668A" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#5F668A" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 827 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/overview/white</title>
<g id="icon/customer-nav/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#FFFFFF" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#FFFFFF" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 827 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon/customer-nav/overview/zodiac</title>
<g id="icon/customer-nav/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy" stroke="#1B2559" stroke-width="2" x="12" y="1" width="7" height="7" rx="2"></rect>
<rect id="Rectangle-Copy-3" stroke="#1B2559" stroke-width="2" x="12" y="12" width="7" height="7" rx="2"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 829 B