Docs: update readme and app logo (#587)

Co-authored-by: Jonghakseo <jonghak.seo@creatrip.com>

README.md

@@ -1,10 +1,11 @@
 <div align="center">
-<img src="chrome-extension/public/icon-128.png" alt="logo"/>
-<h1> Chrome Extension Boilerplate with<br/>React + Vite + TypeScript</h1>
+
+![](https://github.com/user-attachments/assets/9f98908b-128b-4fd8-9a1e-17a17a3169fb)
 
 ![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
 ![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)
 ![](https://badges.aleen42.com/src/vitejs.svg)
+
 ![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg)
 <img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://github.com/Jonghakseo/chrome-extension-boilerplate-react-viteFactions&count_bg=%23#222222&title_bg=%23#454545&title=😀&edge_flat=true" alt="hits"/>
 
@@ -13,13 +14,13 @@
 
 </div>
 
-> [!TIP]
+> [!NOTE]
 > This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)
 
-> [!IMPORTANT]
+> [!TIP]
 > Share storage state between every page
 >
-> https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/assets/53500778/1992e46c-032a-4743-bbd2-c421757517d7
+> https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c
 
 ## Table of Contents
 

pages/devtools-panel/src/Panel.css

@@ -5,17 +5,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 2rem;
 }
 
 .App-logo {
-  height: 30vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  height: 40vmin;
 }
 
 .App-header {
@@ -25,18 +19,10 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+code {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
 }

pages/devtools-panel/src/Panel.tsx

@@ -5,26 +5,16 @@ import { ComponentPropsWithoutRef } from 'react';
 
 const Panel = () => {
   const theme = useStorageSuspense(exampleThemeStorage);
+  const isLight = theme === 'light';
+  const logo = isLight ? 'devtools-panel/logo_horizontal.svg' : 'devtools-panel/logo_horizontal_dark.svg';
 
   return (
-    <div
-      className="App"
-      style={{
-        backgroundColor: theme === 'light' ? '#eee' : '#222',
-      }}>
-      <header className="App-header" style={{ color: theme === 'light' ? '#222' : '#eee' }}>
-        <img src={chrome.runtime.getURL('devtools-panel/logo.svg')} className="App-logo" alt="logo" />
+    <div className={`App ${isLight ? 'bg-slate-50' : 'bg-gray-800'}`}>
+      <header className={`App-header ${isLight ? 'text-gray-900' : 'text-gray-100'}`}>
+        <img src={chrome.runtime.getURL(logo)} className="App-logo" alt="logo" />
         <p>
-          Edit <code>pages/devtools-panel/src/Panel.tsx</code> and save to reload.
+          Edit <code>pages/devtools-panel/src/Panel.tsx</code>
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ color: theme === 'light' ? '#0281dc' : undefined, marginBottom: '10px' }}>
-          Learn React!
-        </a>
         <ToggleButton>Toggle theme</ToggleButton>
       </header>
     </div>