WIP

src/ui/components/Share.tsx

@@ -19,24 +19,6 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
     <Scrollable class={"share" + (props.class ? ` ${props.class}` : "")}>
       <div className="share__view">
         <h2 class="header--first">Board options</h2>
-        <button
-          onClick={props.handlers.flip}
-          title="FLIP"
-          classList={{
-            options__button: true,
-            "options__button--first": true,
-            "options__button--active": true,
-          }}
-        >
-          <i
-            classList={{
-              rotated: state.boardConfig.flipped,
-              las: true,
-              "la-sync": true,
-              rotatable: true,
-            }}
-          ></i>
-        </button>
         <button
           classList={{
             options__button: true,
@@ -78,7 +60,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         <button
           classList={{
             options__button: true,
-            "options__button--last": true,
+            "options__button--last": false,
             "options__button--active": state.anonymous,
           }}
           onClick={props.handlers.toggleAnonymous}
@@ -86,6 +68,19 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         >
           <i class="las la-user-secret"></i>
         </button>
+        <button
+          classList={{
+            options__button: true,
+            "options__button--last": true,
+            "options__button--active": state.boardConfig.showShadows,
+          }}
+          onClick={props.handlers.toggleShadows}
+          title={
+            state.boardConfig.showShadows ? "HIDE SHADOWS" : "SHOW SHADOWS"
+          }
+        >
+          <i class="las la-cloud"></i>
+        </button>
       </div>
       <hr />
       <div className="share__fen">