General CSS refinement

.gitignore

@@ -24,3 +24,5 @@ build/
 package-lock.json
 .vs/
 .vscode/
+.stylelintrc.json
+src/css/

.stylelintrc.json

-{
-  "extends": "stylelint-config-sass-guidelines"
-}

package.json

 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "1.0.6-1",
+  "version": "1.0.6-2",
   "description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
   "synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
   "category": "ProjectManagement",
@@ -47,7 +47,6 @@
         "deb",
         "freebsd",
         "rpm",
-        "pacman",
         "AppImage"
       ]
     },
@@ -89,9 +88,6 @@
   "deb": {
     "artifactName": "${productName}-${version}-${arch}.${ext}"
   },
-  "pacman": {
-    "artifactName": "${productName}-${version}-${arch}.${ext}"
-  },
   "freebsd": {
     "artifactName": "${productName}-${version}-${arch}.${ext}"
   },
@@ -101,12 +97,13 @@
     "build:linux": "electron-builder -l --publish never",
     "build:appx": "electron-builder -w appx --publish never",
     "build:pacman": "electron-builder -l pacman --publish never",
-    "build:appimage": "electron-builder -l AppImage --publish never",
+    "build:appimage": "yarn build:css && electron-builder -l AppImage --publish never",
     "pack": "electron-builder --dir",
     "lint": "eslint --ext .js, src --ext .mjs, src",
     "test": "mocha --timeout 10000",
-    "test1": "mocha ./test/createTodos.js --timeout 10000",
-    "sass": "sass -w src/scss/:src/css/",
+    "test1": "mocha ./test/onboarding.js --timeout 10000",
+    "build:css": "sass src/scss/style.scss:src/css/style.css",
+    "sass": "sass -w src/scss/style.scss:src/css/style.css",
     "start": "yarn sass & electron ."
   },
   "dependencies": {
@@ -128,8 +125,6 @@
     "eslint": "^7.25.0",
     "mocha": "^9.0.0",
     "sass": "^1.34.1",
-    "spectron": "14.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-sass-guidelines": "^8.0.0"
+    "spectron": "14.0.0"
   }
 }

src/configs/modal.config.mjs

