Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-11-18 02:07:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #308 from cypherstack/ui-fixes

Browse source 
UI fixes
This commit is contained in:
Diego Salazar 2023-01-06 16:02:27 -07:00 committed by GitHub
commit b3d5000e61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 1113 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/svg/oled-black-theme.svg Normal file
View file

@ -0,0 +1,28 @@
<svg width="200" height="162" viewBox="0 0 200 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_489_21263)">
<rect width="200" height="162" rx="8" fill="url(#paint0_linear_489_21263)"/>
<rect x="10" y="10" width="180" height="20" rx="2" fill="#77A7F9"/>
<rect x="16" y="16" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="40" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="46" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="62" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="68" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="84" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="90" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="106" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="112" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="128" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="134" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="150" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="156" width="106" height="8" rx="1" fill="black"/>
</g>
<defs>
<linearGradient id="paint0_linear_489_21263" x1="100" y1="0" x2="100" y2="162" gradientUnits="userSpaceOnUse">
<stop offset="0.9999"/>
<stop offset="1" stop-color="#E8F2F9"/>
</linearGradient>
<clipPath id="clip0_489_21263">
<rect width="200" height="162" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

5
assets/svg/oledBlack/bell-new.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 21C15 21.5031 14.6859 22.0406 14.1234 22.4156C13.5609 22.7906 12.7547 23 12 23C11.2031 23 10.4391 22.7906 9.87656 22.4156C9.31406 22.0406 9 21.5031 9 21H15Z" fill="#E0E3E3"/>
<path d="M13.4279 2.38462V3.21538C16.6867 3.85707 19.1419 6.65096 19.1419 10V10.8135C19.1419 12.8514 19.9142 14.8115 21.307 16.3346L21.6373 16.6938C22.0123 17.1048 22.106 17.6846 21.8739 18.1822C21.6418 18.6798 21.1329 19 20.5704 19H3.42848C2.86601 19 2.35582 18.6798 2.12538 18.1822C1.89495 17.6846 1.98712 17.1048 2.36086 16.6938L2.69192 16.3346C4.08648 14.8115 4.85697 12.8514 4.85697 10.8135V10C4.85697 6.65096 7.27202 3.85707 10.5709 3.21538V2.38462C10.5709 1.62005 11.2093 1 11.9994 1C12.7896 1 13.4279 1.62005 13.4279 2.38462Z" fill="#E0E3E3"/>
<circle cx="20.5" cy="3.5" r="2.5" fill="#C00205"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 895 B

18
assets/svg/oledBlack/buy-coins-icon.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5101_18544)">
<g opacity="0.4">
<path d="M22.2 6C23.3297 5.37187 24 4.59422 24 3.75C24 1.67906 19.9688 0 15 0C9.98906 0 6 1.67906 6 3.75C6 4.59422 6.67031 5.37187 7.8 6C7.80937 6.00469 7.81758 6.00937 7.82578 6.01406C7.83398 6.01875 7.84219 6.02344 7.85156 6.02813C8.23125 6.00938 8.61094 6 9 6C11.6344 6 14.0906 6.44062 15.9422 7.21406C16.1203 7.28906 16.2984 7.36875 16.4672 7.44844C18.8062 7.28906 20.8359 6.75469 22.2 6Z" fill="white"/>
<path d="M19.9435 12.9151C19.7958 12.9551 19.6477 12.9951 19.5 13.0359V13.5C20.7602 13.5 21.9296 13.8885 22.8951 14.5522C23.5995 14.0172 24 13.4028 24 12.75V11.0906C23.4141 11.5734 22.7063 11.9672 21.9422 12.2859C21.3382 12.5376 20.6447 12.7253 19.9435 12.9151Z" fill="white"/>
<path d="M18.3703 8.74688C19.0031 9.37969 19.5 10.2234 19.5 11.25V11.4984C20.4328 11.2734 21.2625 10.9781 21.9469 10.6359C21.9739 10.6209 22.0009 10.6021 22.0279 10.5833C22.0852 10.5432 22.1426 10.5032 22.2 10.5C23.3297 9.87187 24 9.09375 24 8.25V6.59063C23.4141 7.07344 22.7063 7.46719 21.9422 7.78594C20.9109 8.2125 19.6969 8.54063 18.3703 8.74688Z" fill="white"/>
</g>
<path d="M16.2 13.5C17.3297 12.8719 18 12.0938 18 11.25C18 9.17813 13.9688 7.5 9 7.5C4.02938 7.5 0 9.17813 0 11.25C0 12.0938 0.669375 12.8719 1.79953 13.5C1.85443 13.5031 1.91057 13.5415 1.96782 13.5807C1.9966 13.6004 2.02567 13.6203 2.055 13.6359C3.70594 14.4703 6.20625 15 9 15C11.9438 15 14.5594 14.4094 16.2 13.5Z" fill="white"/>
<path d="M14.8788 15.6729C13.1948 16.2046 11.1571 16.5 9 16.5C6.36562 16.5 3.91125 16.0594 2.05922 15.2859C1.29469 14.9672 0.583594 14.5734 0 14.0906V15.75C0 16.5938 0.669375 17.3719 1.79953 18C3.44109 18.9094 6.05625 19.5 9 19.5C10.6471 19.5 12.1916 19.3159 13.5211 18.9937C13.6261 17.7367 14.1186 16.5898 14.8788 15.6729Z" fill="white"/>
<path d="M13.5862 20.5191C13.7529 21.4936 14.1547 22.3879 14.731 23.1415C13.1742 23.6778 11.1771 24 9 24C4.02938 24 0 22.3219 0 20.25V18.5906C0.583594 19.0734 1.29469 19.4672 2.05922 19.7859C3.91125 20.5594 6.36562 21 9 21C10.6307 21 12.1932 20.8312 13.5862 20.5191Z" fill="white"/>
<path d="M24 19.5C24 21.9844 21.9844 24 19.5 24C17.0156 24 15 21.9844 15 19.5C15 17.0156 17.0156 15 19.5 15C21.9844 15 24 17.0156 24 19.5ZM19 17.4719V18.9719H17.5C17.225 18.9719 17 19.225 17 19.4719C17 19.775 17.225 19.9719 17.5 19.9719H19V21.4719C19 21.775 19.225 21.9719 19.5 21.9719C19.775 21.9719 20 21.775 20 21.4719V19.9719H21.5C21.775 19.9719 22 19.775 22 19.4719C22 19.225 21.775 18.9719 21.5 18.9719H20V17.4719C20 17.225 19.775 16.9719 19.5 16.9719C19.225 16.9719 19 17.225 19 17.4719Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_5101_18544">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

