ng Material 15 UI adjustments

ng Material 15 UI adjustments
pull/1149/head
ShahanaFarooqui 1 year 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.**
@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
MIT

@ -10,9 +10,9 @@
<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="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>
<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>

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/flex-layout": "^14.0.0-beta.41",
"@angular/forms": "^15.0.0",
"@angular/material": "^14.2.7",
"@angular/material": "^15.0.1",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^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]">
<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>
<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()">
<mat-icon>menu</mat-icon>
<button *ngIf="flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" (click)="sideNavToggle()">
<mat-icon class="color-white">menu</mat-icon>
</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">
<svg class="icon-pinned" viewBox="0 0 32 32">
<button *ngIf="!smallScreen && flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" (click)="flgSidenavPinned = !flgSidenavPinned">
<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="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>

@ -2,10 +2,3 @@
display: inline-flex !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">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</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>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
<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>
<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>
<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="'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">
<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="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'"></rtl-cln-lightning-payments></mat-tab>
<mat-tab [disabled]="true">

@ -58,8 +58,8 @@ export class CLNHomeComponent implements OnInit, OnDestroy {
public operatorCards: Tile[] = [];
public merchantCards: Tile[] = [];
public screenSize = '';
public operatorCardHeight = '405px';
public merchantCardHeight = '65px';
public operatorCardHeight = '390px';
public merchantCardHeight = '62px';
public sortField = 'Balance Score';
public errorMessages = ['', '', '', '', '', ''];
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>
<h4 class="dashboard-info-title">Alias</h4>
<div class="overflow-wrap dashboard-info-value">

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -1,5 +1,5 @@
<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>
<ng-template mat-tab-label>
<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>
</div>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{openChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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>
</mat-card-content>
</mat-card>

@ -7,11 +7,11 @@
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<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>
</nav>
<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>
</nav> -->
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -16,14 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</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>
<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>
<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="'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">
<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-ecl-lightning-invoices class="h-100" [calledFrom]="'home'"></rtl-ecl-lightning-invoices>
</mat-tab>

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

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -3,7 +3,7 @@
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</div>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfOpenChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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>
</mat-card-content>
</mat-card>

@ -7,11 +7,11 @@
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<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>
</nav>
<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>
</nav> -->
</div>

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</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>
<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>
<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="'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]>
<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="Pay"><rtl-lightning-payments [calledFrom]="'home'"></rtl-lightning-payments></mat-tab>
<mat-tab [disabled]="true">

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

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -1,5 +1,5 @@
<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>
<ng-template mat-tab-label>
<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>
</div>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOpenChannels}}">Open</span>

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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>
</mat-card-content>
</mat-card>

@ -29,11 +29,11 @@
</div>
</form>
<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>
</nav>
<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>
</nav> -->
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -16,13 +16,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -5,7 +5,7 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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="Initialize"><rtl-initialize-wallet></rtl-initialize-wallet></mat-tab>
</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 }}">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<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-circle" fxLayout="column" fxLayoutAlign="center center">
<mat-spinner></mat-spinner>
<h1>{{data.titleMessage}}</h1>
</div>
<div class="spinner-container" fxLayout="column" fxLayoutAlign="center center">
<mat-progress-spinner class="modal-spinner-message" color="primary" mode="indeterminate"></mat-progress-spinner>
<h2>{{data.titleMessage}}</h2>
</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;
}

@ -13,13 +13,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<button mat-flat-button color="primary" type="button" tabindex="1" (click)="onSwap(selectedSwapType)">Start {{activeTab.name}}</button>
</div>

@ -5,13 +5,10 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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>
</nav>
<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">
<button mat-flat-button color="primary" type="button" tabindex="1" (click)="onLoop(selectedSwapType)">Start {{activeTab.name}}</button>
</div>

@ -1,21 +1,23 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="center stretch" class="login-container">
<div fxLayout="row" fxFlex="50" fxLayoutAlign="center stretch">
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="login-container">
<div fxLayout="row" fxFlex="35" fxLayoutAlign="center center">
<mat-card fxLayout="row" fxFlex="45" fxLayoutAlign="center stretch">
<div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="stretch stretch">
<div fxFlex="35" fxLayoutAlign="center center" class="bg-primary">
<img src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo" class="rtl-logo-svg">
</div>
<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}">
<span class="page-title">Welcome</span>
</mat-card-title>
</mat-card-header>
<mat-card-content class="mt-5px mb-0 px-2">
<form #loginForm="ngForm" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between">
<mat-form-field fxFlex="100" fxLayoutAlign="start">
<mat-card-content class="pb-2">
<form #loginForm="ngForm" fxLayout="column" fxLayoutAlign="start space-between">
<mat-form-field>
<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-form-field>
<p *ngIf="loginErrorMessage !== ''" fxFlex="100" class="color-warn pre-wrap" fxLayoutAlign="start start">

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

@ -19,14 +19,14 @@
</mat-tree-node>
<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 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>
<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>
<span>{{node.name}}</span>
</div>
<button fxFlex="11" 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>
<button fxFlex="20" class="btn-icon-small" mat-icon-button fxLayoutAlign="end center" [attr.aria-label]="'toggle ' + node.name">
<mat-icon>{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div class="mat-nested-tree-node-child" [class.tree-children-invisible]="!treeControlNested.isExpanded(node)">

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

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

@ -5,7 +5,7 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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[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> -->
@ -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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

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

@ -48,7 +48,7 @@
</mat-option>
</mat-select>
</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>
<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 {
&:last-child {
margin-bottom: 3rem;
}
&:not(:first-child) {
margin: 3rem 0;
margin: ($gap) 0;
}
}

@ -7,17 +7,12 @@
<div fxLayout="column">
<mat-card>
<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[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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -5,17 +5,12 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<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 *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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

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

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

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

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

@ -89,7 +89,7 @@ export class RTLEffects implements OnDestroy {
ofType(RTLActions.OPEN_SPINNER),
map((action: { type: string, payload: string }) => {
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 }

@ -1,4 +1,4 @@
/**
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
@ -14,6 +14,12 @@
* 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
*/
@ -62,10 +68,3 @@ import 'otplib';
import 'pdfmake/build/pdfmake';
import 'pdfmake/build/vfs_fonts';
import 'clone-deep';
/** *************************************************************************************************
* APPLICATION IMPORTS
*/
window.global = <any>window;
window.global.Buffer = window.global.Buffer || require('buffer').Buffer;

Loading…
Cancel
Save