Merge pull request #160 from SeaweedbrainCY/bulma_v1

Upgrade to bulma v1 and add dark theme
SeaweedbrainCY · Jan 26, 2025 · 3eb216c · 3eb216c
2 parents a8be906 + 77161c2
commit 3eb216c
Show file tree

Hide file tree

Showing 18 changed files with 219 additions and 172 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,7 +34,7 @@
     "@zxing/ngx-scanner": "^18.0.1",
     "animate.css": "^4.1.1",
     "buffer": "^6.0.3",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.2",
     "bulma-extensions": "^6.2.7",
     "bulma-modal-fx": "^1.1.1",
     "ngx-cookie": "^6.0.1",

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -9,12 +9,16 @@ import { DOCUMENT } from '@angular/common';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
-
-
 export class AppComponent implements OnInit{
   title = 'frontend';
-  constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { }
+  constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { 
+    const theme = localStorage.getItem('theme');
+    if (theme == 'dark') {
+      this.renderer.setAttribute(document.documentElement, 'data-theme', 'dark');
+    } else {
+      this.renderer.setAttribute(document.documentElement, 'data-theme', 'light');
+    }
+  }
 
 
 

diff --git a/frontend/src/app/callback/callback.component.html b/frontend/src/app/callback/callback.component.html
@@ -4,8 +4,8 @@
             <p class="has-text-weight-bold is-size-5">{{errorMessage}}</p>
           </div>
           <div *ngIf="errorMessage ==''">
-            <p class="has-text-dark has-text-centered"><fa-icon [icon]="faCircleNotch" size="2xl" [animation]="true ? 'spin' : undefined" class="is-dark"></fa-icon></p>
-            <p class="has-text-dark has-text-centered">Redirecting...</p>
+            <p class=" has-text-centered"><fa-icon [icon]="faCircleNotch" size="2xl" [animation]="true ? 'spin' : undefined" ></fa-icon></p>
+            <p class="has-text-centered">Redirecting...</p>
           </div>
 
     </div>

diff --git a/frontend/src/app/changelog/changelog.component.html b/frontend/src/app/changelog/changelog.component.html
@@ -1,4 +1,4 @@
-<section class="hero  is-halfheight m-6 has-text-dark has-text-weight-medium pt-4" style="min-height: 70vh; display: block;">
+<section class="hero  is-halfheight m-6  has-text-weight-medium pt-4" style="min-height: 70vh; display: block;">
 <h1 class="is-size-3-mobile  is-size-1-tablet mt-6 has-text-weight-bold " >Zero-TOTP change log</h1>
 <div class="tags has-addons mt-2 mb-6">
     <span class="tag is-dark is-medium">Current version</span>

diff --git a/frontend/src/app/edit-totp/edit-totp.component.html b/frontend/src/app/edit-totp/edit-totp.component.html
@@ -1,4 +1,4 @@
-<article class="hero is-info" [ngClass]="{
+<article class="hero is-info mt-6" [ngClass]="{
                                       'is-success': color == 'success',
                                       'is-warning': color == 'warning',
                                       'is-danger': color == 'danger',

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
@@ -1,4 +1,4 @@
-<section>
+<section data-theme="light">
   <article
     class="hero is-fullheight is-dark is-flex is-flex-direction-column is-justify-content-center is-align-items-center  is-hidden-mobile is-hidden-tablet-only">
     <div class="is-flex is-flex-direction-column is-justify-content-center is-align-items-center	">
@@ -7,10 +7,10 @@
           <h1 class="is-size-1 has-text-weight-bold is-family-secondary	" style="line-height: normal;" translate>home.title <strong class="has-text-danger" translate>home.title.strong</strong> </h1><br>
           <h3 translate>home.subtitle <strong class="has-text-danger" translate>home.subtitle.opensource</strong> home.subtitle.and <strong
               class="has-text-danger" translate>home.subtitle.zke</strong> home.subtitle.platform</h3><br>
-          <h2><strong class="has-text-weight-semibold is-size-5" translate>home.trust.no.one</strong></h2><br><br>
+          <h2><strong class="has-text-weight-semibold has-text-white is-size-5" translate>home.trust.no.one</strong></h2><br><br>
           <div class="buttons">
-            <a class="button is-info  is-medium has-text-weight-semibold block" href="/login" translate>home.button.openVault</a>
-            <a class="button is-info is-light is-medium has-text-weight-semibold block" href="#totp" translate>home.button.learnMore</a>
+            <a class="button is-info  is-medium has-text-weight-semibold" href="/login" translate>home.button.openVault</a>
+            <a class="button is-info is-light is-medium has-text-weight-semibold" (click)="scrollTo(totp)" translate>home.button.learnMore</a>
             </div>
         </div>
         <div class="is-half column is-flex is-flex-direction-column is-justify-content-center">
@@ -28,15 +28,15 @@ <h2><strong class="has-text-weight-semibold is-size-5" translate>home.trust.no.o
       <h1 class="is-size-2 has-text-weight-bold is-family-secondary" style="line-height: normal;" translate>home.title <span class="has-text-danger" translate>home.title.strong</span> </h1><br>
       <h3 translate>home.subtitle <strong class="has-text-danger" translate>home.subtitle.opensource</strong> home.subtitle.and <strong
           class="has-text-danger" translate>home.subtitle.zke</strong> home.subtitle.platform</h3><br>
-      <h2><strong class="has-text-weight-semibold is-size-5 " translate>home.trust.no.one</strong></h2><br><br>
+      <h2><strong class="has-text-weight-semibold is-size-5 has-text-white" translate>home.trust.no.one</strong></h2><br><br>
       <div class="has-text-centered">
-        <a class="button is-info  is-medium has-text-weight-semibold block" href="/login" translate>home.button.openVault</a><br>
-        <a class="button is-info is-light is-medium has-text-weight-semibold block" href="#how-it-works" translate>home.button.learnMore</a>
+        <a class="button is-info  is-medium has-text-weight-semibold mb-2" href="/login" translate>home.button.openVault</a><br>
+        <a class="button is-info is-light is-medium has-text-weight-semibold" (click)="scrollTo(totp)" translate>home.button.learnMore</a>
       </div>
     </div>
   </article>
 
-  <article class="hero is-half has-text-dark" id="totp">
+  <article class="hero is-half has-text-dark has-background-white" #totp>
     <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 has-text-dark mr-4 ml-4">{{"home.tuto.title" | translate}}</h1>
     <div class="is-flex is-justify-content-space-around is-flex-wrap-wrap columns mt-6">
       <div class="column  is-half-fullhd is-half-widescreen is-half-desktop is-two-thirds-tablet is-two-thirds-mobile is-flex is-flex-direction-column is-justify-content-center ">
@@ -82,7 +82,7 @@ <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 has-text-dark m
 
     </div>
   </article>
-  <article class="hero is-half has-text-dark" id="why-zero-totp">
+  <article class="hero is-half has-text-dark has-background-white" id="why-zero-totp">
     <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 has-text-dark mt-6">{{ 'home.why.title' | translate }}</h1>
     <div class="is-flex is-justify-content-center is-flex-wrap-wrap columns ">
       <div
@@ -95,7 +95,7 @@ <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 has-text-dark m
         <div class="card-content">
           <div class="content">
             <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.strong_enc.title' | translate }}</h1>
-            <strong>{{ 'home.why.strong_enc.strong' | translate }}</strong> {{ 'home.why.strong_enc.l1' | translate }}<br><br>{{ 'home.why.strong_enc.l2' | translate }}
+            <strong class="has-text-weight-bold has-text-dark">{{ 'home.why.strong_enc.strong' | translate }}</strong> {{ 'home.why.strong_enc.l1' | translate }}<br><br>{{ 'home.why.strong_enc.l2' | translate }}
           </div>
         </div>
       </div>
@@ -109,7 +109,7 @@ <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.strong_enc.title' | tran
         <div class="card-content">
           <div class="content">
             <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.zke.title' | translate }}</h1>
-            {{ 'home.why.zke.desc.1' | translate }} <strong>{{ 'home.why.zke.desc.strong' | translate }}</strong> {{ 'home.why.zke.desc.2' | translate }}
+            {{ 'home.why.zke.desc.1' | translate }} <strong class="has-text-weight-bold has-text-dark">{{ 'home.why.zke.desc.strong' | translate }}</strong> {{ 'home.why.zke.desc.2' | translate }}
           </div>
         </div>
       </div>
@@ -123,7 +123,7 @@ <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.zke.title' | translate }
         <div class="card-content">
           <div class="content">
             <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.key.title' | translate }}</h1>
-            <strong>{{ 'home.why.key.desc1' | translate }}</strong> {{ 'home.why.key.desc2' | translate }}
+            <strong class="has-text-weight-bold has-text-dark">{{ 'home.why.key.desc1' | translate }}</strong> {{ 'home.why.key.desc2' | translate }}
           </div>
         </div>
       </div>
@@ -137,7 +137,7 @@ <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.key.title' | translate }
         <div class="card-content">
           <div class="content">
             <h1 class="has-text-weight-bold is-size-3">{{ 'home.why.opensource.title' | translate }}</h1>
-            {{ 'home.why.opensource.desc1' | translate }}<strong> {{ 'home.why.opensource.desc2' | translate }}</strong>
+            {{ 'home.why.opensource.desc1' | translate }}<strong class="has-text-weight-bold has-text-dark"> {{ 'home.why.opensource.desc2' | translate }}</strong>
           </div>
         </div>
       </div>
@@ -219,12 +219,12 @@ <h2 class="is-size-5 has-text-centered subtitle has-text-lightgray">{{ 'home.dat
       </div>
     </div>
   </article>
-  <article class="hero is-halfheight" id="backup-plan">
+  <article class="hero is-halfheight has-background-white has-text-dark" id="backup-plan" data-theme="light">
     <header>
       <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 p-3" >{{ 'home.backup.title' | translate }} <span
           class="has-text-danger">{{ 'home.backup.title_strong' | translate }}</span></h1>
-          <div class="hero-body  is-flex is-flex-direction-column has-text-left is-size-6" style="align-items: normal;">
-            <p>{{ 'home.backup.desc' | translate }} <strong>{{ 'home.backup.desc_strong' | translate }}</strong></p><br><br>
+          <div class="hero-body  is-flex is-flex-direction-column has-text-left is-size-6 " style="align-items: normal;">
+            <p>{{ 'home.backup.desc' | translate }} <strong class="has-text-dark">{{ 'home.backup.desc_strong' | translate }}</strong></p><br><br>
             <div><ul class="fa-ul">
               <li class="mt-4"><span class="fa-li"><fa-icon [icon]="faHouse" size="lg" class="has-text-success"></fa-icon></span><strong><a href="https://zero-totp.com" class="has-text-success"> zero-totp.com</a></strong>. {{ 'home.backup.option.zero_totp' | translate }}<br><span class="tag is-warning is-light">{{ 'home.backup.option.beta' | translate }}</span></li>
               <li class="mt-4"><span class="fa-li"><fa-icon [icon]="faKitMedical" size="lg" class="has-text-danger"></fa-icon></span><strong ><a href="https://rescue.zero-totp.com" class="has-text-danger">rescue.zero-totp.com</a></strong>. {{ 'home.backup.option.rescue' | translate }}<br><span class="tag is-success is-light" >{{ 'home.backup.option.available' | translate }}</span>
@@ -248,7 +248,7 @@ <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 p-3">{{ 'home.a
       {{ 'home.about.zke_def' | translate }}
     </p></div>
   </article>
-  <article class="hero is-halfheight" id="project">
+  <article class="hero is-halfheight has-background-white has-text-dark" id="project">
     <header>
       <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 p-3" >{{ 'home.project.title' | translate }}</h1>
     </header>

diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
@@ -113,6 +113,10 @@ export class HomeComponent implements OnInit {
 
  }
 
+ scrollTo(element: HTMLElement) {
+  element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+ }
+
 
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,6 +113,10 @@ export class HomeComponent implements OnInit { @@
      }
+     scrollTo(element: HTMLElement) {
+      element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+     }
     }