Small enhancements and dep upgrades

hovancik · Apr 1, 2024 · 6767bcf · 6767bcf
1 parent 5d15ee2
commit 6767bcf
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 178 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -15,7 +15,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: '18'
+        node-version: '20.11.0'
     - run: npm install npm -g
     - run: npm install
     - run: npx nyc --reporter=lcov npm test

diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+20.11.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.7] - 2024-04-01
+## Added 
+- minor UI enhancements
+
 ## [0.0.6] - 2023-02-03
 ## Added 
 - ability to skip to a break
@@ -38,7 +42,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - simple Preferences (intervals and durations for Mini and Long breaks)
 - debug information
 
-[Unreleased]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.6...HEAD
+[Unreleased]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.7...HEAD
+[0.0.7]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.6...v0.0.7
 [0.0.6]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.5...v0.0.6
 [0.0.5]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.4...v0.0.5
 [0.0.4]: https://github.com/hovancik/stretchly-for-web/compare/v0.0.3...v0.0.4

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Stretchly for Web</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" data-theme="light"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "stretchly-for-web",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The break time reminder app",
   "engines": {
-    "node": "18.x"
+    "node": "20.11.0"
   },
   "type": "module",
   "repository": {
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "bulma": "^0.9.4",
-    "carbon-icons-svelte": "^11.2.0",
+    "bulma": "^1.0.0",
+    "carbon-icons-svelte": "^12.6.0",
     "chai": "^4.3.6",
     "chai-as-promised": "^7.1.1",
     "easytimer.js": "^4.5.4",

diff --git a/src/App.svelte b/src/App.svelte
@@ -165,7 +165,7 @@
           {#if status === 'stopped' || status === 'paused'}
             <button class="button is-small" on:click={start}>
               <span class="icon is-small">
-                <Play size="16" />
+                <Play size={16} />
               </span>
               {#if status === 'stopped'}
                 <span>Start</span>
@@ -176,21 +176,21 @@
           {:else if status === 'running'}
             <button class="button is-small" on:click={pause}>
               <span class="icon is-small">
-                <Pause size="16" />
+                <Pause size={16} />
               </span>
               <span>Pause</span>
             </button>
             <button class="button is-small" on:click={stop}>
               <span class="icon is-small">
-                <Stop size="16" />
+                <Stop size={16} />
               </span>
               <span>Stop</span>
             </button>
             <div class="dropdown is-hoverable">
               <div class="dropdown-trigger">
                 <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
                   <span class="icon is-small">
-                    <SkipForward size="16" />
+                    <SkipForward size={16} />
                   </span>
                   <span>Skip to</span>
                 </button>
@@ -215,7 +215,7 @@
     <div class="container has-text-centered">
       {#if status !== 'running'}
         <div>
-          <h1 class="title">
+          <h1 class="title has-text-white">
             Stretchly for Web
           </h1>
           <span class="tag {heroClass} is-light">
@@ -224,7 +224,7 @@
         </div>
       {:else if current === 'work'}
         <div>
-          <h1 class="title">
+          <h1 class="title has-text-white">
             Time to work!
           </h1>
           {#if finishedMinis === $longBreakInterval}
@@ -241,15 +241,15 @@
         <div>
           {#if finishedMinis === $longBreakInterval}
             <div class="block">
-              <h1 class="title">
+              <h1 class="title has-text-white">
                 {longBreakIdea[0]}
               </h1>
-              <h2 class="subtitle">
+              <h2 class="subtitle has-text-white">
                 {longBreakIdea[1]}
               </h2>
             </div>
           {:else}
-            <h1 class="title"e>
+            <h1 class="title has-text-white">
               {miniBreakIdea}
             </h1>
           {/if}
@@ -262,10 +262,10 @@
   </div>
   <div class="hero-foot">
     <div class="container content has-text-right">
-      <p>
-        <strong>Stretchly for Web</strong> v0.0.6 |
-        <a href="#preferences" class="is-underlined">Preferences</a> |
-        Made with ♥ by <a href="https://hovancik.net" class="is-underlined">Jan Hovancik</a>
+      <p class="has-text-white">
+        <strong>Stretchly for Web</strong> <a href="https://github.com/hovancik/stretchly-for-web" class="is-underlined has-text-white">v0.0.7</a> |
+        <a href="#preferences" class="is-underlined has-text-white">Preferences</a> |
+        Made with ♥ by <a href="https://hovancik.net" class="is-underlined has-text-white">Jan Hovancik</a>
       </p>
     </div>
   </div>
@@ -276,7 +276,11 @@
       <h1 class="title" id="preferences">
         Preferences
       </h1>
-      <p>Stop the breaks before editing preferences.   
+      {#if status === 'stopped'}
+        <p>Here you can edit preferences.</p>
+      {:else}
+        <p>Stop the breaks before editing preferences.</p>
+      {/if}
       <h2 class="subtitle">Mini Breaks</h2>
       <p>Mini Breaks are short breaks taken regularly to give you a chance to stretch and relax.</p>
       <div class="field is-horizontal">

diff --git a/src/app.scss b/src/app.scss
@@ -1,9 +1,2 @@
 /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */ /* Import only what you need from Bulma */
-@import "bulma/sass/utilities/_all";
-@import "bulma/sass/base/_all";
-@import "bulma/sass/elements/_all";
-@import "bulma/sass/form/_all";
-@import "bulma/sass/components/_all";
-@import "bulma/sass/grid/_all";
-@import "bulma/sass/helpers/_all";
-@import "bulma/sass/layout/_all";
+@import 'bulma/css/bulma.css'
diff --git a/src/components/NotificationRequest.svelte b/src/components/NotificationRequest.svelte
@@ -22,18 +22,18 @@
   {#if !loaded }
         <!--Still loading-->
   {:else if !browserSupportsNotifications}
-    <div class="notification mt-2 is-warning is-light">
-      <p class="">This browser does not support notifications.</p>
+    <div class="notification mt-2 is-danger is-light">
+      This browser does not support notifications.
     </div>
   {:else if !notificationsAreAllowed }
     <div class="notification mt-2 is-warning is-light">
+      Notifications are not allowed. Please request the permission by clicking on button.
       <button class="button is-success is-outlined is-small is-pulled-right" on:click={requestPermission}>
         <span class="icon is-small">
-          <NotificationIcon size="16"/>
+          <NotificationIcon size={16}/>
         </span>
         <span>Request Notifications Permission</span>
       </button>
-      <p>Notifications are not allowed. Please request the permission by clicking on button.</p>
     </div>
   {/if}
 </section>