Refine styles of menus, toasts, popovers, and modals (#12332)

* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot

res/css/views/rooms/_MessageComposer.pcss

@@ -314,74 +314,6 @@ limitations under the License.
     }
 }
 
-.mx_MessageComposer_formatting {
-    cursor: pointer;
-    margin: 0 11px;
-    width: 24px;
-    height: 18px;
-}
-
-.mx_MessageComposer_formatbar_wrapper {
-    width: 100%;
-    background-color: $menu-bg-color;
-    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
-}
-
-.mx_MessageComposer_formatbar {
-    margin: auto;
-    display: flex;
-
-    height: 30px;
-
-    box-sizing: border-box;
-    padding-left: 62px;
-
-    flex-direction: row;
-    align-items: center;
-    font-size: $font-10px;
-    color: $info-plinth-fg-color;
-
-    * {
-        margin-right: 4px;
-    }
-}
-
-.mx_MessageComposer_format_button,
-.mx_MessageComposer_formatbar_cancel,
-.mx_MessageComposer_formatbar_markdown {
-    cursor: pointer;
-}
-
-.mx_MessageComposer_formatbar_cancel {
-    margin-right: 22px;
-}
-
-.mx_MessageComposer_formatbar_markdown {
-    height: 17px;
-    width: 30px;
-    margin-right: 64px;
-}
-
-.mx_MessageComposer_input_markdownIndicator {
-    height: 10px;
-    width: 12px;
-    padding: 4px 4px 4px 0;
-}
-
-.mx_MessageComposer_formatbar_markdown,
-.mx_MessageComposer_input_markdownIndicator {
-    cursor: pointer;
-    mask-image: url("$(res)/img/markdown.svg");
-    mask-size: contain;
-    mask-position: center;
-    mask-repeat: no-repeat;
-    background-color: $icon-button-color;
-
-    &.mx_MessageComposer_markdownDisabled {
-        opacity: 0.2;
-    }
-}
-
 .mx_MatrixChat_useCompactLayout {
     .mx_MessageComposer_input {
         min-height: 50px;