SD-1794 - Update colors to match site

SideQuestVR · Jul 16, 2024 · 85ec0de · 85ec0de
1 parent 275a9d5
commit 85ec0de
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 87 deletions.
diff --git a/desktop-app/src/app/app.component.html b/desktop-app/src/app/app.component.html
@@ -1,6 +1,7 @@
 <app-header></app-header>
 <app-header-banner></app-header-banner>
 <div class="app-container">
+  <div class="glow-line"></div>
   <router-outlet></router-outlet>
 </div>
 

diff --git a/desktop-app/src/app/app.component.scss b/desktop-app/src/app/app.component.scss
@@ -31,10 +31,17 @@
   left: 0;
   position: fixed;
   z-index: 8;
-  background:#12152d;
+  background:#161616;
 }
 
 
+.glow-line {
+  border-top: 1px solid #fff;
+  box-shadow: 0 0 20px 5px #e93392;
+  height: 1px;
+  position: relative;
+}
+
 .app-container{
   padding-top: 35px;
 }
diff --git a/desktop-app/src/app/connection-status/connection-status.component.scss b/desktop-app/src/app/connection-status/connection-status.component.scss
@@ -15,7 +15,7 @@
   left: 0px;
   right: 0px;
   bottom: 0px;
-  background: #111124;
+  background: #222222;
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
   padding: 0 40px;
 }

diff --git a/desktop-app/src/app/current-tasks/current-tasks.component.html b/desktop-app/src/app/current-tasks/current-tasks.component.html
@@ -1,19 +1,19 @@
 <div class="inner-app-container">
   <div class="screen-description">Manage tasks for downloading, transferring and installing to your headset.</div>
   <div class="sync-songs">
-    <div class="pure-material-button-contained spaced flat active" data-position="bottom"
+    <div class="pure-material-button-contained spaced" data-position="bottom"
          mTooltip data-tooltip="Clear out the finished tasks." (click)="processService.clearDone()">
       Clear Done
     </div>
-    <div class="pure-material-button-contained spaced flat active" data-position="bottom"
+    <div class="pure-material-button-contained spaced active" data-position="bottom"
          mTooltip data-tooltip="Restart the failed tasks." (click)="processService.retryFailed()">
       Retry Failed
     </div>
-    <div class="pure-material-button-contained spaced flat active" data-position="bottom"
+    <div class="pure-material-button-contained spaced active" data-position="bottom"
          mTooltip data-tooltip="Clear out the failed tasks." (click)="processService.clearFailed()">
       Clear Failed
     </div>
-    <div class="pure-material-button-contained spaced active red" data-position="bottom"
+    <div class="pure-material-button-contained spaced active glowing" data-position="bottom"
          mTooltip data-tooltip="Clear out the finished tasks." (click)="processService.clearAll()">
       Clear All
     </div>

diff --git a/desktop-app/src/app/header-banner/header-banner.component.html b/desktop-app/src/app/header-banner/header-banner.component.html
@@ -1,6 +1,6 @@
-<div class="banner-container">
+<div class="banner-container no-select">
   <div class="right in-vr-installer">
-    <img src="assets/images/in-vr-logo.png" class="left"/>
+    <img src="assets/images/in-vr-logo.png" class="left no-drag"/>
     <div class="right">
       <div class="in-vr-title">SideQuest inside your VR headset</div>
       <div class="in-vr-description">Discover, Download & Play thousands of FREE VR apps and games with SideQuest's VR App</div>
@@ -9,7 +9,7 @@
 <!--        Install SideQuest in your headset-->
 <!--      </div>-->
       <ng-container *ngIf="!adb.isReady">
-        <div class="pure-material-button-contained " routerLink="/setup">
+        <div class="pure-material-button-contained glowing" routerLink="/setup">
           Open Setup Instructions
         </div>
         </ng-container>

