UI experience tweaks

components/CellModList.tsx

@@ -34,7 +34,7 @@ const CellModList: React.FC<Props> = ({ mods, counts }) => {
   return (
     mods && (
       <>
-        <h2>Mods ({modsWithCounts.length})</h2>
+        <h2>Nexus Mods ({modsWithCounts.length})</h2>
         <ul className={styles["mod-list"]}>
           {modsWithCounts
             .sort((a, b) => b.unique_downloads - a.unique_downloads)

components/DataDirPicker.tsx

@@ -47,9 +47,12 @@ const DataDirPicker: React.FC<Props> = () => {
   return (
     <>
       <p className={styles["no-top-margin"]}>
-        Select or drag-and-drop your <code>Data</code> directory below to load
+        Select or drag-and-drop your{" "}
-        the plugins and see all of the cell edits and conflicts for your current
+        <strong>
-        mod load order.
+          <code>Data</code>
+        </strong>{" "}
+        directory below to load the plugins and see all of the cell edits and
+        conflicts for your current mod load order.
       </p>
       <input
         type="file"

components/PluginModList.tsx

@@ -37,7 +37,7 @@ const PluginModList: React.FC<Props> = ({ mods, files, counts }) => {
   return (
     mods && (
       <>
-        <h2>Mods ({modsWithCounts.length})</h2>
+        <h2>Nexus Mods ({modsWithCounts.length})</h2>
         <ul className={styles["mod-list"]}>
           {modsWithCounts
             .sort((a, b) => b.unique_downloads - a.unique_downloads)

components/PluginTxtEditor.tsx

@@ -34,8 +34,15 @@ const PluginsLoader: React.FC<Props> = () => {
   return (
     <>
       <p>
-        Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
+        Paste or drag-and-drop your{" "}
-        enable the loaded plugins by your current load order.
+        <strong>
+          <code>plugins.txt</code>
+        </strong>{" "}
+        below to sort and enable the loaded plugins by your current load order.
+        The plugins.txt file is typically found at{" "}
+        <strong>
+          <code>%LOCALAPPDATA%\Skyrim Special Edition\plugins.txt</code>
+        </strong>
       </p>
       <button onClick={onPluginsTxtButtonClick} className={styles.button}>
         {!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
@@ -46,10 +53,16 @@ const PluginsLoader: React.FC<Props> = () => {
             <h3>Paste plugins.txt</h3>
             <p>
               The plugins.txt file is typically found at{" "}
-              <code>
+              <strong>
-                C:\Users\username\AppData\Local\Skyrim Special Edition
+                <code>
-              </code>
+                  C:\Users\username\AppData\Local\Skyrim Special Edition
-              . You can also drag-and-drop the file anywhere on the window to
+                </code>
+              </strong>{" "}
+              (or{" "}
+              <strong>
+                <code>%LOCALAPPDATA%\Skyrim Special Edition</code>
+              </strong>
+              ) . You can also drag-and-drop the file anywhere on the window to
               load the file.
             </p>
             <textarea

styles/CellData.module.css

@@ -1,4 +1,5 @@
 .cell-data-list {
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }

styles/CellModList.module.css

@@ -1,6 +1,7 @@
 .mod-list {
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }
 
 .mod-list-item {

styles/ModCellList.module.css

@@ -1,6 +1,7 @@
 .cell-list {
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }
 
 .cell-list-item {

styles/PluginList.module.css

@@ -1,6 +1,7 @@
 .plugin-list {
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }
 
 .plugin-list li {
@@ -50,6 +51,7 @@
   padding-right: 12px;
   padding-left: 12px;
   justify-content: space-evenly;
+  margin-bottom: 12px;
 }
 
 .buttons button {

styles/PluginModList.module.css

@@ -1,6 +1,7 @@
 .mod-list {
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }
 
 .mod-list-item {
@@ -14,6 +15,7 @@
 .file-list {
   list-style-type: none;
   padding-left: 8px;
+  margin-top: 0;
 }
 
 .file-list li {