From 5a4a9c6ff17b09b193821bcccfed5698e1030bbc Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Sun, 8 May 2022 23:15:06 +0200
Subject: [PATCH] Added links to Stylus user styles

---
 src/ui/components/Share.css | 12 ++++++++
 src/ui/components/Share.tsx | 55 +++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)

diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css
index c6f6f6d..674150b 100644
--- 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
index 2a77428..e59a02f 100644
--- 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>
   );
 };