11
assets/svg/oledBlack/exchange-2.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5101_7226)">
<path d="M19.5 6.5L20.4343 7.33045C20.8552 6.85685 20.8552 6.14315 20.4343 5.66955L19.5 6.5ZM16.4343 1.16955C15.9756 0.653567 15.1855 0.607091 14.6695 1.06574C14.1536 1.52439 14.1071 2.31448 14.5657 2.83045L16.4343 1.16955ZM14.5657 10.1695C14.1071 10.6855 14.1536 11.4756 14.6695 11.9343C15.1855 12.3929 15.9756 12.3464 16.4343 11.8305L14.5657 10.1695ZM0.75 10.5C0.75 11.1904 1.30964 11.75 2 11.75C2.69036 11.75 3.25 11.1904 3.25 10.5H0.75ZM6 7.75H19.5V5.25H6V7.75ZM14.5657 2.83045L18.5657 7.33045L20.4343 5.66955L16.4343 1.16955L14.5657 2.83045ZM16.4343 11.8305L20.4343 7.33045L18.5657 5.66955L14.5657 10.1695L16.4343 11.8305ZM3.25 10.5C3.25 8.98122 4.48122 7.75 6 7.75V5.25C3.10051 5.25 0.75 7.60051 0.75 10.5H3.25Z" fill="white"/>
<path opacity="0.4" d="M4.5 18L3.56574 17.1695C3.14475 17.6432 3.14475 18.3568 3.56574 18.8305L4.5 18ZM7.56574 23.3305C8.02439 23.8464 8.81448 23.8929 9.33045 23.4343C9.84643 22.9756 9.89291 22.1855 9.43426 21.6695L7.56574 23.3305ZM9.43426 14.3305C9.89291 13.8145 9.84643 13.0244 9.33046 12.5657C8.81448 12.1071 8.02439 12.1536 7.56574 12.6695L9.43426 14.3305ZM23.25 14C23.25 13.3096 22.6904 12.75 22 12.75C21.3096 12.75 20.75 13.3096 20.75 14L23.25 14ZM18 16.75L4.5 16.75L4.5 19.25L18 19.25L18 16.75ZM9.43426 21.6695L5.43426 17.1695L3.56574 18.8305L7.56574 23.3305L9.43426 21.6695ZM7.56574 12.6695L3.56574 17.1695L5.43426 18.8305L9.43426 14.3305L7.56574 12.6695ZM20.75 14C20.75 15.5188 19.5188 16.75 18 16.75L18 19.25C20.8995 19.25 23.25 16.8995 23.25 14L20.75 14Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_5101_7226">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

28
assets/svg/oledBlack/oled-black-theme.svg Normal file
View file

@ -0,0 +1,28 @@
<svg width="200" height="162" viewBox="0 0 200 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_489_21263)">
<rect width="200" height="162" rx="8" fill="url(#paint0_linear_489_21263)"/>
<rect x="10" y="10" width="180" height="20" rx="2" fill="#77A7F9"/>
<rect x="16" y="16" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="40" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="46" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="62" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="68" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="84" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="90" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="106" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="112" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="128" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="134" width="106" height="8" rx="1" fill="black"/>
<rect x="10" y="150" width="180" height="20" rx="2" fill="#212F46"/>
<rect x="16" y="156" width="106" height="8" rx="1" fill="black"/>
</g>
<defs>
<linearGradient id="paint0_linear_489_21263" x1="100" y1="0" x2="100" y2="162" gradientUnits="userSpaceOnUse">
<stop offset="0.9999"/>
<stop offset="1" stop-color="#E8F2F9"/>
</linearGradient>
<clipPath id="clip0_489_21263">
<rect width="200" height="162" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

5
assets/svg/oledBlack/stack-icon1.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="60" height="47" viewBox="0 0 60 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.4652 0.708774C31.9724 -1.30683 27.6074 1.21691 27.6074 5.24811C27.6074 9.27931 29.5549 12.7727 32.7471 14.9281L46.2653 22.7661L46.2992 22.7534L59.9995 14.8349L35.4652 0.708774Z" fill="white"/>
<path d="M32.7438 14.9285C29.5515 12.7731 27.604 9.14421 27.604 5.24851C27.604 3.3303 28.6074 1.72968 30.0342 0.823501C29.9664 0.861612 30.1019 0.785391 30.0342 0.823501L8.64977 12.8409L5.21624 14.9158L2.875 16.2623C4.34833 15.5128 6.19422 15.4535 7.84113 16.4105L13.7302 19.7642L18.8911 22.7495L32.5913 30.6552L46.2577 22.758L32.7395 14.92L32.7438 14.9285Z" fill="#999999"/>
<path d="M60 30.6636L32.5953 46.5005L27.4217 43.5152L27.4005 43.494L5.19475 30.6636C3.67485 29.6728 2.43861 28.322 1.56647 26.8018C0.550381 25.0487 0 23.0331 0 20.9455C0 19.0654 0.944115 17.5114 2.31583 16.5883C2.50212 16.4739 2.68417 16.3681 2.87892 16.2665C4.35224 15.517 6.19814 15.4577 7.84505 16.4147L13.7003 19.7938L18.8611 22.7664L18.895 22.7536L32.5953 30.6594L46.2616 22.7621L60 30.6594V30.6636Z" fill="#4C4C4C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

