Fixed light theme and small changes to updater

SushyDev · Dec 19, 2020 · 5ad2cee · 5ad2cee
1 parent 1817d24
commit 5ad2cee
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 48 deletions.
diff --git a/app/css/card-grid.css b/app/css/card-grid.css
@@ -25,8 +25,13 @@
   margin-top: auto;
   margin-bottom: 36px;
 }
-.mdc-card .mdc-card__primary-action .game-card__primary h2 {
+.mdc-card .mdc-card__primary-action .game-card__primary .mdc-typography--headline6 {
   color: white;
+  margin-bottom: 0;
+}
+.mdc-card .mdc-card__primary-action .game-card__primary .mdc-typography--subtitle2 {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 .mdc-card .mdc-card__action-buttons {
   margin-top: -48px;
@@ -68,22 +73,13 @@
   overflow: hidden;
   border-radius: 8px;
 }
-.selected-game .top-row .mdc-card .mdc-card__primary-action .mdc-typography--headline6 {
-  margin-bottom: 0;
-}
-.selected-game .top-row .mdc-card .mdc-card__primary-action .mdc-typography--subtitle2 {
-  margin-top: 0;
-}
 .selected-game .top-row .title-desc-container {
   display: flex;
   flex-direction: column;
-}
-.selected-game .top-row .title-desc-container .mdc-typography--headline4 {
-  color: white;
+  color: var(--color);
 }
 .selected-game .top-row .title-desc-container .mdc-typography--body2 {
   width: 100%;
-  color: white;
   max-height: 495px;
   overflow-y: auto;
 }
@@ -115,7 +111,7 @@
   width: 100%;
   display: flex;
   justify-content: space-around;
-  color: white;
+  color: var(--color);
   margin-top: 16px;
 }
 .selected-game .bottom-row .details div {

diff --git a/app/css/home.css b/app/css/home.css
@@ -15,7 +15,7 @@
 }
 .cards .mdc-card__primary-action {
   padding: 0 0 8px 16px;
-  color: white;
+  color: var(--color);
 }
 .cards .demo-card__title {
   margin-top: 12px;

diff --git a/app/css/store.css b/app/css/store.css
@@ -41,9 +41,9 @@
 .store .genres .genre-container {
   min-height: 350px;
 }
-.store .genres .genre-container h3 {
+.store .genres .genre-container .genre-title {
   margin-left: 5vw;
-  color: white;
+  color: var(--color);
 }
 .store .genres .genre-container .genre-cards {
   height: 100%;

diff --git a/app/html/installed.html b/app/html/installed.html
@@ -51,3 +51,5 @@ <h1 class="mdc-typography--body2" id="selected-game-description"></h1>
         <button class="mdc-icon-button back-icon material-icons mdc-card__action mdc-card__action--icon--unbounded" data-mdc-ripple-is-unbounded="true" data-mdc-auto-init="MDCRipple" onclick="closeGameTab()">first_page</button>
     </div>
 </div>
+
+
diff --git a/app/html/store.html b/app/html/store.html
@@ -19,27 +19,27 @@
     <!--Genres-->
     <div class="genres" id="genres">
         <div class="genre-action genre-container" id="genre-action">
-            <h3 class="mdc-typography--headline3">Action</h3>
+            <h3 class="mdc-typography--headline3 genre-title">Action</h3>
             <div class="genre-cards" id="genre-Action-cards"></div>
         </div>
 
         <div class="genre-adventure genre-container" id="genre-adventure">
-            <h3 class="mdc-typography--headline3">Adventure</h3>
+            <h3 class="mdc-typography--headline3 genre-title">Adventure</h3>
             <div class="genre-cards" id="genre-Adventure-cards"></div>
         </div>
 
         <div class="genre-indie genre-container" id="genre-indie">
-            <h3 class="mdc-typography--headline3">Indie</h3>
+            <h3 class="mdc-typography--headline3 genre-title">Indie</h3>
             <div class="genre-cards" id="genre-Indie-cards"></div>
         </div>
 
         <div class="genre-racing genre-container" id="genre-racing">
-            <h3 class="mdc-typography--headline3">Racing</h3>
+            <h3 class="mdc-typography--headline3 genre-title">Racing</h3>
             <div class="genre-cards" id="genre-Racing-cards"></div>
         </div>
 
         <div class="genre-sports genre-container" id="genre-sports">
-            <h3 class="mdc-typography--headline3">Sports</h3>
+            <h3 class="mdc-typography--headline3 genre-title">Sports</h3>
             <div class="genre-cards" id="genre-Sports-cards"></div>
         </div>
     </div>

diff --git a/app/js/components/card-grid/card-builder.js b/app/js/components/card-grid/card-builder.js
@@ -31,6 +31,7 @@ function selectCard(gameInfo, fetchName, type) {
 <div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${gameInfo.background_image}')" id="${fetchName}-cover" onclick="openInstalled('${fetchName}', '${gameInfo.name}', '${gameFolder}', '${gameInfo.fileName}')">
     <div class="game-card__primary">
         <h2 class="game-card__title mdc-typography mdc-typography--headline6">${gameInfo.name}</h2>
+        <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">${fetchName}</h3>
     </div>
 </div>
 `;
@@ -40,6 +41,7 @@ function selectCard(gameInfo, fetchName, type) {
 <div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${gameInfo.background_image}')" id="${fetchName}-cover" onclick="openStoreGame('${fetchName}')">
     <div class="game-card__primary">
         <h2 class="game-card__title mdc-typography mdc-typography--headline6">${gameInfo.name}</h2>
+        <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">${fetchName}</h3>
     </div>
 </div>
 <div class="mdc-card__action-buttons">

diff --git a/app/js/components/updater/updater.js b/app/js/components/updater/updater.js
@@ -97,7 +97,9 @@ if (!isDev) {
     function installUpdate(fileName) {
         //Run exe
         (async () => {
-            await exec(path.join(localStorage.getItem('downloadDir'), fileName));
+            setTimeout(() => {
+                exec(path.join(localStorage.getItem('downloadDir'), fileName));
+            }, 250);
             //Close vaporstore
             setTimeout(() => {
                 winClose();

diff --git a/app/js/store.js b/app/js/store.js
@@ -141,15 +141,16 @@ $.getJSON(file, async (data) => {
 function createGenreCard(fetchData, gameName, genre) {
     var fetchName = gameName.replace(/ /g, '-').substring(1).slice(0, -1);
     var cardContent = `
-        <div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${fetchData.background_image}')" id="${fetchName}-cover"  onclick="openStoreGame('${fetchName}')">
-            <div class="game-card__primary">
-                <h2 class="game-card__title mdc-typography mdc-typography--headline6">${fetchData.name}</h2>
-                </div>
-                </div>
-                <div class="mdc-card__action-buttons">
-                    <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple"><span class="mdc-button__ripple" onclick="fetchDownload('${fetchName}')" ></span>Download</button>
-                    <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple"><span class="mdc-button__ripple" onclick="openStoreGame('${fetchName}')"></span>More</button>
-                </div>
+<div class="mdc-card__primary-action" tabindex="0" data-mdc-auto-init="MDCRipple" style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), url('${fetchData.background_image}')" id="${fetchName}-cover" onclick="openStoreGame('${fetchName}')">
+    <div class="game-card__primary">
+        <h2 class="game-card__title mdc-typography mdc-typography--headline6">${fetchData.name}</h2>
+        <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">${gameName}</h3>
+    </div>
+</div>
+<div class="mdc-card__action-buttons">
+    <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple"><span class="mdc-button__ripple" onclick="fetchDownload('${fetchName}')"></span>Download</button>
+    <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple"><span class="mdc-button__ripple" onclick="openStoreGame('${fetchName}')"></span>More</button>
+</div>
 `;
 
     var card = document.createElement('div');

diff --git a/app/scss/card-grid.scss b/app/scss/card-grid.scss
@@ -30,9 +30,14 @@
         .game-card__primary {
             margin-top: auto;
             margin-bottom: 36px;
-
-            h2 {
+            
+            .mdc-typography--headline6 {
                 color: white;
+                margin-bottom: 0;
+            }
+            .mdc-typography--subtitle2 {
+                margin-top: 0;
+                margin-bottom: 0;
             }
         }
     }
@@ -81,24 +86,14 @@
                 min-height: 600px;
                 overflow: hidden;
                 border-radius: 8px;
-
-                .mdc-typography--headline6 {
-                    margin-bottom: 0;
-                }
-                .mdc-typography--subtitle2 {
-                    margin-top: 0;
-                }
             }
         }
         .title-desc-container {
             display: flex;
             flex-direction: column;
-            .mdc-typography--headline4 {
-                color: white;
-            }
+            color: var(--color);
             .mdc-typography--body2 {
                 width: 100%;
-                color: white;
                 max-height: 495px;
                 overflow-y: auto;
 
@@ -137,7 +132,7 @@
             width: 100%;
             display: flex;
             justify-content: space-around;
-            color: white;
+            color: var(--color);
             margin-top: 16px;
 
             div {

diff --git a/app/scss/home.scss b/app/scss/home.scss
@@ -16,7 +16,7 @@
 
     .mdc-card__primary-action {
         padding: 0 0 8px 16px;
-        color: white;
+        color: var(--color);
     }
 
     .demo-card__title {

diff --git a/app/scss/store.scss b/app/scss/store.scss
@@ -49,9 +49,9 @@
         .genre-container {
             min-height: 350px;
 
-            h3 {
+            .genre-title {
                 margin-left: 5vw;
-                color: white;
+                color: var(--color);
             }
 
             .genre-cards {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapor-store",
-  "version": "2.0.0-beta-25",
+  "version": "2.0.0-beta-26",
   "description": "Vapor Store",
   "author": "SushyDev",
   "main": "app.js",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,3 +51,5 @@ <h1 class="mdc-typography--body2" id="selected-game-description"></h1>
		<button class="mdc-icon-button back-icon material-icons mdc-card__action mdc-card__action--icon--unbounded" data-mdc-ripple-is-unbounded="true" data-mdc-auto-init="MDCRipple" onclick="closeGameTab()">first_page</button>
		</div>
		</div>