Refactor theme slugs, fixes #40

app/gabsocial/features/preferences/index.js

@@ -21,14 +21,14 @@ const messages = defineMessages({
 
 // TODO: Pull dynamically
 const themes = {
-  cobalt: 'Cobalt',
+  'cobalt':          'Cobalt',
-  'gabsocial-light': 'Purple Light',
+  'purple':          'Purple Light',
-  default: 'Purple Dark',
+  'purple-dark':     'Purple Dark',
-  contrast: 'Purple Contrast',
+  'purple-contrast': 'Purple Contrast',
-  halloween: 'Halloween',
+  'halloween':       'Halloween',
-  neenster: 'Aquatic',
+  'aquatic':         'Aquatic',
-  glinner: 'Pale Blue',
+  'paleblue':        'Pale Blue',
-  lime: 'Lime Green',
+  'lime':            'Lime Green',
 };
 
 const mapStateToProps = state => ({

app/packs/public.js

@@ -120,17 +120,6 @@ function main() {
       document.head.appendChild(scrollbarWidthStyle);
       scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
     }
-
-    (function() {
-      var meta_bg_img = document.querySelector('meta[name="bg-img"]');
-      if (!meta_bg_img) return;
-      var path = meta_bg_img.content;
-      var image = new Image();
-      image.src = path;
-      image.addEventListener('load', function() {
-        document.querySelector('.theme-glinner .public-layout').style.backgroundImage = 'url(\''+image.src+'\')';
-      });
-    })();
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {

app/styles/gabsocial/pro.scss

@@ -1,7 +1,7 @@
 .page--floral { background-image: url('../images/pro_bg/floral--light.svg'); }
 
-body.theme-default,
+body.theme-purple-dark,
-body.theme-contrast {
+body.theme-purple-contrast {
   .page--floral { background-image: url('../images/pro_bg/floral--dark.svg'); }
 }
 

app/styles/glinner.scss

@@ -25,10 +25,6 @@ $bg-size: 720px;
 @import 'application';
 @import 'gabsocial-light/diff';
 
-body.app-body {
-  background: $gab-background;
-}
-
 body {
   background-color: #bcbb65;
   background-image: linear-gradient(to bottom,
@@ -40,8 +36,8 @@ body {
 }
 
 .public-layout {
+  background-image: none;
   background-color: transparent;
-  background-image: url("../images/glinner-still.gif");
   background-repeat: repeat-x;
   background-size: auto $bg-size;
 
@@ -54,7 +50,7 @@ body {
   }
 
   .brand__tagline {
-    color: white;
+    color: #fff;
   }
 
   .brand__tagline span {
@@ -62,24 +58,32 @@ body {
   }
 
   .header .nav-link {
-    color: white;
+    color: #fff;
     filter: drop-shadow(1px 1px lighten($gab-brand-default, 20%));
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       color: $gab-background-base-light;
     }
   }
 
   .footer {
     background-color: #74733c;
+
     ul li a {
       color: darken($primary-text-color, 10%);
     }
   }
 }
 
+.ui {
+  background: $gab-background;
+}
+
 .tabs-bar__button-compose {
   background-color: darken($glinner-teal, 15%) !important;
+
   &:hover {
     background-color: darken($glinner-teal, 20%) !important;
   }

static/instance/soapbox.example.json

@@ -17,5 +17,5 @@
   "defaultSettings": {
     "autoPlayGif": false,
     "theme": "lime"
-  },
+  }
 }

webpack/config/themes.yml

@@ -1,8 +1,8 @@
 cobalt: styles/cobalt.scss
-gabsocial-light: styles/gabsocial-light.scss
+purple: styles/gabsocial-light.scss
-default: styles/application.scss
+purple-dark: styles/application.scss
-contrast: styles/contrast.scss
+purple-contrast: styles/contrast.scss
 halloween: styles/halloween.scss
-neenster: styles/neenster.scss
+aquatic: styles/neenster.scss
-glinner: styles/glinner.scss
+paleblue: styles/glinner.scss
 lime: styles/lime.scss