14
assets/svg/oledBlack/tx-exchange-icon-failed.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29952)">
<path d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#B4C4FF"/>
<path d="M5.30071 12.4C4.91018 12.7905 4.91018 13.4236 5.30071 13.8142C5.69123 14.2047 6.32439 14.2047 6.71492 13.8142L5.30071 12.4ZM13.0789 6.03599L14.0787 6.05567C14.0839 5.78863 13.9821 5.53058 13.796 5.33904C13.6098 5.1475 13.3548 5.03839 13.0877 5.03603L13.0789 6.03599ZM9.00968 5.00004C8.45741 4.99516 8.00576 5.43891 8.00089 5.99117C7.99601 6.54344 8.43976 6.99509 8.99202 6.99996L9.00968 5.00004ZM12.001 9.98032C11.9902 10.5325 12.429 10.9889 12.9812 10.9998C13.5333 11.0107 13.9898 10.5719 14.0007 10.0197L12.001 9.98032ZM18.6429 11.6C19.0334 11.2095 19.0334 10.5764 18.6429 10.1858C18.2524 9.79531 17.6192 9.79531 17.2287 10.1858L18.6429 11.6ZM10.8647 17.964L9.8653 17.9297C9.85604 18.1992 9.95602 18.461 10.1426 18.6557C10.3291 18.8505 10.5864 18.9616 10.856 18.964L10.8647 17.964ZM14.9922 19C15.5444 19.0048 15.996 18.561 16.0008 18.0087C16.0056 17.4564 15.5618 17.0048 15.0096 17L14.9922 19ZM12.0003 14.0343C12.0192 13.4824 11.5871 13.0195 11.0352 13.0006C10.4832 12.9816 10.0204 13.4137 10.0014 13.9657L12.0003 14.0343ZM6.71492 13.8142L13.786 6.7431L12.3718 5.32889L5.30071 12.4L6.71492 13.8142ZM8.99202 6.99996L13.0701 7.03595L13.0877 5.03603L9.00968 5.00004L8.99202 6.99996ZM12.0791 6.01631L12.001 9.98032L14.0007 10.0197L14.0787 6.05567L12.0791 6.01631ZM17.2287 10.1858L10.1576 17.2569L11.5718 18.6711L18.6429 11.6L17.2287 10.1858ZM15.0096 17L10.8734 16.964L10.856 18.964L14.9922 19L15.0096 17ZM11.8641 17.9983L12.0003 14.0343L10.0014 13.9657L9.8653 17.9297L11.8641 17.9983Z" fill="#00297A"/>
<circle cx="20.5" cy="20.5" r="3.5" fill="#D34E50"/>
<path d="M19.4395 19.4395L20.5001 20.5001L21.5608 21.5608" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 21.5605L20.5607 20.4999L21.6213 19.4392" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29952">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

13
assets/svg/oledBlack/tx-exchange-icon-pending.svg Normal file
View file

@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29944)">
<path d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#B4C4FF"/>
<circle cx="20.5" cy="20.5" r="3.5" fill="#F7D65D"/>
<path d="M20.5 19V20.5H21.5" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.30071 12.4C4.91018 12.7905 4.91018 13.4236 5.30071 13.8142C5.69123 14.2047 6.32439 14.2047 6.71492 13.8142L5.30071 12.4ZM13.0789 6.03599L14.0787 6.05567C14.0839 5.78863 13.9821 5.53058 13.796 5.33904C13.6098 5.1475 13.3548 5.03839 13.0877 5.03603L13.0789 6.03599ZM9.00968 5.00004C8.45741 4.99516 8.00576 5.43891 8.00089 5.99117C7.99601 6.54344 8.43976 6.99509 8.99202 6.99996L9.00968 5.00004ZM12.001 9.98032C11.9902 10.5325 12.429 10.9889 12.9812 10.9998C13.5333 11.0107 13.9898 10.5719 14.0007 10.0197L12.001 9.98032ZM18.6429 11.6C19.0334 11.2095 19.0334 10.5764 18.6429 10.1858C18.2524 9.79531 17.6192 9.79531 17.2287 10.1858L18.6429 11.6ZM10.8647 17.964L9.8653 17.9297C9.85605 18.1992 9.95602 18.461 10.1426 18.6557C10.3291 18.8505 10.5864 18.9616 10.856 18.964L10.8647 17.964ZM14.9922 19C15.5444 19.0048 15.996 18.561 16.0008 18.0087C16.0056 17.4564 15.5618 17.0048 15.0096 17L14.9922 19ZM12.0003 14.0343C12.0192 13.4824 11.5871 13.0195 11.0352 13.0006C10.4832 12.9816 10.0204 13.4137 10.0014 13.9657L12.0003 14.0343ZM6.71492 13.8142L13.786 6.7431L12.3718 5.32889L5.30071 12.4L6.71492 13.8142ZM8.99202 6.99996L13.0701 7.03595L13.0877 5.03603L9.00968 5.00004L8.99202 6.99996ZM12.0791 6.01631L12.001 9.98032L14.0007 10.0197L14.0787 6.05567L12.0791 6.01631ZM17.2287 10.1858L10.1576 17.2569L11.5718 18.6711L18.6429 11.6L17.2287 10.1858ZM15.0096 17L10.8734 16.964L10.856 18.964L14.9922 19L15.0096 17ZM11.8641 17.9983L12.0003 14.0343L10.0014 13.9657L9.8653 17.9297L11.8641 17.9983Z" fill="#00297A"/>
</g>
<defs>
<clipPath id="clip0_5094_29944">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

11
assets/svg/oledBlack/tx-exchange-icon.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29949)">
<circle cx="12" cy="12" r="12" fill="#B4C4FF"/>
<path d="M5.30071 12.4C4.91018 12.7905 4.91018 13.4236 5.30071 13.8142C5.69123 14.2047 6.32439 14.2047 6.71492 13.8142L5.30071 12.4ZM13.0789 6.03599L14.0787 6.05567C14.0839 5.78863 13.9821 5.53058 13.796 5.33904C13.6098 5.1475 13.3548 5.03839 13.0877 5.03603L13.0789 6.03599ZM9.00968 5.00004C8.45741 4.99516 8.00576 5.43891 8.00089 5.99117C7.99601 6.54344 8.43976 6.99509 8.99202 6.99996L9.00968 5.00004ZM12.001 9.98032C11.9902 10.5325 12.429 10.9889 12.9812 10.9998C13.5333 11.0107 13.9898 10.5719 14.0007 10.0197L12.001 9.98032ZM18.6429 11.6C19.0334 11.2095 19.0334 10.5764 18.6429 10.1858C18.2524 9.79531 17.6192 9.79531 17.2287 10.1858L18.6429 11.6ZM10.8647 17.964L9.8653 17.9297C9.85604 18.1992 9.95602 18.461 10.1426 18.6557C10.3291 18.8505 10.5864 18.9616 10.856 18.964L10.8647 17.964ZM14.9922 19C15.5444 19.0048 15.996 18.561 16.0008 18.0087C16.0056 17.4564 15.5618 17.0048 15.0096 17L14.9922 19ZM12.0003 14.0343C12.0192 13.4824 11.5871 13.0195 11.0352 13.0006C10.4832 12.9816 10.0204 13.4137 10.0014 13.9657L12.0003 14.0343ZM6.71492 13.8142L13.786 6.7431L12.3718 5.32889L5.30071 12.4L6.71492 13.8142ZM8.99202 6.99996L13.0701 7.03595L13.0877 5.03603L9.00968 5.00004L8.99202 6.99996ZM12.0791 6.01631L12.001 9.98032L14.0007 10.0197L14.0787 6.05567L12.0791 6.01631ZM17.2287 10.1858L10.1576 17.2569L11.5718 18.6711L18.6429 11.6L17.2287 10.1858ZM15.0096 17L10.8734 16.964L10.856 18.964L14.9922 19L15.0096 17ZM11.8641 17.9983L12.0003 14.0343L10.0014 13.9657L9.8653 17.9297L11.8641 17.9983Z" fill="#00297A"/>
</g>
<defs>
<clipPath id="clip0_5094_29949">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

