ng Material 15 UI adjustments

ng Material 15 UI adjustments
pull/1149/head
ShahanaFarooqui 2 years ago
parent 439fd68077
commit a7dc8c541a

@ -627,6 +627,31 @@ Awesome, nor vice versa. **Please do not use brand logos for any purpose except
to represent the company, product, or service to which they refer.** to represent the company, product, or service to which they refer.**
@material/dialog
MIT
The MIT License
Copyright (c) 2014-2020 Google, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
@ngrx/effects @ngrx/effects
MIT MIT

@ -10,9 +10,9 @@
<link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5"> <link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
<meta i18n-content="" name="msapplication-TileColor" content="#da532c"> <meta i18n-content="" name="msapplication-TileColor" content="#da532c">
<meta i18n-content="" name="theme-color" content="#ffffff"> <meta i18n-content="" name="theme-color" content="#ffffff">
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.eee5bf8b07c7b3d5.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.eee5bf8b07c7b3d5.css"></noscript></head> <style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:100%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.ff863e15460e0a6d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.ff863e15460e0a6d.css"></noscript></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.5fa3748a484561cb.js" type="module"></script><script src="polyfills.cba326bc97aa51ea.js" type="module"></script><script src="main.6bd99fe2d1e0d6f8.js" type="module"></script> <script src="runtime.bda77cf9c0626fdd.js" type="module"></script><script src="polyfills.cba326bc97aa51ea.js" type="module"></script><script src="main.10acc9285453a51d.js" type="module"></script>
</body></html> </body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,2 +0,0 @@
(()=>{"use strict";var e,b={},v={};function r(e){var n=v[e];if(void 0!==n)return n.exports;var t=v[e]={id:e,loaded:!1,exports:{}};return b[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=b,e=[],r.O=(n,t,o,u)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,u]=e[i],f=!0,c=0;c<t.length;c++)(!1&u||a>=u)&&Object.keys(r.O).every(_=>r.O[_](t[c]))?t.splice(c--,1):(f=!1,u<a&&(a=u));if(f){e.splice(i--,1);var d=o();void 0!==d&&(n=d)}}return n}u=u||0;for(var i=e.length;i>0&&e[i-1][2]>u;i--)e[i]=e[i-1];e[i]=[t,o,u]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{"default-src_app_shared_components_currency-unit-converter_currency-unit-converter_component_t-449cdf":"cd4ed968c572eefd",src_app_lnd_lnd_module_ts:"5d3131d7aca5f649",src_app_cln_cln_module_ts:"b7e8ececd22d9ca3",src_app_eclair_ecl_module_ts:"2266e5b7139d698d"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,o,u,i)=>{if(e[t])e[t].push(o);else{var a,f;if(void 0!==u)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var l=c[d];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+u){a=l;break}}a||(f=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+u),a.src=r.tu(t)),e[t]=[o];var s=(m,_)=>{a.onerror=a.onload=null,clearTimeout(p);var g=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),g&&g.forEach(h=>h(_)),m)return m(_)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),f&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={runtime:0};r.f.j=(o,u)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)u.push(i[2]);else if("runtime"!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);u.push(i[2]=a);var f=r.p+r.u(o),c=new Error;r.l(f,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;c.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",c.name="ChunkLoadError",c.type=s,c.request=p,i[1](c)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,u)=>{var c,d,[i,a,f]=u,l=0;if(i.some(p=>0!==e[p])){for(c in a)r.o(a,c)&&(r.m[c]=a[c]);if(f)var s=f(r)}for(o&&o(u);l<i.length;l++)d=i[l],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
//# sourceMappingURL=runtime.5fa3748a484561cb.js.map

@ -0,0 +1,2 @@
(()=>{"use strict";var e,b={},v={};function r(e){var n=v[e];if(void 0!==n)return n.exports;var t=v[e]={id:e,loaded:!1,exports:{}};return b[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=b,e=[],r.O=(n,t,o,d)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,d]=e[i],f=!0,u=0;u<t.length;u++)(!1&d||a>=d)&&Object.keys(r.O).every(_=>r.O[_](t[u]))?t.splice(u--,1):(f=!1,d<a&&(a=d));if(f){e.splice(i--,1);var c=o();void 0!==c&&(n=c)}}return n}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[t,o,d]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{"default-src_app_shared_components_currency-unit-converter_currency-unit-converter_component_t-449cdf":"cba423081ba3a63d",src_app_lnd_lnd_module_ts:"0fea6d7c18422440",src_app_cln_cln_module_ts:"1205951fa883fbe5",src_app_eclair_ecl_module_ts:"d668f841ad8b7b21"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,o,d,i)=>{if(e[t])e[t].push(o);else{var a,f;if(void 0!==d)for(var u=document.getElementsByTagName("script"),c=0;c<u.length;c++){var l=u[c];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+d){a=l;break}}a||(f=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+d),a.src=r.tu(t)),e[t]=[o];var s=(m,_)=>{a.onerror=a.onload=null,clearTimeout(p);var g=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),g&&g.forEach(h=>h(_)),m)return m(_)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),f&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={runtime:0};r.f.j=(o,d)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)d.push(i[2]);else if("runtime"!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);d.push(i[2]=a);var f=r.p+r.u(o),u=new Error;r.l(f,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;u.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",u.name="ChunkLoadError",u.type=s,u.request=p,i[1](u)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,d)=>{var u,c,[i,a,f]=d,l=0;if(i.some(p=>0!==e[p])){for(u in a)r.o(a,u)&&(r.m[u]=a[u]);if(f)var s=f(r)}for(o&&o(d);l<i.length;l++)c=i[l],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
//# sourceMappingURL=runtime.bda77cf9c0626fdd.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1752
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -60,7 +60,7 @@
"@angular/core": "^15.0.0", "@angular/core": "^15.0.0",
"@angular/flex-layout": "^14.0.0-beta.41", "@angular/flex-layout": "^14.0.0-beta.41",
"@angular/forms": "^15.0.0", "@angular/forms": "^15.0.0",
"@angular/material": "^14.2.7", "@angular/material": "^15.0.1",
"@angular/platform-browser": "^15.0.0", "@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0", "@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0", "@angular/router": "^15.0.0",

@ -1,11 +1,11 @@
<div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[settings.themeColor | lowercase, settings.themeMode | lowercase]"> <div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[settings.themeColor | lowercase, settings.themeMode | lowercase]">
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary rtl-top-toolbar"> <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="bg-primary rtl-top-toolbar">
<div> <div>
<button *ngIf="flgLoggedIn" class="top-toolbar-icon mr-1" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" (click)="sideNavToggle()"> <button *ngIf="flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" (click)="sideNavToggle()">
<mat-icon>menu</mat-icon> <mat-icon class="color-white">menu</mat-icon>
</button> </button>
<button *ngIf="!smallScreen && flgLoggedIn" class="top-toolbar-icon" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" (click)="flgSidenavPinned = !flgSidenavPinned"> <button *ngIf="!smallScreen && flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" (click)="flgSidenavPinned = !flgSidenavPinned">
<svg class="icon-pinned" viewBox="0 0 32 32"> <svg class="icon-pinned" width="20" height="20" viewBox="0 0 24 24">
<path *ngIf="!flgSidenavPinned" fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /> <path *ngIf="!flgSidenavPinned" fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path *ngIf="flgSidenavPinned" fill="currentColor" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" /> <path *ngIf="flgSidenavPinned" fill="currentColor" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg> </svg>

@ -2,10 +2,3 @@
display: inline-flex !important; display: inline-flex !important;
top: 0 !important; top: 0 !important;
} }
.top-toolbar-icon .icon-pinned {
width: 3rem;
height: 3rem;
padding: 1rem 0 0 1.2rem;
cursor:pointer;
}

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="column" fxFlex="100"fxLayoutAlign="space-between stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" class="mt-1" fxLayout="column" fxFlex="100"fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
<div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div> <div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" class="mt-2" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" class="mt-2" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>

