left align toasts by default

stylesheets/components/Toast.scss

@@ -6,68 +6,55 @@
 
   @include font-body-2;
 
-  align-items: center;
+  position: absolute;
+  align-items: stretch;
   border-radius: $border-radius-px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: space-between;
-  @include position-absolute-center-x;
-  text-align: center;
   user-select: none;
   overflow: hidden;
   z-index: $z-index-toast;
   bottom: 62px;
-
+  max-width: 280px;
-  @include light-theme {
-    background-color: $color-gray-80;
-    color: $color-white;
-  }
-  @include dark-theme {
   background-color: $color-gray-75;
   color: $color-gray-05;
+  outline: none;
+
+  &:focus:focus-visible {
+    box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+  }
+
+  &--align-center {
+    @include position-absolute-center-x;
+    text-align: center;
   }
 
   &--align-left {
     inset-inline-start: 20px;
     bottom: 18px;
+    text-align: start;
   }
 
   &__content {
-    padding-block: 8px;
+    padding-block: 13px;
-    padding-inline: 12px;
+    padding-inline: 16px;
   }
 
   &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     @include font-body-2-bold;
     cursor: pointer;
-    padding-block: 8px;
+    padding-block: 13px;
-    padding-inline: 12px;
+    padding-inline: 16px;
     white-space: nowrap;
-
+    color: $color-ultramarine-light;
-    @include light-theme {
-      border-inline-start: 1px solid $color-gray-65;
-    }
-    @include dark-theme {
-      border-inline-start: 1px solid $color-gray-60;
-    }
-
     outline: none;
 
-    &:hover {
+    &:focus:focus-visible {
-      @include light-theme {
+      box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
-        background-color: $color-gray-65;
-      }
-      @include dark-theme {
-        background-color: $color-gray-60;
-      }
-    }
-    &:focus {
-      @include keyboard-mode {
-        background-color: $color-gray-65;
-      }
-      @include dark-keyboard-mode {
-        background-color: $color-gray-60;
-      }
     }
   }
 }

ts/components/Toast.tsx

@@ -11,7 +11,6 @@ import { clearTimeoutIfNecessary } from '../util/clearTimeoutIfNecessary';
 export type PropsType = {
   autoDismissDisabled?: boolean;
   children: ReactNode;
-  align?: 'left' | 'center';
   className?: string;
   disableCloseOnClick?: boolean;
   onClose: () => unknown;
@@ -26,7 +25,6 @@ export type PropsType = {
 export const Toast = memo(function ToastInner({
   autoDismissDisabled = false,
   children,
-  align = 'center',
   className,
   disableCloseOnClick = false,
   onClose,
@@ -36,6 +34,31 @@ export const Toast = memo(function ToastInner({
 }: PropsType): JSX.Element | null {
   const [root, setRoot] = React.useState<HTMLElement | null>(null);
   const [focusRef] = useRestoreFocus();
+  const [align, setAlign] = React.useState<'left' | 'center'>('left');
+
+  useEffect(() => {
+    function updateAlign() {
+      const leftPane = document.querySelector('.module-left-pane');
+      const composer = document.querySelector(
+        '.ConversationView__composition-area'
+      );
+
+      if (
+        leftPane != null &&
+        composer != null &&
+        leftPane.classList.contains('module-left-pane--width-narrow')
+      ) {
+        setAlign('center');
+        return;
+      }
+
+      setAlign('left');
+    }
+
+    updateAlign();
+
+    return window.reduxStore.subscribe(updateAlign);
+  }, []);
 
   useEffect(() => {
     const div = document.createElement('div');