14
assets/svg/oledBlack/tx-icon-receive-failed.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29925)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#8EF5C3"/>
<circle cx="20.5" cy="20.5" r="3.5" fill="#D34E50"/>
<path d="M16 8L8 16M8 16H14M8 16V10" stroke="#003921" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4395 19.4395L20.5001 20.5001L21.5608 21.5608" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 21.5605L20.5607 20.4999L21.6213 19.4392" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29925">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,020 B

12
assets/svg/oledBlack/tx-icon-receive-pending.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29921)">
<path d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#8EF5C3"/>
<path d="M16 8L8 16M8 16H14M8 16V10" stroke="#003921" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 24C22.433 24 24 22.433 24 20.5C24 18.567 22.433 17 20.5 17C18.567 17 17 18.567 17 20.5C17 22.433 18.567 24 20.5 24ZM21 19C21 18.7239 20.7761 18.5 20.5 18.5C20.2239 18.5 20 18.7239 20 19V20.5C20 20.7761 20.2239 21 20.5 21H21.5C21.7761 21 22 20.7761 22 20.5C22 20.2239 21.7761 20 21.5 20H21V19Z" fill="#F7D65D"/>
</g>
<defs>
<clipPath id="clip0_5094_29921">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

11
assets/svg/oledBlack/tx-icon-receive.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29958)">
<circle cx="12" cy="12" r="12" fill="#8EF5C3"/>
<path d="M16 8L8 16M8 16H14M8 16V10" stroke="#003921" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29958">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 421 B

14
assets/svg/oledBlack/tx-icon-send-failed.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29938)">
<path d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#FFB4A9"/>
<path d="M8 16L16 8M16 8L10 8M16 8L16 14" stroke="#690001" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="20.5" cy="20.5" r="3.5" fill="#D34E50"/>
<path d="M19.4395 19.4395L20.5001 20.5001L21.5608 21.5608" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 21.5605L20.5607 20.4999L21.6213 19.4392" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29938">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 985 B

13
assets/svg/oledBlack/tx-icon-send-pending.svg Normal file
View file

@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29933)">
<path d="M23.0154 16.7681C23.6489 15.3066 24 13.6943 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C13.6943 24 15.3066 23.6489 16.7681 23.0154C16.2832 22.2973 16 21.4317 16 20.5C16 18.0147 18.0147 16 20.5 16C21.4317 16 22.2973 16.2832 23.0154 16.7681Z" fill="#FFB4A9"/>
<path d="M8 16L16 8M16 8L10 8M16 8L16 14" stroke="#690001" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="20.5" cy="20.5" r="3.5" fill="#F7D65D"/>
<path d="M20.5 19V20.5H21.5" stroke="#2A2D34" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29933">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 833 B

11
assets/svg/oledBlack/tx-icon-send.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5094_29961)">
<circle cx="12" cy="12" r="12" fill="#FFB4A9"/>
<path d="M8 16L16 8M16 8L10 8M16 8L16 14" stroke="#690001" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5094_29961">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 426 B

5
lib/main.dart
View file

@ -59,6 +59,7 @@ import 'package:stackwallet/utilities/theme/color_theme.dart';
import 'package:stackwallet/utilities/theme/dark_colors.dart';
import 'package:stackwallet/utilities/theme/light_colors.dart';
import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:window_size/window_size.dart';
@ -75,7 +76,6 @@ void main() async {
if (Platform.isIOS) {
Util.libraryPath = await getLibraryDirectory();
}
Screen? screen;
if (Platform.isLinux || (Util.isDesktop && !Platform.isIOS)) {
screen = await getCurrentScreen();
@ -323,6 +323,9 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
case "dark":
colorTheme = DarkColors();
break;
case "oledBlack":
colorTheme = OledBlackColors();
break;
case "oceanBreeze":
colorTheme = OceanBreezeColors();
break;

23
lib/pages/exchange_view/exchange_form.dart
View file

@ -248,6 +248,29 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
fromTicker: ref.read(exchangeFormStateProvider).fromTicker ?? "",
onSelected: (to) =>
ref.read(exchangeFormStateProvider).updateTo(to, true));
unawaited(
showDialog<void>(
context: context,
barrierDismissible: false,
builder: (_) => WillPopScope(
onWillPop: () async => false,
child: Container(
color: Theme.of(context)
.extension<StackColors>()!
.overlay
.withOpacity(0.6),
child: const CustomLoadingOverlay(
message: "Updating exchange rate",
eventBus: null,
),
),
),
),
);
await Future<void>.delayed(const Duration(milliseconds: 300));
Navigator.of(context).pop();
} else {
final fromTicker = ref.read(exchangeFormStateProvider).fromTicker ?? "";
final toTicker = ref.read(exchangeFormStateProvider).toTicker ?? "";

84
lib/pages/settings_views/global_settings_view/appearance_settings_view.dart
View file

@ -9,6 +9,7 @@ import 'package:stackwallet/utilities/theme/color_theme.dart';
import 'package:stackwallet/utilities/theme/dark_colors.dart';
import 'package:stackwallet/utilities/theme/light_colors.dart';
import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
@ -28,6 +29,8 @@ class AppearanceSettingsView extends ConsumerWidget {
return "Ocean theme";
case ThemeType.dark:
return "Dark theme";
case ThemeType.oledBlack:
return "Oled Black theme";
}
}
@ -430,6 +433,87 @@ class _ThemeOptionsView extends ConsumerState<ThemeOptionsView> {
),
),
),
const SizedBox(
height: 10,
),
MaterialButton(
splashColor: Colors.transparent,
hoverColor: Colors.transparent,
padding: const EdgeInsets.all(0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
onPressed: () {
DB.instance.put<dynamic>(
boxName: DB.boxNameTheme,
key: "colorScheme",
value: ThemeType.oledBlack.name,
);
ref.read(colorThemeProvider.state).state =
StackColors.fromStackColorTheme(
OledBlackColors(),
);
setState(() {
_selectedTheme = "oledBlack";
});
},
child: SizedBox(
width: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
SizedBox(
width: 10,
height: 10,
child: Radio(
activeColor: Theme.of(context)
.extension<StackColors>()!
.radioButtonIconEnabled,
value: "oledBlack",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "oledBlack") {
DB.instance.put<dynamic>(
boxName: DB.boxNameTheme,
key: "colorScheme",
value: ThemeType.oledBlack.name,
);
ref.read(colorThemeProvider.state).state =
StackColors.fromStackColorTheme(
OledBlackColors(),
);
setState(() {
_selectedTheme = "oledBlack";
});
}
},
),
),
const SizedBox(
width: 14,
),
Text(
"OLED Black",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark2,
),
),
],
),
],
),
),
),
],
);
}

