Small changes (#157)

* fixed scrolling nav bar

* aligned Blockcore Notes of topnavbar

* aligned Blockcore Notes of topnavbar of login, create, key, connect

* theme-toggle icon align in topnav

* Update spinner styles in connect page and add progress spinner overrides

---------

Co-authored-by: SondreB <sondre@outlook.com>

Author: helloaashu

src/app/connect/connect.css

@@ -18,7 +18,7 @@
   position: fixed;
   height: 80px;
   width: 100%;
-  /* background-color: white; */
+  background-color:var(--mat-sidenav-content-text-color, var(--mat-sys-background));
   padding: 1em;
   display: flex;
   z-index: 1000;
@@ -33,7 +33,11 @@
   font-size: 1.6em;
   /* color: rgba(0, 0, 0, 0.85); */
   margin-left: 140px;
-  font-weight: 700;
+  font-weight: 700;  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
 .connect-spacer {
@@ -110,7 +114,7 @@
 }
 
 .theme-toggle {
-  margin-right: 0.2em;
+  margin: 0.2em;
 }
 
 .skip-button {

src/app/connect/connect.html

@@ -1,17 +1,18 @@
 <div class="connect-container">
   <div class="connect-menu">
     <img class="connect-logo" width="128" height="128" src="assets/icons/icon-256x256.webp" />
-    <div class="logo-text"><span class="hide-tiny">Blockcore</span> Notes</div>
+    <div class="logo-text"><span class="hide-tiny">Blockcore</span>&nbsp;Notes</div>
     <div class="connect-spacer"></div>
     <button (click)="theme.darkMode = !theme.darkMode" mat-icon-button class="theme-toggle">
       <mat-icon aria-label="Menu" class="material-icons">{{ theme.darkMode ? "dark_mode" : "light_mode" }}</mat-icon>
     </button>
     <div class="connect-button" *ngIf="searchingForExtension">
       <button class="start-button" mat-flat-button color="accent">
-        <mat-spinner class="spinner" color="accent" diameter="30"></mat-spinner>
+        <mat-spinner class="progress-spinner-negative" diameter="30"></mat-spinner>
       </button>
     </div>
     <div class="connect-button" *ngIf="showInstallLink">
+      <mat-spinner class="progress-spinner-negative" diameter="30"></mat-spinner>
       <a class="start-button" (click)="connect()" mat-flat-button color="accent" href="https://chrome.google.com/webstore/detail/blockcore-wallet/peigonhbenoefaeplkpalmafieegnapj" target="_blank"
         >Install <span class="hide-tiny">extension</span></a
       >

src/app/connect/create/create.html

@@ -1,7 +1,7 @@
 <div class="connect-container">
   <div class="connect-menu mat-app-background">
     <a routerLink="/connect"><img class="connect-logo" width="128" height="128" src="assets/icons/icon-256x256.webp" /></a>
-    <div class="logo-text"><span class="hide-tiny">Blockcore</span> Notes</div>
+    <div class="logo-text"><span class="hide-tiny">Blockcore</span>&nbsp;Notes</div>
     <div class="connect-spacer"></div>
     <button (click)="theme.darkMode = !theme.darkMode" mat-icon-button class="theme-toggle">
       <mat-icon aria-label="Menu" class="material-icons">{{ theme.darkMode ? "dark_mode" : "light_mode" }}</mat-icon>

src/app/connect/key/key.html

@@ -1,7 +1,7 @@
 <div class="connect-container">
   <div class="connect-menu mat-app-background">
     <a routerLink="/connect"><img class="connect-logo" width="128" height="128" src="assets/icons/icon-256x256.webp" /></a>
-    <div class="logo-text"><span class="hide-tiny">Blockcore</span> Notes</div>
+    <div class="logo-text"><span class="hide-tiny">Blockcore</span>&nbsp;Notes</div>
     <div class="connect-spacer"></div>
     <button (click)="theme.darkMode = !theme.darkMode" mat-icon-button class="theme-toggle">
       <mat-icon aria-label="Menu" class="material-icons">{{ theme.darkMode ? "dark_mode" : "light_mode" }}</mat-icon>

src/app/connect/login/login.html

@@ -1,7 +1,7 @@
 <div class="connect-container">
   <div class="connect-menu mat-app-background">
     <a routerLink="/connect"><img class="connect-logo" width="128" height="128" src="assets/icons/icon-256x256.webp" /></a>
-    <div class="logo-text"><span class="hide-tiny">Blockcore</span> Notes</div>
+    <div class="logo-text"><span class="hide-tiny">Blockcore</span>&nbsp;Notes</div>
     <div class="connect-spacer"></div>
     <button (click)="theme.darkMode = !theme.darkMode" mat-icon-button class="theme-toggle">
       <mat-icon aria-label="Menu" class="material-icons">{{ theme.darkMode ? "dark_mode" : "light_mode" }}</mat-icon>

src/styles.scss

@@ -52,6 +52,12 @@ a:hover {
   color: var(--mat-sys-inverse-primary);
 }
 
+:root {
+  @include mat.progress-spinner-overrides((
+    active-indicator-color: white,
+  ));
+}
+
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!