WIP

src/ui/App.css

@@ -70,19 +70,6 @@ body {
   --color-scrollbar-track: #00000022;
 }
 
-.upload {
-  visibility: hidden;
-  padding: 0;
-}
-
-.upload::before {
-  content: "UPLOAD PGN FILE";
-  visibility: visible;
-  display: inline-block;
-  text-align: center;
-  box-sizing: border-box;
-}
-
 button,
 .upload::before {
   padding: 1rem;

src/ui/components/Load.tsx

@@ -1,6 +1,7 @@
-import { Component, createSignal } from "solid-js";
+import { Component, createSignal, Show } from "solid-js";
 import { Handlers } from "../../types";
 import readFile from "../../utils/readFile";
+import { state } from "../../state";
 import "./Load.css";
 
 const Load: Component<{ handlers: Handlers }> = (props) => {
@@ -8,6 +9,8 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
   const [pgn, setPGN] = createSignal("");
   const [link, setLink] = createSignal("");
 
+  let filePicker: HTMLInputElement | undefined = undefined;
+
   return (
     <div class="load">
       <input
@@ -73,9 +76,10 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
       </button>
       <hr />
       <input
-        class="upload load__pgn-file"
+        style={{ display: "none" }}
         type="file"
         accept="application/vnd.chess-pgn,application/x-chess-pgn,.pgn"
+        ref={filePicker}
         onChange={async (e) => {
           const target = e.target as HTMLInputElement;
           if (target?.files && target.files.length > 0) {
@@ -84,10 +88,23 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
           }
         }}
       ></input>
+      <button
+        class="load__pgn-btn load__pgn-file"
+        onClick={() => {
+          if (filePicker) {
+            filePicker.click();
+          }
+        }}
+      >
+        UPLOAD PGN FILE
+      </button>
+
+      <Show when={!state.mobile}>
         <div className="load__pgn-file-info">
           <p>or</p>
           <p>drop the PGN file anywhere on the page</p>
         </div>
+      </Show>
     </div>
   );
 };

src/ui/components/Share.tsx

@@ -123,7 +123,6 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
             {copyId() === "fen-link" ? "Copied!" : "Copy link"}
           </button>
         </div>
-        <Show when={!state.mobile}>
         <hr class="invisible" />
         <button
           classList={{
@@ -182,7 +181,6 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
         >
           {imageRendering() ? "Please wait..." : "Save as image"}
         </button>
-        </Show>
       </div>
       <Show when={state.pgn}>
         <hr />
@@ -244,7 +242,6 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
             </button>
           </div>
         </div>
-        <Show when={!state.mobile}>
         <div class="share__animation">
           <hr className="invisible" />
           <button
@@ -335,7 +332,6 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           </button>
         </div>
       </Show>
-      </Show>
     </Scrollable>
   );
 };