Update settings styles · impro.social/impro@49bdf41

+1 -1

package.json

··· 1 1 { 2 2 "name": "impro", 3 - "version": "0.14.38", 3 + "version": "0.14.39", 4 4 "type": "module", 5 5 "scripts": { 6 6 "start": "rm -rf build && NODE_ENV=development eleventy --serve",

+26 -11

src/css/style.css

··· 459 459 460 460 .danger-button { 461 461 color: var(--error-color); 462 - font-size: 14px; 462 + font-size: 15px; 463 463 } 464 464 465 465 .back-button { ··· 5546 5546 position: relative; 5547 5547 } 5548 5548 5549 + .settings-section-row { 5550 + display: flex; 5551 + align-items: flex-start; 5552 + gap: 16px; 5553 + } 5554 + 5555 + .settings-section-row .settings-section-text { 5556 + flex: 1; 5557 + min-width: 0; 5558 + } 5559 + 5560 + .settings-section-row .settings-section-text > :last-child { 5561 + margin-bottom: 0; 5562 + } 5563 + 5549 5564 .settings-section h2 { 5550 5565 font-size: 16px; 5551 5566 font-weight: 500; ··· 5563 5578 display: flex; 5564 5579 flex-direction: column; 5565 5580 align-items: center; 5566 - position: absolute; 5567 - right: 16px; 5568 - top: 12px; 5569 5581 overflow: hidden; 5582 + flex-shrink: 0; 5570 5583 } 5571 5584 5572 5585 .settings-color-picker-reset { ··· 5579 5592 } 5580 5593 5581 5594 .settings-select { 5582 - position: absolute; 5583 - right: 16px; 5584 - top: 16px; 5585 5595 padding: 8px 12px; 5586 5596 border-radius: var(--text-input-border-radius); 5587 5597 border: var(--hair) solid var(--post-border-color); ··· 5589 5599 color: var(--text-color); 5590 5600 font-size: 14px; 5591 5601 cursor: pointer; 5602 + flex-shrink: 0; 5592 5603 } 5593 5604 5594 5605 .settings-footer-links { ··· 5707 5718 margin: 0; 5708 5719 } 5709 5720 5710 - .muted-word-add-button { 5721 + .settings-button { 5711 5722 width: 100%; 5712 5723 padding: 10px; 5713 - border-radius: 8px; 5724 + border-radius: var(--pill-button-border-radius); 5714 5725 border: none; 5715 5726 background: var(--highlight-color); 5716 5727 color: white; ··· 5720 5731 gap: 6px; 5721 5732 } 5722 5733 5723 - .muted-word-add-button:disabled { 5734 + .settings-button:disabled { 5724 5735 opacity: 0.5; 5725 5736 cursor: default; 5726 5737 } ··· 5730 5741 bottom: 1px; 5731 5742 } 5732 5743 5733 - .muted-word-add-button .loading-spinner { 5744 + .settings-button .loading-spinner { 5734 5745 border-color: rgba(255, 255, 255, 0.3); 5735 5746 border-top-color: white; 5736 5747 margin: 0 auto; ··· 6153 6164 6154 6165 .settings-section .button-group { 6155 6166 margin-top: 16px; 6167 + } 6168 + 6169 + .settings-section button { 6170 + flex: 1; 6156 6171 } 6157 6172 6158 6173 #login-advanced {

+2

src/js/views/settings/advanced.view.js

··· 227 227 <div class="button-group"> 228 228 <button 229 229 type="submit" 230 + class="settings-button" 230 231 ?disabled=${state.loading || !isDirty()} 231 232 > 232 233 Save and reload ··· 277 278 <div class="button-group"> 278 279 <button 279 280 type="submit" 281 + class="settings-button" 280 282 data-testid="install-unregistered-plugin-submit" 281 283 ?disabled=${state.pluginInstallLoading} 282 284 >

+15 -9

src/js/views/settings/appearance.view.js

··· 66 66 })} 67 67 <main> 68 68 <section 69 - class="settings-section" 69 + class="settings-section settings-section-row" 70 70 data-testid="settings-section-color-scheme" 71 71 > 72 - <h2>Color scheme</h2> 73 - <p>Choose between light and dark mode.</p> 72 + <div class="settings-section-text"> 73 + <h2>Color scheme</h2> 74 + <p>Choose between light and dark mode.</p> 75 + </div> 74 76 <select 75 77 class="settings-select" 76 78 @change=${(e) => { ··· 99 101 </select> 100 102 </section> 101 103 <section 102 - class="settings-section" 104 + class="settings-section settings-section-row" 103 105 data-testid="settings-section-highlight-color" 104 106 > 105 - <h2>Highlight color</h2> 106 - <p>Choose the highlight color for buttons and links.</p> 107 + <div class="settings-section-text"> 108 + <h2>Highlight color</h2> 109 + <p>Choose the highlight color for buttons and links.</p> 110 + </div> 107 111 <div class="settings-color-picker"> 108 112 <input 109 113 @change=${(e) => { ··· 123 127 </div> 124 128 </section> 125 129 <section 126 - class="settings-section" 130 + class="settings-section settings-section-row" 127 131 data-testid="settings-section-like-color" 128 132 > 129 - <h2>Like color</h2> 130 - <p>Choose the color for liked posts.</p> 133 + <div class="settings-section-text"> 134 + <h2>Like color</h2> 135 + <p>Choose the color for liked posts.</p> 136 + </div> 131 137 <div class="settings-color-picker"> 132 138 <input 133 139 @change=${(e) => {

+1 -1

src/js/views/settings/mutedWords.view.js

··· 351 351 </label> 352 352 353 353 <button 354 - class="muted-word-add-button" 354 + class="settings-button" 355 355 data-testid="muted-word-add" 356 356 type="submit" 357 357 ?disabled=${state.isSaving || !state.hasValue}

Configure Feed

Configure Feed