chore: continued refactoring to accept theme support LIGHT and DARK image assets
This commit is contained in:
Andre Neves
parent
eec917158e
commit
b0fbb603c8
|
|
@ -26,6 +26,7 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 1.7891,
|
||||
zecPrice: 1.345,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
},
|
||||
{
|
||||
type: 'send',
|
||||
|
|
@ -34,6 +35,7 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 0.8458,
|
||||
zecPrice: 1.344,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#3b3b3f;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#fff;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#000;stroke:#000;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#3b3b3f;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
Before Width: | Height: | Size: 333 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#fff;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#000;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 826 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#3b3b3f;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#fff;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#000;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#66BE54;}</style></defs><g transform="translate(34.55 55.562) rotate(180)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#FF6C6C;}</style></defs><g transform="translate(-16.208 -36.709)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -7,7 +7,7 @@ import styled from 'styled-components';
|
|||
import { TextComponent } from './text';
|
||||
import { Button } from './button';
|
||||
|
||||
import ErrorIcon from '../assets/images/error_icon.png';
|
||||
import ErrorIcon from '../assets/images/error_icon_dark.png';
|
||||
|
||||
const ModalWrapper = styled.div`
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t =>
|
|||
width: 100%;
|
||||
outline: none;
|
||||
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
||||
border: 1px solid ${(props: DefaultStylesProps) => props.theme.colors.inputBorder};
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const ModalWrapper = styled.div`
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
`;
|
||||
|
||||
const ChildrenWrapper = styled.div`
|
||||
|
|
@ -103,7 +103,9 @@ export class ModalComponent extends PureComponent<Props, State> {
|
|||
) this.close();
|
||||
}}
|
||||
>
|
||||
<ChildrenWrapper>{children(toggleVisibility)}</ChildrenWrapper>
|
||||
<ChildrenWrapper>
|
||||
{children(toggleVisibility)}
|
||||
</ChildrenWrapper>
|
||||
</ModalWrapper>,
|
||||
this.element,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
|
||||
/* eslint-disable max-len */
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import type { Location, RouterHistory } from 'react-router-dom';
|
||||
|
||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
|
@ -26,7 +27,7 @@ const StyledLink = styled.a`
|
|||
: props.theme.colors.sidebarItem
|
||||
)};
|
||||
background-color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? `${props.theme.colors.sidebarHoveredItem}`
|
||||
? props.theme.colors.sidebarItemHoveredBg
|
||||
: 'transparent'
|
||||
)};
|
||||
font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
|
||||
|
|
@ -43,13 +44,15 @@ const StyledLink = styled.a`
|
|||
outline: none;
|
||||
transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
|
||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarActiveItemBorder}` : 'none')};
|
||||
border-top: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
border-bottom: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? props.theme.colors.sidebarItemActive
|
||||
: '#ddd'
|
||||
)}
|
||||
border-top: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
border-bottom: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarItemHoveredBg};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItemHovered)}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -58,24 +61,29 @@ const Icon = styled.img`
|
|||
height: 17px;
|
||||
margin-right: 13px;
|
||||
|
||||
opacity: ${(props: any) => (props.isActive ? '1' : '0.3')};
|
||||
|
||||
${StyledLink}:hover & {
|
||||
filter: ${(props: StyledLinkProps) => (props.isActive ? 'none' : 'brightness(300%)')};
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
type MenuItem = {
|
||||
route: string,
|
||||
label: string,
|
||||
icon: (isActive: boolean) => string,
|
||||
icon: (isActive: boolean, themeMode: string) => string,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
history: RouterHistory,
|
||||
options?: MenuItem[],
|
||||
location: Location,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||
export const Component = ({
|
||||
options, location, history, theme,
|
||||
}: Props) => (
|
||||
<Wrapper id='sidebar'>
|
||||
{(options || []).map((item) => {
|
||||
const isActive = location.pathname === item.route;
|
||||
|
|
@ -88,7 +96,7 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
>
|
||||
<Icon
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive)}
|
||||
src={item.icon(isActive, theme.mode)}
|
||||
Alt={`${item.route}`}
|
||||
/>
|
||||
{item.label}
|
||||
|
|
@ -98,6 +106,8 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
</Wrapper>
|
||||
);
|
||||
|
||||
SidebarComponent.defaultProps = {
|
||||
Component.defaultProps = {
|
||||
options: MENU_OPTIONS,
|
||||
};
|
||||
|
||||
export const SidebarComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled, { keyframes, withTheme } from 'styled-components';
|
||||
import eres from 'eres';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
||||
import rpc from '../../services/api';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import readyIcon from '../assets/images/green_check.png';
|
||||
import syncIcon from '../assets/images/sync_icon.png';
|
||||
import errorIcon from '../assets/images/error_icon.png';
|
||||
import readyIconDark from '../assets/images/green_check_dark.png';
|
||||
import readyIconLight from '../assets/images/green_check_light.png';
|
||||
import syncIconDark from '../assets/images/sync_icon_dark.png';
|
||||
import syncIconLight from '../assets/images/sync_icon_light.png';
|
||||
import errorIconDark from '../assets/images/error_icon_dark.png';
|
||||
import errorIconLight from '../assets/images/error_icon_light.png';
|
||||
|
||||
const rotate = keyframes`
|
||||
from {
|
||||
|
|
@ -49,7 +53,9 @@ const StatusPillLabel = styled(TextComponent)`
|
|||
user-select: none;
|
||||
`;
|
||||
|
||||
type Props = {};
|
||||
type Props = {
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
type: string,
|
||||
|
|
@ -58,15 +64,25 @@ type State = {
|
|||
isSyncing: boolean,
|
||||
};
|
||||
|
||||
export class StatusPill extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
timer: ?IntervalID = null;
|
||||
|
||||
state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const { theme } = props;
|
||||
|
||||
const syncIcon = theme.mode === DARK
|
||||
? syncIconDark
|
||||
: syncIconLight;
|
||||
|
||||
this.state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.timer = setInterval(() => {
|
||||
|
|
@ -82,6 +98,15 @@ export class StatusPill extends Component<Props, State> {
|
|||
}
|
||||
|
||||
getBlockchainStatus = async () => {
|
||||
const { theme } = this.props;
|
||||
|
||||
const readyIcon = theme.mode === DARK
|
||||
? readyIconDark
|
||||
: readyIconLight;
|
||||
const errorIcon = theme.mode === DARK
|
||||
? errorIconDark
|
||||
: errorIconLight;
|
||||
|
||||
const [blockchainErr, blockchaininfo] = await eres(rpc.getblockchaininfo());
|
||||
|
||||
if (blockchainErr || !blockchaininfo) return;
|
||||
|
|
@ -100,7 +125,10 @@ export class StatusPill extends Component<Props, State> {
|
|||
});
|
||||
|
||||
if (blockchainErr) {
|
||||
this.setState(() => ({ type: 'error', icon: errorIcon }));
|
||||
this.setState(() => ({
|
||||
type: 'error',
|
||||
icon: errorIcon,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -119,3 +147,5 @@ export class StatusPill extends Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const StatusPill = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import styled from 'styled-components';
|
|||
|
||||
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
||||
import { TextComponent } from './text';
|
||||
import { Divider } from './divider';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin-top: 20px;
|
||||
|
|
@ -41,7 +40,7 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
<TransactionsWrapper>
|
||||
{transactions.map(({
|
||||
date, type, address, amount, transactionId,
|
||||
}, idx) => (
|
||||
}) => (
|
||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||
<TransactionItemComponent
|
||||
transactionId={transactionId}
|
||||
|
|
@ -51,7 +50,6 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
amount={amount}
|
||||
zecPrice={zecPrice}
|
||||
/>
|
||||
{idx < transactions.length - 1 && <Divider />}
|
||||
</Fragment>
|
||||
))}
|
||||
</TransactionsWrapper>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
|
||||
import { ZCASH_EXPLORER_BASE_URL } from '../constants/explorer';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
import CloseIcon from '../assets/images/close_icon.svg';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
|
@ -23,12 +26,12 @@ import { openExternal } from '../utils/open-external';
|
|||
|
||||
const Wrapper = styled.div`
|
||||
width: 460px;
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.transactionDetailsBg};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
box-shadow: ${props => props.theme.colors.transactionDetailsShadow};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
|
@ -71,7 +74,7 @@ const InfoRow = styled(RowComponent)`
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: #1d1d1d;
|
||||
background: ${props => props.theme.colors.transactionDetailsRowHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -85,14 +88,14 @@ const DetailsWrapper = styled.div`
|
|||
|
||||
const Divider = styled.div`
|
||||
width: 100%;
|
||||
background-color: #3a3a3a;
|
||||
background-color: ${props => props.theme.colors.transactionDetailsDivider};
|
||||
height: 1px;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
const Label = styled(TextComponent)`
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
color: ${props => props.theme.colors.transactionDetailsLabel};
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 0.25px;
|
||||
`;
|
||||
|
|
@ -127,9 +130,10 @@ type Props = {
|
|||
from: string,
|
||||
to: string,
|
||||
handleClose: () => void,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = ({
|
||||
const Component = ({
|
||||
amount,
|
||||
type,
|
||||
zecPrice,
|
||||
|
|
@ -138,19 +142,32 @@ export const TransactionDetailsComponent = ({
|
|||
from,
|
||||
to,
|
||||
handleClose,
|
||||
theme,
|
||||
}: Props) => {
|
||||
const isReceived = type === 'receive';
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||||
<CloseIconImg
|
||||
src={CloseIcon}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value='Transaction Details' align='center' />
|
||||
</TitleWrapper>
|
||||
<DetailsWrapper>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon
|
||||
src={isReceived ? receivedIcon : sentIcon}
|
||||
alt='Transaction Type Icon'
|
||||
/>
|
||||
<TextComponent
|
||||
isBold
|
||||
size={2.625}
|
||||
|
|
@ -166,7 +183,7 @@ export const TransactionDetailsComponent = ({
|
|||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
})}
|
||||
size={1.5}
|
||||
color={appTheme.colors.transactionsDetailsLabel}
|
||||
color={appTheme.colors.transactionDetailsLabel}
|
||||
/>
|
||||
</DetailsWrapper>
|
||||
<InfoRow>
|
||||
|
|
@ -175,7 +192,7 @@ export const TransactionDetailsComponent = ({
|
|||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||
</ColumnComponent>
|
||||
<ColumnComponent>
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionsDetailsLabel} />
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||
|
|
@ -203,16 +220,18 @@ export const TransactionDetailsComponent = ({
|
|||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='FROM' />
|
||||
<Ellipsis value={truncateAddress(from)} />
|
||||
<Ellipsis value={from} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TO' />
|
||||
<Ellipsis value={truncateAddress(to)} />
|
||||
<Ellipsis value={truncateAddress(to) || 'N/A'} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
|
@ -13,18 +17,22 @@ import { TextComponent } from './text';
|
|||
import { ModalComponent } from './modal';
|
||||
import { TransactionDetailsComponent } from './transaction-details';
|
||||
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
const Wrapper = styled(RowComponent)`
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.transactionItemBg};
|
||||
padding: 15px 17px;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
border-bottom: none;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0a0a0a;
|
||||
background-color: ${props => props.theme.colors.transactionItemHoverBg};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -41,10 +49,10 @@ const TransactionTypeLabel = styled(TextComponent)`
|
|||
/* eslint-enable max-len */
|
||||
|
||||
const TransactionAddress = styled(TextComponent)`
|
||||
color: #a7a7a7;
|
||||
color: ${props => props.theme.colors.transactionItemAddress};
|
||||
|
||||
${String(Wrapper)}:hover & {
|
||||
color: #fff;
|
||||
color: ${props => props.theme.colors.transactionItemAddressHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -65,15 +73,17 @@ export type Transaction = {
|
|||
amount: number,
|
||||
zecPrice: number,
|
||||
transactionId: string,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = ({
|
||||
const Component = ({
|
||||
type,
|
||||
date,
|
||||
address,
|
||||
amount,
|
||||
zecPrice,
|
||||
transactionId,
|
||||
theme,
|
||||
}: Transaction) => {
|
||||
const isReceived = type === 'receive';
|
||||
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
||||
|
|
@ -87,6 +97,13 @@ export const TransactionItemComponent = ({
|
|||
});
|
||||
const transactionAddress = truncateAddress(address);
|
||||
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
renderTrigger={toggleVisibility => (
|
||||
|
|
@ -98,7 +115,7 @@ export const TransactionItemComponent = ({
|
|||
>
|
||||
<RowComponent alignItems='center'>
|
||||
<RowComponent alignItems='center'>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TransactionColumn>
|
||||
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||
<TransactionTime value={transactionTime} />
|
||||
|
|
@ -111,11 +128,11 @@ export const TransactionItemComponent = ({
|
|||
isBold
|
||||
value={transactionValueInZec}
|
||||
color={isReceived
|
||||
? appTheme.colors.transactionReceived
|
||||
: appTheme.colors.transactionSent
|
||||
? theme.colors.transactionReceived
|
||||
: theme.colors.transactionSent
|
||||
}
|
||||
/>
|
||||
<TextComponent value={transactionValueInUsd} color={appTheme.colors.inactiveItem} />
|
||||
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||
</ColumnComponent>
|
||||
</Wrapper>
|
||||
)}
|
||||
|
|
@ -135,3 +152,5 @@ export const TransactionItemComponent = ({
|
|||
</ModalComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const AddressWrapper = styled.div`
|
|||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
padding: 7px 13px;
|
||||
padding: 0 13px 0 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
// @flow
|
||||
|
||||
import DashboardIcon from '../assets/images/dashboard_icon.svg';
|
||||
import DashboardIconDark from '../assets/images/dashboard_icon_dark.svg';
|
||||
import DashboardIconLight from '../assets/images/dashboard_icon_light.svg';
|
||||
import DashboardIconActive from '../assets/images/dashboard_icon_active.svg';
|
||||
import ConsoleIcon from '../assets/images/console_icon.svg';
|
||||
import ConsoleIconDark from '../assets/images/console_icon_dark.svg';
|
||||
import ConsoleIconLight from '../assets/images/console_icon_light.svg';
|
||||
import ConsoleIconActive from '../assets/images/console_icon_active.svg';
|
||||
import SendIcon from '../assets/images/send_icon.svg';
|
||||
import SendIconDark from '../assets/images/send_icon_dark.svg';
|
||||
import SendIconLight from '../assets/images/send_icon_light.svg';
|
||||
import SendIconActive from '../assets/images/send_icon_active.svg';
|
||||
import ReceiveIcon from '../assets/images/receive_icon.svg';
|
||||
import ReceiveIconDark from '../assets/images/receive_icon_dark.svg';
|
||||
import ReceiveIconLight from '../assets/images/receive_icon_light.svg';
|
||||
import ReceiveIconActive from '../assets/images/receive_icon_active.svg';
|
||||
import TransactionsIcon from '../assets/images/transactions_icon.svg';
|
||||
import TransactionsIconDark from '../assets/images/transactions_icon_dark.svg';
|
||||
import TransactionsIconLight from '../assets/images/transactions_icon_light.svg';
|
||||
import TransactionsIconActive from '../assets/images/transactions_icon_active.svg';
|
||||
import SettingsIcon from '../assets/images/settings_icon.svg';
|
||||
import SettingsIconDark from '../assets/images/settings_icon_dark.svg';
|
||||
import SettingsIconLight from '../assets/images/settings_icon_light.svg';
|
||||
import SettingsIconActive from '../assets/images/settings_icon_active.svg';
|
||||
|
||||
import {
|
||||
|
|
@ -21,36 +27,73 @@ import {
|
|||
CONSOLE_ROUTE,
|
||||
TRANSACTIONS_ROUTE,
|
||||
} from './routes';
|
||||
import { LIGHT } from './themes';
|
||||
|
||||
export const MENU_OPTIONS = [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
route: DASHBOARD_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? DashboardIconActive : DashboardIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return DashboardIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? DashboardIconActive : DashboardIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Send',
|
||||
route: SEND_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SendIconActive : SendIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SendIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SendIconActive : SendIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Receive',
|
||||
route: RECEIVE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ReceiveIconActive : ReceiveIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ReceiveIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ReceiveIconActive : ReceiveIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Transactions',
|
||||
route: TRANSACTIONS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? TransactionsIconActive : TransactionsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return TransactionsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? TransactionsIconActive : TransactionsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
route: SETTINGS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SettingsIconActive : SettingsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SettingsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SettingsIconActive : SettingsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Console',
|
||||
route: CONSOLE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ConsoleIconActive : ConsoleIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ConsoleIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ConsoleIconActive : ConsoleIconDark;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
// @flow
|
||||
|
||||
const text = '#ffffff';
|
||||
const white = '#FFFFFF';
|
||||
const text = white;
|
||||
const brand = '#F4B728';
|
||||
const brand2 = '#FFE240';
|
||||
const black = '#000000';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#6AEAC0';
|
||||
const darkBrand = '#212124';
|
||||
const brandThree = '#5d5d65';
|
||||
|
||||
export const DARK_COLORS = {
|
||||
darkOne: brand,
|
||||
|
|
@ -28,7 +31,18 @@ export const DARK_COLORS = {
|
|||
transactionReceived: success,
|
||||
transactionsDate: '#777777',
|
||||
transactionsItemHovered: '#222222',
|
||||
transactionsDetailsLabel: '#777777',
|
||||
|
||||
transactionItemBg: black,
|
||||
transactionItemHoverBg: '#0A0A0A',
|
||||
transactionItemBorder: 'transparent',
|
||||
transactionItemAddress: '#A7A7A7',
|
||||
transactionItemAddressHover: white,
|
||||
|
||||
transactionDetailsShadow: `0px 0px 20px 0px ${black}`,
|
||||
transactionDetailsBg: darkBrand,
|
||||
transactionDetailsRowHover: '#1D1D1D',
|
||||
transactionDetailsDivider: '#3A3A3A',
|
||||
transactionDetailsLabel: '#777777',
|
||||
|
||||
// Status Pill
|
||||
statusPillLabel: '#727272',
|
||||
|
|
@ -37,13 +51,15 @@ export const DARK_COLORS = {
|
|||
|
||||
// Sidebar
|
||||
sidebarBg: black,
|
||||
sidebarBorderRight: '#212124',
|
||||
sidebarBorderRight: black,
|
||||
sidebarLogoGradientBegin: brand,
|
||||
sidebarLogoGradientEnd: brand2,
|
||||
sidebarHoveredItem: '#1C1C1C',
|
||||
sidebarHoveredItemLabel: '#8e8e96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
|
||||
sidebarItem: brandThree,
|
||||
sidebarItemActive: brand,
|
||||
sidebarItemHovered: '#FFF',
|
||||
sidebarItemHoveredBg: darkBrand,
|
||||
|
||||
// Misc
|
||||
divider: black,
|
||||
|
|
@ -60,4 +76,7 @@ export const DARK_COLORS = {
|
|||
|
||||
// Console
|
||||
consoleBg: black,
|
||||
|
||||
// Input
|
||||
inputBorder: 'transparent',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
// @flow
|
||||
|
||||
const white = '#FFFFFF';
|
||||
const whiteHover = '#F9FBFE';
|
||||
const offWhite = '#F9F9F9';
|
||||
const black = '#000000';
|
||||
const text = '#142533';
|
||||
const secondaryText = '#777777';
|
||||
const brand = '#5684EB';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#6AEAC0';
|
||||
const success = '#66BE54';
|
||||
const logo = '#F4B728';
|
||||
const logo2 = '#FFE240';
|
||||
const border = '#DDDDDD';
|
||||
|
|
@ -36,11 +37,11 @@ export const LIGHT_COLORS = {
|
|||
sidebarBorderRight: border,
|
||||
sidebarLogoGradientBegin: logo,
|
||||
sidebarLogoGradientEnd: logo2,
|
||||
sidebarHoveredItem: offWhite,
|
||||
sidebarHoveredItemLabel: '#8E8E96',
|
||||
sidebarItem: offWhite,
|
||||
sidebarItemLabel: '#8E8E96',
|
||||
sidebarActiveItem: 'red',
|
||||
sidebarItem: '#aaa',
|
||||
sidebarItemActive: text,
|
||||
sidebarItemHovered: text,
|
||||
sidebarItemHoveredBg: offWhite,
|
||||
sidebarActiveItemLabel: '#8E8E96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
|
||||
|
|
@ -49,7 +50,20 @@ export const LIGHT_COLORS = {
|
|||
transactionReceived: success,
|
||||
transactionsDate: secondaryText,
|
||||
transactionsItemHovered: '#222222',
|
||||
transactionsDetailsLabel: secondaryText,
|
||||
|
||||
// Transaction Item
|
||||
transactionItemBg: white,
|
||||
transactionItemHoverBg: whiteHover,
|
||||
transactionItemBorder: border,
|
||||
transactionItemAddress: '#666666',
|
||||
transactionItemAddressHover: '#666666',
|
||||
|
||||
// Transaction Details
|
||||
transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
|
||||
transactionDetailsBg: white,
|
||||
transactionDetailsRowHover: whiteHover,
|
||||
transactionDetailsDivider: border,
|
||||
transactionDetailsLabel: '#999999',
|
||||
|
||||
// Select
|
||||
selectButtonShadow: 'rgba(238,201,76,0.65)',
|
||||
|
|
@ -59,6 +73,7 @@ export const LIGHT_COLORS = {
|
|||
statusPillBg: '#F2F2F2',
|
||||
statusPillBorder: border,
|
||||
|
||||
// QR Code
|
||||
qrCodeWrapperBg: white,
|
||||
|
||||
// Header
|
||||
|
|
@ -76,4 +91,7 @@ export const LIGHT_COLORS = {
|
|||
|
||||
// Misc
|
||||
divider: '#AAAAAA',
|
||||
|
||||
// Input
|
||||
inputBorder: border,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,5 +9,7 @@ export const GlobalStyle = createGlobalStyle`
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -43,16 +43,16 @@ export const appTheme: AppTheme = {
|
|||
[DARK]: DARK_COLORS.sidebarBg,
|
||||
}),
|
||||
sidebarItem: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.brandThree,
|
||||
[DARK]: DARK_COLORS.brandThree,
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItem,
|
||||
[DARK]: DARK_COLORS.sidebarItem,
|
||||
}),
|
||||
sidebarItemActive: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.activeItem,
|
||||
[DARK]: DARK_COLORS.activeItem,
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemActive,
|
||||
[DARK]: DARK_COLORS.sidebarItemActive,
|
||||
}),
|
||||
sidebarHoveredItem: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarHoveredItem,
|
||||
[DARK]: DARK_COLORS.sidebarHoveredItem,
|
||||
sidebarItemHovered: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemHovered,
|
||||
[DARK]: DARK_COLORS.sidebarItemHovered,
|
||||
}),
|
||||
sidebarHoveredItemLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarHoveredItemLabel,
|
||||
|
|
@ -110,9 +110,9 @@ export const appTheme: AppTheme = {
|
|||
[LIGHT]: LIGHT_COLORS.selectButtonShadow,
|
||||
[DARK]: DARK_COLORS.selectButtonShadow,
|
||||
}),
|
||||
transactionsDetailsLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionsDetailsLabel,
|
||||
[DARK]: DARK_COLORS.transactionsDetailsLabel,
|
||||
transactionDetailsLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsLabel,
|
||||
[DARK]: DARK_COLORS.transactionDetailsLabel,
|
||||
}),
|
||||
statusPillLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.statusPillLabel,
|
||||
|
|
@ -174,5 +174,49 @@ export const appTheme: AppTheme = {
|
|||
[LIGHT]: LIGHT_COLORS.sidebarActiveItemBorder,
|
||||
[DARK]: DARK_COLORS.sidebarActiveItemBorder,
|
||||
}),
|
||||
transactionItemBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemBg,
|
||||
[DARK]: DARK_COLORS.transactionItemBg,
|
||||
}),
|
||||
transactionItemHoverBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemHoverBg,
|
||||
[DARK]: DARK_COLORS.transactionItemHoverBg,
|
||||
}),
|
||||
transactionItemBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemBorder,
|
||||
[DARK]: DARK_COLORS.transactionItemBorder,
|
||||
}),
|
||||
transactionItemAddress: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemAddress,
|
||||
[DARK]: DARK_COLORS.transactionItemAddress,
|
||||
}),
|
||||
transactionItemAddressHover: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemAddressHover,
|
||||
[DARK]: DARK_COLORS.transactionItemAddressHover,
|
||||
}),
|
||||
transactionDetailsShadow: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsShadow,
|
||||
[DARK]: DARK_COLORS.transactionDetailsShadow,
|
||||
}),
|
||||
transactionDetailsBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsBg,
|
||||
[DARK]: DARK_COLORS.transactionDetailsBg,
|
||||
}),
|
||||
transactionDetailsRowHover: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsRowHover,
|
||||
[DARK]: DARK_COLORS.transactionDetailsRowHover,
|
||||
}),
|
||||
transactionDetailsDivider: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsDivider,
|
||||
[DARK]: DARK_COLORS.transactionDetailsDivider,
|
||||
}),
|
||||
inputBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.inputBorder,
|
||||
[DARK]: DARK_COLORS.inputBorder,
|
||||
}),
|
||||
sidebarItemHoveredBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemHoveredBg,
|
||||
[DARK]: DARK_COLORS.sidebarItemHoveredBg,
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ import { ascii2hex } from '../utils/ascii-to-hexadecimal';
|
|||
import type { SendTransactionInput } from '../containers/send';
|
||||
import type { State as SendState } from '../redux/modules/send';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import SentIcon from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import MenuIcon from '../assets/images/menu_icon.svg';
|
||||
import ValidIcon from '../assets/images/green_check.png';
|
||||
import InvalidIcon from '../assets/images/error_icon.png';
|
||||
import LoadingIcon from '../assets/images/sync_icon.png';
|
||||
import ValidIcon from '../assets/images/green_check_dark.png';
|
||||
import InvalidIcon from '../assets/images/error_icon_dark.png';
|
||||
import LoadingIcon from '../assets/images/sync_icon_dark.png';
|
||||
import ArrowUpIcon from '../assets/images/arrow_up.png';
|
||||
|
||||
import { appTheme } from '../theme';
|
||||
|
|
@ -170,6 +170,10 @@ const ItemLabel = styled(TextComponent)`
|
|||
margin-bottom: 3.5px;
|
||||
`;
|
||||
|
||||
const ValidateItemLabel = styled(ItemLabel)`
|
||||
margin-bottom: -1px;
|
||||
`;
|
||||
|
||||
const SendZECValue = styled(TextComponent)`
|
||||
color: ${props => props.theme.colors.transactionSent};
|
||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
||||
|
|
@ -238,6 +242,10 @@ const MaxAvailableAmountImg = styled.img`
|
|||
height: 20px;
|
||||
`;
|
||||
|
||||
const ValidateWrapper = styled(RowComponent)`
|
||||
margin-top: 3px;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
...SendState,
|
||||
balance: number,
|
||||
|
|
@ -386,15 +394,21 @@ export class SendView extends PureComponent<Props, State> {
|
|||
const { isToAddressValid } = this.props;
|
||||
|
||||
return isToAddressValid ? (
|
||||
<RowComponent alignItems='center'>
|
||||
<ValidateWrapper alignItems='center'>
|
||||
<ValidateStatusIcon src={ValidIcon} />
|
||||
<ItemLabel value='VALID' color={appTheme.colors.transactionReceived} />
|
||||
</RowComponent>
|
||||
<ValidateItemLabel
|
||||
value='VALID'
|
||||
color={appTheme.colors.transactionReceived}
|
||||
/>
|
||||
</ValidateWrapper>
|
||||
) : (
|
||||
<RowComponent alignItems='center'>
|
||||
<ValidateWrapper alignItems='center'>
|
||||
<ValidateStatusIcon src={InvalidIcon} />
|
||||
<ItemLabel value='INVALID' color={appTheme.colors.transactionSent} />
|
||||
</RowComponent>
|
||||
<ValidateItemLabel
|
||||
value='INVALID'
|
||||
color={appTheme.colors.transactionSent}
|
||||
/>
|
||||
</ValidateWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -7,45 +7,77 @@ type Colors = {
|
|||
secondary: ThemeSet,
|
||||
sidebarBg: ThemeSet,
|
||||
|
||||
// Sidebar
|
||||
sidebarItem: ThemeSet,
|
||||
sidebarItemActive: ThemeSet,
|
||||
sidebarActiveItemBorder: ThemeSet,
|
||||
sidebarHoveredItem: ThemeSet,
|
||||
sidebarHoveredItemLabel: ThemeSet,
|
||||
sidebarLogoGradientBegin: ThemeSet,
|
||||
sidebarLogoGradientEnd: ThemeSet,
|
||||
|
||||
cardBackgroundColor: ThemeSet,
|
||||
text: ThemeSet,
|
||||
activeItem: ThemeSet,
|
||||
inactiveItem: ThemeSet,
|
||||
background: ThemeSet,
|
||||
|
||||
selectButtonShadow: ThemeSet,
|
||||
|
||||
modalItemLabel: ThemeSet,
|
||||
blackTwo: ThemeSet,
|
||||
buttonBorderColor: ThemeSet,
|
||||
|
||||
// Divider
|
||||
divider: ThemeSet,
|
||||
|
||||
// Header
|
||||
headerTitle: ThemeSet,
|
||||
|
||||
// Status Pill
|
||||
statusPillBg: ThemeSet,
|
||||
statusPillLabel: ThemeSet,
|
||||
statusPillBorder: ThemeSet,
|
||||
|
||||
// Wallet Summary
|
||||
walletSummaryBg: ThemeSet,
|
||||
walletSummaryBorder: ThemeSet,
|
||||
|
||||
// Console
|
||||
consoleBg: ThemeSet,
|
||||
|
||||
// Buttons
|
||||
buttonPrimaryText: ThemeSet,
|
||||
buttonSecondaryText: ThemeSet,
|
||||
|
||||
// QR Code
|
||||
qrCodeWrapperBg: ThemeSet,
|
||||
|
||||
// Transactions
|
||||
transactionSent: ThemeSet,
|
||||
transactionReceived: ThemeSet,
|
||||
transactionsDate: ThemeSet,
|
||||
transactionsItemHovered: ThemeSet,
|
||||
selectButtonShadow: ThemeSet,
|
||||
transactionsDetailsLabel: ThemeSet,
|
||||
statusPillLabel: ThemeSet,
|
||||
modalItemLabel: ThemeSet,
|
||||
blackTwo: ThemeSet,
|
||||
buttonBorderColor: ThemeSet,
|
||||
divider: ThemeSet,
|
||||
sidebarBg: ThemeSet,
|
||||
headerTitle: ThemeSet,
|
||||
statusPillBg: ThemeSet,
|
||||
walletSummaryBg: ThemeSet,
|
||||
walletSummaryBorder: ThemeSet,
|
||||
consoleBg: ThemeSet,
|
||||
sidebarBorderRight: ThemeSet,
|
||||
buttonPrimaryText: ThemeSet,
|
||||
buttonSecondaryText: ThemeSet,
|
||||
statusPillBorder: ThemeSet,
|
||||
|
||||
// Transaction Item
|
||||
transactionItemBg: ThemeSet,
|
||||
transactionItemHoverBg: ThemeSet,
|
||||
transactionItemAddress: ThemeSet,
|
||||
transactionItemAddressHover: ThemeSet,
|
||||
|
||||
// Transaction Details
|
||||
transactionDetailsShadow: ThemeSet,
|
||||
transactionDetailsBg: ThemeSet,
|
||||
transactionDetailsRowHover: ThemeSet,
|
||||
transactionDetailsDivider: ThemeSet,
|
||||
transactionDetailsLabel: ThemeSet,
|
||||
|
||||
// Input
|
||||
inputBg: ThemeSet,
|
||||
qrCodeWrapperBg: ThemeSet,
|
||||
inputBorder: ThemeSet,
|
||||
|
||||
// Sidebar
|
||||
sidebarBg: ThemeSet,
|
||||
sidebarItem: ThemeSet,
|
||||
sidebarItemActive: ThemeSet,
|
||||
sidebarActiveItemBorder: ThemeSet,
|
||||
sidebarBorderRight: ThemeSet,
|
||||
sidebarItemHovered: ThemeSet,
|
||||
sidebarHoveredItemLabel: ThemeSet,
|
||||
sidebarLogoGradientBegin: ThemeSet,
|
||||
sidebarLogoGradientEnd: ThemeSet,
|
||||
sidebarItemHoveredBg: ThemeSet,
|
||||
};
|
||||
|
||||
type FontSize = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue