Change Editor Theme (#18)

- Change default theme to solarized_light
- Move themes and keyboardhandlers to editor types

Author: Chethan2k1

__tests__/app/containers/EditorSettings.test.tsx

@@ -34,7 +34,7 @@ describe('EditorSettings Container', () => {
       },
     });
 
-    expect(wrapper.find('select.theme-control').props().value).toBe('twilight');
+    expect(wrapper.find('select.theme-control').props().value).toBe('solarized_light');
     wrapper.find('select.theme-control').simulate('change', { target: { value: 'github' } });
     expect(wrapper.find('select.theme-control').props().value).toBe('github');
   });

__tests__/app/containers/__snapshots__/Editor.test.tsx.snap

@@ -139,7 +139,7 @@ State PlayerCode::Update(State state) {
   isLoggedIn={false}
   keyboardHandler="default"
   save={[Function]}
-  theme="twilight"
+  theme="solarized_light"
   updateCode={[Function]}
   viewOnly={false}
 />

__tests__/app/containers/__snapshots__/EditorSettings.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`EditorSettings Container Should render EditorSettings 1`] = `
     enableSnippets={true}
     fontSize={16}
     keyboardHandler="default"
-    theme="twilight"
+    theme="solarized_light"
     toggleBasicAutoCompletion={[Function]}
     toggleSnippets={[Function]}
   >
@@ -208,7 +208,7 @@ exports[`EditorSettings Container Should render EditorSettings 1`] = `
                     <select
                       className="form-control theme-control"
                       onChange={[Function]}
-                      value="twilight"
+                      value="solarized_light"
                     >
                       <option
                         key="monokai"

src/app/components/SideBar.tsx

@@ -13,12 +13,12 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SidePanelTab } from 'app/reducers/Dashboard';
+import { Routes } from 'app/routes';
 import * as styles from 'app/styles/Sidebar.module.css';
 import * as SideBarInterfaces from 'app/types/SideBar';
 import classnames from 'classnames';
 import * as React from 'react';
 import { Button, ButtonGroup } from 'react-bootstrap';
