feat(viewer): Update style of toolbar

The style is intentionally non-dynamic.
cozy · Jan 15, 2025 · 99b7fc8 · 99b7fc8
1 parent 193a69d
commit 99b7fc8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/packages/cozy-viewer/src/ViewersByFile/PdfJsViewer.jsx b/packages/cozy-viewer/src/ViewersByFile/PdfJsViewer.jsx
@@ -24,12 +24,7 @@ let timeoutOpacity
 const makeInputPageStyle = nbPages => {
   const maxWidth = Math.max(1, String(Math.abs(nbPages)).length - 1)
   return {
-    maxWidth: `${maxWidth}rem`,
-    marginRight: '0.25rem',
-    textAlign: 'center',
-    backgroundColor: 'var(--charcoalGrey)',
-    border: '2px solid var(--borderMainColor)',
-    borderRadius: '5px'
+    maxWidth: `${maxWidth}.5rem`
   }
 }
 
@@ -278,18 +273,22 @@ export class PdfJsViewer extends Component {
                   disabled={currentPage === 1}
                   label={t('Viewer.previous')}
                 />
-                <input
-                  ref={this.inputRef}
-                  type="text"
-                  inputMode="numeric"
-                  style={makeInputPageStyle(totalPages)}
-                  value={pageInputValue}
-                  onChange={this.handleInputPageChange}
-                  onKeyDown={this.handleInputPageKeyDown}
-                  onFocus={this.handleInputPageFocus}
-                  onBlur={this.handleInputPageBlur}
-                />
-                /{totalPages}
+                <label htmlFor="input-page">
+                  <input
+                    ref={this.inputRef}
+                    id="input-page"
+                    className={styles['viewer-pdfviewer-input-page']}
+                    type="text"
+                    inputMode="numeric"
+                    style={makeInputPageStyle(totalPages)}
+                    value={pageInputValue}
+                    onChange={this.handleInputPageChange}
+                    onKeyDown={this.handleInputPageKeyDown}
+                    onFocus={this.handleInputPageFocus}
+                    onBlur={this.handleInputPageBlur}
+                  />
+                  /{totalPages}
+                </label>
                 <ToolbarButton
                   icon="bottom"
                   onClick={this.nextPage}

diff --git a/packages/cozy-viewer/src/ViewersByFile/styles.styl b/packages/cozy-viewer/src/ViewersByFile/styles.styl
@@ -28,6 +28,18 @@
 
 // rules for specific viewers below
 
+.viewer-pdfviewer-input-page
+    margin-right     0.25rem
+    text-align       center
+    color            rgb(255, 255, 255)
+    background-color rgb(50, 54, 63)
+    border           2px solid rgba(255, 255, 255, 0.32)
+    border-radius    2px
+    font-size        0.9rem
+
+    &:focus
+        outline none
+
 .viewer-videoviewer
     video
         width       100%