レイアウト修正

TsukemonoGit · Jun 2, 2024 · 910f247 · 910f247
1 parent 95c11ba
commit 910f247
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 34 deletions.
diff --git a/entrypoints/components/CopyButton.tsx b/entrypoints/components/CopyButton.tsx
@@ -74,7 +74,7 @@ export default function CopyButton({ text, style }: CopyButtonProps) {
       </span>
       <Button
         onClick={copy}
-        class="copyButton"
+        class="nakeCopyButton"
         style={{
           "margin-left": "4px",
           padding: "0 2px ",

diff --git a/entrypoints/components/MenuComponent.tsx b/entrypoints/components/MenuComponent.tsx
@@ -272,7 +272,7 @@ export default function MenuComponent(props: {
                   NAKE
                 </div>
                 <button
-                  id="batuButton"
+                  id="nakeBatuButton"
                   style={{
                     padding: "0",
                     "align-self": "end",

diff --git a/entrypoints/components/RelayHints.tsx b/entrypoints/components/RelayHints.tsx
@@ -1,5 +1,12 @@
 import { className, relayRegex } from "@/util";
-import { Accessor, For, Setter, Show, createSignal } from "solid-js";
+import {
+  Accessor,
+  For,
+  Setter,
+  Show,
+  createMemo,
+  createSignal,
+} from "solid-js";
 
 export default function RelayHints({
   setRelayHints,
@@ -37,7 +44,11 @@ export default function RelayHints({
       handleClickAdd();
     }
   };
-
+  const inputStyle = createMemo(() => {
+    return invalid()
+      ? { border: "1px solid #ff8080" }
+      : { border: "1px solid #8caeff" };
+  });
   return (
     <>
       <span
@@ -54,7 +65,7 @@ export default function RelayHints({
         >
           <For each={relayHints()}>
             {(item, index) => (
-              <div class={`${className} relay`}>
+              <div class={`${className} nakeRelay`}>
                 {item}
                 <button
                   class={`${className}`}
@@ -77,15 +88,16 @@ export default function RelayHints({
         }}
       >
         <input
-          id="input"
-          class={`${className} ${invalid() ? "invalidInput" : "relayInput"} `}
+          id="nakeInput"
+          class={`${className}`}
+          style={inputStyle()}
           placeholder="wss://"
           type="text"
           value={inputRelayHint()}
           onInput={(e) => setInputRelayHint(e.currentTarget.value)}
           onKeyDown={handleKeyDown}
         ></input>
-        <button class={`${className} hint`} onClick={handleClickAdd}>
+        <button class={`${className} nakeHint`} onClick={handleClickAdd}>
           Add
         </button>
       </div>

diff --git a/entrypoints/content/style.css b/entrypoints/content/style.css
@@ -12,7 +12,7 @@
 .nake button {
   border: none;
 }
-.relay {
+.nakeRelay {
   border-radius: 8px;
   border: 1px solid transparent;
   margin: 2px;
@@ -22,7 +22,7 @@
   font-size: smaller;
   height: fit-content;
 }
-.hint {
+.nakeHint {
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: medium;
@@ -39,45 +39,39 @@
   width: "fit-content";
   transition: 0.2s;
 }
-.hint:hover {
+.nakeHint:hover {
   background-color: #5789ff;
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.35);
 }
-.hint:active {
+.nakeHint:active {
   transform: scale(0.98);
 }
-.hint:focus,
-.hint:focus-visible {
+.nakeHint:focus,
+.nakeHint:focus-visible {
 }
 
-#input {
+#nakeInput {
   padding: 0 2px !important;
   border-radius: 4px !important;
-  border: 1px solid #8caeff !important;
+
   background-color: #fff !important;
   color: #000 !important;
   height: 2em !important;
   font-size: medium;
 }
-#input::placeholder {
+#nakeInput::placeholder {
   opacity: 0.5;
 }
-.relayInput {
-  border-color: #8caeff;
-}
-.invalidInput {
-  border-color: #ff8080 !important;
-}
 
-.copyButton {
+.nakeCopyButton {
   background-color: rgba(0, 0, 0, 0);
 }
-.copyButton:hover {
+.nakeCopyButton:hover {
   opacity: 0.75;
 }
-#batuButton {
+#nakeBatuButton {
   background-color: rgba(0, 0, 0, 0);
 }
-#batuButton:hover {
+#nakeBatuButton:hover {
   opacity: 0.75;
 }
diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx
@@ -73,6 +73,7 @@ function App() {
         NAKE
       </h2>
       <input
+        class={"nakeInput"}
         style={{ margin: "1em 0", "min-width": "350px", "max-width": "90vw" }}
         type="text"
         placeholder="hex or note1,npub1,..."

diff --git a/entrypoints/popup/style.css b/entrypoints/popup/style.css
@@ -68,12 +68,9 @@ button:active {
     background-color: #f9f9f9;
   }
 }
-input {
-  height: 1.5em;
-}
 
-.invalidInput {
+input {
+  padding: 0.5em;
   border-radius: 4px;
-  border: 1px solid #ff8080;
-  padding: 2px;
+  border: 1px solid #aaa;
 }
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "nake",
   "description": "Nostr Army Knife webExtension",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "wxt",