diff --git a/web/modals/threads/thread-settings-modal.css b/web/modals/threads/thread-settings-modal.css
--- a/web/modals/threads/thread-settings-modal.css
+++ b/web/modals/threads/thread-settings-modal.css
@@ -1,4 +1,4 @@
-div.modal-body {
+div.modal_body {
   padding: 6px 6px;
   width: 100%;
   box-sizing: border-box;
@@ -9,37 +9,37 @@
   display: flex;
   flex-direction: column;
 }
-div.modal-body p {
+div.modal_body p {
   padding: 1px 3px 4px 3px;
   font-size: 14px;
   text-align: center;
 }
-div.modal-body textarea {
+div.modal_body textarea {
   margin: 3px;
 }
-div.modal-body textarea {
+div.modal_body textarea {
   font-size: 14px;
   padding: 1px;
   width: 175px;
 }
-div.modal-body p.confirm-account-password {
+div.modal_body p.confirm_account_password {
   margin-bottom: 4px;
   color: var(--fg);
 }
-div.modal-body div.form-footer {
+div.modal_body div.form_footer {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   padding-top: 8px;
 }
-div.modal-body div.form-footer div.modal-form-error {
+div.modal_body div.form_footer div.modal_form_error {
   font-size: 12px;
   color: red;
   font-style: italic;
   padding-left: 6px;
   align-self: center;
 }
-div.modal-body div.form-title {
+div.modal_body div.form_title {
   display: inline-block;
   text-align: right;
   padding-right: 5px;
@@ -50,12 +50,12 @@
   width: 110px;
   color: var(--fg);
 }
-div.modal-body div.form-content {
+div.modal_body div.form_content {
   display: inline-block;
   font-family: var(--font-stack);
   color: var(--fg);
 }
-div.modal-body div.form-content input {
+div.modal_body div.form_content input {
   margin-bottom: 4px;
 }
 
@@ -64,12 +64,12 @@
   color: var(--fg);
 }
 
-ul.tab-panel {
+ul.tab_panel {
   background-color: var(--modal-bg);
   padding-left: 10px;
   padding-top: 5px;
 }
-ul.tab-panel > li {
+ul.tab_panel > li {
   display: inline-block;
   list-style-type: none;
   font-size: 13px;
@@ -77,44 +77,44 @@
   cursor: pointer;
   padding: 3px 10px 3px 10px;
 }
-ul.tab-panel > li > a {
+ul.tab_panel > li > a {
   color: #555555;
 }
 
-div.form-textarea-container {
+div.form_textarea_container {
   margin-top: 1px;
 }
 
-div.edit-thread-color-container {
+div.edit_thread_color_container {
   margin-top: -5px;
 }
 
-div.color-title {
+div.color_title {
   margin-top: 4px;
 }
 
-div.edit-thread-privacy-container {
+div.edit_thread_privacy_container {
   margin-bottom: 6px;
 }
 
-div.form-enum-selector {
+div.form_enum_selector {
   display: inline-block;
   padding-bottom: 4px;
 }
-div.form-enum-selector > div.form-enum-container {
+div.form_enum_selector > div.form_enum_container {
   padding-top: 5px;
 }
-div.form-enum-selector > div.form-enum-container > input {
+div.form_enum_selector > div.form_enum_container > input {
   vertical-align: top;
   margin-top: 4px;
 }
-div.form-enum-selector div.form-enum-option {
+div.form_enum_selector div.form_enum_option {
   display: inline-block;
   font-size: 15px;
   font-weight: 600;
   padding-left: 3px;
 }
-div.form-enum-selector span.form-enum-description {
+div.form_enum_selector span.form_enum_description {
   display: block;
   font-family: var(--font-stack);
   font-weight: normal;
@@ -123,10 +123,10 @@
   color: gray;
 }
 
-div.form-enum-selector > div.form-enum-container {
+div.form_enum_selector > div.form_enum_container {
   padding-top: 5px;
 }
-div.form-enum-selector > div.form-enum-container > input {
+div.form_enum_selector > div.form_enum_container > input {
   vertical-align: top;
   margin-top: 4px;
 }
@@ -134,7 +134,7 @@
   font-style: italic;
 }
 
-div.edit-thread-account-password {
+div.edit_thread_account_password {
   border-top: 2px solid #efefef;
   padding-top: 4px;
   margin-top: 2px;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -192,8 +192,8 @@
       mainContent = (
         <div>
           <div>
-            <div className={css['form-title']}>Thread name</div>
-            <div className={css['form-content']}>
+            <div className={css.form_title}>Thread name</div>
+            <div className={css.form_content}>
               <input
                 type="text"
                 value={firstLine(this.possiblyChangedValue('name'))}
@@ -204,9 +204,9 @@
               />
             </div>
           </div>
-          <div className={css['form-textarea-container']}>
-            <div className={css['form-title']}>Description</div>
-            <div className={css['form-content']}>
+          <div className={css.form_textarea_container}>
+            <div className={css.form_title}>Description</div>
+            <div className={css.form_content}>
               <textarea
                 value={this.possiblyChangedValue('description')}
                 placeholder="Thread description"
@@ -215,11 +215,9 @@
               ></textarea>
             </div>
           </div>
-          <div className={css['edit-thread-color-container']}>
-            <div className={`${css['form-title']} ${css['color-title']}`}>
-              Color
-            </div>
-            <div className={css['form-content']}>
+          <div className={css.edit_thread_color_container}>
+            <div className={`${css.form_title} ${css.color_title}`}>Color</div>
+            <div className={css.form_content}>
               <ColorPicker
                 id="edit-thread-color"
                 value={this.possiblyChangedValue('color')}
@@ -232,11 +230,11 @@
       );
     } else if (this.state.currentTabType === 'privacy') {
       mainContent = (
-        <div className={css['edit-thread-privacy-container']}>
+        <div className={css.edit_thread_privacy_container}>
           <div className={css['modal-radio-selector']}>
-            <div className={css['form-title']}>Thread type</div>
-            <div className={css['form-enum-selector']}>
-              <div className={css['form-enum-container']}>
+            <div className={css.form_title}>Thread type</div>
+            <div className={css.form_enum_selector}>
+              <div className={css.form_enum_container}>
                 <input
                   type="radio"
                   name="edit-thread-type"
@@ -249,16 +247,16 @@
                   onChange={this.onChangeThreadType}
                   disabled={inputDisabled}
                 />
-                <div className={css['form-enum-option']}>
+                <div className={css.form_enum_option}>
                   <label htmlFor="edit-thread-open">
                     Open
-                    <span className={css['form-enum-description']}>
+                    <span className={css.form_enum_description}>
                       {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]}
                     </span>
                   </label>
                 </div>
               </div>
-              <div className={css['form-enum-container']}>
+              <div className={css.form_enum_container}>
                 <input
                   type="radio"
                   name="edit-thread-type"
@@ -271,10 +269,10 @@
                   onChange={this.onChangeThreadType}
                   disabled={inputDisabled}
                 />
-                <div className={css['form-enum-option']}>
+                <div className={css.form_enum_option}>
                   <label htmlFor="edit-thread-closed">
                     Secret
-                    <span className={css['form-enum-description']}>
+                    <span className={css.form_enum_description}>
                       {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]}
                     </span>
                   </label>
@@ -288,17 +286,17 @@
       mainContent = (
         <>
           <div>
-            <p className={css['italic']}>
+            <p className={css.italic}>
               Your thread will be permanently deleted. There is no way to
               reverse this.
             </p>
           </div>
-          <div className={css['edit-thread-account-password']}>
-            <p className={css['confirm-account-password']}>
+          <div className={css.edit_thread_account_password}>
+            <p className={css.confirm_account_password}>
               Please enter your account password to confirm your identity
             </p>
-            <div className={css['form-title']}>Account password</div>
-            <div className={css['form-content']}>
+            <div className={css.form_title}>Account password</div>
+            <div className={css.form_content}>
               <input
                 type="password"
                 placeholder="Personal account password"
@@ -382,13 +380,13 @@
 
     return (
       <Modal name="Thread settings" onClose={this.props.onClose} size="large">
-        <ul className={css['tab-panel']}>{tabs}</ul>
-        <div className={css['modal-body']}>
+        <ul className={css.tab_panel}>{tabs}</ul>
+        <div className={css.modal_body}>
           <form method="POST">
             {mainContent}
-            <div className={css['form-footer']}>
+            <div className={css.form_footer}>
               {buttons}
-              <div className={css['modal-form-error']}>
+              <div className={css.modal_form_error}>
                 {this.state.errorMessage}
               </div>
             </div>
@@ -573,7 +571,7 @@
     if (!threadInfo) {
       return (
         <Modal onClose={modalContext.clearModal} name="Invalid thread">
-          <div className={css['modal-body']}>
+          <div className={css.modal_body}>
             <p>You no longer have permission to view this thread</p>
           </div>
         </Modal>