diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index 9c308c2f2e..cbb4b4e35a 100644 Binary files a/app/soapbox/components/status.js and b/app/soapbox/components/status.js differ diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js index 256fa4ab99..c4b458e3d4 100644 Binary files a/app/soapbox/features/audio/index.js and b/app/soapbox/features/audio/index.js differ diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js index 6e8f5b82e9..24a83a527a 100644 Binary files a/app/soapbox/features/compose/components/upload_button.js and b/app/soapbox/features/compose/components/upload_button.js differ diff --git a/app/soapbox/features/report/components/status_check_box.js b/app/soapbox/features/report/components/status_check_box.js index 2ccb0df390..1e781fdd69 100644 Binary files a/app/soapbox/features/report/components/status_check_box.js and b/app/soapbox/features/report/components/status_check_box.js differ diff --git a/app/soapbox/features/ui/components/audio_modal.js b/app/soapbox/features/ui/components/audio_modal.js index 9496fd2ed6..de8c719916 100644 Binary files a/app/soapbox/features/ui/components/audio_modal.js and b/app/soapbox/features/ui/components/audio_modal.js differ diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json index 14d3f14e97..e8c17f6e2c 100644 --- a/app/soapbox/locales/defaultMessages.json +++ b/app/soapbox/locales/defaultMessages.json @@ -1217,7 +1217,7 @@ { "descriptors": [ { - "defaultMessage": "Add media (JPEG, PNG, GIF, WebM, MP4, MOV)", + "defaultMessage": "Add media attachment", "id": "upload_button.label" } ], diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index 950098cf9d..6507a57619 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -450,7 +450,7 @@ "unauthorized_modal.text": "You need to be logged in to do that.", "unauthorized_modal.title": "Sign up for {site_title}", "upload_area.title": "Drag & drop to upload", - "upload_button.label": "Add media (JPEG, PNG, GIF, WebM, MP4, MOV)", + "upload_button.label": "Add media attachment", "upload_error.limit": "File upload limit exceeded.", "upload_error.poll": "File upload not allowed with polls.", "upload_form.description": "Describe for the visually impaired", diff --git a/app/soapbox/reducers/media_attachments.js b/app/soapbox/reducers/media_attachments.js index 4cc6cf1a22..134ccbf306 100644 Binary files a/app/soapbox/reducers/media_attachments.js and b/app/soapbox/reducers/media_attachments.js differ diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss index 1bda56b8ca..68e7f065b6 100644 --- a/app/styles/components/audio-player.scss +++ b/app/styles/components/audio-player.scss @@ -41,20 +41,6 @@ text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; } -.status__audio-player-spoiler { - display: none; - color: var(--primary-text-color); - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.status__audio-player-spoiler--visible { - display: block; - } -} - .status__audio-player-expand { bottom: 4px; z-index: 100; @@ -86,6 +72,10 @@ border-radius: 4px; height: 57px; + &.warning_visible { + height: 92px; + } + &:focus { outline: 0; } @@ -178,6 +168,35 @@ padding-bottom: 10px; } + &__spoiler-warning { + font-size: 16px; + white-space: nowrap; + overlow: hidden; + text-overflow: ellipsis; + background: hsl( var(--brand-color_h), var(--brand-color_s), 20% ); + padding: 5px; + + button { + background: transparent; + font-size: 16px; + border: 0; + color: rgba(#ffffff, 0.75); + position: absolute; + right: 0; + padding-right: 5px; + + i { + margin-right: 0; + } + + &:active, + &:hover, + &:focus { + color: #ffffff; + } + } + } + &__buttons { font-size: 16px; white-space: nowrap; @@ -190,12 +209,6 @@ } } - &.right { - button { - padding-right: 0; - } - } - button { background: transparent; padding: 2px 10px;