feat: add a low constrast black and white theme

ngxtools · Nov 27, 2018 · 6f93e3e · 6f93e3e
1 parent 23ce45d
commit 6f93e3e
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 15 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,6 +1,3 @@
-section {
-}
-
 section span {
   display: block;
   padding: 10px;
@@ -29,10 +26,10 @@ mat-toolbar {
   color: #fae9bc;
   padding: 3px 5px;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 10px;
   position: relative;
-  top: 11px;
-  right: -96px;
+  top: 5px;
+  right: -89px;
   text-transform: uppercase;
 }
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -20,6 +20,9 @@
         <mat-icon>menu</mat-icon>
       </button>
       <span class="header__logo ngxtools-palette-primary-text"></span>
+      <a mat-icon-button target="__blank" href="https://github.com/ngxtools/ngx.tools/issues">
+        <mat-icon>bug_report</mat-icon>
+      </a>
     </mat-toolbar>
     <router-outlet></router-outlet>
     <footer class="ngxtools-palette-accent ngxtools-palette-warn-text ngxtools-palette-primary-border">

diff --git a/src/app/search/search-result/search-result.component.css b/src/app/search/search-result/search-result.component.css
@@ -1,6 +1,6 @@
 mat-card {
   width: 350px;
-  margin: 10px;
+  margin: 10px 16px;
   display: inline-block;
   text-align: left;
   color: black;
@@ -30,6 +30,8 @@ i[hidden] {
   margin-left: -24px;
   padding: 7px 10px;
   text-align: center;
+  border-width: 1px;
+  border-style: groove;
 }
 
 mat-card-subtitle {
@@ -80,6 +82,7 @@ img + i {
   border-radius: 30px;
   padding: 4px 11px;
   cursor: pointer;
+  font-size: 10px;
 }
 
 @media (min-width: 299px) {
@@ -110,7 +113,7 @@ img + i {
 
 @media (min-width: 600px) {
   .mat-card-actions {
-    margin-left: -24px;
+    margin-left: -26px;
     padding: 7px 55px;
   }
 }

diff --git a/src/app/search/search-result/search-result.component.html b/src/app/search/search-result/search-result.component.html
@@ -1,6 +1,6 @@
 <section *ngIf="packages.length > 0" app-infinite-scroll (scroll)="onScroll()">
 
-  <mat-card *ngFor="let package of packages; trackBy: packageName" class="ngxtools-palette-accent">
+  <mat-card *ngFor="let package of packages; trackBy: packageName" class="ngxtools-palette-accent mat-elevation-z4">
     <mat-card-header>
       <div mat-card-avatar class="header-image">
         <img #avatarImage (error)="onAvatarImageError(avatarImage, avatarIcon)" src="{{package.owner.avatar}}" alt="{{package.owner.name}} ">

diff --git a/src/app/theme-chooser/theme-chooser.component.ts b/src/app/theme-chooser/theme-chooser.component.ts
@@ -7,7 +7,7 @@ import { DOCUMENT } from '@angular/platform-browser';
   styleUrls: ['./theme-chooser.component.css']
 })
 export class ThemeChooserComponent implements OnInit {
-  themes = Array(10)
+  themes = Array(12) // n+1
     .fill(1)
     .map((e, i) => ({
       id: `ngxtools-theme-${i}`,
@@ -20,17 +20,17 @@ export class ThemeChooserComponent implements OnInit {
 
   ngOnInit() {
     this.body = this.document.querySelector('body');
-    const savedTheme = localStorage.getItem('theme');
+    const savedTheme = parseInt(localStorage.getItem('theme'), 10);
     if (savedTheme) {
       this.setTheme(savedTheme);
     }
   }
 
-  setTheme(themeId) {
+  setTheme(themeId: number) {
     this.body.removeAttribute('class');
     this.body.classList.add(`${themeId}`);
     this.body.classList.add(`ngxtools-palette-primary`);
-    localStorage.setItem('theme', themeId);
+    localStorage.setItem('theme', `${themeId}`);
   }
 
   themeId(theme) {

diff --git a/src/index.html b/src/index.html
@@ -22,7 +22,7 @@
   </style>
 </head>
 
-<body class="ngxtools-theme-1 ngxtools-palette-primary">
+<body class="ngxtools-theme-11 ngxtools-palette-primary">
   <app-root>
     <img src="assets/loading.svg" alt="loading" class="loading">
   </app-root>

diff --git a/src/styles.scss b/src/styles.scss
@@ -62,11 +62,17 @@ $themes: (
       ngxtools-palette-warn: (color: #5ac5bf, background-color: #5ac5bf, border-color: #5ac5bf),
       ngxtools-palette-accent: (color: #e5df56, background-color: #e5df56, border-color: #e5df56)
     ),
-  ngxtools-ngxtools-theme-10:
+  ngxtools-theme-10:
     (
       ngxtools-palette-primary: (color: #cb696a, background-color: #cb696a, border-color: #cb696a),
       ngxtools-palette-warn: (color: #32425b, background-color: #32425b, border-color: #32425b),
       ngxtools-palette-accent: (color: #92adb9, background-color: #92adb9, border-color: #92adb9)
+    ),
+  ngxtools-theme-11:
+    (
+      ngxtools-palette-primary: (color: black, background-color: white, border-color: black),
+      ngxtools-palette-warn: (color: black, background-color: #f5f3f3, border-color: black),
+      ngxtools-palette-accent: (color: black, background-color: white, border-color: white)
     )
 );