@@ -4,6 +4,9 @@ export function createModalJail(modal) {
   const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
   const focusableContent = modal.querySelectorAll(focusableElements);
   const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+
+  firstFocusableElement.focus();
+
   document.addEventListener("keydown", function(event) {
     let isTabPressed = event.key === "Tab" || event.keyCode === 9;
     if (!isTabPressed) {

src/css/dark.css

-body {
-  background-color: #212224;
-  color: #CCCDCF;
-}
-
-code, pre {
-  background-color: #212224 !important;
-}
-
-a {
-  color: white;
-}
-
-button:focus-visible,
-a:focus-visible {
-  outline: 2px solid #CCCDCF !important;
-}
-
-a:hover,
-button:hover,
-strong {
-  color: #CCCDCF;
-}
-
-input,
-select,
-textarea {
-  border: none !important;
-  background: #2d2d2d !important;
-  color: white !important;
-}
-
-input[type=search]::-webkit-search-cancel-button {
-  background-color: white;
-  -webkit-mask-image: url("../img/svg/times-circle.svg");
-  mask-image: url("../img/svg/times-circle.svg");
-}
-
-input:active,
-input:focus,
-input.is-focused,
-select:focus,
-textarea:active,
-textarea:focus,
-input[type=search]:focus {
-  outline: none !important;
-  box-shadow: 0 0 0 2px #CCCDCF !important;
-}
-
-input::placeholder {
-  color: #4a4a4a !important;
-}
-
-input[type=checkbox]:focus,
-input[type=checkbox]:active {
-  outline: none;
-  box-shadow: none !important;
-}
-
-input[type=range] {
-  background: #4a4a4a !important;
-}
-
-button {
-  color: white !important;
-  background: transparent !important;
-}
-button i {
-  color: #CCCDCF !important;
-}
-
-button.is-link,
-.button.is-link:hover {
-  background-color: #2d2d2d !important;
-}
-button.is-link svg,
-.button.is-link:hover svg {
-  color: inherit !important;
-}
-
-.button[disabled],
-fieldset[disabled] {
-  background-color: transparent;
-}
-
-button.is-outlined:hover {
-  background: #3B3B3B !important;
-}
-
-::after {
-  border-color: white !important;
-}
-
-svg {
-  color: white;
-}
-
-table {
-  width: 100%;
-  background-color: transparent !important;
-  color: #CCCDCF !important;
-}
-
-table tr td {
-  border-color: #212224 !important;
-}
-
-table tr th {
-  color: white !important;
-}
-
-table.files tr td:last-child i {
-  color: white;
-}
-
-nav {
-  background-color: #2d2d2d;
-}
-nav svg {
-  color: #CCCDCF;
-}
-nav ul li.logo {
-  background: none;
-}
-nav ul li a {
-  color: #CCCDCF;
-  border-bottom: 1px solid #3B3B3B;
-}
-nav ul li a:hover,
-nav ul li a:focus {
-  color: #CCCDCF;
-  border-bottom: none;
-  background-color: #3B3B3B;
-}
-nav ul li.is-highlighted a {
-  color: #CCCDCF;
-  border-bottom: none;
-  background-color: #3B3B3B;
-}
-
-#drawerContainer .zoom svg {
-  color: white !important;
-}
-#drawerContainer .zoom #zoomStatus {
-  color: white !important;
-}
-
-#todoTableSearchContainer {
-  background-color: #212224;
-}
-#todoTableSearchContainer .icon.is-left i,
-#todoTableSearchContainer .icon.is-right i {
-  color: #4a4a4a;
-}
-#todoTableSearchContainer #btnToggleViewContainer {
-  background: transparent !important;
-}
-
-#resultStats .tag {
-  background-color: #3B3B3B !important;
-  color: #CCCDCF !important;
-}
-
-#todoTable .todo#previousItem.is-highlighted {
-  background-color: #3B3B3B;
-}
-#todoTable .todo:hover .cell .button,
-#todoTable .todo.due .button {
-  color: #f5f5f5;
-}
-#todoTable .group.due {
-  color: #ebebeb;
-}
-#todoTable .group.due .button {
-  color: inherit;
-}
-#todoTable .todo {
-  border-color: #3B3B3B;
-}
-#todoTable .todo .checkbox a {
-  color: #CCCDCF;
-}
-#todoTable .todo .checkbox a:hover {
-  color: white;
-}
-#todoTable .todo .cell.text {
-  color: #CCCDCF;
-}
-#todoTable .todo .cell.itemDueDate {
-  color: white;
-}
-#todoTable .todo .cell.itemDueDate i {
-  color: inherit;
-}
-#todoTable .todo .cell.itemDueDate.isToday,
-#todoTable .todo .cell.itemDueDate.isPast {
-  color: #ff3860;
-}
-#todoTable .todo .cell.itemDueDate.isToday i,
-#todoTable .todo .cell.itemDueDate.isPast i {
-  color: inherit;
-}
-#todoTable .todo .cell.itemDueDate.isTomorrow i {
-  color: #fa745e !important;
-}
-#todoTable .todo .cell span.contexts {
-  color: #c5ede3 !important;
-  background: #1e6251 !important;
-}
-#todoTable .todo .cell span.projects {
-  color: #f1d6f1 !important;
-  background: #6f266f !important;
-}
-#todoTable .todo .cell .is-white {
-  color: #CCCDCF;
-  background: none;
-}
-
-#modalForm i {
-  color: #CCCDCF !important;
-}
-#modalForm button {
-  color: white;
-  border-color: #3B3B3B !important;
-  background: transparent !important;
-}
-#modalForm button:hover {
-  color: #CCCDCF !important;
-}
-#modalForm .field input,
-#modalForm .field input::placeholder,
-#modalForm .field select,
-#modalForm .field select::placeholder {
-  color: white !important;
-}
-#modalForm .field select option {
-  background: #3B3B3B;
-}
-
-#recurrencePicker #recurrencePickerInput,
-#recurrencePicker .radio {
-  cursor: pointer;
-  background: none !important;
-  color: white !important;
-}
-#recurrencePicker #recurrencePickerInput::placeholder {
-  color: white !important;
-}
-#recurrencePicker .radio:hover {
-  color: #CCCDCF !important;
-}
-#recurrencePicker #recurrencePickerContainer {
-  background: #2d2d2d;
-}
-#recurrencePicker #recurrencePickerContainer .card-footer {
-  border-color: #212224;
-}
-
-#autoCompleteContainer {
-  background: #3B3B3B;
-}
-#autoCompleteContainer h4 {
-  color: #CCCDCF;
-}
-
-#drawerContainer .drawer {
-  background: #3B3B3B !important;
-}
-#drawerContainer .drawer h4.is-4 {
-  color: white;
-}
-#drawerContainer .drawer h4.is-4 i {
-  color: #CCCDCF !important;
-}
-#drawerContainer #drawerClose {
-  background: #3B3B3B !important;
-}
-#drawerContainer svg {
-  color: #f5f5f5 !important;
-}
-#drawerContainer #btnFiltersResetFilters {
-  background: #212224 !important;
-}
-
-#filterContext .card {
-  background: #3B3B3B;
-}
-#filterContext .card #filterContextSave {
-  background-color: transparent !important;
-  border-right: 1px solid #212224 !important;
-}
-#filterContext .card-footer {
-  border-top: 1px solid #212224 !important;
-}
-
-#todoContext a {
-  color: #CCCDCF;
-}
-#todoContext .dropdown-content {
-  color: white;
-  background-color: #3B3B3B !important;
-}
-#todoContext .dropdown-content .dropdown-item:hover {
-  background: #2d2d2d;
-}
-
-.contexts .button {
-  color: #c5ede3;
-  background: #247561;
-}
-.contexts .button span.tag {
-  color: #184e41;
-  background: #c9eee5;
-}
-.contexts .button.is-dark {
-  background: #184e41;
-  color: white;
-}
-
-.projects .button {
-  color: #f1d6f1;
-  background: #822c82;
-}
-.projects .button span.tag {
-  color: #5c1f5c;
-  background: #f2daf2;
-}
-.projects .button.is-dark {
-  background: #5c1f5c;
-  color: white;
-}
-
-.priority .button {
-  opacity: 0.9;
-}
-
-.toggle .switch .slider {
-  background-color: #4a4a4a;
-}
-.toggle .switch input:checked + .slider {
-  background-color: #2d2d2d !important;
-}
-.toggle .switch input:focus + .slider {
-  box-shadow: none;
-}
-.toggle .switch input:focus-visible {
-  outline: 2px solid white !important;
-}
-
-.modal .modal-content .card {
-  background: #3B3B3B;
-  color: #CCCDCF;
-}
-.modal .modal-content .card .card-header-title {
-  color: white;
-}
-.modal .modal-content .card .card-content {
-  /*button {
-    background: $darker-grey!important;
-  }*/
-}
-.modal .modal-content .card .card-footer,
-.modal .modal-content .card .card-footer-item {
-  border-color: #2d2d2d;
-}
-
-.modal.content {
-  color: #CCCDCF !important;
-}
-.modal.content .button {
-  background: #2d2d2d !important;
-}
-.modal.content .select:not(.is-multiple):not(.is-loading)::after {
-  border-color: white !important;
-}
-.modal.content .delete,
-.modal.content .modal-close,
-.modal.content .tag.is-info {
-  background: white !important;
-  color: #3B3B3B !important;
-}
-.modal.content .tag:not(body).is-dark {
-  background: #212224 !important;
-}
-.modal.content .modal-close::before,
-.modal.content .modal-close::after {
-  color: #3B3B3B !important;
-  background: #3B3B3B !important;
-}
-.modal.content .modal-card,
-.modal.content table {
-  background: #3B3B3B;
-  color: #CCCDCF !important;
-}
-.modal.content .title,
-.modal.content table th {
-  color: white;
-}
-.modal.content table tr,
-.modal.content table th,
-.modal.content table td {
-  border-color: #2d2d2d !important;
-}
-.modal.content .tabs ul {
-  border-color: transparent;
-}
-.modal.content .tabs li a {
-  color: white;
-  border-color: #4a4a4a;
-}
-.modal.content .tabs li a:hover {
-  border-color: #CCCDCF;
-}
-.modal.content .tabs li.is-active a {
-  color: white;
-  border-color: #CCCDCF;
-}
-
-.message.fixed {
-  background: transparent !important;
-}
-.message.fixed i {
-  color: white !important;
-}
-.message.fixed .message-body {
-  color: #CCCDCF;
-  background: #3B3B3B !important;
-}
-.message.fixed .message-body .button {
-  background: #2d2d2d !important;
-}
-
-.dueDate #datePickerInput,
-.dueDate #datePickerInput::placeholder {
-  color: white !important;
-  background: transparent !important;
-  cursor: pointer;
-}
-
-.datepicker {
-  background: transparent;
-}
-.datepicker .button {
-  background: transparent !important;
-}
-.datepicker .datepicker-cell.today.focused:not(.selected),
-.datepicker .datepicker-cell.today:not(.selected) {
-  background: #212224 !important;
-}
-.datepicker .datepicker-cell.today.focused:not(.selected),
-.datepicker .datepicker-cell.today:hover {
-  color: white !important;
-}
-.datepicker .datepicker-picker {
-  background: #2d2d2d;
-  color: white;
-}
-.datepicker .datepicker-picker .button,
-.datepicker .datepicker-picker .button:hover,
-.datepicker .datepicker-picker .datepicker-header .datepicker-controls .button:hover {
-  background: none;
-  color: inherit;
-}
-.datepicker .datepicker-picker .datepicker-footer .datepicker-controls .button {
-  color: inherit;
-}
-.datepicker .datepicker-picker .datepicker-cell.selected,
-.datepicker .datepicker-picker .datepicker-cell.selected:hover {
-  color: #2d2d2d;
-  background: white;
-}
-.datepicker .datepicker-picker .datepicker-cell.focused:not(.selected),
-.datepicker .datepicker-picker .datepicker-cell:hover {
-  color: #2d2d2d;
-  background: #CCCDCF;
-}
-
-.contentContainer .title.is-1 {
-  color: white;
-}
-.contentContainer .subtitle,
-.contentContainer .subtitle strong {
-  color: #CCCDCF;
-}
-
-/*# sourceMappingURL=dark.css.map */

