Remove mixin `mx_Tooltip_dark` and rename class `mx_Tooltip_dark` (#10801)

* Remove a mixin - mx_Tooltip_dark

The mixin has been used on `_AppsDrawer.pcss` only.

* Rename mx_Tooltip_dark based on the naming policy

'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.

res/css/_common.pcss

@@ -695,22 +695,6 @@ legend {
     color: $username-variant8-color;
 }
 
-@define-mixin mx_Tooltip_dark {
-    box-shadow: none;
-    background-color: $tooltip-timeline-bg-color;
-    color: $tooltip-timeline-fg-color;
-    border: none;
-    border-radius: 3px;
-    padding: 6px 8px;
-}
-
-/* This is a workaround for our mixins not supporting child selectors */
-.mx_Tooltip_dark {
-    .mx_Tooltip_chevron::after {
-        border-right-color: $tooltip-timeline-bg-color;
-    }
-}
-
 @define-mixin ProgressBarColour $colour {
     color: $colour;
     &::-moz-progress-bar {

res/css/views/rooms/_AppsDrawer.pcss

@@ -359,7 +359,18 @@ $MinWidth: 240px;
 }
 
 .mx_AppPermissionWarning_tooltip {
-    @mixin mx_Tooltip_dark;
+    box-shadow: none;
+    background-color: $tooltip-timeline-bg-color;
+    color: $tooltip-timeline-fg-color;
+    border: none;
+    border-radius: 3px;
+    padding: 6px 8px;
+
+    &.mx_AppPermissionWarning_tooltip--dark {
+        .mx_Tooltip_chevron::after {
+            border-right-color: $tooltip-timeline-bg-color;
+        }
+    }
 
     ul {
         list-style-position: inside;

src/components/views/elements/AppPermission.tsx

@@ -115,7 +115,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
         const warningTooltip = (
             <TextWithTooltip
                 tooltip={warningTooltipText}
-                tooltipClass="mx_AppPermissionWarning_tooltip mx_Tooltip_dark"
+                tooltipClass="mx_AppPermissionWarning_tooltip mx_AppPermissionWarning_tooltip--dark"
             >
                 <span className="mx_AppPermissionWarning_helpIcon" />
             </TextWithTooltip>