Merge pull request #377 from willerbee/Display-Theme-Below-The-Version

Display theme below the version

public/css/style.scss

@@ -1090,17 +1090,41 @@ key {
   line-height: 1rem;
   font-size: 0.75rem;
   color: var(--sub-color);
-  transition: 0.5s;
+  transition: 0.25s;
+  padding: 0 5px;
 
   // margin-bottom: 2rem;
   .keyTips {
     margin-bottom: 1rem;
   }
 
+  .leftright{
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+    .left{
+      text-align: left;
+    }
+    .right{
+      text-align: right;
+      // display: flex;
+      // gap: 1rem;
+      // align-items: center;
+      // justify-content: flex-end;
+      .discordLink{
+        transition: .25s;
+        text-decoration: none;
+        &:hover{
+          color: var(--main-color);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .version {
     opacity: 0;
-    transition: 0.25s;
-
+    transition: .25s;
     &:hover {
       cursor: pointer;
       color: var(--main-color);

public/index.html

@@ -2887,31 +2887,41 @@
           <key>esc</key>
           - command line
         </div>
-        <div>
-          Crafted with &lt;3 by
-          <a
-            tabindex="0"
-            href="https://www.reddit.com/message/compose?to=Miodec"
-            target="_blank"
-          >
-            Miodec
-          </a>
+        <div class="leftright">
+          <div class="left">
+            <div>
+              Crafted with &lt;3 by Miodec
+            </div>
+            <div>
+              Contribute on
+              <a
+              href="https://github.com/Miodec/monkey-type"
+              target="_blank">GitHub</a>
+            </div>
+            <div>
+              Support on
+              <a href="https://www.patreon.com/monkeytype">Patreon</a>
+              or by
+              <a href="https://www.paypal.me/jackbartnik" target="_blank">
+                donating
+              </a>
+            </div>
+          </div>
+          <div class="right">
+            <div>
+              <i class="fas fa-palette"></i>
+              <span class="current-theme">current theme</span>
+            </div>
+            <div>
+              <i class="fab fa-discord"></i>
+              <a href="https://www.discord.gg/monkeytype" class="discordLink">discord.gg/monkeytype</a>
+            </div>
+            <div>
+              <i class="fas fa-code-branch"></i>
+              <span class="version">version</span>
+            </div>
+          </div>
         </div>
-        <div>
-          Contribute on
-          <a
-          href="https://github.com/Miodec/monkey-type"
-          target="_blank">GitHub</a>
-        </div>
-        <div>
-          Support on
-          <a href="https://www.patreon.com/monkeytype">Patreon</a>
-          or by
-          <a href="https://www.paypal.me/jackbartnik" target="_blank">
-            donating
-          </a>
-        </div>
-        <div class="version">version</div>
       </div>
     </div>
   </body>

public/js/userconfig.js

@@ -837,6 +837,7 @@ function setTheme(name, nosave) {
   config.theme = name;
   $(".keymap-key").attr("style", "");
   $("#currentTheme").attr("href", `themes/${name}.css`);
+  $(".current-theme").text(name.replace('_',' '));
   setTimeout(() => {
     updateFavicon(32, 14);
   }, 500);