Dark theme logo and package icons

config.windows.v10.toml

@@ -15,6 +15,7 @@ auth_url = "https://api.yuzu-emu.org/jwt/installer/"
 [[packages]]
 name = "yuzu"
 description = "Includes frequent updates to yuzu with all the latest reviewed and tested features."
+icon = "thicc_logo_installer_shadow.png"
 default = true
     [packages.source]
     name = "github"
@@ -29,6 +30,7 @@ default = true
 [[packages]]
 name = "yuzu Early Access"
 description = "Bonus preview release for project supporters. Thanks for your support!"
+icon = "thicc_logo_installer__ea_shadow.png"
 # Displayed when the package has no authentication for the user
 need_authentication_description = "Click here to sign in with your yuzu account for Early Access"
 # Displayed when the package has an authentication, but the user has not linked their account

src/config.rs

@@ -32,6 +32,8 @@ pub struct PackageShortcut {
 pub struct PackageDescription {
     pub name: String,
     pub description: String,
+    #[serde(default)]
+    pub icon: Option<String>,
     pub default: Option<bool>,
     pub source: PackageSource,
     #[serde(default)]

src/frontend/rest/assets.rs

@@ -34,7 +34,10 @@ pub fn file_from_string(file_path: &str) -> Option<(String, &'static [u8])> {
         file_path,
         "/index.html",
         "/favicon.ico",
-        "/img/logo.png",
+        "/img/light_mode_installer_logo.png",
+        "/img/dark_mode_installer_logo.png",
+        "/thicc_logo_installer__ea_shadow.png",
+        "/thicc_logo_installer_shadow.png",
         "/img/how-to-open.png",
         "/css/app.css",
         "/css/chunk-vendors.css",

ui/src/App.vue

@@ -4,7 +4,7 @@
             <div class="container is-max-height">
                 <div class="columns is-max-height">
                     <div class="column is-one-third has-padding" v-if="!$root.$data.metadata.is_launcher">
-                        <img src="./assets/logo.png" width="60%" alt="Application icon" />
+                        <img src="./assets/light_mode_installer_logo.png" id="applicationIcon" alt="Application icon" />
                         <br />
                         <br />
 
@@ -52,6 +52,30 @@ body, div, span, h1, h2, h3, h4, h5, h6 {
     cursor: default;
 }
 
+#applicationIcon {
+    width:0px; height: 0px;
+    padding: 50px 60% 0px 0px;
+    background: url("./assets/light_mode_installer_logo.png") left top no-repeat;
+    background-size: contain;
+}
+
+body.has-background-black-ter #applicationIcon {
+    background: url("./assets/dark_mode_installer_logo.png") left top no-repeat;
+    background-size: contain;
+}
+
+.package-icon {
+    width: 3rem;
+    height: 3rem;
+    float: left;
+    padding-right: 10px;
+    padding-top: 10px;
+}
+
+.package-description {
+    overflow: hidden;
+}
+
 pre {
     -webkit-user-select: text;
     -moz-user-select: text;

ui/src/views/SelectPackages.vue

@@ -14,45 +14,60 @@
                               </b-checkbox>
                               <span v-if="Lpackage.installed"><i>(installed)</i></span>
                           </label>
-                          <p>
+                          <div>
-                              {{ Lpackage.description }}
+                              <img class="package-icon" :src="`${publicPath + Lpackage.icon}`"/>
-                          </p>
+                              <p class="package-description">
+                                  {{ Lpackage.description }}
+                              </p>
+                          </div>
                       </div>
                       <div class="box clickable-box" v-else-if="Lpackage.requires_authorization && !$root.$data.is_authenticated" v-on:click="show_authentication">
                           <div class="ribbon" v-if="Lpackage.is_new"><span>New!</span></div>
                           <b-checkbox>
                               {{ Lpackage.name }}
                           </b-checkbox>
-                          <p>
+                          <div>
-                              {{Lpackage.need_authentication_description}}
+                              <img class="package-icon" :src="`${publicPath + Lpackage.icon}`"/>
-                          </p>
+                              <p class="package-description">
+                                  {{ Lpackage.description }}
+                              </p>
+                          </div>
                       </div>
                       <div class="box clickable-box" v-else-if="Lpackage.requires_authorization && !$root.$data.is_linked" v-on:click="show_authorization">
                           <div class="ribbon" v-if="Lpackage.is_new"><span>New!</span></div>
                           <b-checkbox>
                               {{ Lpackage.name }}
                           </b-checkbox>
-                          <p>
+                          <div>
-                              {{Lpackage.need_link_description}}
+                              <img class="package-icon" :src="`${publicPath + Lpackage.icon}`"/>
-                          </p>
+                              <p class="package-description">
+                                  {{ Lpackage.description }}
+                              </p>
+                          </div>
                       </div>
                       <div class="box clickable-box" v-else-if="Lpackage.requires_authorization && !$root.$data.is_subscribed" v-on:click="show_authorization">
                           <div class="ribbon" v-if="Lpackage.is_new"><span>New!</span></div>
                           <b-checkbox>
                               {{ Lpackage.name }}
                           </b-checkbox>
-                          <p>
+                          <div>
-                              {{Lpackage.need_subscription_description}}
+                              <img class="package-icon" :src="`${publicPath + Lpackage.icon}`"/>
-                          </p>
+                              <p class="package-description">
+                                  {{ Lpackage.description }}
+                              </p>
+                          </div>
                       </div>
                       <div class="box clickable-box" v-else v-on:click="show_authorization">
                           <div class="ribbon" v-if="Lpackage.is_new"><span>New!</span></div>
                           <b-checkbox>
                               {{ Lpackage.name }}
                           </b-checkbox>
-                          <p>
+                          <div>
-                              {{Lpackage.need_reward_tier_description}}
+                              <img class="package-icon" :src="`${publicPath + Lpackage.icon}`"/>
-                          </p>
+                              <p class="package-description">
+                                  {{ Lpackage.description }}
+                              </p>
+                          </div>
                       </div>
                   </div>
               </div>
@@ -116,6 +131,7 @@ export default {
   },
   data: function () {
     return {
+      publicPath: process.env.BASE_URL,
       advanced: false
     }
   },