192
lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart
View file

@ -35,106 +35,110 @@ class _AppearanceOptionSettings
),
child: RoundedWhiteContainer(
radiusMultiplier: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(
Assets.svg.circleSun,
width: 48,
height: 48,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10),
child: RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text: "Appearances",
style: STextStyles.desktopTextSmall(context),
),
TextSpan(
text:
"\n\nCustomize how your Stack Wallet looks according to your preferences.",
style: STextStyles.desktopTextExtraExtraSmall(
context),
),
],
),
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(
Assets.svg.circleSun,
width: 48,
height: 48,
),
),
],
),
const Padding(
padding: EdgeInsets.all(10.0),
child: Divider(
thickness: 0.5,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Display favorite wallets",
style: STextStyles.desktopTextExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
textAlign: TextAlign.left,
),
SizedBox(
height: 20,
width: 40,
child: DraggableSwitchButton(
isOn: ref.watch(
prefsChangeNotifierProvider
.select((value) => value.showFavoriteWallets),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.all(10),
child: RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text: "Appearances",
style: STextStyles.desktopTextSmall(context),
),
TextSpan(
text:
"\n\nCustomize how your Stack Wallet looks according to your preferences.",
style: STextStyles.desktopTextExtraExtraSmall(
context),
),
],
),
),
onValueChanged: (newValue) {
ref
.read(prefsChangeNotifierProvider)
.showFavoriteWallets = newValue;
},
),
)
],
),
),
const Padding(
padding: EdgeInsets.all(10.0),
child: Divider(
thickness: 0.5,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Choose theme",
style: STextStyles.desktopTextExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
textAlign: TextAlign.left,
],
),
const Padding(
padding: EdgeInsets.all(10.0),
child: Divider(
thickness: 0.5,
),
],
),
),
const Padding(
padding: EdgeInsets.all(10),
child: ThemeToggle(),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Display favorite wallets",
style: STextStyles.desktopTextExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
textAlign: TextAlign.left,
),
SizedBox(
height: 20,
width: 40,
child: DraggableSwitchButton(
isOn: ref.watch(
prefsChangeNotifierProvider.select(
(value) => value.showFavoriteWallets),
),
onValueChanged: (newValue) {
ref
.read(prefsChangeNotifierProvider)
.showFavoriteWallets = newValue;
},
),
)
],
),
),
const Padding(
padding: EdgeInsets.all(10.0),
child: Divider(
thickness: 0.5,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Choose theme",
style: STextStyles.desktopTextExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
textAlign: TextAlign.left,
),
],
),
),
Padding(
padding: EdgeInsets.all(10),
child: ThemeToggle(),
),
],
),
],
),
@ -163,12 +167,16 @@ class _ThemeToggle extends ConsumerState<ThemeToggle> {
return Assets.svg.themeDark;
case ThemeType.oceanBreeze:
return Assets.svg.themeOcean;
case ThemeType.oledBlack:
return Assets.svg.themeOledBlack;
}
}
@override
Widget build(BuildContext context) {
return Row(
return Wrap(
spacing: 16,
runSpacing: 16,
children: [
for (int i = 0; i < ThemeType.values.length; i++)
Row(

2
lib/utilities/assets.dart
View file

@ -33,6 +33,7 @@ class _SVG {
switch (Theme.of(context).extension<StackColors>()!.themeType) {
case ThemeType.light:
case ThemeType.dark:
case ThemeType.oledBlack:
return null;
case ThemeType.oceanBreeze:
@ -70,6 +71,7 @@ class _SVG {
String txExchangeFailed(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-failed.svg";
String get themeOledBlack => "assets/svg/oled-black-theme.svg";
String get themeOcean => "assets/svg/ocean-breeze-theme.svg";
String get themeLight => "assets/svg/light-mode.svg";
String get themeDark => "assets/svg/dark-theme.svg";

357
lib/utilities/text_styles.dart
View file

@ -27,6 +27,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 20,
);
}
}
@ -50,6 +56,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 18,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 18,
);
}
}
@ -73,6 +85,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 16,
);
}
}
@ -96,6 +114,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 16,
);
}
}
@ -119,6 +143,12 @@ class STextStyles {
fontWeight: FontWeight.w400,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 16,
);
}
}
@ -142,6 +172,12 @@ class STextStyles {
fontWeight: FontWeight.w400,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 16,
);
}
}
@ -165,6 +201,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 16,
);
}
}
@ -188,6 +230,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 16,
);
}
}
@ -211,6 +259,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextPrimary,
fontWeight: FontWeight.w500,
fontSize: 16,
);
}
}
@ -234,6 +288,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 16,
);
}
}
@ -257,6 +317,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark3,
fontWeight: FontWeight.w500,
fontSize: 16,
);
}
}
@ -280,6 +346,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark3,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -303,6 +375,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle1,
fontWeight: FontWeight.w500,
fontSize: 12,
);
}
}
@ -329,6 +407,13 @@ class STextStyles {
fontSize: 14,
height: 14 / 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textFieldActiveSearchIconRight,
fontWeight: FontWeight.w500,
fontSize: 14,
height: 14 / 14,
);
}
}
@ -352,6 +437,12 @@ class STextStyles {
fontWeight: FontWeight.w700,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle1,
fontWeight: FontWeight.w700,
fontSize: 12,
);
}
}
@ -375,6 +466,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).infoItemLabel,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -398,6 +495,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -421,6 +524,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -447,6 +556,13 @@ class STextStyles {
fontSize: 14,
height: 1.5,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle2,
fontWeight: FontWeight.w500,
fontSize: 14,
height: 1.5,
);
}
}
@ -473,6 +589,13 @@ class STextStyles {
fontSize: 14,
height: 1.5,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
height: 1.5,
);
}
}
@ -496,6 +619,12 @@ class STextStyles {
fontWeight: FontWeight.w400,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 14,
);
}
}
@ -519,6 +648,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).accentColorRed,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -542,6 +677,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).infoItemIcons,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
@ -565,6 +706,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).accentColorBlue,
fontWeight: FontWeight.w500,
fontSize: 12,
);
}
}
@ -588,6 +735,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 12,
);
}
}
@ -611,6 +764,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 12,
);
}
}
@ -634,6 +793,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 12,
);
}
}
@ -657,6 +822,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 10,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textError,
fontWeight: FontWeight.w500,
fontSize: 10,
);
}
}
@ -680,6 +851,12 @@ class STextStyles {
fontWeight: FontWeight.w500,
fontSize: 10,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle1,
fontWeight: FontWeight.w500,
fontSize: 10,
);
}
}
@ -708,6 +885,13 @@ class STextStyles {
fontSize: 40,
height: 40 / 40,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 40,
height: 40 / 40,
);
}
}
@ -734,6 +918,13 @@ class STextStyles {
fontSize: 32,
height: 32 / 32,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 32,
height: 32 / 32,
);
}
}
@ -760,6 +951,13 @@ class STextStyles {
fontSize: 24,
height: 24 / 24,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 24,
height: 24 / 24,
);
}
}
@ -786,6 +984,13 @@ class STextStyles {
fontSize: 20,
height: 30 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 30 / 20,
);
}
}
@ -812,6 +1017,13 @@ class STextStyles {
fontSize: 20,
height: 30 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 20,
height: 30 / 20,
);
}
}
@ -838,6 +1050,13 @@ class STextStyles {
fontSize: 20,
height: 28 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 20,
height: 28 / 20,
);
}
}
@ -864,6 +1083,13 @@ class STextStyles {
fontSize: 24,
height: 33 / 24,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w400,
fontSize: 24,
height: 33 / 24,
);
}
}
@ -890,6 +1116,13 @@ class STextStyles {
fontSize: 20,
height: 26 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextPrimary,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 26 / 20,
);
}
}
@ -916,6 +1149,13 @@ class STextStyles {
fontSize: 20,
height: 26 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextPrimaryDisabled,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 26 / 20,
);
}
}
@ -942,6 +1182,13 @@ class STextStyles {
fontSize: 20,
height: 26 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextSecondary,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 26 / 20,
);
}
}
@ -968,6 +1215,13 @@ class STextStyles {
fontSize: 20,
height: 26 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextSecondaryDisabled,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 26 / 20,
);
}
}
@ -994,6 +1248,13 @@ class STextStyles {
fontSize: 18,
height: 27 / 18,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 18,
height: 27 / 18,
);
}
}
@ -1020,6 +1281,13 @@ class STextStyles {
fontSize: 18,
height: 27 / 18,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextPrimaryDisabled,
fontWeight: FontWeight.w700,
fontSize: 18,
height: 27 / 18,
);
}
}
@ -1046,6 +1314,13 @@ class STextStyles {
fontSize: 16,
height: 24 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextPrimaryDisabled,
fontWeight: FontWeight.w500,
fontSize: 16,
height: 24 / 16,
);
}
}
@ -1072,6 +1347,13 @@ class STextStyles {
fontSize: 14,
height: 21 / 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle1,
fontWeight: FontWeight.w500,
fontSize: 14,
height: 21 / 14,
);
}
}
@ -1098,6 +1380,13 @@ class STextStyles {
fontSize: 14,
height: 21 / 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
height: 21 / 14,
);
}
}
@ -1124,6 +1413,13 @@ class STextStyles {
fontSize: 16,
height: 24 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).buttonTextSecondary,
fontWeight: FontWeight.w500,
fontSize: 16,
height: 24 / 16,
);
}
}
@ -1150,6 +1446,13 @@ class STextStyles {
fontSize: 20,
height: 30 / 20,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textSubtitle2,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 30 / 20,
);
}
}
@ -1176,6 +1479,13 @@ class STextStyles {
fontSize: 16,
height: 20.8 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark.withOpacity(0.8),
fontWeight: FontWeight.w500,
fontSize: 16,
height: 20.8 / 16,
);
}
}
@ -1202,6 +1512,13 @@ class STextStyles {
fontSize: 16,
height: 20.8 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 16,
height: 20.8 / 16,
);
}
}
@ -1228,6 +1545,13 @@ class STextStyles {
fontSize: 16,
height: 20.8 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark.withOpacity(0.5),
fontWeight: FontWeight.w500,
fontSize: 16,
height: 20.8 / 16,
);
}
}
@ -1254,6 +1578,13 @@ class STextStyles {
fontSize: 16,
height: 20.8 / 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 16,
height: 20.8 / 16,
);
}
}
@ -1277,6 +1608,12 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 8,
);
case ThemeType.oledBlack:
return GoogleFonts.roboto(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 8,
);
}
}
@ -1300,6 +1637,12 @@ class STextStyles {
fontWeight: FontWeight.w400,
fontSize: 26,
);
case ThemeType.oledBlack:
return GoogleFonts.roboto(
color: _theme(context).numberTextDefault,
fontWeight: FontWeight.w400,
fontSize: 26,
);
}
}
@ -1326,6 +1669,13 @@ class STextStyles {
fontWeight: FontWeight.w400,
fontSize: 12,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
letterSpacing: 0.5,
color: _theme(context).accentColorDark,
fontWeight: FontWeight.w400,
fontSize: 12,
);
}
}
@ -1352,6 +1702,13 @@ class STextStyles {
fontWeight: FontWeight.w600,
fontSize: 16,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
letterSpacing: 0.5,
color: _theme(context).accentColorDark,
fontWeight: FontWeight.w600,
fontSize: 16,
);
}
}
}

