chore: ui style improvements

Increase padding and unified appearance.
0x04 · Sep 26, 2024 · 8fafeaf · 8fafeaf
1 parent 4f27e69
commit 8fafeaf
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 253 deletions.
diff --git a/src/components/palette-editor.mjs b/src/components/palette-editor.mjs
@@ -32,15 +32,17 @@ export class PaletteEditor {
 
     btnEdit.classList.add(
       'emoji-paint__palette-editor-btn-edit',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon',
+      'radius--left'
     )
     btnEdit.title = 'Edit palette'
     btnEdit.textContent = '✏️'
     btnEdit.addEventListener('click', this.onBtnEditClick)
 
     btnReset.classList.add(
       'emoji-paint__palette-editor-btn-reset',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon',
+      'radius--right'
     )
     btnReset.title = 'Reset palette'
     btnReset.textContent = '🧹'

diff --git a/src/components/toolbar-top.mjs b/src/components/toolbar-top.mjs
@@ -31,13 +31,16 @@ export class ToolbarTop extends Toolbar {
     label.classList.add('emoji-paint__toolbar-label')
     label.innerText = 'Size'
 
+    inputWidth.classList.add('radius--left')
     inputWidth.type = inputHeight.type = 'number'
     inputWidth.value = this.paint.width
+    inputHeight.classList.add('radius--middle')
     inputHeight.value = this.paint.height
 
     btnResize.classList.add(
       'emoji-paint__toolbar-top-btn-resize',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon',
+      'radius--right'
     )
     btnResize.title = 'Resize Canvas'
     btnResize.innerText = '📐'
@@ -59,7 +62,7 @@ export class ToolbarTop extends Toolbar {
 
     btnClear.classList.add(
       'emoji-paint__toolbar-top-btn-clear',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon'
     )
     btnClear.title = 'Clear Canvas'
     btnClear.innerText = '💥️'
@@ -75,7 +78,7 @@ export class ToolbarTop extends Toolbar {
 
     btnCopy.classList.add(
       'emoji-paint__toolbar-top-btn-copy',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon'
     )
     btnCopy.title = 'Copy to Clipboard'
     btnCopy.innerText = '📋'
@@ -91,7 +94,8 @@ export class ToolbarTop extends Toolbar {
 
     btnDownload.classList.add(
       'emoji-paint__toolbar-top-btn-download',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon',
+      'radius--left'
     )
     btnDownload.title = 'Download'
     btnDownload.innerText = '⬇️'
@@ -135,8 +139,10 @@ export class ToolbarTop extends Toolbar {
 
     labelUpload.classList.add(
       'emoji-paint__toolbar-top-label-upload',
-      'emoji-paint__icon-btn'
+      'emoji-paint__btn-icon',
+      'radius--right'
     )
+    labelUpload.title = 'Upload'
     labelUpload.append('⬆️', btnUpload)
 
     this.attachItem('btnUpload', labelUpload)