From aa1519c18eb06c0917fefb84940583126a3cf37c Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 8 Sep 2022 18:56:25 +0200 Subject: [PATCH 1/9] Show zero base fee tag on channels --- .../channel-box/channel-box.component.html | 103 +++++++++++------- .../app/shared/pipes/amount-shortener.pipe.ts | 3 +- 2 files changed, 68 insertions(+), 38 deletions(-) diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html index 8b486eff5..4a421480d 100644 --- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html +++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html @@ -11,44 +11,73 @@
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
Fee rate - {{ channel.fee_rate ?? '-' }} ppm ({{ channel.fee_rate / 10000 | number }}%) -
Base fee - -
Min HTLC - -
Max HTLC - -
Timelock delta - -
-
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Fee rate + + {{ channel.fee_rate !== null ? (channel.fee_rate | amountShortener : 2 : undefined : true) : '-' }} ppm ({{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | amountShortener : 2 : undefined : true) + '%)' : '' }} + + + {{ channel.fee_rate !== null ? (channel.fee_rate | number) : '-' }} ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | number) + '%)' : '' }} + +
Base fee +
+ + + {{ channel.base_fee_mtokens !== null ? (channel.base_fee_mtokens / 1000 | amountShortener : 2 : undefined : true) : '-' }} + sats + + + Zero base fee + + +
+
+ + + + Zero base fee + + +
+
Min HTLC + +
Max HTLC + +
Timelock delta + +
{{ i }} blocks diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index db3d94284..71ff76f77 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -7,6 +7,7 @@ export class AmountShortenerPipe implements PipeTransform { transform(num: number, ...args: any[]): unknown { const digits = args[0] ?? 1; const unit = args[1] || undefined; + const isMoney = args[2] || false; if (num < 1000) { return num.toFixed(digits); @@ -16,7 +17,7 @@ export class AmountShortenerPipe implements PipeTransform { { value: 1, symbol: '' }, { value: 1e3, symbol: 'k' }, { value: 1e6, symbol: 'M' }, - { value: 1e9, symbol: 'G' }, + { value: 1e9, symbol: isMoney ? 'B' : 'G' }, { value: 1e12, symbol: 'T' }, { value: 1e15, symbol: 'P' }, { value: 1e18, symbol: 'E' } From bc0af68d97e934576a2033ba43b74e4267fefdcc Mon Sep 17 00:00:00 2001 From: softsimon Date: Mon, 19 Sep 2022 13:27:30 +0200 Subject: [PATCH 2/9] Mempool svg logo bug fix fixes #2505 --- .../src/app/components/svg-images/svg-images.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/svg-images/svg-images.component.html b/frontend/src/app/components/svg-images/svg-images.component.html index 61ed17209..f51f3918e 100644 --- a/frontend/src/app/components/svg-images/svg-images.component.html +++ b/frontend/src/app/components/svg-images/svg-images.component.html @@ -35,10 +35,10 @@ - + - + From 7cbc87d3dfcc650bb0f38b7e2b15e4656e1bb6e0 Mon Sep 17 00:00:00 2001 From: softsimon Date: Mon, 19 Sep 2022 18:21:31 +0200 Subject: [PATCH 3/9] Clipboard buttons fix fixes #2566 --- .../clipboard/clipboard.component.html | 18 ++++++++++++++---- .../clipboard/clipboard.component.ts | 2 ++ .../app/lightning/group/group.component.html | 4 +--- .../src/app/lightning/node/node.component.html | 8 ++------ 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/clipboard/clipboard.component.html b/frontend/src/app/components/clipboard/clipboard.component.html index 1e88b7b7f..ec8802634 100644 --- a/frontend/src/app/components/clipboard/clipboard.component.html +++ b/frontend/src/app/components/clipboard/clipboard.component.html @@ -1,5 +1,15 @@ - - - + + + + + + + diff --git a/frontend/src/app/components/clipboard/clipboard.component.ts b/frontend/src/app/components/clipboard/clipboard.component.ts index e6a5c0e6e..7fbffdca3 100644 --- a/frontend/src/app/components/clipboard/clipboard.component.ts +++ b/frontend/src/app/components/clipboard/clipboard.component.ts @@ -11,6 +11,8 @@ import * as tlite from 'tlite'; export class ClipboardComponent implements AfterViewInit { @ViewChild('btn') btn: ElementRef; @ViewChild('buttonWrapper') buttonWrapper: ElementRef; + @Input() button = false; + @Input() class = 'btn btn-secondary ml-1'; @Input() size: 'small' | 'normal' = 'normal'; @Input() text: string; @Input() leftPadding = true; diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html index b5745d0ca..fdc79b692 100644 --- a/frontend/src/app/lightning/group/group.component.html +++ b/frontend/src/app/lightning/group/group.component.html @@ -99,9 +99,7 @@
- + diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html index 0c8451d44..f9cc3c0a6 100644 --- a/frontend/src/app/lightning/node/node.component.html +++ b/frontend/src/app/lightning/node/node.component.html @@ -120,9 +120,7 @@ - +
@@ -230,9 +228,7 @@ - +

From 387cebeb5015b41a7576ff6a5221a051d2a3be43 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 22 Sep 2022 15:12:28 +0200 Subject: [PATCH 4/9] Fix "undefined" location in node ranking --- .../geolocation/geolocation.component.ts | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/shared/components/geolocation/geolocation.component.ts b/frontend/src/app/shared/components/geolocation/geolocation.component.ts index afcea3b1e..9cce1ea08 100644 --- a/frontend/src/app/shared/components/geolocation/geolocation.component.ts +++ b/frontend/src/app/shared/components/geolocation/geolocation.component.ts @@ -31,25 +31,34 @@ export class GeolocationComponent implements OnChanges { } if (this.type === 'list-country') { - if (this.data.city) { + if (!this.data.city) { + this.formattedLocation = '-'; + } + else if (this.data.city) { this.formattedLocation += ' ' + city; if (this.data.subdivision) { this.formattedLocation += ', ' + subdivision; } - } else { - this.formattedLocation += '-'; } } if (this.type === 'list-isp') { - this.formattedLocation = getFlagEmoji(this.data.iso); - if (this.data.city) { - this.formattedLocation += ' ' + city; - if (this.data.subdivision) { - this.formattedLocation += ', ' + subdivision; - } + if (!this.data.country && !this.data.city) { + this.formattedLocation = '-'; } else { - this.formattedLocation += ' ' + this.data.country; + if (this.data.country) { + this.formattedLocation = getFlagEmoji(this.data.iso); + } else { + this.formattedLocation = ''; + } + if (this.data.city) { + this.formattedLocation += ' ' + city; + if (this.data.subdivision) { + this.formattedLocation += ', ' + subdivision; + } + } else { + this.formattedLocation += ' ' + this.data.country; + } } } From 575a79145e7c70a4c2fd66299e4818ff22c60e88 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 22 Sep 2022 16:39:57 +0200 Subject: [PATCH 5/9] Show "Non-zero base fee" and fix base fee rounding issue --- .../channel-box/channel-box.component.html | 41 ++++++++----------- .../channel-box/channel-box.component.scss | 6 +++ 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html index 4a421480d..a61273d4d 100644 --- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html +++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html @@ -19,7 +19,7 @@ Fee rate - {{ channel.fee_rate !== null ? (channel.fee_rate | amountShortener : 2 : undefined : true) : '-' }} ppm ({{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | amountShortener : 2 : undefined : true) + '%)' : '' }} + {{ channel.fee_rate !== null ? (channel.fee_rate | amountShortener : 2 : undefined : true) : '-' }} ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | amountShortener : 2 : undefined : true) + '%)' : '' }} {{ channel.fee_rate !== null ? (channel.fee_rate | number) : '-' }} ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | number) + '%)' : '' }} @@ -28,34 +28,25 @@ Base fee - -
- - - {{ channel.base_fee_mtokens !== null ? (channel.base_fee_mtokens / 1000 | amountShortener : 2 : undefined : true) : '-' }} - sats + + + + + {{ channel.base_fee_mtokens | amountShortener : 0 }} + msats - - Zero base fee + + - -
-
- - - - Zero base fee - + + {{ channel.base_fee_mtokens === 0 ? 'Zero base fee' : 'Non-zero base fee' }} -
+ diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss index bc7b56f62..f157f380a 100644 --- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss +++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss @@ -21,4 +21,10 @@ .box { margin-bottom: 20px; } +} + +.base-fee { + @media (max-width: 768px) { + padding-right: 0px; + } } \ No newline at end of file From 6df731af58595bb89fd22035016b412777a91fd6 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 22 Sep 2022 18:35:16 +0200 Subject: [PATCH 6/9] Only show tor badge in node page if actually running on tor only --- frontend/src/app/lightning/node/node.component.html | 5 ++++- frontend/src/app/lightning/node/node.component.ts | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html index 0c8451d44..441eeb78e 100644 --- a/frontend/src/app/lightning/node/node.component.html +++ b/frontend/src/app/lightning/node/node.component.html @@ -85,9 +85,12 @@ {{ node.as_organization }} [ASN {{node.as_number}}] - + Exclusively on Tor + + Unknown + diff --git a/frontend/src/app/lightning/node/node.component.ts b/frontend/src/app/lightning/node/node.component.ts index 1bf100af4..cbfa66c89 100644 --- a/frontend/src/app/lightning/node/node.component.ts +++ b/frontend/src/app/lightning/node/node.component.ts @@ -22,6 +22,8 @@ export class NodeComponent implements OnInit { error: Error; publicKey: string; channelListLoading = false; + clearnetSocketCount = 0; + torSocketCount = 0; constructor( private lightningApiService: LightningApiService, @@ -47,10 +49,13 @@ export class NodeComponent implements OnInit { let label = ''; if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) { label = 'IPv4'; + this.clearnetSocketCount++; } else if (socket.indexOf('[') > -1) { label = 'IPv6'; + this.clearnetSocketCount++; } else if (socket.indexOf('onion') > -1) { label = 'Tor'; + this.torSocketCount++; } socketsObject.push({ label: label, From 409e5a335f777e30da17ba647da0e64301931ca3 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Fri, 23 Sep 2022 19:03:21 +0000 Subject: [PATCH 7/9] Improve tx flow diagram drawing algorithm --- .../transaction/transaction.component.html | 12 +- .../transaction/transaction.component.ts | 4 +- .../tx-bowtie-graph.component.ts | 148 ++++++++++++------ 3 files changed, 116 insertions(+), 48 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index f25e2a012..81d3778f8 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -191,12 +191,20 @@
-

Diagram

+

Flow

- + +
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 948eecdb1..3c29f210d 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -50,7 +50,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { graphExpanded: boolean = false; graphWidth: number = 1000; graphHeight: number = 360; + inOutLimit: number = 150; maxInOut: number = 0; + tooltipPosition: { x: number, y: number }; @ViewChild('graphContainer') @@ -298,7 +300,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { } setupGraph() { - this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1)); + this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1)); this.graphHeight = Math.min(360, this.maxInOut * 80); } diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts index 78a865b89..16e2736f7 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts @@ -19,8 +19,6 @@ interface Xput { confidential?: boolean; } -const lineLimit = 250; - @Component({ selector: 'tx-bowtie-graph', templateUrl: './tx-bowtie-graph.component.html', @@ -31,7 +29,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { @Input() network: string; @Input() width = 1200; @Input() height = 600; - @Input() combinedWeight = 100; + @Input() lineLimit = 250; + @Input() maxCombinedWeight = 100; @Input() minWeight = 2; // @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen. @Input() tooltip = false; @@ -42,6 +41,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { outputs: SvgLine[]; middle: SvgLine; midWidth: number; + combinedWeight: number; isLiquid: boolean = false; hoverLine: Xput | void = null; tooltipPosition = { x: 0, y: 0 }; @@ -62,20 +62,19 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { gradient: string[] = ['#105fb0', '#105fb0']; ngOnInit(): void { - this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet'); - this.gradient = this.gradientColors[this.network]; - this.midWidth = Math.min(50, Math.ceil(this.width / 20)); this.initGraph(); } ngOnChanges(): void { - this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet'); - this.gradient = this.gradientColors[this.network]; - this.midWidth = Math.min(50, Math.ceil(this.width / 20)); this.initGraph(); } initGraph(): void { + this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet'); + this.gradient = this.gradientColors[this.network]; + this.midWidth = Math.min(10, Math.ceil(this.width / 100)); + this.combinedWeight = Math.min(this.maxCombinedWeight, Math.floor((this.width - (2 * this.midWidth)) / 6)); + const totalValue = this.calcTotalValue(this.tx); let voutWithFee = this.tx.vout.map(v => { return { @@ -103,19 +102,19 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { } as Xput; }); - if (truncatedInputs.length > lineLimit) { - const valueOfRest = truncatedInputs.slice(lineLimit).reduce((r, v) => { + if (truncatedInputs.length > this.lineLimit) { + const valueOfRest = truncatedInputs.slice(this.lineLimit).reduce((r, v) => { return r + (v.value || 0); }, 0); - truncatedInputs = truncatedInputs.slice(0, lineLimit); - truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - lineLimit }); + truncatedInputs = truncatedInputs.slice(0, this.lineLimit); + truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - this.lineLimit }); } - if (voutWithFee.length > lineLimit) { - const valueOfRest = voutWithFee.slice(lineLimit).reduce((r, v) => { + if (voutWithFee.length > this.lineLimit) { + const valueOfRest = voutWithFee.slice(this.lineLimit).reduce((r, v) => { return r + (v.value || 0); }, 0); - voutWithFee = voutWithFee.slice(0, lineLimit); - voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - lineLimit }); + voutWithFee = voutWithFee.slice(0, this.lineLimit); + voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - this.lineLimit }); } this.inputData = truncatedInputs; @@ -126,7 +125,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { this.middle = { path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`, - style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}` + style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}` }; } @@ -157,7 +156,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { initLines(side: 'in' | 'out', xputs: Xput[], total: number, maxVisibleStrands: number): SvgLine[] { if (!total) { - const weights = xputs.map((put): number => this.combinedWeight / xputs.length); + const weights = xputs.map((put) => this.combinedWeight / xputs.length); return this.linesFromWeights(side, xputs, weights, maxVisibleStrands); } else { let unknownCount = 0; @@ -171,19 +170,26 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { }); const unknownShare = unknownTotal / unknownCount; // conceptual weights - const weights = xputs.map((put): number => this.combinedWeight * (put.value == null ? unknownShare : put.value as number) / total); + const weights = xputs.map((put) => this.combinedWeight * (put.value == null ? unknownShare : put.value as number) / total); return this.linesFromWeights(side, xputs, weights, maxVisibleStrands); } } - linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number) { - const lines = []; - // actual displayed line thicknesses - const minWeights = weights.map((w) => Math.max(this.minWeight - 1, w) + 1); + linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number): SvgLine[] { + const lineParams = weights.map((w) => { + return { + weight: w, + thickness: Math.max(this.minWeight - 1, w) + 1, + offset: 0, + innerY: 0, + outerY: 0, + }; + }); const visibleStrands = Math.min(maxVisibleStrands, xputs.length); - const visibleWeight = minWeights.slice(0, visibleStrands).reduce((acc, v) => v + acc, 0); + const visibleWeight = lineParams.slice(0, visibleStrands).reduce((acc, v) => v.thickness + acc, 0); const gaps = visibleStrands - 1; + // bounds of the middle segment const innerTop = (this.height / 2) - (this.combinedWeight / 2); const innerBottom = innerTop + this.combinedWeight; // tracks the visual bottom of the endpoints of the previous line @@ -192,39 +198,91 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { // gap between strands const spacing = (this.height - visibleWeight) / gaps; - for (let i = 0; i < xputs.length; i++) { - const weight = weights[i]; - const minWeight = minWeights[i]; + // curve adjustments to prevent overlaps + let offset = 0; + let minOffset = 0; + let maxOffset = 0; + let lastWeight = 0; + let pad = 0; + lineParams.forEach((line, i) => { // set the vertical position of the (center of the) outer side of the line - let outer = lastOuter + (minWeight / 2); - const inner = Math.min(innerBottom + (minWeight / 2), Math.max(innerTop + (minWeight / 2), lastInner + (weight / 2))); + line.outerY = lastOuter + (line.thickness / 2); + line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2))); // special case to center single input/outputs if (xputs.length === 1) { - outer = (this.height / 2); + line.outerY = (this.height / 2); } - lastOuter += minWeight + spacing; - lastInner += weight; - lines.push({ - path: this.makePath(side, outer, inner, minWeight), - style: this.makeStyle(minWeight, xputs[i].type), - class: xputs[i].type - }); - } + lastOuter += line.thickness + spacing; + lastInner += line.weight; - return lines; + // calculate conservative lower bound of the amount of horizontal offset + // required to prevent this line overlapping its neighbor + + if (this.tooltip || !xputs[i].rest) { + const w = (this.width - Math.max(lastWeight, line.weight)) / 2; // approximate horizontal width of the curved section of the line + const y1 = line.outerY; + const y2 = line.innerY; + const t = (lastWeight + line.weight) / 2; // distance between center of this line and center of previous line + + // slope of the inflection point of the bezier curve + const dx = 0.75 * w; + const dy = 1.5 * (y2 - y1); + const a = Math.atan2(dy, dx); + + // parallel curves should be separated by >=t at the inflection point to prevent overlap + // vertical offset is always = t, contributing tCos(a) + // horizontal offset h will contribute hSin(a) + // tCos(a) + hSin(a) >= t + // h >= t(1 - cos(a)) / sin(a) + if (Math.sin(a) !== 0) { + // (absolute value clamped to t for sanity) + offset += Math.max(Math.min(t * (1 - Math.cos(a)) / Math.sin(a), t), -t); + } + + line.offset = offset; + minOffset = Math.min(minOffset, offset); + maxOffset = Math.max(maxOffset, offset); + pad = Math.max(pad, line.thickness / 2); + lastWeight = line.weight; + } else { + // skip the offsets for consolidated lines in unfurls, since these *should* overlap a little + } + }); + + // normalize offsets + lineParams.forEach((line) => { + line.offset -= minOffset; + }); + maxOffset -= minOffset; + + return lineParams.map((line, i) => { + return { + path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset), + style: this.makeStyle(line.thickness, xputs[i].type), + class: xputs[i].type + }; + }); } - makePath(side: 'in' | 'out', outer: number, inner: number, weight: number): string { - const start = side === 'in' ? (weight * 0.5) : this.width - (weight * 0.5); - const center = this.width / 2 + (side === 'in' ? -(this.midWidth * 0.9) : (this.midWidth * 0.9) ); - const midpoint = (start + center) / 2; + makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string { + const start = (weight * 0.5); + const curveStart = Math.max(start + 1, pad - offset); + const end = this.width / 2 - (this.midWidth * 0.9) + 1; + const curveEnd = end - offset - 10; + const midpoint = (curveStart + curveEnd) / 2; + // correct for svg horizontal gradient bug if (Math.round(outer) === Math.round(inner)) { outer -= 1; } - return `M ${start} ${outer} C ${midpoint} ${outer}, ${midpoint} ${inner}, ${center} ${inner}`; + + if (side === 'in') { + return `M ${start} ${outer} L ${curveStart} ${outer} C ${midpoint} ${outer}, ${midpoint} ${inner}, ${curveEnd} ${inner} L ${end} ${inner}`; + } else { // mirrored in y-axis for the right hand side + return `M ${this.width - start} ${outer} L ${this.width - curveStart} ${outer} C ${this.width - midpoint} ${outer}, ${this.width - midpoint} ${inner}, ${this.width - curveEnd} ${inner} L ${this.width - end} ${inner}`; + } } makeStyle(minWeight, type): string { From eb28fd90e5dd9c500b9c5f1373ec033fdc114859 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sat, 24 Sep 2022 02:30:36 +0200 Subject: [PATCH 8/9] Updating info button styling --- frontend/src/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 65293098d..c7a0867da 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -10,7 +10,7 @@ $nav-tabs-link-active-bg: #11131f; $primary: #105fb0; $secondary: #2d3348; $success: #1a9436; -$info: #1bd8f4; +$info: #5f4ab8; $h5-font-size: 1.15rem !default; From c79c1d9958ff52dee9acf377f136c6641c7dd138 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sat, 24 Sep 2022 02:39:27 +0200 Subject: [PATCH 9/9] New button light color --- frontend/src/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index c7a0867da..d903c6076 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -11,6 +11,7 @@ $primary: #105fb0; $secondary: #2d3348; $success: #1a9436; $info: #5f4ab8; +$light: #744ad1; $h5-font-size: 1.15rem !default;