11
lib/utilities/theme/color_theme.dart
View file

@ -3,12 +3,9 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/theme/dark_colors.dart';
import 'package:stackwallet/utilities/theme/light_colors.dart';
import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
enum ThemeType {
light,
dark,
oceanBreeze,
}
enum ThemeType { light, dark, oceanBreeze, oledBlack }
extension ThemeTypeExt on ThemeType {
StackColorTheme get colorTheme {
@ -19,6 +16,8 @@ extension ThemeTypeExt on ThemeType {
return DarkColors();
case ThemeType.oceanBreeze:
return OceanBreezeColors();
case ThemeType.oledBlack:
return OledBlackColors();
}
}
@ -30,6 +29,8 @@ extension ThemeTypeExt on ThemeType {
return "Dark";
case ThemeType.oceanBreeze:
return "Ocean Breeze";
case ThemeType.oledBlack:
return "Oled Black";
}
}
}

312
lib/utilities/theme/oled_black_colors.dart Normal file
View file

@ -0,0 +1,312 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart';
class OledBlackColors extends StackColorTheme {
@override
ThemeType get themeType => ThemeType.oledBlack;
@override
Color get background => const Color(0xFF000000);
@override
Color get backgroundAppBar => background;
@override
Gradient? get gradientBackground => null;
@override
Color get overlay => const Color(0xFF121212);
@override
Color get accentColorBlue => const Color(0xFF77A7F9);
@override
Color get accentColorGreen => const Color(0xFF4CC0A0);
@override
Color get accentColorYellow => const Color(0xFFD4A51E);
@override
Color get accentColorRed => const Color(0xFFD34E50);
@override
Color get accentColorOrange => const Color(0xFFDE7456);
//accent color white (0xFFDEDEDE)
@override
Color get accentColorDark => const Color(0xFFDEDEDE);
@override
Color get shadow => const Color(0x0F2D3132); //not done yet
@override
Color get textDark => const Color(0xFFDEDEDE);
@override
Color get textDark2 => const Color(0xFFCCCCCC);
@override
Color get textDark3 => const Color(0xFFB2B2B2);
@override
Color get textSubtitle1 => const Color(0xFFB2B2B2);
@override
Color get textSubtitle2 => const Color(0xFFA0A0A0);
@override
Color get textSubtitle3 => const Color(0xFF878A8A);
@override
Color get textSubtitle4 => const Color(0xFF878A8A);
@override
Color get textSubtitle5 => const Color(0xFF878A8A);
@override
Color get textSubtitle6 => const Color(0xFF878A8A);
@override
Color get textWhite => const Color(0xFFDEDEDE);
@override
Color get textFavoriteCard => const Color(0xFFDEDEDE);
@override
Color get textError => const Color(0xFFCF6679);
// button background
@override
Color get buttonBackPrimary => const Color(0xFF6F9CE9);
@override
Color get buttonBackSecondary => const Color(0xFF1F1F1F);
@override
Color get buttonBackPrimaryDisabled => const Color(0xFF212F46);
@override
Color get buttonBackSecondaryDisabled => const Color(0xFF3D3D3D);
@override
Color get buttonBackBorder => const Color(0xFF6F9CE9);
@override
Color get buttonBackBorderDisabled => const Color(0xFF212F46);
@override
Color get numberBackDefault => const Color(0xFF242424);
@override
Color get numpadBackDefault => const Color(0xFF6F9CE9);
@override
Color get bottomNavBack => const Color(0xFFDEDEDE);
// button text/element
@override
Color get buttonTextPrimary => const Color(0xFF000000);
@override
Color get buttonTextSecondary => const Color(0xFFDEDEDE);
@override
Color get buttonTextPrimaryDisabled => const Color(0xFF000000);
@override
Color get buttonTextSecondaryDisabled => const Color(0xFF090909);
@override
Color get buttonTextBorder => const Color(0xFF6F9CE9);
@override
Color get buttonTextDisabled => const Color(0xFF000000);
@override
Color get buttonTextBorderless => const Color(0xFF6F9CE9);
@override
Color get buttonTextBorderlessDisabled => const Color(0xFF212F46);
@override
Color get numberTextDefault => const Color(0xFFD3D3D3);
@override
Color get numpadTextDefault => const Color(0xFF000000);
@override
Color get bottomNavText => const Color(0xFFDEDEDE);
// switch
@override
Color get switchBGOn => const Color(0xFF77A7F9);
@override
Color get switchBGOff => const Color(0xFF445C85);
@override
Color get switchBGDisabled => const Color(0xFF333538);
@override
Color get switchCircleOn => const Color(0xFFC9DDF5);
@override
Color get switchCircleOff => const Color(0xFF94AAC9);
@override
Color get switchCircleDisabled => const Color(0xFF848484);
// step indicator background
@override
Color get stepIndicatorBGCheck => const Color(0xFF77A7F9);
@override
Color get stepIndicatorBGNumber => const Color(0xFF77A7F9);
@override
Color get stepIndicatorBGInactive => const Color(0xFF3B3F46);
@override
Color get stepIndicatorBGLines => const Color(0xFF6393E5);
@override
Color get stepIndicatorBGLinesInactive => const Color(0xFF63676E);
@override
Color get stepIndicatorIconText => const Color(0xFF000000);
@override
Color get stepIndicatorIconNumber => const Color(0xFF000000);
@override
Color get stepIndicatorIconInactive => const Color(0xFFA5A5A5);
// checkbox
@override
Color get checkboxBGChecked => const Color(0xFF77A7F9);
@override
Color get checkboxBorderEmpty => const Color(0xFF353536);
@override
Color get checkboxBGDisabled => const Color(0xFF5D759B);
@override
Color get checkboxIconChecked => const Color(0xFF000000);
@override
Color get checkboxIconDisabled => const Color(0xFF000000);
@override
Color get checkboxTextLabel => const Color(0xFFDEDEDE);
// snack bar
@override
Color get snackBarBackSuccess => const Color(0xFF1F1F1F);
@override
Color get snackBarBackError => const Color(0xFF1F1F1F);
@override
Color get snackBarBackInfo => const Color(0xFF1F1F1F);
@override
Color get snackBarTextSuccess => const Color(0xFF69C297);
@override
Color get snackBarTextError => const Color(0xFFCF6679);
@override
Color get snackBarTextInfo => const Color(0xFFABAEFF);
// icons
@override
Color get bottomNavIconBack => const Color(0xFF69696A);
@override
Color get bottomNavIconIcon => const Color(0xFFDEDEDE);
@override
Color get topNavIconPrimary => const Color(0xFFDEDEDE);
@override
Color get topNavIconGreen => const Color(0xFF4CC0A0);
@override
Color get topNavIconYellow => const Color(0xFFD4A51E);
@override
Color get topNavIconRed => const Color(0xFFD34E50);
@override
Color get settingsIconBack => const Color(0xFFDEDEDE);
@override
Color get settingsIconIcon => const Color(0xFF232323);
@override
Color get settingsIconBack2 => const Color(0xFF94D6C4);
@override
Color get settingsIconElement => const Color(0xFF4CC0A0);
// text field
@override
Color get textFieldActiveBG => const Color(0xFF232323);
@override
Color get textFieldDefaultBG => const Color(0xFF171717);
@override
Color get textFieldErrorBG => const Color(0xFF141414);
@override
Color get textFieldSuccessBG => const Color(0xFF141414);
@override
Color get textFieldActiveSearchIconLeft => const Color(0xFF9C9C9C);
@override
Color get textFieldDefaultSearchIconLeft => const Color(0xFF979797);
@override
Color get textFieldErrorSearchIconLeft => const Color(0xFFCF6679);
@override
Color get textFieldSuccessSearchIconLeft => const Color(0xFF23CFA1);
@override
Color get textFieldActiveText => const Color(0xFFC2C2C2);
@override
Color get textFieldDefaultText => const Color(0xFF979797);
@override
Color get textFieldErrorText => const Color(0xFFCF6679);
@override
Color get textFieldSuccessText => const Color(0xFFDEDEDE);
@override
Color get textFieldActiveLabel => const Color(0xFF979797);
@override
Color get textFieldErrorLabel => const Color(0xFFCF6679);
@override
Color get textFieldSuccessLabel => const Color(0xFF69C297);
@override
Color get textFieldActiveSearchIconRight => const Color(0xFF9C9C9C);
@override
Color get textFieldDefaultSearchIconRight => const Color(0xFF5D5D5D);
@override
Color get textFieldErrorSearchIconRight => const Color(0xFFCF6679);
@override
Color get textFieldSuccessSearchIconRight => const Color(0xFF69C297);
// settings item level2
@override
Color get settingsItem2ActiveBG => const Color(0xFF242424);
@override
Color get settingsItem2ActiveText => const Color(0xFFD3D3D3);
@override
Color get settingsItem2ActiveSub => const Color(0xFFB2B2B2);
// radio buttons
@override
Color get radioButtonIconBorder => const Color(0xFF77A7F9);
@override
Color get radioButtonIconBorderDisabled => const Color(0xFF7D7D7D);
@override
Color get radioButtonBorderEnabled => const Color(0xFF77A7F9);
@override
Color get radioButtonBorderDisabled => const Color(0xFF7D7D7D);
@override
Color get radioButtonIconCircle => const Color(0xFF77A7F9);
@override
Color get radioButtonIconEnabled => const Color(0xFF77A7F9);
@override
Color get radioButtonTextEnabled => const Color(0xFFA8AAB2);
@override
Color get radioButtonTextDisabled => const Color(0xFFA8AAB2);
@override
Color get radioButtonLabelEnabled => const Color(0xFF878A8A);
@override
Color get radioButtonLabelDisabled => const Color(0xFF878A8A);
// info text
@override
Color get infoItemBG => const Color(0xFF141414);
@override
Color get infoItemLabel => const Color(0xFFB2B2B2);
@override
Color get infoItemText => const Color(0xFFDEDEDE);
@override
Color get infoItemIcons => const Color(0xFF77A7F9);
// popup
@override
Color get popupBG => const Color(0xFF212121);
// currency list
@override
Color get currencyListItemBG => const Color(0xFF252525);
// bottom nav
@override
Color get stackWalletBG => const Color(0xFF35383D);
@override
Color get stackWalletMid => const Color(0xFF292D34);
@override
Color get stackWalletBottom => const Color(0xFF292D34);
@override
Color get bottomNavShadow => const Color(0xFF282E33);
@override
Color get favoriteStarActive => accentColorYellow;
@override
Color get favoriteStarInactive => textSubtitle2;
@override
Color get splash => const Color(0xFF7A7D7E);
@override
Color get highlight => const Color(0xFF878A8A);
@override
Color get warningForeground => snackBarTextError;
@override
Color get warningBackground => const Color(0xFF1F1F1F);
@override
Color get loadingOverlayTextColor => const Color(0xFFCFCFCF);
@override
Color get myStackContactIconBG => const Color(0xFF747778);
@override
Color get textConfirmTotalAmount => const Color(0xFF144D35);
@override
Color get textSelectedWordTableItem => const Color(0xFF143D8E);
}

