Add bulma-checkradio for prettier checkboxes

package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "bulma": "^0.6.2",
+    "bulma-checkradio": "^1.0.1",
     "dexie": "^2.0.1",
     "font-awesome": "^4.7.0",
     "inferno": "^4.0.4",

src/components/management/AccountManager/MyAccount.jsx

@@ -30,51 +30,53 @@ export class MyAccount extends Component {
   render() {
     return (
       <div>
-        <div className="columns">
+        <div className='columns'>
         
-          <div className="column">
+          <div className='column'>
-            <h2 className="title">Account Details</h2>
+            <h2 className='title'>Account Details</h2>
-            <div className="control">
+            <div className='control'>
               <strong>Email:</strong> <span>{this.state.email}</span>
             </div>
-            <div className="control">
+            <div className='control'>
               <strong>Username:</strong> <span>{this.state.username}</span>
             </div>
-            <div className="field">
+            <div className='field'>
-              <label className="label">
+              <label className='label'>
                 <span>Public Name:</span>
               </label>
-              <div className="control">
+              <div className='control'>
-                <input className="input" type="text" value={this.state.publicName}
+                <input className='input' type='text' value={this.state.publicName}
                   onInput={(event) => {this.setState({publicName: event.target.value})}} />
               </div>
             </div>
-            <div className="field">
+            <div className='field'>
-              <div className="control">
+              <div className='control'>
-                <label className="label checkbox">
+                <input className='is-checkradio is-rtl' type='checkbox' id='allowEmails'
-                  <input type="checkbox" checked={this.state.allowEmails ? 'checked' : null}
+                  checked={this.state.allowEmails ? 'checked' : false}
-                    onChange={(event) => { this.setState({ allowEmails: event.target.checked }) }} />
+                  onChange={(event) => { this.setState({ allowEmails: !this.state.allowEmails }) }} />
-                  <span>Allow Emails</span>
+                <label className='label is-unselectable' htmlFor='allowEmails'>
+                  Allow Emails
                 </label>
               </div>
             </div>
-            <div className="field">
+            <div className='field'>
-              <label className="label checkbox">
+              <input className='is-checkradio is-rtl' type='checkbox' id='useIPAPronunciation'
-                <input type="checkbox" checked={this.state.useIPAPronunciation ? 'checked' : null}
+                checked={this.state.useIPAPronunciation ? 'checked' : false}
-                  onChange={(event) => { this.setState({ useIPAPronunciation: event.target.checked }) }} />
+                onChange={(event) => { this.setState({ useIPAPronunciation: !this.state.useIPAPronunciation }) }} />
-                <span>Use IPA in Pronunciation Fields</span>
+              <label className='label is-unselectable' htmlFor='useIPAPronunciation'>
+                Use IPA in Pronunciation Fields
               </label>
             </div>
           </div>
           
-          <div className="column">
+          <div className='column'>
-            <h2 className="title">Account Actions</h2>
+            <h2 className='title'>Account Actions</h2>
-            <div className="field">
+            <div className='field'>
-              <label className="label">
+              <label className='label is-unselectable'>
                 <span>Change Dictionary</span>
               </label>
-              <div className="control">
+              <div className='control'>
-                <div className="select">
+                <div className='select'>
                   <select>
                     {this.props.userDictionaries.map(item => {
                       return <option value={item.id}>{item.name}</option>;

src/components/management/EditDictionaryModal/EditSettingsForm.jsx

@@ -30,17 +30,16 @@ export const EditSettingsForm = (props) => {
     
       <div className='field'>
         <div className='control'>
-          <label className='checkbox'>
+          <input className='is-checkradio is-rtl' type='checkbox' id='allowDuplicates'
+            defaultChecked={ allowDuplicates }
+            onChange={ (event) => {
+              editDictionaryModal.setState({
+                allowDuplicates: event.target.checked,
+                hasChanged: event.target.checked != editDictionaryModal.props.allowDuplicates,
+              });
+            }} />
+          <label class='label is-unselectable' htmlFor='allowDuplicates'>
             Allow Duplicate Words
-            { ' ' }
-            <input type='checkbox'
-              defaultChecked={ allowDuplicates }
-              onChange={ (event) => {
-                editDictionaryModal.setState({
-                  allowDuplicates: event.target.checked,
-                  hasChanged: event.target.checked != editDictionaryModal.props.allowDuplicates,
-                });
-              }} />
           </label>
           <div className='help'>
             Checking this box will allow any number of the exact same spelling of a word to be added
@@ -50,20 +49,19 @@ export const EditSettingsForm = (props) => {
     
       <div className='field'>
         <div className='control'>
-          <label className='checkbox'
+          <input className='is-checkradio is-rtl' type='checkbox' id='caseSensitive'
-            Disabled={ allowDuplicates ? 'disabled' : null }
+            defaultChecked={ caseSensitive }
-            title={ allowDuplicates ? 'Disabled because allowing duplicates makes this unnecessary' : null}>
+            disabled={ allowDuplicates }
+            onChange={ (event) => {
+              editDictionaryModal.setState({
+                caseSensitive: event.target.checked,
+                hasChanged: event.target.checked != editDictionaryModal.props.caseSensitive,
+              });
+            }} />
+          <label className='label is-unselectable' htmlFor='caseSensitive'
+            Disabled={allowDuplicates ? 'disabled' : null}
+            title={allowDuplicates ? 'Disabled because allowing duplicates makes this unnecessary' : null}>
             Words are Case-Sensitive
-            { ' ' }
-            <input type='checkbox'
-              defaultChecked={ caseSensitive }
-              disabled={ allowDuplicates }
-              onChange={ (event) => {
-                editDictionaryModal.setState({
-                  caseSensitive: event.target.checked,
-                  hasChanged: event.target.checked != editDictionaryModal.props.caseSensitive,
-                });
-              }} />
           </label>
           <div className='help'>
             Checking this box will allow any words spelled the same but with different capitalization to be added.
@@ -73,17 +71,16 @@ export const EditSettingsForm = (props) => {
     
       <div className='field'>
         <div className='control'>
-          <label className='checkbox'>
+          <input className='is-checkradio is-rtl' type='checkbox' id='sortByDefinition'
+            defaultChecked={ sortByDefinition }
+            onChange={ (event) => {
+              editDictionaryModal.setState({
+                sortByDefinition: event.target.checked,
+                hasChanged: event.target.checked != editDictionaryModal.props.sortByDefinition,
+              });
+            }} />
+          <label className='label is-unselectable' htmlFor='sortByDefinition'>
             Sort by Definition
-            { ' ' }
-            <input type='checkbox'
-              defaultChecked={ sortByDefinition }
-              onChange={ (event) => {
-                editDictionaryModal.setState({
-                  sortByDefinition: event.target.checked,
-                  hasChanged: event.target.checked != editDictionaryModal.props.sortByDefinition,
-                });
-              }} />
           </label>
           <div className='help'>
             Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.
@@ -93,20 +90,19 @@ export const EditSettingsForm = (props) => {
     
       <div className='field'>
         <div className='control'>
-          <label className='checkbox'>
+          <input className='is-checkradio is-rtl' type='checkbox' id='isComplete'
+            defaultChecked={ isComplete }
+            onChange={ (event) => {
+              editDictionaryModal.setState({
+                isComplete: event.target.checked,
+                hasChanged: event.target.checked != editDictionaryModal.props.isComplete,
+              });
+            }} />
+          <label className='label is-unselectable' htmlFor='isComplete'>
             Mark Complete
-            { ' ' }
-            <input type='checkbox'
-              defaultChecked={ isComplete }
-              onChange={ (event) => {
-                editDictionaryModal.setState({
-                  isComplete: event.target.checked,
-                  hasChanged: event.target.checked != editDictionaryModal.props.isComplete,
-                });
-              }} />
           </label>
           <div className='help'>
-            Checking this box will mark your { specification } as "complete" and prevent any changes from being made.
+            Checking this box will mark your { specification } as 'complete' and prevent any changes from being made.
           </div>
         </div>
       </div>
@@ -115,17 +111,16 @@ export const EditSettingsForm = (props) => {
         && (
           <div className='field'>
             <div className='control'>
-              <label className='checkbox'>
+              <input className='is-checkradio is-rtl' type='checkbox' id='isPublic'
+                defaultChecked={ isPublic }
+                onChange={ (event) => {
+                  editDictionaryModal.setState({
+                    isPublic: event.target.checked,
+                    hasChanged: event.target.checked != editDictionaryModal.props.isPublic,
+                  });
+                }} />
+              <label className='label is-unselectable' htmlFor='isPublic'>
                 Make Public
-                { ' ' }
-                <input type='checkbox'
-                  defaultChecked={ isPublic }
-                  onChange={ (event) => {
-                    editDictionaryModal.setState({
-                      isPublic: event.target.checked,
-                      hasChanged: event.target.checked != editDictionaryModal.props.isPublic,
-                    });
-                  }} />
               </label>
               <div className='help'>
                 Checking this box will make your { specification } as public.

src/sass/main.scss

@@ -5,6 +5,7 @@ $fa-font-path: "~font-awesome/fonts/";
 
 @import 'bulma-overrides';
 @import '../../node_modules/bulma/bulma';
+@import '../../node_modules/bulma-checkradio/dist/bulma-checkradio';
 
 @import '../../node_modules/sweetalert2/dist/sweetalert2';
 

yarn.lock

@@ -1002,6 +1002,10 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
+bulma-checkradio@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bulma-checkradio/-/bulma-checkradio-1.0.1.tgz#21674a9aee65c48e4028594bd0f22e5b52ea5346"
+
 bulma@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"