Convert scss files to css (#2281)

* Convert main scss files to css

* Finish converting styles to css

* Kind of fix restore from backup

* Fix variables

* Fix loading dots

Author: RobbieTheWagner

.stylelintrc.js

@@ -1,9 +1,8 @@
 'use strict';
 
 module.exports = {
-  extends: ['stylelint-config-standard-scss'],
+  extends: ['stylelint-config-standard'],
   rules: {
     'at-rule-no-deprecated': [true, { ignoreAtRules: ['/^view/', 'apply'] }],
-    'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind'] }],
   },
 };

app/components/colors-list.ts

@@ -32,7 +32,9 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
     if (!palette.$isDisconnected) {
       if (palette.isColorHistory) {
         return [...palette.colors].sort((a, b) => {
-          return b.createdAt?.localeCompare(a.createdAt);
+          return (
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          );
         });
       } else {
         return palette.colorOrder.map((color: { type: string; id: string }) => {

app/components/settings-data.ts

@@ -73,60 +73,64 @@ export default class SettingsData extends Component {
   importIndexedDB = async () => {
     if (this.ipcRenderer) {
       this.isImporting = true;
-      await this.ipcRenderer.invoke('importData').then((jsonString: string) => {
-        if (jsonString) {
-          const DBOpenRequest = getDBOpenRequest();
-
-          DBOpenRequest.onsuccess = () => {
-            const idbDatabase = DBOpenRequest.result;
-
-            IDBExportImport.clearDatabase(idbDatabase, (err: Event | null) => {
-              if (!err) {
-                // cleared data successfully
-                IDBExportImport.importFromJsonString(
-                  idbDatabase,
-                  jsonString,
-                  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                  async (err: Event | null) => {
-                    if (!err) {
-                      idbDatabase.close();
-
-                      // TODO is pulling from the backup with orbit the best "refresh" here?
-                      const backup =
-                        this.dataCoordinator.getSource<IndexedDBSource>(
-                          'backup',
-                        );
-
-                      if (backup) {
-                        const records = await backup.query<InitializedRecord[]>(
-                          (q) => q.findRecords(),
-                        );
-
-                        await this.store.sync((t) =>
-                          records.map((r) => {
-                            if (r?.attributes?.['hex']) {
-                              delete r.attributes['hex'];
-                            }
-
-                            return t.addRecord(r);
-                          }),
-                        );
-                        this.flashMessages.success(
-                          'Data successfully replaced.',
-                        );
-                      }
+      const jsonString = await this.ipcRenderer.invoke('importData') as string;
+
+      if (jsonString) {
+        const DBOpenRequest = getDBOpenRequest();
+
+        DBOpenRequest.onsuccess = () => {
+          const idbDatabase = DBOpenRequest.result;
+
+          IDBExportImport.clearDatabase(idbDatabase, (err: Event | null) => {
+            if (!err) {
+              // cleared data successfully
+              IDBExportImport.importFromJsonString(
+                idbDatabase,
+                jsonString,
+                // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                async (err: Event | null) => {
+                  if (!err) {
+                    idbDatabase.close();
+
+                    // TODO is pulling from the backup with orbit the best "refresh" here?
+                    const backup =
+                      this.dataCoordinator.getSource<IndexedDBSource>('backup');
+
+                    if (backup) {
+                      const records = await backup.query<InitializedRecord[]>(
+                        (q) => q.findRecords(),
+                      );
+
+                      await this.store.sync((t) =>
+                        records.map((r) => {
+                          if (r?.attributes?.['hex']) {
+                            delete r.attributes['hex'];
+                          }
+
+                          // We have to make sure these are all Date objects
+                          // otherwise orbit will throw a validation error
+                          if (r?.attributes?.['createdAt']) {
+                            r.attributes['createdAt'] = new Date(
+                              r.attributes['createdAt'] as string,
+                            );
+                          }
+
+                          return t.addRecord(r);
+                        }),
+                      );
+                      this.flashMessages.success('Data successfully replaced.');
                     }
+                  }
 
-                    this.isImporting = false;
-                  },
-                );
-              }
-            });
-          };
-        } else {
-          this.isImporting = false;
-        }
-      });
+                  this.isImporting = false;
+                },
+              );
+            }
+          });
+        };
+      } else {
+        this.isImporting = false;
+      }
     }
   };
 }

app/controllers/palettes.ts

@@ -34,7 +34,9 @@ export default class PalettesController extends Controller {
       return [...colorHistory.colors]
         .slice()
         .sort((a, b) => {
-          return b.createdAt?.localeCompare(a.createdAt);
+          return (
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          );
         })
         .slice(0, 16);
     } else {