Tweaks to sidebar styling

components/PluginTxtEditor.tsx

@@ -37,7 +37,7 @@ const PluginsLoader: React.FC<Props> = () => {
         Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
         enable the loaded plugins by your current load order.
       </p>
-      <button onClick={onPluginsTxtButtonClick}>
+      <button onClick={onPluginsTxtButtonClick} className={styles.button}>
         {!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
       </button>
       {typeof window !== "undefined" &&

components/PluginsList.tsx

@@ -29,7 +29,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
 
   return (
     <>
-      {selectedCell && plugins.length > 0 && <h2>Loaded Plugins</h2>}
+      {plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
       <ol className={styles["plugin-list"]}>
         {plugins.map((plugin) => (
           <li key={plugin.filename} title={plugin.filename}>
@@ -55,7 +55,6 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
                 </Link>
               )}
             </label>
-            {/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
           </li>
         ))}
       </ol>

components/Sidebar.tsx

@@ -73,7 +73,7 @@ const Sidebar: React.FC<Props> = ({
     if (lastModified) {
       return (
         <div className={styles["sidebar-modified-date"]}>
-          <strong>Last updated:</strong>{" "}
+          <strong>Site last updated:</strong>{" "}
           {formatRelative(new Date(lastModified), new Date())}
         </div>
       );
@@ -147,7 +147,7 @@ const Sidebar: React.FC<Props> = ({
           style={!open ? { display: "none" } : {}}
         >
           <div className={styles["sidebar-content"]}>
-            <h2>Modmapper</h2>
+            <h1 className={styles.title}>Modmapper</h1>
             <p className={styles.subheader}>
               An interactive map of Skyrim mods.
             </p>

styles/PluginTxtEditor.module.css

@@ -21,3 +21,7 @@
   display: flex;
   justify-content: space-between;
 }
+
+.button {
+  margin-bottom: 24px;
+}

styles/Sidebar.module.css

@@ -34,6 +34,10 @@
   justify-content: right;
 }
 
+.title {
+  font-size: 1.75rem;
+}
+
 .close {
   display: block;
   font-size: 24px;