From bdb1fb3e34962f11811801424d1a0b4f705c0231 Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Sat, 12 Mar 2022 02:39:05 +0100
Subject: [PATCH] WIP

---
 src/ui/App.css                 |  6 ++++--
 src/ui/components/Boards.css   | 13 +++++++++----
 src/ui/components/Boards.tsx   |  4 ++--
 src/ui/components/Controls.css | 18 ++++++++++++++++--
 src/ui/components/Controls.tsx | 12 ++----------
 src/ui/components/Pieces.css   |  6 ++++--
 src/ui/components/Pieces.tsx   |  1 +
 src/ui/components/Share.css    |  2 +-
 8 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/ui/App.css b/src/ui/App.css
index fba087b..cf54467 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -46,6 +46,7 @@ body {
   --color-text-dimmed: #677794;
   --color-scrollbar: rgb(0, 59, 47);
   --color-scrollbar-track: #ffffff22;
+  --color-frame-marker-active: #fff;
 }
 
 .light {
@@ -69,11 +70,12 @@ body {
   --color-text-dimmed: #767980;
   --color-scrollbar: rgb(133, 184, 173);
   --color-scrollbar-track: #00000022;
+  --color-frame-marker-active: #000;
 }
 
 button,
 .upload::before {
-  padding: 1rem;
+  padding: 0.8rem;
   font-family: "Ubuntu";
   font-size: 1.5rem;
   background: var(--color-btn);
@@ -91,7 +93,7 @@ button:hover,
 input,
 textarea {
   width: 100%;
-  padding: 1rem;
+  padding: 0.8rem;
   font-family: "Fira Mono";
   font-size: 1.4rem;
   margin-bottom: 1rem;
diff --git a/src/ui/components/Boards.css b/src/ui/components/Boards.css
index 492c5dd..e3d11a9 100644
--- a/src/ui/components/Boards.css
+++ b/src/ui/components/Boards.css
@@ -5,13 +5,18 @@
 }
 
 .boards__ico {
-  border: solid 0.5rem black;
-  margin: 0.5rem;
+  margin: 0.2rem;
   cursor: pointer;
-  width: 7.2rem;
+  width: 8.2rem;
+  height: 8.2rem;
+  padding: 0;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  border: solid 0.5rem transparent;
 }
 
 .boards__ico--active {
-  border-color: white;
   cursor: default;
+  border: solid 5px var(--color-frame-marker-active);
 }
diff --git a/src/ui/components/Boards.tsx b/src/ui/components/Boards.tsx
index 309caf4..d13c486 100644
--- a/src/ui/components/Boards.tsx
+++ b/src/ui/components/Boards.tsx
@@ -56,7 +56,7 @@ const Boards: Component<{ handlers: Handlers; class?: string }> = (props) => {
       <For each={boards()}>
         {(board) => {
           return (
-            <img
+            <div
               class={
                 "boards__ico" +
                 (state.boardConfig.boardStyle === board.key
@@ -67,7 +67,7 @@ const Boards: Component<{ handlers: Handlers; class?: string }> = (props) => {
                 setState("boardConfig", "boardStyle", board.key);
                 props.handlers.changeBoardStyle(board.key);
               }}
-              src={board.img}
+              style={{ "background-image": `url(${board.img})` }}
               title={board.name}
               draggable={false}
             />
diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css
index 94f2f03..c70f680 100644
--- a/src/ui/components/Controls.css
+++ b/src/ui/components/Controls.css
@@ -11,7 +11,17 @@
 }
 
 .controls__button {
-  margin: 0 3px;
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 3rem;
+  text-align: center;
+  width: 4.4rem;
+  height: 4.4rem;
+  border-radius: 0;
+}
+
+.flip__button {
+  margin-left: 3px;
   padding: 0.5rem;
   font-size: 3rem;
   text-align: center;
@@ -26,9 +36,13 @@
 }
 
 .controls__button--last {
-  margin-right: 0px;
+  margin-right: 3px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .controls__button--first {
   margin-left: 0px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
diff --git a/src/ui/components/Controls.tsx b/src/ui/components/Controls.tsx
index d98a2c6..9df8510 100644
--- a/src/ui/components/Controls.tsx
+++ b/src/ui/components/Controls.tsx
@@ -38,21 +38,13 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
         <i class="las la-angle-right"></i>
       </button>
       <button
-        class="controls__button"
+        class="controls__button controls__button--last"
         onClick={props.handlers.last}
         title="LAST"
       >
         <i class="las la-angle-double-right"></i>
       </button>
-      <button
-        onClick={props.handlers.flip}
-        title="FLIP"
-        classList={{
-          options__button: true,
-          "options__button--last": true,
-          "options__button--active": true,
-        }}
-      >
+      <button onClick={props.handlers.flip} title="FLIP" class="flip__button">
         <i
           classList={{
             rotated: state.boardConfig.flipped,
diff --git a/src/ui/components/Pieces.css b/src/ui/components/Pieces.css
index df05889..23bdc15 100644
--- a/src/ui/components/Pieces.css
+++ b/src/ui/components/Pieces.css
@@ -5,14 +5,16 @@
 }
 
 .pieces__ico {
-  border: solid 5px black;
+  border: solid 5px transparent;
   margin: 5px;
   cursor: pointer;
   width: 7.2rem;
+  height: 7.2rem;
   background-color: var(--color-highlight);
+  border-radius: 0.5rem;
 }
 
 .pieces__ico--active {
-  border-color: white;
+  border-color: var(--color-frame-marker-active);
   cursor: default;
 }
diff --git a/src/ui/components/Pieces.tsx b/src/ui/components/Pieces.tsx
index a24a0cf..251dceb 100644
--- a/src/ui/components/Pieces.tsx
+++ b/src/ui/components/Pieces.tsx
@@ -16,6 +16,7 @@ const Pieces: Component<{ handlers: Handlers; class?: string }> = (props) => {
       {
         <For each={pieces}>
           {(item) => (
+            // @ts-ignore
             <img
               class={
                 "pieces__ico" +
diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css
index a0e48e2..c6f6f6d 100644
--- a/src/ui/components/Share.css
+++ b/src/ui/components/Share.css
@@ -5,7 +5,7 @@
 
 .share__format,
 .share__size {
-  padding: 1rem;
+  padding: 0.8rem;
   border-radius: 0;
   margin-bottom: 1rem;
   opacity: 0.5;