Rename themes

src/App.tsx

@@ -34,8 +34,6 @@ export default class MainApp extends Vue {
 
     Mousetrap.bind('escape', () => {
       const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
-      console.log({ isFocusPassword })
-      console.log('Escape')
 
       if (isFocusPassword) {
         isFocusPassword.blur()

src/components/base/settings/SettingsCustom.tsx

@@ -35,7 +35,6 @@ export default class SettingsCustom extends Vue {
   @Debounce()
   updateQuery() {
     if (this.syncThemeWithQuery) {
-      // console.log('AppModule.syncStoreWithQuery')
       AppModule.syncStoreWithQuery()
     }
   }

src/components/themes/flow/index.tsx

@@ -4,7 +4,7 @@ import { AppModule } from '@/store/app'
 let render: GL
 
 @Component
-export default class MagicTheme extends Vue {
+export default class FlowTheme extends Vue {
   get animationSpeed() {
     return AppModule.getThemeInput('animation-speed')?.value as number || 45
   }

src/models/app.ts

@@ -142,8 +142,8 @@ export const defaultTheme: AppTheme = {
 export const AppThemes: AppTheme[] = [
   defaultTheme,
   {
-    name: 'shere',
-    component: 'shere',
+    name: 'Sphere',
+    component: 'sphere',
     color: {
       active: '#04ded4',
       background: 'black'
@@ -164,7 +164,7 @@ export const AppThemes: AppTheme[] = [
     ]
   },
   {
-    name: 'planet',
+    name: 'Planet',
     component: 'planet',
     color: {
       active: '#04ded4',
@@ -190,7 +190,7 @@ export const AppThemes: AppTheme[] = [
     ]
   },
   {
-    name: 'destruction',
+    name: 'Destruction',
     component: 'destruction',
     color: {
       active: '#04ded4',
@@ -229,7 +229,7 @@ export const AppThemes: AppTheme[] = [
     ]
   },
   {
-    name: 'rings',
+    name: 'Rings',
     component: 'rings',
     color: {
       active: '#04ded4',
@@ -269,7 +269,7 @@ export const AppThemes: AppTheme[] = [
     ]
   },
   {
-    name: 'tenderness',
+    name: 'Tenderness',
     component: 'tenderness',
     color: {
       active: '#04ded4',
@@ -296,8 +296,8 @@ export const AppThemes: AppTheme[] = [
     ]
   },
   {
-    name: 'Magic',
-    component: 'magic',
+    name: 'Flow',
+    component: 'flow',
     color: {
       active: '#04ded4',
       background: 'black'
@@ -357,8 +357,8 @@ export const AppThemes: AppTheme[] = [
     }
   },
   {
-    name: 'Malevich',
-    component: 'malevich',
+    name: 'Suprematism',
+    component: 'suprematism',
     settings: [
       {
         name: 'activeColor',

src/style/themes/index.styl

@@ -1,6 +1,6 @@
 @import './osmos.styl'
 @import './space.styl'
-@import './malevich.styl'
+@import './suprematism.styl'
 
 canvas
   width 100%

src/style/themes/suprematism.styl

@@ -1,4 +1,4 @@
-.malevich
+.suprematism
   position relative
   width 100%
   height 100%
@@ -32,7 +32,7 @@
   bottom 2%
   width 30vmax
   height 35vmin
-  background url(../assets/images/themes/malevich/bottom-right.svg) center/contain no-repeat
+  background url(../assets/images/themes/suprematism/bottom-right.svg) center/contain no-repeat
 
 .parralax-item-bottom-right-triangle
   right 19%
@@ -41,7 +41,7 @@
   height 6.5vmax
   transform-origin 50% 30%
   animation rotateGear 13s linear infinite
-  background url(../assets/images/themes/malevich/bottom-right-triangle.svg) center/contain no-repeat
+  background url(../assets/images/themes/suprematism/bottom-right-triangle.svg) center/contain no-repeat
 
 .parralax-item-top-left
   top 1%
@@ -55,7 +55,7 @@
     width 7vmax
     height 7vmax
     animation rotatePs 20s linear infinite
-    background url(../assets/images/themes/malevich/top-left-multi.svg) center/contain no-repeat
+    background url(../assets/images/themes/suprematism/top-left-multi.svg) center/contain no-repeat
 
 .parralax-item-top-right
   width 15vmin
@@ -68,7 +68,7 @@
   right 18%
   width 4vmin
   height 4vmin
-  background url(../assets/images/themes/malevich/top-right-circle.svg) center/contain no-repeat
+  background url(../assets/images/themes/suprematism/top-right-circle.svg) center/contain no-repeat
 
 @keyframes rotateGear {
   0%,to {