WIP

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;

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);
 }

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}
             />

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;
 }

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,

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;
 }

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" +

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;