Improve bookmark editor style (#173)

int128 · Aug 22, 2022 · 89fc076 · 89fc076
1 parent 8192561
commit 89fc076
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/BookmarkEditor/component.css b/src/BookmarkEditor/component.css
@@ -10,6 +10,8 @@
   top: calc(var(--size-wide-gap) * 2);
   left: calc(var(--size-wide-gap) * 2);
   right: calc(var(--size-wide-gap) * 2);
+  max-width: 800px;
+  margin: auto;
 }
 
 .BookmarkEditor__Overlay {
@@ -39,9 +41,13 @@
 .BookmarkEditor input[type='text'] {
   padding: var(--size-form-control-padding);
   border-radius: var(--size-form-control-border-radius);
+  border: var(--palette-1) solid 1px;
   color: inherit;
   background-color: var(--palette-2);
-  border: none;
+}
+
+.BookmarkEditor input[type='text']:focus {
+  background-color: var(--palette-3);
 }
 
 .BookmarkEditor input[type='text'].BookmarkEditor__Url {
@@ -55,9 +61,9 @@
 .BookmarkEditor input[type='submit'] {
   padding: var(--size-form-control-padding);
   border-radius: var(--size-form-control-border-radius);
+  border: var(--palette-1) solid 1px;
   color: inherit;
   background-color: var(--palette-2);
-  border: none;
 }
 
 .BookmarkEditor input[type='button']:enabled:hover,
@@ -70,6 +76,10 @@
   color: var(--palette-1);
 }
 
+.BookmarkEditor input[type='button'][value='Remove']:hover {
+  color: red;
+}
+
 .BookmarkEditor__Message {
   padding: var(--size-form-control-padding);
   color: var(--palette-03);

diff --git a/src/BookmarkEditor/component.tsx b/src/BookmarkEditor/component.tsx
@@ -114,14 +114,14 @@ const FormComponent: FC<FormComponentProps> = ({
         placeholder="Shortcut Key (not assigned)"
         onChange={(e) => onChange(editingBookmark.changeShortcutKey(shortcutKeyOf(e.target.value)))}
       />
+      <Link href={`chrome://bookmarks/?id=${editingBookmark.bookmark.folderID}`}>
+        Open this in Chrome Bookmark Manager
+      </Link>
       <div className="BookmarkEditor__Group">
         <input type="submit" value="Update" disabled={!editingBookmark.valid} />
         <div className="BookmarkEditor__Message">{errorMessage}</div>
         <input type="button" value="Remove" onClick={() => onRemove()} />
       </div>
-      <Link href={`chrome://bookmarks/?id=${editingBookmark.bookmark.folderID}`}>
-        Open this in Chrome Bookmark Manager
-      </Link>
     </form>
   )
 }