feat: reload button

jebibot · Feb 2, 2024 · f6e2d63 · f6e2d63
1 parent aaf787f
commit f6e2d63
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 17 deletions.
diff --git a/styles.css b/styles.css
@@ -3,7 +3,6 @@ body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
   font-size: 16px;
   word-break: keep-all;
   color: #2c2c2c;
@@ -17,22 +16,39 @@ input {
   margin-right: 0.5rem;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  margin: 0.75rem;
-  border: 1px solid black;
-  border-radius: 0.5rem;
+svg {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.25rem;
+  fill: currentColor;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+  border-width: 0;
+  border-radius: 0.25rem;
+  font-weight: bold;
+  color: #fafafa;
+  background-color: #18181b;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #18181be6;
 }
 
-.header,
-.footer {
+header {
   font-weight: bold;
 }
 
-.header a {
+header a {
   display: inline-block;
   text-decoration: none;
   width: 1.5rem;
@@ -43,12 +59,26 @@ input {
   text-align: center;
 }
 
-.header a:hover {
+header a:hover {
   background-color: #ccc;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  margin: 0.75rem;
+  border: 1px solid black;
+  border-radius: 0.5rem;
+}
+
 #list {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
+
+#reload {
+  display: none;
+}
diff --git a/styles.html b/styles.html
@@ -8,12 +8,19 @@
   </head>
   <body>
     <div class="container">
-      <div class="header">
+      <header>
         <a href="/popup.html">&lt;</a>
         스타일
-      </div>
+      </header>
       <div id="list"></div>
-      <div class="footer">변경 사항은 새로고침 후 적용됩니다.</div>
+      <button id="reload">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path
+            d="M369.1 142.9L312 200l24 24H496V64L472 40 414.4 97.6l0 0c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0l-45.3-45.3c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0l0 0z"
+          />
+        </svg>
+        새로고침 후 적용
+      </button>
     </div>
     <script src="styles.js"></script>
   </body>

diff --git a/styles.js b/styles.js
@@ -69,10 +69,16 @@ const STYLES = [
   },
 ];
 
+const list = document.getElementById("list");
+const reload = document.getElementById("reload");
+reload.addEventListener("click", () => {
+  reload.style.display = "none";
+  chrome.tabs.reload();
+});
+
 (async () => {
   const { styles } = await chrome.storage.local.get({ styles: [] });
   const stylesSet = new Set(styles);
-  const list = document.getElementById("list");
   for (const style of STYLES) {
     const item = document.createElement("div");
     list.appendChild(item);
@@ -88,6 +94,7 @@ const STYLES = [
         stylesSet.delete(style.name);
       }
       await chrome.storage.local.set({ styles: [...stylesSet] });
+      reload.style.display = "inline-flex";
     });
     item.appendChild(checkbox);