From 4f11201ff7aa108ed5e98fafe62c145b9766376c Mon Sep 17 00:00:00 2001
From: Jackie Luo <jacquelineluo95@gmail.com>
Date: Tue, 5 Apr 2016 13:43:36 -0700
Subject: [PATCH] fix(theme-picker): Reformat invalid class names

---
 internal_packages/theme-picker/lib/theme-option.jsx | 2 +-
 internal_packages/theme-picker/lib/theme-picker.jsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/internal_packages/theme-picker/lib/theme-option.jsx b/internal_packages/theme-picker/lib/theme-option.jsx
index 5e65a8ecd..9a623d60e 100644
--- a/internal_packages/theme-picker/lib/theme-option.jsx
+++ b/internal_packages/theme-picker/lib/theme-option.jsx
@@ -99,7 +99,7 @@ class ThemeOption extends React.Component {
       <div className="clickable-theme-option" onMouseDown={this.props.onSelect}>
         <EventedIFrame
           ref="iframe"
-          className={`theme-preview-${this.props.theme.name}`}
+          className={`theme-preview-${this.props.theme.name.replace(/\./g, '-')}`}
           frameBorder="0"
           width="115px"
           height="70px"
diff --git a/internal_packages/theme-picker/lib/theme-picker.jsx b/internal_packages/theme-picker/lib/theme-picker.jsx
index c5176f714..75b5d2d81 100644
--- a/internal_packages/theme-picker/lib/theme-picker.jsx
+++ b/internal_packages/theme-picker/lib/theme-picker.jsx
@@ -38,12 +38,12 @@ class ThemePicker extends React.Component {
   }
 
   _rewriteIFrame(prevActiveTheme, activeTheme) {
-    const prevActiveThemeDoc = document.querySelector(`.theme-preview-${prevActiveTheme}`).contentDocument;
+    const prevActiveThemeDoc = document.querySelector(`.theme-preview-${prevActiveTheme.replace(/\./g, '-')}`).contentDocument;
     const prevActiveElement = prevActiveThemeDoc.querySelector(".theme-option.active-true");
-    prevActiveElement.className = "theme-option active-false";
-    const activeThemeDoc = document.querySelector(`.theme-preview-${activeTheme}`).contentDocument;
+    if (prevActiveElement) prevActiveElement.className = "theme-option active-false";
+    const activeThemeDoc = document.querySelector(`.theme-preview-${activeTheme.replace(/\./g, '-')}`).contentDocument;
     const activeElement = activeThemeDoc.querySelector(".theme-option.active-false");
-    activeElement.className = "theme-option active-true";
+    if (activeElement) activeElement.className = "theme-option active-true";
   }
 
   _renderThemeOptions() {