Added links to Stylus user styles

sharechess · May 8, 2022 · 5a4a9c6 · 5a4a9c6
1 parent 92e0d50
commit 5a4a9c6
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css
@@ -85,3 +85,15 @@
 .rotated {
   transform: rotate(180deg);
 }
+
+.stylus {
+  text-align: left;
+  font-size: 1.4rem;
+  margin-left: 1.5rem;
+  color: var(--color-text);
+  font-family: "Fira Mono", monospace;
+}
+
+.delimiter {
+  color: var(--color-highlight);
+}
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
@@ -323,6 +323,61 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
           </button>
         </div>
       </Show>
+      <Show
+        when={
+          !state.mobile &&
+          ["Chrome", "Firefox", "Opera"].includes(state.browser as string)
+        }
+      >
+        <hr />
+        <h2>
+          Install this style via{" "}
+          <a
+            href={
+              state.browser === "Chrome"
+                ? "https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne"
+                : state.browser === "Firefox"
+                ? "https://addons.mozilla.org/pl/firefox/addon/styl-us/"
+                : "https://addons.opera.com/pl/extensions/details/stylus/"
+            }
+            target="_blank"
+          >
+            Stylus
+          </a>
+        </h2>
+        <p class="stylus">
+          Pieces:{" "}
+          <a
+            href={`stylus/pieces/${state.boardConfig.piecesStyle}_lichess.user.css`}
+            target="_blank"
+          >
+            lichess.org
+          </a>
+          <span className="delimiter"> | </span>
+          <a
+            href={`stylus/pieces/${state.boardConfig.piecesStyle}_chesscom.user.css`}
+            target="_blank"
+          >
+            chess.com
+          </a>
+        </p>
+        <p class="stylus">
+          Board: &nbsp;
+          <a
+            href={`stylus/boards/${state.boardConfig.boardStyle}_lichess.user.css`}
+            target="_blank"
+          >
+            lichess.org
+          </a>
+          <span className="delimiter"> | </span>
+          <a
+            href={`stylus/boards/${state.boardConfig.boardStyle}_chesscom.user.css`}
+            target="_blank"
+          >
+            chess.com
+          </a>
+        </p>
+      </Show>
     </Scrollable>
   );
 };