button

src/foodTypeToggles.tsx

@@ -103,7 +103,7 @@ export class FoodTypeToggles extends Component<{
   render(): JSX.Element {
     return (
       <div>
-        <h3 class="mt-5">Toggles</h3>
+        <h3>Toggles</h3>
         <div>
           <p>Broad Toggles</p>
           <ToggleableBox
@@ -168,7 +168,7 @@ export class FoodTypeToggles extends Component<{
               this.sendChangedEvent();
             }} />
 
-          <button type="button mt-5" class="btn btn-danger" onClick={() => {
+          <button type="button" class="btn btn-danger mt-2" onClick={() => {
             this.setToDefaults();
             this.sendChangedEvent();
           }}>Reset</button>

src/mainPage.tsx

@@ -24,7 +24,6 @@ export class SettingsBlock extends Component {
   onFontChange() {
     if (!this.fontSettingSelectRef.current) return;
     let newFont = this.fontSettingSelectRef.current.value;
-    console.log(newFont);
 
     for (let font of FONT_TYPES) {
       document.body.removeAttribute(`data-font-${font[1]}`)
@@ -41,7 +40,6 @@ export class SettingsBlock extends Component {
         <label for="fontSettingSelect">Font</label>
         <select ref={this.fontSettingSelectRef} class="form-control" id="fontSettingSelect" onChange={() => this.onFontChange()}>
           {...FONT_TYPES.map((font: string[]) => {
-            console.log(`FONT: ${font}`)
             return <option value={font[0]}>{font[1]}</option>;
           })}
         </select>
@@ -61,8 +59,12 @@ export class MainPage extends Component<unknown, { toggles: FoodExcludeTypes }>
       <h1 class="mt-5">Chaos's Food Likes/Dislikes</h1>
       <p class="lead">a hopefully helpful guide on what food we like?</p>
 
+      <br />
+
       <SettingsBlock />
 
+      <br />
+
       <FoodTypeToggles onChange={(toggles) => {
         this.setState({ toggles });
       }} />