update(flags): use flags as images with wix updates

ui/src/components/settings/styles.scss

@@ -122,15 +122,15 @@
   align-content: center;
   align-items: center;
   padding: 0 var(--gap) 0 0;
-  
+
   .keybind-section-mask {
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: fixed;
     z-index: 2;
-    background-color: rgba(0,0,0, 0.75);
+    background-color: rgba(0, 0, 0, 0.75);
     transition: background-color 0.3s ease;
   }
 
@@ -158,7 +158,7 @@
       stroke: none;
     }
   }
-  
+
   .keybind-section-keys {
     cursor: pointer;
     height: var(--height-input);
@@ -204,7 +204,6 @@
     }
   }
 
-
   &.highlight {
     .keybind-section-keys {
       border: 2px solid var(--info);
@@ -237,30 +236,38 @@
 }
 
 .volume-indicator-wrap {
-  width: 100%; 
-  height: var(--text-size-more); 
+  width: 100%;
+  height: var(--text-size-more);
   position: relative;
 }
 
 .volume-indicator-wrap {
-  width: 100%; 
-  height: var(--text-size-more); 
+  width: 100%;
+  height: var(--text-size-more);
   position: relative;
 }
 
 .volume-indicator {
-  position: absolute; 
-  width: 100%; 
-  height: 100%; 
-  border-radius: var(--border-radius); 
-  background: linear-gradient(90deg, 
-  #00b894 0% 75%,
-  #feca57 75% 90%, 
-  #ba0c0c 90%);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius);
+  background: linear-gradient(
+    90deg,
+    #00b894 0% 75%,
+    #feca57 75% 90%,
+    #ba0c0c 90%
+  );
 }
 
 .volume-indicator-overlay {
   right: 0;
   border-radius: 0;
   background: rgba(0, 0, 0, 0.5);
-}
+}
+
+.flags-settings img {
+  width: 30px;
+  height: 25px;
+  margin-right: 5px;
+}

ui/src/components/settings/sub_pages/about.rs

@@ -1,5 +1,6 @@
 use std::process::Command;
 
+use common::get_images_dir;
 use common::language::get_local_text;
 use common::state::{Action, ToastNotification};
 use common::{icons::outline::Shape as Icon, state::State};
@@ -8,6 +9,8 @@ use dioxus_desktop::use_window;
 use futures::StreamExt;
 use kit::elements::{button::Button, Appearance};
 
+use tracing::log;
+
 use crate::get_download_modal;
 use crate::utils::auto_updater::{DownloadProgress, DownloadState, SoftwareDownloadCmd};
 use crate::{
@@ -77,6 +80,28 @@ pub fn AboutPage(cx: Scope) -> Element {
     let stage = download_state.read().stage;
     let pending_key = format!("btn-pending{}", download_state.read().progress);
 
+    let image_path_flag_AU = get_flag_image_path("AU");
+    let image_path_flag_USA = get_flag_image_path("USA");
+    let image_path_flag_MX = get_flag_image_path("MX");
+    let image_path_flag_DE = get_flag_image_path("DE");
+    let image_path_flag_PT = get_flag_image_path("PT");
+    let image_path_flag_BR = get_flag_image_path("BR");
+    let image_path_flag_IT = get_flag_image_path("IT");
+    let image_path_flag_UR = get_flag_image_path("UR");
+    let image_path_flag_BL = get_flag_image_path("BL");
+    let image_path_flag_JP = get_flag_image_path("JP");
+    let image_path_flag_IN = get_flag_image_path("IN");
+
+    fn get_flag_image_path(flag: &str) -> String {
+        get_images_dir()
+            .unwrap_or_default()
+            .join("flags")
+            .join(format!("{}-flag.png", flag))
+            .to_str()
+            .map(|x| x.to_string())
+            .unwrap_or_default()
+    }
+
     let about_button = cx.render(rsx!(match opt {
         None if stage == DownloadProgress::Idle => {
             rsx!(Button {
@@ -227,8 +252,51 @@ pub fn AboutPage(cx: Scope) -> Element {
                 section_label: get_local_text("settings-about.made-in"),
                 section_description: get_local_text("settings-about.team"),
                 div {
-                    class: "flags",
-                    "🇺🇸🇲🇽🇩🇪🇵🇹🇧🇷🇮🇹🇺🇦🇧🇾🇯🇵🇦🇺🇮🇩"
+                    class: "flags-settings",
+                    img {
+                        src: "{image_path_flag_USA}",
+                        alt: "USA Flag",
+                    },
+                    img {
+                        src: "{image_path_flag_MX}",
+                        alt: "Mexico Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_DE}",
+                        alt: "Germany Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_PT}",
+                        alt: "Portugal Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_BR}",
+                        alt: "Brazil Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_IT}",
+                        alt: "Italy Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_UR}",
+                        alt: "Ukraine Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_BL}",
+                        alt: "Belarus Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_JP}",
+                        alt: "Japan Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_AU}",
+                        alt: "Australia Flag",
+                    }
+                    img {
+                        src: "{image_path_flag_IN}",
+                        alt: "Indonesia Flag",
+                    }
                 }
             }
         }

ui/wix/main.wxs

@@ -114,6 +114,45 @@
             <Component Id="cmpUplink.gif" Guid="0FCF0295-7EC7-4299-A2E0-DF94F1DECBEF">
                <File Id="Uplink.gif" Name="uplink.gif" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\uplink.gif" />
             </Component>
+            <Directory Id="FlagsFolder" Name="flags">
+               <Component Id="cmpAUflag.png" Guid="1A45E907-FC60-4195-BE6B-5BCEAB44BF74">
+                  <File Id="AUflag.png" Name="AU-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\AU-flag.png" />
+               </Component>
+               <Component Id="cmpBLflag.png" Guid="A6126993-7660-449C-82AA-708ACC9A1FAF">
+                  <File Id="BLflag.png" Name="BL-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\BL-flag.png" />
+               </Component>
+               <Component Id="cmpBRflag.png" Guid="0E195B97-E0A9-4599-BB64-093741A5F920">
+                  <File Id="BRflag.png" Name="BR-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\BR-flag.png" />
+               </Component>
+               <Component Id="cmpDEflag.png" Guid="3BA30F48-2C8B-4668-9FCA-2D61BEDF8E4D">
+                  <File Id="DEflag.png" Name="DE-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\DE-flag.png" />
+               </Component>
+               <Component Id="cmpINflag.png" Guid="FDD429F1-A497-4764-B4B6-D56DAC079282">
+                  <File Id="INflag.png" Name="IN-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\IN-flag.png" />
+               </Component>
+               <Component Id="cmpITflag.png" Guid="34834F2B-C5D2-434F-90C1-B623C229BFE4">
+                  <File Id="ITflag.png" Name="IT-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\IT-flag.png" />
+               </Component>
+               <Component Id="cmpJPflag.png" Guid="FB729FD4-F3A0-498F-9C89-9757ED541B74">
+                  <File Id="JPflag.png" Name="JP-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\JP-flag.png" />
+               </Component>
+               <Component Id="cmpMXflag.png" Guid="6FD8AF34-8E95-4172-8C59-1D00E7AC6F7B">
+                  <File Id="MXflag.png" Name="MX-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\MX-flag.png" />
+               </Component>
+               <Component Id="cmpPTflag.png" Guid="6AED4F8F-696F-48FD-8D31-6E61AA5AE89A">
+                  <File Id="PTflag.png" Name="PT-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\PT-flag.png" />
+               </Component>
+               <Component Id="cmpUKflag.png" Guid="7B4704CA-C280-4737-A1E4-D80A7C3219B1">
+                  <File Id="UKflag.png" Name="UK-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\UK-flag.png" />
+               </Component>
+               <Component Id="cmpURflag.png" Guid="9EA96615-465A-43C1-8AB4-60D5FB5AF696">
+                  <File Id="URflag.png" Name="UR-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\UR-flag.png" />
+               </Component>
+               <Component Id="cmpUSflag.png" Guid="D8597AF6-89AA-454A-BAA8-4C6F465D4552">
+                  <File Id="USAflag.png" Name="USA-flag.png" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\flags\USA-flag.png" />
+               </Component>
+            </Directory>
+            <!-- end of flagsFolder-->
             <Directory Id="MascotFolder" Name="mascot">
                <Component Id="cmpBetterWithFriends.webp" Guid="EC75FF96-C19B-41B3-BF57-84D785FCA3DA">
                   <File Id="BetterWithFriends.webp" Name="better_with_friends.webp" DiskId="1" KeyPath="yes" Source="$(var.CargoTargetDir)\..\ui\extra\images\mascot\better_with_friends.webp" />
@@ -186,6 +225,18 @@
          <ComponentRef Id="cmpIdleAlt.png" />
          <ComponentRef Id="cmpIdleWave.png" />
          <ComponentRef Id="cmpIdle.png" />
+         <ComponentRef Id="cmpAUflag.png" />
+         <ComponentRef Id="cmpBLflag.png" />
+         <ComponentRef Id="cmpBRflag.png" />
+         <ComponentRef Id="cmpDEflag.png" />
+         <ComponentRef Id="cmpINflag.png" />
+         <ComponentRef Id="cmpITflag.png" />
+         <ComponentRef Id="cmpJPflag.png" />
+         <ComponentRef Id="cmpMXflag.png" />
+         <ComponentRef Id="cmpPTflag.png" />
+         <ComponentRef Id="cmpUKflag.png" />
+         <ComponentRef Id="cmpURflag.png" />
+         <ComponentRef Id="cmpUSflag.png" />
          <ComponentRef Id="cmpLocked.webp" />
          <ComponentRef Id="cmpParty.webp" />
          <ComponentRef Id="cmpWorking.webp" />