diff --git a/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap b/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap index 0f1e2df50..1bd05c5fd 100644 --- a/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap +++ b/app/soapbox/features/forms/__tests__/__snapshots__/forms-test.js.snap @@ -55,23 +55,27 @@ exports[` renders correctly 1`] = ` `; exports[` renders correctly 1`] = ` - +
+ +
`; exports[` renders correctly 1`] = ` diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js index 4330919b3..5c7951ddb 100644 --- a/app/soapbox/features/forms/index.js +++ b/app/soapbox/features/forms/index.js @@ -236,7 +236,7 @@ export class SelectDropdown extends ImmutablePureComponent { )); - const selectElem = ; + const selectElem =
; return label ? ( {selectElem} diff --git a/app/styles/dyslexic.scss b/app/styles/dyslexic.scss index 9dd348fec..6db2cadc2 100644 --- a/app/styles/dyslexic.scss +++ b/app/styles/dyslexic.scss @@ -1,5 +1,6 @@ .dyslexic { font-family: 'OpenDyslexic' !important; + margin-bottom: 8px; } body.dyslexic { diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 147199870..5025a5a43 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -13,7 +13,7 @@ code { .simple_form { .input { - margin-bottom: 15px; + margin-bottom: 8px; overflow: hidden; &.hidden { @@ -43,7 +43,6 @@ code { &.boolean { position: relative; - margin-bottom: 0; .label_input > label { font-family: inherit; @@ -111,7 +110,6 @@ code { span.hint { display: block; font-size: 12px; - margin-top: 4px; } p.hint { @@ -172,15 +170,10 @@ code { font-size: 14px; color: var(--primary-text-color); display: block; - margin-bottom: 8px; word-wrap: break-word; font-weight: 500; } - .hint { - margin-top: 6px; - } - ul { flex: 390px; } @@ -436,6 +429,7 @@ code { } select { + appearance: none; box-sizing: border-box; font-size: 16px; color: var(--primary-text-color); @@ -451,6 +445,23 @@ code { padding-right: 30px; height: 41px; position: relative; + margin-top: 8px; + cursor: pointer; + } + + .select-wrapper::after { + display: block; + font-family: 'ForkAwesome'; + content: ''; + width: 10px; + position: absolute; + right: 12px; + top: 1px; + border-left: 1px solid var(--highlight-text-color); + height: 39px; + padding: 12px; + box-sizing: border-box; + pointer-events: none; } .label_input {