diff --git a/desktop-app/src/app/header-banner/header-banner.component.scss b/desktop-app/src/app/header-banner/header-banner.component.scss
@@ -1,5 +1,5 @@
 .banner-container{
-  background: linear-gradient(89.97deg, #1A1D3C 0.02%, #2A3067 99.96%);
+  background: #1c1c1c;
   //background-size: cover;
   height: 170px;
   width: 100%;
@@ -68,3 +68,4 @@
   vertical-align: text-bottom;
   font-size: 1.5em;
 }
+
diff --git a/desktop-app/src/app/header/header.component.html b/desktop-app/src/app/header/header.component.html
@@ -196,10 +196,10 @@ <h5>Custom Url</h5>
 
 <mz-modal #logcatModal [fixedFooter]="true" [options]="{dismissible: false}">
   <mz-modal-header>
-    <div class="pure-material-button-contained spaced red right" (click)="logcatModal.closeModal();stopLogcat(); currentLogCat.length = 0; isStarted = false;">Close</div>
-    <div class="pure-material-button-contained spaced red right" (click)="stopLogcat(); isStarted = false;">Stop</div>
+    <div class="pure-material-button-contained spaced glowing right" (click)="logcatModal.closeModal();stopLogcat(); currentLogCat.length = 0; isStarted = false;">Close</div>
+    <div class="pure-material-button-contained spaced glowing right" (click)="stopLogcat(); isStarted = false;">Stop</div>
     <div class="pure-material-button-contained spaced right" *ngIf="!saveLogcatPath" (click)="selectLogcatOutput();">Pick Output Folder</div>
-    <div class="pure-material-button-contained spaced red right" *ngIf="saveLogcatPath" (click)="cancelLogcatOutput(); isStarted = false;">Cancel Output</div>
+    <div class="pure-material-button-contained spaced glowing right" *ngIf="saveLogcatPath" (click)="cancelLogcatOutput(); isStarted = false;">Cancel Output</div>
 
   <h4>ADB Logcat</h4>
   </mz-modal-header>
@@ -261,18 +261,18 @@ <h4>Harmful Content Detected!!</h4>
   </mz-modal-header>
   <mz-modal-content>
 
-    <img class="right margin-left" src="assets/images/bigman.gif" style="width: 430px"/>
+    <img class="right margin-left no-drag" src="assets/images/bigman.gif" style="width: 430px"/>
     WARNING: We have stopped this install because it may may harm your device.
     <br><br>
     If you think this has happened in error, please contact us on Discord with a link to the apk file.<br><br>
     We have protected you from:<br><br>
     - Causing physical damage to your headset.<br>
-    - Having your personal information stolen ( including tracking your movments in VR )<br>
+    - Having your personal information stolen ( including tracking your movements in VR )<br>
     - Being banned from the Oculus platform.<br>
     - Loosing access to developer/experimental mode on your headset.<br>
     - Loosing access to your content library including paid games and apps.<br>
     - Being banned from creating Oculus Accounts in the future.<br>
-    - Being reported to the police for illegal activites.<br>
+    - Being reported to the police for illegal activities.<br>
     - Starving poor developers to death.<br><br>
     You can click "Back to Safety" and the harmful content will not make it onto your device.
     <br><br>

diff --git a/desktop-app/src/app/headset-settings/headset-settings.component.scss b/desktop-app/src/app/headset-settings/headset-settings.component.scss
@@ -16,7 +16,7 @@
   padding: 20px 40px 30px;
   //border: 1px solid white;
   //border-radius: 5px;
-  background: #1a1d3c;
+  background: #1c1c1c;
 }
 .header-divider-margin{
   margin-top: 1em;

diff --git a/desktop-app/src/app/setup-guide/setup-guide.component.scss b/desktop-app/src/app/setup-guide/setup-guide.component.scss
@@ -34,6 +34,7 @@
 .flip-horizontal{
   transform: scaleX(-1);
 }
+
 .tab{
   text-align: center;
   padding: 10px;
@@ -42,12 +43,12 @@
   height: 60px;
   line-height: 40px;
   color: white;
-  background: #24284E;
+  background: #222222;
   cursor: pointer;
-  border-top: 2px #7289DA;
+
 }
 .tab.active{
-  background: #7289DA;
+  background: #1c1c1c;
 }
 .tab-underline{
   border: 1px solid #CFCFCF;

diff --git a/desktop-app/src/styles.scss b/desktop-app/src/styles.scss
@@ -5,14 +5,12 @@ body {
   height: 100%;
   padding: 0;
   margin: 0;
-  background:#12152d;
+  background:#161616;
 }
 body{
   overflow-x: hidden;
 }
 
-
-
 .loader-tiny {
   border: 2px solid #f3f3f3; /* Light grey */
   border-top: 2px solid #E51253; /* Pink */
@@ -115,13 +113,13 @@ body{
 ::-webkit-scrollbar {
   height: 16px;
   width: 16px;
-  background: #e0e0e0;
+  background: #101010;
 }
 ::-webkit-scrollbar-corner {
-  background: #cfcfcf;
+  background: #101010;
 }
 ::-webkit-scrollbar-thumb {
-  background: #ed4e7a;
+  background: #3E3E3E;
 }
 .well {
   min-height: 20px;
@@ -274,38 +272,46 @@ code > pre, .code{
   color: #FFFFFF;
 }
 
+.no-select {
+  user-select: none;
+}
 
+.no-drag {
+  user-drag: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
 
 
 /*Forms*/
 
-
-
 .pure-material-button-contained {
   -webkit-app-region: no-drag;
+  user-select: none;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  border: none;
-  padding: 0 16px;
-  min-width: 64px;
-  height: 36px;
   vertical-align: middle;
   text-align: center;
   text-overflow: ellipsis;
   text-transform: uppercase;
-  color: rgb(255, 255, 255);
-  background: #E51253;
-  border-radius: 10px;
-  box-shadow: 0 3px 1px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
   font-size: 14px;
-  font-weight: 400;
-  line-height: 36px;
   overflow: hidden;
   outline: none;
   cursor: pointer;
-  transition: box-shadow 0.2s;
+
+  color: white;
+  background: transparent;
+  border-color: white;
+  padding: 11px 31px;
+  border-radius: 50px;
+  border: 1px solid #fff;
+  transition: .7s;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1.5;
+
 }
 .pure-material-button-contained.reset{
   background: #fc864e;
@@ -334,9 +340,9 @@ code > pre, .code{
   background: transparent;
   border: 2px solid #afafaf;
   color: #afafaf;
-  padding: 0 8px;
-  line-height: 30px;
-  height: 34px
+  zpadding: 0 8px;
+  zline-height: 30px;
+  zheight: 34px
 }
 .pure-material-button-contained.small{
   padding: 0 8px;
@@ -350,59 +356,21 @@ code > pre, .code{
   color: white;
 }
 
-/* Overlay */
-.pure-material-button-contained::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgb(255, 255, 255);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-/* Ripple */
-.pure-material-button-contained::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  border-radius: 50%;
-  padding: 50%;
-  width: 32px; /* Safari */
-  height: 32px; /* Safari */
-  background-color: rgb(255, 255, 255);
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(1);
-  transition: opacity 1s, transform 0.5s;
-}
-
-/* Hover, Focus */
+/* Hover, Focus, Active */
+.glowing,
 .pure-material-button-contained:hover,
+.pure-material-button-contained:active,
 .pure-material-button-contained:focus {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 10px #e93392, inset 0 0 5px 1px #e93392 !important;
 }
 
-.pure-material-button-contained:hover::before {
-  opacity: 0.08;
-}
-
-.pure-material-button-contained:focus::before {
-  opacity: 0.24;
-}
-
-.pure-material-button-contained:hover:focus::before {
-  opacity: 0.3;
-}
 
 /* Active */
-.pure-material-button-contained:active {
+.zpure-material-button-contained:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-.pure-material-button-contained:active::after {
+.zpure-material-button-contained:active::after {
   opacity: 0.32;
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0s;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "SideQuest",
     "productName": "SideQuest",
-    "version": "0.10.42",
+    "version": "0.10.43",
     "description": "A open app store for mobile android based VR devices such as the Levovo Mirage, Oculus Go, Oculus Quest, Vive Focus.",
     "repository": "https://github.com/SideQuestVR/SideQuest.git",
     "license": "UNLICENCED",