src/css/dark.css.map

-{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file

src/css/datepicker.css

-.datepicker {
-  display: none; }
-
-.datepicker.active {
-  display: block; }
-
-.datepicker-dropdown {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  padding-top: 4px; }
-
-.datepicker-dropdown.datepicker-orient-top {
-  padding-top: 0;
-  padding-bottom: 4px; }
-
-.datepicker-picker {
-  display: inline-block;
-  border-radius: 4px;
-  background-color: #fff; }
-
-.datepicker-dropdown .datepicker-picker {
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); }
-
-.datepicker-picker span {
-  display: block;
-  flex: 1;
-  border: 0;
-  border-radius: 4px;
-  cursor: default;
-  text-align: center;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; }
-
-.datepicker-main {
-  padding: 2px; }
-
-.datepicker-footer {
-  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
-  background-color: #f5f5f5; }
-
-.datepicker-controls, .datepicker-grid, .datepicker-view, .datepicker-view .days-of-week {
-  display: flex; }
-
-.datepicker-grid {
-  flex-wrap: wrap; }
-
-.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
-  flex-basis: 14.28571%; }
-
-.datepicker-view.datepicker-grid .datepicker-cell {
-  flex-basis: 25%; }
-
-.datepicker-cell, .datepicker-view .week {
-  height: 2.25rem;
-  line-height: 2.25rem; }
-
-.datepicker-title {
-  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
-  background-color: #f5f5f5;
-  padding: .375rem .75rem;
-  text-align: center;