From 9270f4bcd3eb16bdcbe784114a7116b00f7a398b Mon Sep 17 00:00:00 2001
From: 2hwk <reasonstouninstall@tutanota.com>
Date: Tue, 2 Apr 2024 20:39:01 +0800
Subject: [PATCH] fix(efb): fuel EFB page visual glitches (#8573)

---
 .../src/EFB/Assets/FuelOutline.tsx            | 62 +++++--------------
 .../Ground/Pages/Fuel/A380_842/A380Fuel.tsx   |  1 +
 2 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/fbw-common/src/systems/instruments/src/EFB/Assets/FuelOutline.tsx b/fbw-common/src/systems/instruments/src/EFB/Assets/FuelOutline.tsx
index a5c4ac1a0149..2ba0da1e74e0 100644
--- a/fbw-common/src/systems/instruments/src/EFB/Assets/FuelOutline.tsx
+++ b/fbw-common/src/systems/instruments/src/EFB/Assets/FuelOutline.tsx
@@ -37,12 +37,13 @@ const AnimatedLinearGradient = ({ id, percent, color, duration, enableDynamic })
     );
 };
 
-export const A380FuelOutline = ({ className, feed1Percent, feed2Percent, feed3Percent, feed4Percent, leftInnerPercent, leftMidPercent, leftOuterPercent, rightInnerPercent, rightMidPercent, rightOuterPercent, trimPercent }: {
+export const A380FuelOutline = ({ className, feed1Percent, feed2Percent, feed3Percent, feed4Percent, leftInnerPercent, leftMidPercent, leftOuterPercent, rightInnerPercent, rightMidPercent, rightOuterPercent, trimPercent, enableDynamic }: {
     className: string,
     feed1Percent: number, feed2Percent: number, feed3Percent: number, feed4Percent: number,
     leftInnerPercent: number, leftMidPercent: number, leftOuterPercent: number,
     rightInnerPercent: number, rightMidPercent: number, rightOuterPercent: number,
-    trimPercent: number
+    trimPercent: number,
+    enableDynamic: boolean
 }) => (
     <svg width="864" height="664" xmlns="http://www.w3.org/2000/svg" className={className} stroke="currentColor" fill="none" viewBox="0 200 864 864">
         <defs>
@@ -51,17 +52,17 @@ export const A380FuelOutline = ({ className, feed1Percent, feed2Percent, feed3Pe
                     '.cls-1, .cls-2, .cls-3, .cls-4 { stroke-miterlimit: 10; } .cls-2 { stroke-width: 3px; } .cls-3 { stroke-width: 2px; } .cls-4 { stroke-width: .5px; }'
                 }
             </style>
-            <AnimatedLinearGradient id="gradientFeed1" percent={feed1Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientFeed2" percent={feed2Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientFeed3" percent={feed3Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientFeed4" percent={feed4Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientLeftInner" percent={leftInnerPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientLeftMid" percent={leftMidPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientLeftOuter" percent={leftOuterPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientRightInner" percent={rightInnerPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientRightMid" percent={rightMidPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientRightOuter" percent={rightOuterPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
-            <AnimatedLinearGradient id="gradientTrim" percent={trimPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic />
+            <AnimatedLinearGradient id="gradientFeed1" percent={feed1Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientFeed2" percent={feed2Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientFeed3" percent={feed3Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientFeed4" percent={feed4Percent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientLeftInner" percent={leftInnerPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientLeftMid" percent={leftMidPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientLeftOuter" percent={leftOuterPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientRightInner" percent={rightInnerPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientRightMid" percent={rightMidPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientRightOuter" percent={rightOuterPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
+            <AnimatedLinearGradient id="gradientTrim" percent={trimPercent} color="var(--color-highlight)" duration="0.5s" enableDynamic={enableDynamic} />
         </defs>
         <g id="FUEL">
             <g id="Right_Wing_FUEL" data-name="Right Wing FUEL">
@@ -197,39 +198,4 @@ export const A380FuelOutline = ({ className, feed1Percent, feed2Percent, feed3Pe
             <path id="Fuselage" className="cls-3" d="m407.24,677.06c-.15-.62-.3-1.23-.46-1.83-11.33-39.33-12.89-79.56-12.89-98.67,0,0,0-401.75,0-401.78,0-8.18,2.13-45.6,8.44-76.22,6.22-30.25,21.04-53.67,31.08-53.67h.05c10.04,0,24.87,23.42,31.09,53.67,6.3,30.63,8.44,68.04,8.44,76.22,0,.03,0,401.78,0,401.78,0,19.11-1.56,59.33-12.89,98.67-.14.55-.15.57-.29,1.13l-.07.27c.19,4.81,2.24,7.15,5.24,9.49l114,88.11c6.39,5.56,9.61,13.78,11.83,21.94l4.61,26.83-149.64-55.11-.68-.23c-2.11,7.73-4.52,15.55-6.57,21.87h-2.69s-4.84,0-4.84,0h-2.69c-2.05-6.32-4.46-14.14-6.57-21.87l-.68.23-149.64,55.11,4.61-26.83c2.22-8.17,5.44-16.39,11.83-21.94l114-88.11c3-2.33,5.05-4.67,5.24-9.49" />
         </g>
     </svg>
-
-    /*
-    <svg width="1278" height="455" viewBox="0 0 1290 455" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
-        <path d="M717.101 288.355H874.129L1268.63 407.972L1289.48 442.937V430.051L1268.63 358.286L727.518 77.3383C724.937 72.8587 722.81 68.1323 721.169 63.2297C718.113 54.1487 716.735 44.5873 717.101 35.0127V288.355Z" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M814.615 288.355C814.311 299.45 816.623 310.462 821.364 320.499C822.912 315.677 824.146 310.76 825.056 305.779C826.11 300.026 826.723 294.201 826.89 288.355" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M949.258 309.964C949.091 315.811 948.478 321.635 947.424 327.388C946.521 332.369 945.296 337.286 943.755 342.108C939.009 332.076 936.72 321.057 937.077 309.964V307.401" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M1078.42 348.857C1078.1 359.778 1076.24 370.599 1072.9 381.001C1070.77 376.524 1069.13 371.834 1068 367.01C1066.6 361.065 1065.98 354.963 1066.15 348.857V346.317" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M806.174 118.182C805.092 104.607 804.175 90.7884 803.423 76.7269C803.078 70.0645 802.772 63.4727 802.506 56.9514C801.075 55.4438 799.971 53.6575 799.262 51.704C798.553 49.7504 798.254 47.6717 798.384 45.5975C798.514 43.5233 799.071 41.4983 800.018 39.6488C800.966 37.7993 802.285 36.165 803.893 34.8481V29.7925L804.81 23.3496L808.126 21.5155C820.823 20.4104 834.65 19.7049 849.44 19.6814C864.23 19.6579 878.151 20.2928 890.896 21.3744C891.491 22.9151 892.009 24.4847 892.448 26.0773C893.322 29.2444 893.943 32.476 894.305 35.7416C894.958 41.5409 895.178 47.3807 894.964 53.2127" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M891.012 48.2041C895.981 56.2357 898.709 65.4508 898.913 74.8927H891.012V48.2041Z" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M895.033 74.8928C894.469 86.4618 893.505 98.7833 892 111.693C890.707 122.65 889.131 133.091 887.297 142.966H863.783V148.163" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M804.81 23.3496L808.125 14.6258C820.851 13.1616 833.645 12.3766 846.454 12.2744C860.824 12.1788 875.187 12.9641 889.461 14.6258L890.896 21.3744" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M840.856 136.194V77.4089C840.85 73.665 841.608 69.9592 843.083 66.5184C844.559 63.0776 846.722 59.9743 849.439 57.3983C852.498 59.9326 854.922 63.1467 856.518 66.7844C858.115 70.422 858.839 74.3824 858.633 78.3495V145.412" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M573.312 291.929H416.284L21.8569 411.546L0.999789 446.511V433.625L21.8569 361.86L562.895 80.8183C565.479 76.3399 567.606 71.6133 569.244 66.7097C572.308 57.6304 573.686 48.0676 573.312 38.4927V291.929Z" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M475.799 291.929C475.966 298.035 475.342 304.137 473.941 310.082C472.812 314.906 471.172 319.596 469.05 324.073C465.705 313.671 463.845 302.85 463.524 291.929" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M341.156 313.444C341.323 319.291 341.936 325.115 342.99 330.868C343.901 335.847 345.126 340.764 346.659 345.588C348.8 341.117 350.447 336.425 351.573 331.597C352.979 325.653 353.596 319.55 353.407 313.444V310.905" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M211.993 352.337C212.321 363.259 214.19 374.081 217.542 384.481C219.664 380.004 221.304 375.314 222.433 370.49C223.834 364.545 224.458 358.443 224.291 352.337V349.797" stroke="currentColor" strokeWidth="0.75" strokeMiterlimit="10" />
-        <path d="M485.604 26.8534C457.101 22.6458 428.187 21.9744 399.519 24.8547" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M395.38 78.3728C395.944 89.9653 396.908 102.263 398.413 115.173C399.706 126.154 401.282 136.594 403.116 146.446H426.63V151.667" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M449.557 139.675V80.889C449.555 76.6671 448.59 72.5012 446.735 68.7086C445.298 65.7752 443.347 63.1232 440.974 60.8784C437.915 63.4127 435.49 66.6268 433.894 70.2645C432.298 73.9021 431.574 77.8625 431.78 81.8296V148.916" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M399.049 121.663C397.967 108.197 397.034 94.4096 396.25 80.301C395.906 73.6543 395.6 67.0625 395.333 60.5256C393.899 59.0232 392.79 57.2405 392.078 55.2894C391.365 53.3383 391.063 51.261 391.191 49.1877C391.319 47.1144 391.874 45.0899 392.822 43.2414C393.769 41.3929 395.089 39.7602 396.697 38.4457V33.2726L397.614 26.8532L400.93 24.9956" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M484.569 24.502C485.016 25.6541 485.581 27.2766 486.145 29.2048C487.006 32.3658 487.62 35.5892 487.979 38.8456C488.632 44.6528 488.852 50.5004 488.637 56.3402" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M484.758 49.7327C487.075 53.487 488.915 57.5155 490.236 61.7249C491.719 66.486 492.511 71.4352 492.588 76.4213H484.687L484.758 49.7327Z" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M484.757 121.404L487.932 76.4213" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M573.383 453.824V378.252V0.0163574" stroke="currentColor" strokeWidth="0.829759" strokeMiterlimit="10" />
-        <path d="M717.089 0V455" stroke="currentColor" strokeWidth="0.98456" strokeMiterlimit="10" />
-        <path d="M399.519 27.5586L402.834 18.8113C429.859 15.7286 457.146 15.7286 484.17 18.8113L485.604 25.5598" stroke="currentColor" strokeMiterlimit="10" />
-        <path d="M717.149 101.605L1258.47 370.443L1259.17 392.523L716.772 211.98L717.149 101.605Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-        <path d="M1151.06 355.229L1149.83 316.431L1151.06 355.229Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-        <path d="M1027.44 256.658L1029.25 314.268L1027.44 256.658Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-        <path d="M714.115 211.98V101.605L576.722 101.605V211.98H714.115Z" stroke="currentColor" strokeWidth="1.89" strokeMiterlimit="10" />
-        <path d="M573.147 101.605L31.7794 370.443L31.0976 392.523L573.547 211.98L573.147 101.605Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-        <path d="M139.334 355.229L140.557 316.431L139.334 355.229Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-        <path d="M262.877 256.658L261.066 314.268L262.877 256.658Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-    */
 );
diff --git a/fbw-common/src/systems/instruments/src/EFB/Ground/Pages/Fuel/A380_842/A380Fuel.tsx b/fbw-common/src/systems/instruments/src/EFB/Ground/Pages/Fuel/A380_842/A380Fuel.tsx
index 4399c56adf86..e5fec76d3650 100644
--- a/fbw-common/src/systems/instruments/src/EFB/Ground/Pages/Fuel/A380_842/A380Fuel.tsx
+++ b/fbw-common/src/systems/instruments/src/EFB/Ground/Pages/Fuel/A380_842/A380Fuel.tsx
@@ -487,6 +487,7 @@ export const A380Fuel: React.FC<FuelProps> = ({
                     rightMidPercent={(Math.max(rightMidGal * FUEL_GALLONS_TO_KG, 0) / MID_TANK_MAX_KG) * 100}
                     rightOuterPercent={(Math.max(rightOuterGal * FUEL_GALLONS_TO_KG, 0) / OUTER_TANK_MAX_KG) * 100}
                     trimPercent={(Math.max(trimGal * FUEL_GALLONS_TO_KG, 0) / TRIM_TANK_MAX_KG) * 100}
+                    enableDynamic={!eng1Running && !eng2Running && !eng3Running && !eng4Running || refuelStartedByUser}
                 />
             </div>