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 {