0.2.6

style (user): Improve dark mode color profile

css/main.css

@@ -22,7 +22,7 @@ body {
 }
 
 body[data-theme=dark] {
-  --accent-color: #a293d0;
+  --accent-color: #8860ff;
   --text-color: 238, 238, 238;
   --text-color-light: 170, 170, 170;
   --foreground-color: 26, 26, 26;
@@ -208,6 +208,9 @@ span.ripple {
   pointer-events: none;
 }
 
+sm-button {
+  color: rgba(var(--text-color), 1);
+}
 sm-button[variant=outlined] {
   --accent-color: rgba(var(--text-color), 1);
 }
@@ -269,7 +272,7 @@ sm-button[variant=outlined] {
   border-radius: 0.8rem;
   box-shadow: 0.1em 0.2em 1em rgba(var(--text-color), 0.16);
   padding: 1.5rem;
-  color: rgba(var(--foreground-color), 1);
+  color: white;
   background: var(--accent-color);
   z-index: 10;
   transition: transform 0.3s, opacity 0.3s;
@@ -298,13 +301,22 @@ sm-button[variant=outlined] {
   transition: transform 0.3s;
 }
 #on_boarding .icon {
-  stroke: rgba(var(--foreground-color), 1);
+  stroke-width: 8;
+  stroke: white;
   padding: 0.2rem;
   cursor: pointer;
 }
+#on_boarding sm-button[variant=no-outline]::part(button) {
+  background: rgba(var(--foreground-color), 1);
+  color: rgba(var(--text-color), 1);
+}
+#on_boarding sm-button:not([variant=no-outline])::part(button) {
+  color: white;
+}
 
 .action {
   position: relative;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
   padding: 0;
@@ -807,6 +819,7 @@ details p {
 .user-panel .action {
   width: auto;
   justify-content: flex-end;
+  border-radius: 2rem;
 }
 .user-panel .action h4 {
   border-radius: 2rem;
@@ -1687,6 +1700,8 @@ sm-panel {
 }
 
 #add_person_btn {
+  position: relative;
+  overflow: hidden;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -1696,9 +1711,7 @@ sm-panel {
   font-size: 0.85rem;
   opacity: 0.8;
   font-weight: 500;
-}
+  -webkit-tap-highlight-color: transparent;
-#add_person_btn:active {
-  transform: scale(0.95);
 }
 #add_person_btn .icon {
   height: 3rem;

css/main.scss

@@ -20,7 +20,7 @@ body {
     background-size: cover;
 }
 body[data-theme="dark"]{
-    --accent-color: #a293d0;
+    --accent-color: #8860ff;
     --text-color: 238, 238, 238;
     --text-color-light: 170, 170, 170;
     --foreground-color: 26, 26, 26;
@@ -204,8 +204,11 @@ span.ripple{
     pointer-events: none;
 }
 
-sm-button[variant="outlined"]{
+sm-button{
-    --accent-color: rgba(var(--text-color), 1);
+    color: rgba(var(--text-color), 1);
+    &[variant="outlined"]{
+        --accent-color: rgba(var(--text-color), 1);
+    }
 }
 
 .loader {
@@ -267,7 +270,7 @@ sm-button[variant="outlined"]{
     border-radius: 0.8rem;
     box-shadow: 0.1em 0.2em 1em rgba(var(--text-color), 0.16);
     padding: 1.5rem;
-    color: rgba(var(--foreground-color), 1);
+    color: white;
     background: var(--accent-color);
     z-index: 10;
     transition: transform 0.3s, opacity 0.3s;
@@ -295,14 +298,25 @@ sm-button[variant="outlined"]{
         transition: transform 0.3s;
     }
     .icon{
-        stroke: rgba(var(--foreground-color), 1);
+        stroke-width: 8;
+        stroke: white;
         padding: 0.2rem;
         cursor: pointer;
     }
+    sm-button{
+        &[variant="no-outline"]::part(button){
+            background: rgba(var(--foreground-color), 1);
+            color: rgba(var(--text-color), 1);
+        }
+        &:not([variant="no-outline"])::part(button){
+            color: white;
+        }
+    }
 }
 
 .action {
     position: relative;
+    overflow: hidden;
     display: inline-flex;
     align-items: center;
     padding: 0;
@@ -821,6 +835,7 @@ details{
     .action{
         width: auto;
         justify-content: flex-end;
+        border-radius: 2rem;
         h4{
             border-radius: 2rem;
             background-color: rgba(var(--text-color), 0.1);
@@ -1723,6 +1738,8 @@ sm-panel{
     gap: 2rem 0.2rem;
 }
 #add_person_btn{
+    position: relative;
+    overflow: hidden;
     cursor: pointer;
     display: flex;
     flex-direction: column;
@@ -1732,9 +1749,7 @@ sm-panel{
     font-size: 0.85rem;
     opacity: 0.8;
     font-weight: 500;
-    &:active{
+    -webkit-tap-highlight-color: transparent;
-        transform: scale(0.95);
-    }
     .icon{
         height: 3rem;
         width: 3rem;

index.html

@@ -2287,8 +2287,8 @@
             })
 
             document.addEventListener('mousedown', (e) => {
-                if (e.target.closest('.option, .activity, .person, .navbar-item, sm-button')) {
+                if (e.target.closest('.option, .activity, .person, .navbar-item, sm-button, .action:not(:disabled), #add_person_btn')) {
-                    createRipple(e, e.target.closest('.option, .activity, .person, .navbar-item, sm-button'))
+                    createRipple(e, e.target.closest('.option, .activity, .person, .navbar-item, sm-button, .action:not(:disabled), #add_person_btn'))
                 }
             })
 
@@ -2563,6 +2563,10 @@
         function finishOnBoarding() {
             onBoardingPanel.classList.add('hide')
             focusIllu.classList.add('hide')
+            setTimeout(() => {
+                onBoardingPanel.setAttribute('style', 'transform: none')
+                focusIllu.setAttribute('style', 'transform: none')
+            }, 300);
             currentFeatureIndex = 0
         }
         function nextTutorial() {
@@ -2575,7 +2579,7 @@
             if (currentFeatureIndex === onBoarding.length - 1 && index > 0) {
                 finishOnBoarding()
             }
-            index = (nextTutButton.textContent === 'Got it') ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1)
+            index = (nextTutButton.textContent === 'Got it' && index > 0) ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1)
             if (index === 0){
                 prevTutButton.classList.add('hide')
                 focusIllu.classList.add('hide')