-import { Routes } from 'app/routes';
 
 export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
   public render() {

src/app/components/UserProfileModal/EditPassword.tsx

@@ -35,7 +35,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
                 <div className="col mb-3">
                   <div className="input-group">
                     <label className="labeltext">Old Password</label>
-                    <div className={classnames('input-group-prepend', styles['inputGroup'])}>
+                    <div className={classnames('input-group-prepend', styles.inputGroup)}>
                       <input
                         type="password"
                         className={classnames('form-control', styles1['login-input'])}
@@ -57,7 +57,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
                 <div className="col mb-3">
                   <div className="input-group">
                     <label className="labeltext">New Password</label>
-                    <div className={classnames('input-group-prepend', styles['inputGroup'])}>
+                    <div className={classnames('input-group-prepend', styles.inputGroup)}>
                       <input
                         type="password"
                         className={classnames('form-control', styles1['login-input'])}
@@ -79,7 +79,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
                 <div className="col mb-3">
                   <div className="input-group">
                     <label className="labeltext">Confirm Password</label>
-                    <div className={classnames('input-group-prepend', styles['passwordInput'])}>
+                    <div className={classnames('input-group-prepend', styles.passwordInput)}>
                       <input
                         type="password"
                         className={classnames('form-control', styles1['login-input'])}

src/app/components/UserProfileModal/EditProfile.tsx

@@ -1,6 +1,6 @@
 import * as styles1 from 'app/styles/Authentication.module.css';
-import * as styles from 'app/styles/UserProfileModal.module.css';
 import 'app/styles/Flags.css';
+import * as styles from 'app/styles/UserProfileModal.module.css';
 import { Avatar } from 'app/types/Authentication/Register';
 import { InputName } from 'app/types/UserProfileModal';
 import * as EditProfileInterfaces from 'app/types/UserProfileModal/EditProfile';
@@ -138,8 +138,8 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
             <div className="form-row">
               <div className="col text-center mb-2">
                 <div className={styles.inputGroup}>
-                  {userDetails.errorMessage != '' ? (
-                    <div className={classnames(styles1['login-error'], styles['UsernameError'])}>
+                  {userDetails.errorMessage !== '' ? (
+                    <div className={classnames(styles1['login-error'], styles.UsernameError)}>
                       {userDetails.errorMessage}
                     </div>
                   ) : null}
@@ -149,8 +149,8 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
                     style={{
                       backgroundColor: 'rgb(70, 48, 235)',
                       borderColor: 'rgb(70, 48, 235)',
-                      width: '100%',
                       margin: '0px',
+                      width: '100%',
                     }}
                     disabled={
                       currentAvatar === userDetails.avatar &&

src/app/components/UserProfileModal/index.tsx

@@ -81,8 +81,8 @@ export class UserProfileModal extends React.Component<
           <a
             className={
               this.state.isPasswordPage
-                ? classnames('labeltext', styles['loginPageLink'])
-                : classnames('labeltext', styles['passwordPageLink'])
+                ? classnames('labeltext', styles.loginPageLink)
+                : classnames('labeltext', styles.passwordPageLink)
             }
             onClick={() => {
               this.setState((prevState) => ({

src/app/components/code/Editor.tsx

@@ -8,30 +8,11 @@ import 'brace/ext/searchbox';
 import 'brace/mode/c_cpp';
 import 'brace/snippets/c_cpp';
 
-export const themes = [
-  'monokai',
-  'github',
-  'tomorrow',
-  'kuroir',
-  'twilight',
-  'xcode',
-  'textmate',
-  'solarized_dark',
-  'solarized_light',
-  'terminal',
-  'chaos',
-  'chrome',
-  'eclipse',
-  'dracula',
-];
-
-export const keyboardHandlers = ['emacs', 'vim', 'default'];
-
-themes.forEach((theme) => {
+EditorInterfaces.themes.forEach((theme) => {
   require(`brace/theme/${theme}`);
 });
 
-keyboardHandlers.forEach((keyboardHandler) => {
+EditorInterfaces.keyboardHandlers.forEach((keyboardHandler) => {
   if (keyboardHandler !== 'default') {
     require(`brace/keybinding/${keyboardHandler}`);
   }

src/app/components/code/EditorSettings.tsx

@@ -1,5 +1,5 @@
-import { keyboardHandlers, themes } from 'app/components/code/Editor';
 import * as styles from 'app/styles/EditorSettings.module.css';
+import { keyboardHandlers, themes } from 'app/types/code/Editor';
 import * as EditorSettingsInterfaces from 'app/types/code/EditorSettings';
 import classnames from 'classnames';
 import * as React from 'react';

src/app/reducers/code/Editor.ts

@@ -1,13 +1,19 @@
 import { EditorSettingsActions } from 'app/actions';
 import * as EditorInterfaces from 'app/types/code/Editor';
+import {
+  EditorThemeTypes,
+  KeyboardHandler,
+  keyboardHandlers,
+  themes,
+} from 'app/types/code/Editor.ts';
 
 const editorStoreIntialState: EditorInterfaces.EditorStoreState = {
   editorOptions: {
     enableBasicAutoCompletion: true,
     enableSnippets: true,
     fontSize: 16,
-    keyboardHandler: 'default',
-    theme: 'twilight',
+    keyboardHandler: keyboardHandlers[KeyboardHandler.DEFAULT],
+    theme: themes[EditorThemeTypes.SOLARIZED_LIGHT],
   },
 };
 

src/app/types/code/Editor.ts

@@ -12,6 +12,48 @@ const actions = {
   updateCode: CodeActions.updateCode,
 };
 
+export const keyboardHandlers = ['emacs', 'vim', 'default'];
+
+export enum KeyboardHandler {
+  EMACS,
+  VIM,
+  DEFAULT,
+}
+
+export const themes = [
+  'monokai',
+  'github',
+  'tomorrow',
+  'kuroir',
+  'twilight',
+  'xcode',
+  'textmate',
+  'solarized_dark',
+  'solarized_light',
+  'terminal',
+  'chaos',
+  'chrome',
+  'eclipse',
+  'dracula',
+];
+
+export enum EditorThemeTypes {
+  MONOKAI,
+  GITHUB,
+  TOMORROW,
+  KUROIR,
+  TWILIGHT,
+  XCODE,
+  TEXTMATE,
+  SOLARIZED_DARK,
+  SOLARIZED_LIGHT,
+  TERMINAL,
+  CHAOS,
+  CHROME,
+  ECLIPSE,
+  DRACULA,
+}
+
 export interface State {
   code: string;
 }