@ -90,7 +90,7 @@
<rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info> <rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
<rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info> <rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
<span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start"> <span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
<mat-tab-group fxLayout="column" class="w-100 dashboard-tabs-group"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" class="w-100 dashboard-tabs-group">
<mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'"></rtl-cln-lightning-invoices-table></mat-tab> <mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'"></rtl-cln-lightning-invoices-table></mat-tab>
<mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'"></rtl-cln-lightning-payments></mat-tab> <mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'"></rtl-cln-lightning-payments></mat-tab>
<mat-tab [disabled]="true"> <mat-tab [disabled]="true">

@ -58,8 +58,8 @@ export class CLNHomeComponent implements OnInit, OnDestroy {
public operatorCards: Tile[] = []; public operatorCards: Tile[] = [];
public merchantCards: Tile[] = []; public merchantCards: Tile[] = [];
public screenSize = ''; public screenSize = '';
public operatorCardHeight = '405px'; public operatorCardHeight = '390px';
public merchantCardHeight = '65px'; public merchantCardHeight = '62px';
public sortField = 'Balance Score'; public sortField = 'Balance Score';
public errorMessages = ['', '', '', '', '', '']; public errorMessages = ['', '', '', '', '', ''];
public apiCallStatusNodeInfo: ApiCallStatusPayload | null = null; public apiCallStatusNodeInfo: ApiCallStatusPayload | null = null;

@ -1,4 +1,4 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mt-2">
<div> <div>
<h4 class="dashboard-info-title">Alias</h4> <h4 class="dashboard-info-title">Alias</h4>
<div class="overflow-wrap dashboard-info-value"> <div class="overflow-wrap dashboard-info-value">

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link?.link" (click)="activeLink = link?.link" [routerLink]="[link?.link, selectedTable?.name]">{{link?.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,5 +1,5 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box my-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box my-2">
<mat-tab-group [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span>

@ -3,7 +3,7 @@
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button> <button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</div> </div>
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box"> <div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{openChannels}}">Open</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{openChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

@ -7,11 +7,11 @@
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start"> <mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="row" fxFlex="100"> <div fxLayout="row" fxFlex="100">
<nav mat-tab-nav-bar fxFlex="100" [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar fxFlex="100"> <!-- <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100">
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div> <div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> --> </nav> -->
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -16,14 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4>

@ -91,7 +91,7 @@
<rtl-ecl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info> <rtl-ecl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
<rtl-ecl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info> <rtl-ecl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
<span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start"> <span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
<mat-tab-group fxLayout="column" class="w-100 dashboard-tabs-group"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" class="w-100 dashboard-tabs-group">
<mat-tab label="Receive"> <mat-tab label="Receive">
<rtl-ecl-lightning-invoices class="h-100" [calledFrom]="'home'"></rtl-ecl-lightning-invoices> <rtl-ecl-lightning-invoices class="h-100" [calledFrom]="'home'"></rtl-ecl-lightning-invoices>
</mat-tab> </mat-tab>

@ -58,8 +58,8 @@ export class ECLHomeComponent implements OnInit, OnDestroy {
public operatorCards: Tile[] = []; public operatorCards: Tile[] = [];
public merchantCards: Tile[] = []; public merchantCards: Tile[] = [];
public screenSize = ''; public screenSize = '';
public operatorCardHeight = '405px'; public operatorCardHeight = '390px';
public merchantCardHeight = '65px'; public merchantCardHeight = '62px';
public sortField = 'Balance Score'; public sortField = 'Balance Score';
public errorMessages = ['', '', '', '']; public errorMessages = ['', '', '', ''];
public apiCallStatusNodeInfo: ApiCallStatusPayload = { status: APICallStatusEnum.COMPLETED }; public apiCallStatusNodeInfo: ApiCallStatusPayload = { status: APICallStatusEnum.COMPLETED };

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large mt-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large mt-2">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -3,7 +3,7 @@
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button> <button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</div> </div>
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box"> <div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfOpenChannels}}">Open</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfOpenChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

@ -7,11 +7,11 @@
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start"> <mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="row" fxFlex="100"> <div fxLayout="row" fxFlex="100">
<nav mat-tab-nav-bar fxFlex="100" [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar fxFlex="100"> <!-- <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100">
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div> <div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> --> </nav> -->
</div> </div>

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage === ' '; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage === ' '; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>

@ -1,4 +1,4 @@
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch"> <div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div> <div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4> <h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4>

@ -90,7 +90,7 @@
<rtl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[3]"></rtl-channel-liquidity-info> <rtl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[3]"></rtl-channel-liquidity-info>
<rtl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[3]"></rtl-channel-liquidity-info> <rtl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[3]"></rtl-channel-liquidity-info>
<span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="start start" [perfectScrollbar]> <span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="start start" [perfectScrollbar]>
<mat-tab-group fxLayout="column" fxFlex="100" class="w-100 dashboard-tabs-group"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" fxFlex="100" class="w-100 dashboard-tabs-group">
<mat-tab label="Receive"><rtl-lightning-invoices [calledFrom]="'home'"></rtl-lightning-invoices></mat-tab> <mat-tab label="Receive"><rtl-lightning-invoices [calledFrom]="'home'"></rtl-lightning-invoices></mat-tab>
<mat-tab label="Pay"><rtl-lightning-payments [calledFrom]="'home'"></rtl-lightning-payments></mat-tab> <mat-tab label="Pay"><rtl-lightning-payments [calledFrom]="'home'"></rtl-lightning-payments></mat-tab>
<mat-tab [disabled]="true"> <mat-tab [disabled]="true">

@ -61,8 +61,8 @@ export class HomeComponent implements OnInit, OnDestroy {
public operatorCards: Tile[] = []; public operatorCards: Tile[] = [];
public merchantCards: Tile[] = []; public merchantCards: Tile[] = [];
public screenSize = ''; public screenSize = '';
public operatorCardHeight = '405px'; public operatorCardHeight = '390px';
public merchantCardHeight = '65px'; public merchantCardHeight = '62px';
public sortField = 'Balance Score'; public sortField = 'Balance Score';
public screenSizeEnum = ScreenSizeEnum; public screenSizeEnum = ScreenSizeEnum;
public errorMessages = ['', '', '', '', '']; public errorMessages = ['', '', '', '', ''];

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link?.link" (click)="activeLink = link?.link" [routerLink]="[link?.link, selectedTable?.name]">{{link?.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,5 +1,5 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box">
<mat-tab-group [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span>

@ -3,7 +3,7 @@
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button> <button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</div> </div>
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box"> <div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOpenChannels}}">Open</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOpenChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span> <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

@ -29,11 +29,11 @@
</div> </div>
</form> </form>
<div fxLayout="row" fxFlex="100"> <div fxLayout="row" fxFlex="100">
<nav mat-tab-nav-bar fxFlex="100" [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar fxFlex="100"> <!-- <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100">
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div> <div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> --> </nav> -->
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -5,7 +5,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<mat-tab-group> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
<mat-tab label="Unlock"><rtl-unlock-wallet></rtl-unlock-wallet></mat-tab> <mat-tab label="Unlock"><rtl-unlock-wallet></rtl-unlock-wallet></mat-tab>
<mat-tab label="Initialize"><rtl-initialize-wallet></rtl-initialize-wallet></mat-tab> <mat-tab label="Initialize"><rtl-initialize-wallet></rtl-initialize-wallet></mat-tab>
</mat-tab-group> </mat-tab-group>

@ -1,4 +1,4 @@
<mat-tab-group> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
<mat-tab *ngFor="let currencyUnit of currencyUnits" label="{{ currencyUnit }}"> <mat-tab *ngFor="let currencyUnit of currencyUnits" label="{{ currencyUnit }}">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<div *ngFor="let value of values" fxLayout="column" fxLayoutAlign="center start" class="cc-data-block"> <div *ngFor="let value of values" fxLayout="column" fxLayoutAlign="center start" class="cc-data-block">

@ -1,6 +1,4 @@
<div class="spinner-container"> <div class="spinner-container" fxLayout="column" fxLayoutAlign="center center">
<div class="spinner-circle" fxLayout="column" fxLayoutAlign="center center"> <mat-progress-spinner class="modal-spinner-message" color="primary" mode="indeterminate"></mat-progress-spinner>
<mat-spinner></mat-spinner> <h2>{{data.titleMessage}}</h2>
<h1>{{data.titleMessage}}</h1>
</div>
</div> </div>

@ -1,5 +0,0 @@
.spinner-container {
position: absolute;
left: 40%;
top: 35%;
}

@ -1,3 +1,3 @@
.mat-card-content { .mat-mdc-card-content {
margin-bottom: 4px; margin-bottom: 4px;
} }

@ -13,13 +13,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeTab.link === link.link" [routerLink]="['../', link.link]" (click)="onSelectedIndexChange(link)">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeTab.link === link.link" [routerLink]="['../', link.link]" (click)="onSelectedIndexChange(link)">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeTab.link === link.link" (click)="onSelectedIndexChange(link)" [routerLink]="['../', link.link]">{{link.name}}</div>
</nav> -->
<div fxLayout="row" fxLayoutAlign="start start" class="padding-gap-x-large mt-1"> <div fxLayout="row" fxLayoutAlign="start start" class="padding-gap-x-large mt-1">
<button mat-flat-button color="primary" type="button" tabindex="1" (click)="onSwap(selectedSwapType)">Start {{activeTab.name}}</button> <button mat-flat-button color="primary" type="button" tabindex="1" (click)="onSwap(selectedSwapType)">Start {{activeTab.name}}</button>
</div> </div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeTab.link === link.link" [routerLink]="['../', link.link]" (click)="onSelectedIndexChange(link)">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeTab.link === link.link" [routerLink]="['../', link.link]" (click)="onSelectedIndexChange(link)">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeTab.link === link.link" (click)="onSelectedIndexChange(link)" [routerLink]="['../', link.link]">{{link.name}}</div>
</nav> -->
<div fxLayout="row" fxLayoutAlign="start start" class="padding-gap-x-large mt-1"> <div fxLayout="row" fxLayoutAlign="start start" class="padding-gap-x-large mt-1">
<button mat-flat-button color="primary" type="button" tabindex="1" (click)="onLoop(selectedSwapType)">Start {{activeTab.name}}</button> <button mat-flat-button color="primary" type="button" tabindex="1" (click)="onLoop(selectedSwapType)">Start {{activeTab.name}}</button>
</div> </div>

@ -1,21 +1,23 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="center stretch" class="login-container"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="login-container">
<div fxLayout="row" fxFlex="50" fxLayoutAlign="center stretch"> <div fxLayout="row" fxFlex="35" fxLayoutAlign="center center">
<mat-card fxLayout="row" fxFlex="45" fxLayoutAlign="center stretch"> <mat-card fxLayout="row" fxFlex="45" fxLayoutAlign="center stretch">
<div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="stretch stretch"> <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="stretch stretch">
<div fxFlex="35" fxLayoutAlign="center center" class="bg-primary"> <div fxFlex="35" fxLayoutAlign="center center" class="bg-primary">
<img src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo" class="rtl-logo-svg"> <img src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo" class="rtl-logo-svg">
</div> </div>
<div fxFlex="65" fxLayout="column" fxLayoutAlign="center stretch" [ngClass]="{'padding-gap-large': screenSize === screenSizeEnum.XS}"> <div fxFlex="65" fxLayout="column" fxLayoutAlign="center stretch" [ngClass]="{'padding-gap-large': screenSize === screenSizeEnum.XS}">
<mat-card-header fxLayout="row" fxLayoutAlign="center center" class="page-title-container p-0"> <mat-card-header fxLayout="row" fxLayoutAlign="center center" class="page-title-container mt-2 p-0">
<mat-card-title class="font-bold-500" [ngClass]="{'font-size-200': screenSize === screenSizeEnum.XS, 'font-size-300': screenSize !== screenSizeEnum.XS}"> <mat-card-title class="font-bold-500" [ngClass]="{'font-size-200': screenSize === screenSizeEnum.XS, 'font-size-300': screenSize !== screenSizeEnum.XS}">
<span class="page-title">Welcome</span> <span class="page-title">Welcome</span>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content class="mt-5px mb-0 px-2"> <mat-card-content class="pb-2">
<form #loginForm="ngForm" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between"> <form #loginForm="ngForm" fxLayout="column" fxLayoutAlign="start space-between">
<mat-form-field fxFlex="100" fxLayoutAlign="start"> <mat-form-field>
<input autoFocus matInput placeholder="Password" id="password" name="password" tabindex="1" required [type]="flgShow ? 'text' : 'password'" [(ngModel)]="password"> <input autoFocus matInput placeholder="Password" id="password" name="password" tabindex="1" required [type]="flgShow ? 'text' : 'password'" [(ngModel)]="password">
<mat-icon tabindex="2" matSuffix (click)="flgShow = !flgShow">{{flgShow ? 'visibility_off' : 'visibility'}}</mat-icon> <button mat-icon-button matSuffix tabindex="2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="flgShow" (click)="flgShow = !flgShow">
<mat-icon>{{flgShow ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="!password">Password is required.</mat-error> <mat-error *ngIf="!password">Password is required.</mat-error>
</mat-form-field> </mat-form-field>
<p *ngIf="loginErrorMessage !== ''" fxFlex="100" class="color-warn pre-wrap" fxLayoutAlign="start start"> <p *ngIf="loginErrorMessage !== ''" fxFlex="100" class="color-warn pre-wrap" fxLayoutAlign="start start">

@ -1,9 +1,10 @@
@import "../../theme/styles/mixins.scss"; @import "../../theme/styles/mixins.scss";
.login-container { .login-container {
height: 90vh; height: 60vh;
margin-top: 15%;
& .mat-card { & .mat-mdc-card {
height: 30rem; height: 30rem;
} }
@ -18,7 +19,7 @@
} }
& .material-icons.mat-icon { & .material-icons.mat-icon {
font-size: 120%; font-size: 90%;
cursor: pointer; cursor: pointer;
} }

@ -19,14 +19,14 @@
</mat-tree-node> </mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" fxLayout="column" matTreeNodeToggle> <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" fxLayout="column" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent"> <div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center"> <div fxFlex="80" fxLayoutAlign="start center">
<span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon"></ng-container></span> <span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon"></ng-container></span>
<fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" [icon]="node.icon"></fa-icon> <fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" [icon]="node.icon"></fa-icon>
<mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon> <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}</span> <span>{{node.name}}</span>
</div> </div>
<button fxFlex="11" mat-icon-button fxLayoutAlign="end center" [attr.aria-label]="'toggle ' + node.name"> <button fxFlex="20" class="btn-icon-small" mat-icon-button fxLayoutAlign="end center" [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon> <mat-icon>{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button> </button>
</div> </div>
<div class="mat-nested-tree-node-child" [class.tree-children-invisible]="!treeControlNested.isExpanded(node)"> <div class="mat-nested-tree-node-child" [class.tree-children-invisible]="!treeControlNested.isExpanded(node)">

@ -21,7 +21,7 @@
</p> </p>
</mat-menu> </mat-menu>
<button mat-icon-button class="top-toolbar-icon" [matMenuTriggerFor]="topMenu"> <button mat-icon-button [matMenuTriggerFor]="topMenu">
<img src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo"> <img class="rtl-log-top" src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo">
<mat-icon class="logo-icon">arrow_drop_down</mat-icon> <mat-icon class="rtl-logo-dropdown color-white">arrow_drop_down</mat-icon>
</button> </button>

@ -1,9 +1,8 @@
.top-toolbar-icon { .mat-mdc-icon-button img.rtl-log-top {
& .mat-button-wrapper img { width: 2rem;
width:3.2rem; height: 2rem;
} }
& .mat-button-wrapper .material-icons.mat-icon.logo-icon {
font-size: 2rem; .mat-icon.material-icons.mat-icon-no-color.rtl-logo-dropdown {
text-align: start; height: 2rem;
}
} }

@ -5,7 +5,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div> <div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div>
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" (click)="activeLink = links[1].link">{{links[1].name}}</div> <div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" (click)="activeLink = links[1].link">{{links[1].name}}</div>
<!-- <div role="tab" mat-tab-link *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND' || selNode?.lnImplementation?.toUpperCase() === 'CLN'" class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}" [state]="{ initial: false }">{{links[2].name}}</div> --> <!-- <div role="tab" mat-tab-link *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND' || selNode?.lnImplementation?.toUpperCase() === 'CLN'" class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}" [state]="{ initial: false }">{{links[2].name}}</div> -->
@ -14,14 +14,6 @@
<div *ngIf="showLnConfig" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[4].link" (click)="showLnConfigClicked()">{{links[4].name}}</div> <div *ngIf="showLnConfig" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[4].link" (click)="showLnConfigClicked()">{{links[4].name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" (click)="activeLink = links[0].link" routerLink="{{links[0].link}}">{{links[0].name}}</div>
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" (click)="activeLink = links[1].link" routerLink="{{links[1].link}}">{{links[1].name}}</div>
<div role="tab" mat-tab-link *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND' || selNode?.lnImplementation?.toUpperCase() === 'CLN'" class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}" [state]="{ initial: false }">{{links[2].name}}</div>
<div role="tab" mat-tab-link *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}" [state]="{ initial: false }">{{links[2].name}}</div>
<div role="tab" mat-tab-link *ngIf="selNode?.lnImplementation?.toUpperCase() === 'CLN'" class="mat-tab-label" [active]="activeLink === links[3].link" (click)="activeLink = links[3].link" routerLink="{{links[3].link}}">{{links[3].name}}</div>
<div role="tab" mat-tab-link *ngIf="showLnConfig" class="mat-tab-label" [active]="activeLink === links[4].link" (click)="showLnConfigClicked()">{{links[4].name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,22 +1,25 @@
@use 'sass:math' as math;
@import '../../../theme/styles/constants.scss';
h4 { h4 {
margin: 1.2rem 0 0.6rem 0; margin: ($gap*1.5) 0 $gap 0;
} }
.theme-name { .theme-name {
min-width: 15rem; min-width: 10rem;
} }
.skin { .skin {
width: 2rem; width: ($gap*2.5);
height: 2rem; height: ($gap*2.5);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
margin-right: 1rem; margin-right: $gap;
&.selected-color { &.selected-color {
width: 1.75rem; width: ($gap*2);
height: 1.75rem; height: ($gap*2);
border: 0.25rem solid; border: 2px solid;
} }
&.purple { &.purple {
@ -40,15 +43,15 @@ h4 {
} }
} }
.radio-group.mat-radio-group .mat-radio-button { .mdc-form-field>label{
min-width: 11rem; min-width: 110px;
} }
.mat-slide-toggle { .mat-slide-toggle {
padding: 0 1.4rem 0 0.4rem; padding: 0 ($gap*2) 0 math.div($gap, 2);
} }
.mat-flat-button { .mat-flat-button {
width: 100%; width: 100%;
max-height: 3.6rem; max-height: 36px;
} }

@ -48,7 +48,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-icon-button color="primary" type="button" tabindex="7" matTooltip="Reset to Default" (click)="onTableReset(page.pageId, table)"><mat-icon [ngClass]="{'ml-minus-1': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">restore</mat-icon></button> <button mat-icon-button color="primary" type="button" tabindex="7" matTooltip="Reset to Default" (click)="onTableReset(page.pageId, table)"><mat-icon color="primary" [ngClass]="{'ml-minus-1': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">restore</mat-icon></button>
</div> </div>
</div> </div>
<ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container> <ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>

@ -1,9 +1,11 @@
@import '../../../theme/styles/constants.scss';
.table-setting-row { .table-setting-row {
&:last-child { &:last-child {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
&:not(:first-child) { &:not(:first-child) {
margin: 3rem 0; margin: ($gap) 0;
} }
} }

@ -7,17 +7,12 @@
<div fxLayout="column"> <div fxLayout="column">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div> <div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div>
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }" (click)="activeLink = links[1].link">{{links[1].name}}</div> <div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }" (click)="activeLink = links[1].link">{{links[1].name}}</div>
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'CLN'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[2].link" routerLink="{{links[2].link}}" (click)="activeLink = links[2].link">{{links[2].name}}</div> <div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'CLN'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[2].link" routerLink="{{links[2].link}}" (click)="activeLink = links[2].link">{{links[2].name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" (click)="activeLink = links[0].link" routerLink="{{links[0].link}}">{{links[0].name}}</div>
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'LND'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" (click)="activeLink = links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }">{{links[1].name}}</div>
<div *ngIf="selNode?.lnImplementation?.toUpperCase() === 'CLN'" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}">{{links[2].name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -5,17 +5,12 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<nav mat-tab-nav-bar [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div> <div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" routerLink="{{links[0].link}}" (click)="activeLink = links[0].link">{{links[0].name}}</div>
<div *ngIf="!+appConfig.sso.rtlSSO" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }" (click)="activeLink = links[1].link">{{links[1].name}}</div> <div *ngIf="!+appConfig.sso.rtlSSO" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }" (click)="activeLink = links[1].link">{{links[1].name}}</div>
<div *ngIf="showBitcoind" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[2].link" routerLink="{{links[2].link}}" (click)="activeLink = links[2].link">{{links[2].name}}</div> <div *ngIf="showBitcoind" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[2].link" routerLink="{{links[2].link}}" (click)="activeLink = links[2].link">{{links[2].name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<!-- <nav mat-tab-nav-bar>
<div role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === links[0].link" (click)="activeLink = links[0].link" routerLink="{{links[0].link}}">{{links[0].name}}</div>
<div role="tab" mat-tab-link *ngIf="!+appConfig.sso.rtlSSO" class="mat-tab-label" [active]="activeLink === links[1].link" (click)="activeLink = links[1].link" routerLink="{{links[1].link}}" [state]="{ initial: false }">{{links[1].name}}</div>
<div role="tab" mat-tab-link *ngIf="showBitcoind" class="mat-tab-label" [active]="activeLink === links[2].link" (click)="activeLink = links[2].link" routerLink="{{links[2].link}}">{{links[2].name}}</div>
</nav> -->
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,20 +1,4 @@
$font-family: 'Roboto', sans-serif; $font-family: 'Roboto', sans-serif;
$nodes-toolbar-height: 5.2rem;
$horizontal-toolbar-height: 6rem;
$toolbar-height: 5rem;
$regular-sidenav-width: 22rem;
$compact-sidenav-width: 20rem;
$mini-sidenav-width: 10rem;
$sidenav-info-height: 9rem;
$settings-nav-width: 15rem;
$gap: 0.8rem;
$icon-size: 3.6rem;
$pubkey-info-height: 1.5rem;
$tree-node-height:4rem;
$fa-icon-small-size: 2rem;
$fa-icon-regular-size: 4rem;
$yellow-color: #ffbd2e; $yellow-color: #ffbd2e;
$yellow-alert-color: #856404; $yellow-alert-color: #856404;
$yellow-background-color: #fff3cd; $yellow-background-color: #fff3cd;
@ -25,6 +9,19 @@ $red-background-color: #f8d7da;
$blue-color: #004085; $blue-color: #004085;
$blue-background-color: #cce5ff; $blue-background-color: #cce5ff;
$grey-color: #CCCCCC; $grey-color: #CCCCCC;
$tiny-dot-size: 0.8rem;
$dot-size: 1.2rem; $nodes-toolbar-height: 3.2rem;
$badge-size: 0.8rem; $horizontal-toolbar-height: 4rem;
$toolbar-height: 4rem;
$regular-sidenav-width: 16rem;
$sidenav-info-height: 6rem;
$settings-nav-width: 10rem;
$gap: 0.5rem;
$icon-size: 2.25rem;
$pubkey-info-height: 1rem;
$tree-node-height:3.5rem;
$fa-icon-small-size: 1.25rem;
$fa-icon-regular-size: 2.5rem;
$tiny-dot-size: 0.5rem;
$dot-size: 0.8rem;
$badge-size: 0.5rem;

File diff suppressed because it is too large Load Diff

@ -46,7 +46,7 @@
white-space: pre-line; white-space: pre-line;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-all; word-break: break-all;
min-height: 2rem; min-height: ($gap*3);
} }
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle { .foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
@ -87,7 +87,7 @@
.validation-error-icon { .validation-error-icon {
position: relative; position: relative;
top: 2px; top: 2px;
left: 0.4rem; left: 4px;
} }
.genseed-message { .genseed-message {
@ -113,13 +113,13 @@
.validation-error-message { .validation-error-message {
position: relative; position: relative;
margin-top: 0.5rem; margin-top: 0.4px;
width:100%; width:100%;
color: $warn-color; color: $warn-color;
} }
.mat-vertical-content { .mat-vertical-content {
padding: 0 0.4rem 0 1.2rem; padding: 0 0 ($gap*1.5);
} }
.row-disabled { .row-disabled {
@ -130,7 +130,7 @@
} }
.mat-menu-panel { .mat-menu-panel {
min-width: 6.4rem; min-width: ($gap*8);
} }
.horizontal-button { .horizontal-button {
@ -143,8 +143,8 @@
} }
.mat-stroked-button.mat-primary.horizontal-button-show { .mat-stroked-button.mat-primary.horizontal-button-show {
line-height: 2.4rem; line-height: ($gap*3);
border-radius: 12rem; border-radius: 1($gap*2.5);
background-color: white; background-color: white;
color: $primary-color; color: $primary-color;
&:hover { &:hover {
@ -167,12 +167,10 @@
.cc-data-block { .cc-data-block {
& .cc-data-title { & .cc-data-title {
font-size: 80%;
font-weight: 500; font-weight: 500;
min-width: 14rem; min-width: 140px;
} }
& .cc-data-value { & .cc-data-value {
font-size: 120%;
color: $foreground-secondary-text; color: $foreground-secondary-text;
} }
} }
@ -183,7 +181,7 @@
border-bottom-color: $foreground-divider; border-bottom-color: $foreground-divider;
} }
table.mat-table { table.mat-mdc-table {
border: 1px solid $foreground-divider; border: 1px solid $foreground-divider;
border-radius: 2px; border-radius: 2px;
background: none; background: none;
@ -191,7 +189,7 @@
color: $foreground-base; color: $foreground-base;
} }
& thead tr th:not(:first-of-type), tbody tr td:not(:first-of-type) { & thead tr th:not(:first-of-type), tbody tr td:not(:first-of-type) {
padding-left: 1rem; padding-left: ($gap*1.25);
} }
& tbody tr td.mat-cell { & tbody tr td.mat-cell {
@include for_screensize(tab-land) { @include for_screensize(tab-land) {
@ -236,13 +234,10 @@
} }
.mat-icon-button.more-button-short { .mat-icon-button.more-button-short {
height: 1.6rem; height: ($gap*2);
line-height: 1.6rem; line-height: ($gap*2);
& .material-icons {
font-size: 1.6rem;
}
& .mat-icon { & .mat-icon {
line-height: 1.6rem; line-height: ($gap*2);
} }
} }
@ -251,16 +246,15 @@
padding-right: 0; padding-right: 0;
& .more-button { & .more-button {
position: absolute; position: absolute;
right: 0.4rem; right: math.div($gap, 2);
top: 0.4rem; top: math.div($gap, 2);
max-width: 2rem; max-width: ($gap*3);
} }
} }
} }
.modal-info-header { .modal-info-header {
color: $foreground-text; color: $foreground-text;
font-size: 180%;
font-weight: 500; font-weight: 500;
padding: $gap 0 $gap $gap*2; padding: $gap 0 $gap $gap*2;
@include for_screensize(tab-land) { @include for_screensize(tab-land) {
@ -272,9 +266,6 @@
@include for_screensize(phone) { @include for_screensize(phone) {
padding: $gap 0 $gap math.div($gap, 4); padding: $gap 0 $gap math.div($gap, 4);
} }
& .btn-close-x {
font-size: 120%;
}
& .page-title-img svg { & .page-title-img svg {
color: $foreground-text; color: $foreground-text;
} }
@ -292,8 +283,7 @@
line-height: $badge-size; line-height: $badge-size;
border-radius: $badge-size * 1.2; border-radius: $badge-size * 1.2;
margin: auto; margin: auto;
padding: 0.5rem; padding: math.div($gap, 2);
font-size: 80%;
font-weight: 500; font-weight: 500;
overflow: visible; overflow: visible;
text-overflow: inherit; text-overflow: inherit;
@ -302,18 +292,18 @@
.mat-badge-medium.mat-badge-after .mat-badge-content { .mat-badge-medium.mat-badge-after .mat-badge-content {
right: unset; right: unset;
margin-left: 1rem !important; margin-left: ($gap*1.25) !important;
@include for_screensize(phone) { @include for_screensize(phone) {
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
.table-actions-select { .table-actions-select {
padding: 0.5rem 1rem; padding: math.div($gap, 2) $gap;
margin: 0.9rem 0; margin: $gap 0;
min-height: 3.6rem; min-height: ($gap*4.5);
min-width: 9rem; min-width: ($gap*11);
width: 9rem; width: ($gap*11);
float: right; float: right;
& .mat-select-placeholder { & .mat-select-placeholder {
color: $foreground-text; color: $foreground-text;
@ -321,8 +311,8 @@
} }
.table-actions-button { .table-actions-button {
min-width: 9rem; min-width: ($gap*11);;
width: 9rem; width: ($gap*11);
} }
.mat-select-panel .mat-option.mat-active { .mat-select-panel .mat-option.mat-active {
@ -332,7 +322,7 @@
.mat-tab-label { .mat-tab-label {
opacity: 1; opacity: 1;
padding: 0; padding: 0;
min-width: 18rem; min-width: 180px;
} }
.mat-drawer-inner-container { .mat-drawer-inner-container {
@ -340,9 +330,9 @@
} }
.mat-fa-icon-button { .mat-fa-icon-button {
width: 2rem; width: ($gap*2.5);
height: 2rem; height: ($gap*2.5);
line-height: 2rem; line-height: ($gap*2.5);
} }
.balances-info-pie-chart { .balances-info-pie-chart {
@ -359,10 +349,9 @@
& .dashboard-divider { & .dashboard-divider {
border-top-width: 2px; border-top-width: 2px;
} }
& .mat-card-header .mat-card-title { & .mat-mdc-card-header .mat-mdc-card-title {
min-height: 4rem; min-height: ($gap*5);
font-size: 180%; margin-bottom: 0 0 $gap 0;
margin-bottom: 0 0 0.8rem 0;
} }
& .dashboard-info-value { & .dashboard-info-value {
font-weight: 700; font-weight: 700;
@ -371,26 +360,22 @@
font-weight: 500; font-weight: 500;
} }
& .dashboard-node-dot { & .dashboard-node-dot {
margin: 0 0 -2px 1rem; margin: 0 0 -2px ($gap*1.25);
border: 1px solid $foreground-secondary-text; border: 1px solid $foreground-secondary-text;
} }
& .dashboard-node-square { & .dashboard-node-square {
display: inline-flex; display: inline-flex;
width: $dot-size; width: $dot-size;
height: $dot-size; height: $dot-size;
margin-right: 1rem; margin-right: ($gap*1.25);
} }
& .dashboard-capacity-header { & .dashboard-capacity-header {
font-size: 130%;
font-weight: 700; font-weight: 700;
color: $foreground-secondary-text; color: $foreground-secondary-text;
&.this-channel-capacity {
font-size: 120%;
}
} }
& .mat-icon-button.more-button { & .mat-icon-button.more-button {
width: 2rem; width: ($gap*2.5);
max-width: 2rem; max-width: ($gap*2.5);
} }
} }
@ -462,7 +447,7 @@
.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon, .mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon { .mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
width: 1.8rem; width: ($gap*2);
} }
.button-link-dashboard { .button-link-dashboard {
@ -477,9 +462,8 @@
} }
.material-icons.icon-failed-status { .material-icons.icon-failed-status {
font-size: 1.8rem;
fill: $warn-color; fill: $warn-color;
height: 2rem; height: ($gap*2.5);
} }
.svg-fill-primary { .svg-fill-primary {
@ -496,8 +480,7 @@
.mat-chip-list-wrapper input.mat-input-element, .mat-chip-list-wrapper .mat-standard-chip { .mat-chip-list-wrapper input.mat-input-element, .mat-chip-list-wrapper .mat-standard-chip {
margin: $gap math.div($gap, 4); margin: $gap math.div($gap, 4);
font-size: 80%; min-height: ($gap*3);
min-height: 2.4rem;
} }
ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d { ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d {

@ -30,6 +30,7 @@
} }
.rtl-top-toolbar { .rtl-top-toolbar {
border-bottom: 1px solid $background-color; border-bottom: 1px solid $background-color;
padding: 0 ($gap*5) 0 ($gap*2);
} }
.bg-primary { .bg-primary {
background-color: $primary-color; background-color: $primary-color;
@ -61,12 +62,12 @@
font-weight: 700; font-weight: 700;
color: $accent-color; color: $accent-color;
} }
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { .mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: $primary-darker; background-color: $primary-darker;
} }
.cc-data-block .cc-data-title { .cc-data-block .cc-data-title {
color: $primary-darker; color: $primary-darker;
} }
.mat-stroked-button.mat-primary { .mat-stroked-button.mat-primary {
border-color: $primary-darker; border-color: $primary-darker;
color: $primary-darker; color: $primary-darker;
@ -142,10 +143,10 @@
.mat-tree { .mat-tree {
background: mat.get-color-from-palette($background, dialog); background: mat.get-color-from-palette($background, dialog);
} }
.mat-tab-label, .mat-tab-link { .mat-tab-label, .mat-mdc-tab-link {
color: $foreground-secondary-text; color: $foreground-secondary-text;
} }
.dashboard-card .mat-card-header .mat-card-title { .dashboard-card .mat-mdc-card-header .mat-mdc-card-title {
color: $foreground-text; color: $foreground-text;
& .ng-fa-icon { & .ng-fa-icon {
color: $foreground-text; color: $foreground-text;
@ -244,7 +245,7 @@
.mat-tooltip { .mat-tooltip {
background-color: $tooltip-background; background-color: $tooltip-background;
color: $background-color; color: $background-color;
font-size: 120%; // font-size: 120%;
} }
.mat-slide-toggle-bar, .mat-step-header .mat-step-icon:not(.mat-step-icon-selected) { .mat-slide-toggle-bar, .mat-step-header .mat-step-icon:not(.mat-step-icon-selected) {

@ -40,6 +40,7 @@
} }
.rtl-top-toolbar { .rtl-top-toolbar {
border-bottom: 1px solid white; border-bottom: 1px solid white;
padding: 0 ($gap*5) 0 ($gap*2);
} }
.bg-primary { .bg-primary {
background-color: $primary-color; background-color: $primary-color;
@ -66,6 +67,15 @@
opacity: 0.9 !important; opacity: 0.9 !important;
color: $accent-color; color: $accent-color;
} }
button.mdc-button.mat-mdc-button-base.mat-mdc-outlined-button{
border-color: $primary-color;
}
.spinner-container {
h2 {
color: $foreground-text;
}
}
.mat-tab-label { .mat-tab-label {
&.mat-tab-label-active { &.mat-tab-label-active {
color: $primary-color; color: $primary-color;
@ -94,7 +104,7 @@
} }
.mat-stroked-button.mat-primary:hover .mat-button-focus-overlay { .mat-stroked-button.mat-primary:hover .mat-button-focus-overlay {
opacity: 0.06; opacity: 0.06;
} }
.page-title-container, .page-sub-title-container { .page-title-container, .page-sub-title-container {
& .page-title-img { & .page-title-img {
color: $foreground-disabled; color: $foreground-disabled;
@ -134,14 +144,14 @@
.modal-qr-code-container { .modal-qr-code-container {
background: $foreground-divider; background: $foreground-divider;
} }
.mat-tab-label, .mat-tab-link { .mat-tab-label, .mat-mdc-tab-link {
color: $foreground-secondary-text; color: $foreground-secondary-text;
} }
.mat-card, .mat-card:not([class*='mat-elevation-z']){ .mat-mdc-card, .mat-mdc-card:not([class*='mat-elevation-z']){
box-shadow: none; box-shadow: none;
border: 1px solid $foreground-divider; border: 1px solid $foreground-divider;
} }
.dashboard-card .mat-card-header .mat-card-title { .dashboard-card .mat-mdc-card-header .mat-mdc-card-title {
color: $foreground-disabled; color: $foreground-disabled;
& .ng-fa-icon { & .ng-fa-icon {
color: $foreground-disabled; color: $foreground-disabled;
@ -166,7 +176,7 @@
border: 1px solid $foreground-divider; border: 1px solid $foreground-divider;
} }
.mat-tooltip { .mat-tooltip {
font-size: 120%; // font-size: 120%;
} }
svg { svg {
& .boltz-icon { stroke:$foreground-secondary-text; stroke-width:4; } & .boltz-icon { stroke:$foreground-secondary-text; stroke-width:4; }
@ -238,8 +248,9 @@
cursor: not-allowed !important; cursor: not-allowed !important;
} }
} }
.material-icons { .material-icons {
&.info-icon { &.mat-icon-no-color, &.info-icon {
color: $foreground-secondary-text; color: $foreground-secondary-text;
&.info-icon-primary { &.info-icon-primary {
color: $primary-color; color: $primary-color;
@ -249,6 +260,8 @@
} }
} }
} }
ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d { ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d {
& text { & text {
fill: $foreground-text; fill: $foreground-text;

@ -7,6 +7,9 @@
// Default Theme Light & Purple // Default Theme Light & Purple
@include mat.all-component-themes($purple-day-theme); @include mat.all-component-themes($purple-day-theme);
// Adjust Single Component Style
// @include mat.button-color($pink-day-theme);
.rtl-container{ .rtl-container{
@include mat.core(); @include mat.core();
&.purple { &.purple {

@ -89,7 +89,7 @@ export class RTLEffects implements OnDestroy {
ofType(RTLActions.OPEN_SPINNER), ofType(RTLActions.OPEN_SPINNER),
map((action: { type: string, payload: string }) => { map((action: { type: string, payload: string }) => {
if (action.payload !== UI_MESSAGES.NO_SPINNER) { if (action.payload !== UI_MESSAGES.NO_SPINNER) {
this.dialogRef = this.dialog.open(SpinnerDialogComponent, { data: { titleMessage: action.payload } }); this.dialogRef = this.dialog.open(SpinnerDialogComponent, { panelClass: 'spinner-dialog-panel', data: { titleMessage: action.payload } });
} }
})), })),
{ dispatch: false } { dispatch: false }

@ -1,4 +1,4 @@
/** /**
* This file includes polyfills needed by Angular and is loaded before the app. * This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file. * You can add your own extra polyfills to this file.
* *
@ -14,6 +14,12 @@
* Learn more in https://angular.io/guide/browser-support * Learn more in https://angular.io/guide/browser-support
*/ */
/** *************************************************************************************************
* APPLICATION IMPORTS
*/
window.global = <any>window;
window.global.Buffer = window.global.Buffer || require('buffer').Buffer;
/** ************************************************************************************************* /** *************************************************************************************************
* BROWSER POLYFILLS * BROWSER POLYFILLS
*/ */
@ -62,10 +68,3 @@ import 'otplib';
import 'pdfmake/build/pdfmake'; import 'pdfmake/build/pdfmake';
import 'pdfmake/build/vfs_fonts'; import 'pdfmake/build/vfs_fonts';
import 'clone-deep'; import 'clone-deep';
/** *************************************************************************************************
* APPLICATION IMPORTS
*/
window.global = <any>window;
window.global.Buffer = window.global.Buffer || require('buffer').Buffer;

Loading…
Cancel
Save