From fdd65e926a3d7d38e4d874029530ef54a6370b45 Mon Sep 17 00:00:00 2001
From: wooferzfg <spapushin@gmail.com>
Date: Fri, 6 Mar 2020 00:34:38 -0600
Subject: [PATCH] Fix sidebar spacing

---
 src/css/SideBarContent.scss | 33 ++++++++++++++++++++++-----------
 src/ui/SideBarContent.tsx   | 16 ++++++++--------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/css/SideBarContent.scss b/src/css/SideBarContent.scss
index eca6486..2d43e55 100644
--- a/src/css/SideBarContent.scss
+++ b/src/css/SideBarContent.scss
@@ -1,6 +1,8 @@
 @import 'Toggle';
 @import 'variables';
 
+$header-font-size: 24px;
+
 .sidebar-overlay {
   z-index: 3 !important;
 }
@@ -13,17 +15,6 @@
 
   @include toggle;
 
-  > div > hr {
-    border-color: $border-color;
-    margin: ($ui-large-margin - $ui-margin / 2) 0;
-  }
-
-  > div > h2 {
-    font-size: 1.5em;
-    text-align: center;
-    height: 20px;
-  }
-
   > div > div.small > button {
     width: 50%;
     height: 40px;
@@ -31,6 +22,26 @@
   }
 
   .sidebar-buttons {
+    hr {
+      border-color: $border-color;
+      margin: ($ui-large-margin - $ui-margin / 2) 0;
+
+      &.livesplit-title-separator {
+        margin-top: 0;
+      }
+    }
+
+    h1, h2 {
+      font-size: $header-font-size;
+      text-align: center;
+      margin-top: $ui-large-margin;
+      margin-bottom: $ui-large-margin;
+    }
+
+    h2 {
+      margin-bottom: $ui-large-margin - $ui-margin / 2;
+    }
+
     > button {
       width: 100%;
       height: 40px;
diff --git a/src/ui/SideBarContent.tsx b/src/ui/SideBarContent.tsx
index 37bda20..327765e 100644
--- a/src/ui/SideBarContent.tsx
+++ b/src/ui/SideBarContent.tsx
@@ -65,7 +65,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.Splits: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>Splits</h2>
+                        <h1>Splits</h1>
                         <hr />
                         <button onClick={(_) => this.props.callbacks.openRunEditor()}>
                             <i className="fa fa-edit" aria-hidden="true" /> Edit
@@ -99,7 +99,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.RunEditor: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>Splits Editor</h2>
+                        <h1>Splits Editor</h1>
                         <hr />
                         <div className="small">
                             <button
@@ -122,7 +122,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.Layout: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>Layout</h2>
+                        <h1>Layout</h1>
                         <hr />
                         <button onClick={(_) => this.props.callbacks.openLayoutEditor()}>
                             <i className="fa fa-edit" aria-hidden="true" /> Edit
@@ -150,7 +150,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.LayoutEditor: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>Layout Editor</h2>
+                        <h1>Layout Editor</h1>
                         <hr />
                         <div className="small">
                             <button
@@ -173,7 +173,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.SettingsEditor: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>Settings</h2>
+                        <h1>Settings</h1>
                         <hr />
                         <div className="small">
                             <button
@@ -196,7 +196,7 @@ export class SideBarContent extends React.Component<Props, State> {
             case MenuKind.About: {
                 sidebarContent = (
                     <div className="sidebar-buttons">
-                        <h2>About</h2>
+                        <h1>About</h1>
                         <hr />
                         <button onClick={(_) => this.props.callbacks.openTimerView(true)}>
                             <i className="fa fa-caret-left" aria-hidden="true" /> Back
@@ -212,9 +212,9 @@ export class SideBarContent extends React.Component<Props, State> {
                             <span className="livesplit-icon">
                                 <img src={LiveSplitIcon} alt="LiveSplit Logo" />
                             </span>
-                            <h2> LiveSplit One</h2>
+                            <h1> LiveSplit One</h1>
                         </div>
-                        <hr />
+                        <hr className="livesplit-title-separator" />
                         <button onClick={(_) => this.props.callbacks.openSplitsView()}>
                             <i className="fa fa-list" aria-hidden="true" /> Splits
                         </button>