1
lib/widgets/background.dart
View file

@ -20,6 +20,7 @@ class Background extends StatelessWidget {
switch (Theme.of(context).extension<StackColors>()!.themeType) {
case ThemeType.light:
case ThemeType.dark:
case ThemeType.oledBlack:
color = Theme.of(context).extension<StackColors>()!.background;
break;
case ThemeType.oceanBreeze:

16
pubspec.yaml
View file

@ -337,6 +337,7 @@ flutter:
- assets/svg/dark-theme.svg
- assets/svg/light-mode.svg
- assets/svg/ocean-breeze-theme.svg
- assets/svg/oled-black-theme.svg
# light theme specific
- assets/svg/light/tx-exchange-icon.svg
@ -384,6 +385,21 @@ flutter:
- assets/svg/oceanBreeze/buy-coins-icon.svg
- assets/svg/oceanBreeze/bg.svg
# OLED black theme specific
- assets/svg/oledBlack/tx-exchange-icon.svg
- assets/svg/oledBlack/tx-exchange-icon-pending.svg
- assets/svg/oledBlack/tx-exchange-icon-failed.svg
- assets/svg/oledBlack/tx-icon-send.svg
- assets/svg/oledBlack/tx-icon-send-pending.svg
- assets/svg/oledBlack/tx-icon-send-failed.svg
- assets/svg/oledBlack/tx-icon-receive.svg
- assets/svg/oledBlack/tx-icon-receive-pending.svg
- assets/svg/oledBlack/tx-icon-receive-failed.svg
- assets/svg/oledBlack/exchange-2.svg
- assets/svg/oledBlack/bell-new.svg
- assets/svg/oledBlack/stack-icon1.svg
- assets/svg/oledBlack/buy-coins-icon.svg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see