From 6e9ef9d3d6ccf4a3bcefb42db5cd2253f8f579b1 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Thu, 16 Mar 2023 14:21:30 +0100
Subject: [PATCH] fix window focus

---
 src/App.js                       |  4 ++++
 src/components/SettingsModal.jsx | 36 +++++++++++---------------------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/App.js b/src/App.js
index 549b26ba..bc9a9ec8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,10 @@ import { ToastContainer } from 'react-toastify';
 
 
 const GlobalStyle = createGlobalStyle`
+  *:focus {
+    outline: none;
+  }
+  
   body {
     margin: 0;
     padding: 0;
diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index db3c0bf1..7f5f0107 100644
--- a/src/components/SettingsModal.jsx
+++ b/src/components/SettingsModal.jsx
@@ -5,24 +5,6 @@ import styled from "styled-components";
 import useBoardStore from "../useBoardStore";
 
 const StyledModal = styled(Modal)`
-  .modal-content {
-    width: 400px;
-    height: 800px;
-    display: flex;
-    align-self: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: rgba(0, 0, 0, 0.85);
-    padding: 0;
-    z-index: 9999;
-    border: 1px solid #aaa;
-  }
-
   .panel {
     top: 60px;
     width: 330px;
@@ -64,7 +46,8 @@ const StyledModal = styled(Modal)`
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `.panel {
+        return `
+        .panel {
           background-color: #f0e0d6;
         }
 
@@ -77,7 +60,8 @@ const StyledModal = styled(Modal)`
         }`;
 
       case 'Yotsuba-B':
-        return `.panel {
+        return `
+        .panel {
           background-color: #d6daf0;
         }
         
@@ -90,7 +74,8 @@ const StyledModal = styled(Modal)`
         }`;
 
       case 'Futaba':
-        return `.panel {
+        return `
+        .panel {
           background-color: #f0e0d6;
         }
 
@@ -103,7 +88,8 @@ const StyledModal = styled(Modal)`
         }`;
 
       case 'Burichan':
-        return `.panel {
+        return `
+        .panel {
           background-color: #d6daf0;
         }
         
@@ -116,7 +102,8 @@ const StyledModal = styled(Modal)`
         }`;
 
       case 'Tomorrow':
-        return `.panel {
+        return `
+        .panel {
           background-color: #282a2e;
         }
         
@@ -129,7 +116,8 @@ const StyledModal = styled(Modal)`
         }`;
 
       case 'Photon':
-        return `.panel {
+        return `
+        .panel {
           background-color: #ddd;
         }