feat: redesign of Live Collaboration dialog (#6635)

* feat: redesiged Live Collaboration dialog

* fix: address lints

* fix: inactive dialog dark mode improvements

* fix: follow styleguide with event parameter, add FilledButton size prop

* fix: change timer to be imperative

* fix: add spacing after emoji

* fix: remove unused useEffect

* fix: change margin into whitespace

* fix: add share button check back

src/excalidraw-app/collab/RoomDialog.scss

@@ -1,76 +1,149 @@
 @import "../../css/variables.module";
 
 .excalidraw {
-  .RoomDialog__button {
-    border: 1px solid var(--default-border-color) !important;
-  }
-
-  .RoomDialog-linkContainer {
+  .RoomDialog {
     display: flex;
-    margin: 1.5em 0;
-  }
+    flex-direction: column;
+    gap: 1.5rem;
 
-  input.RoomDialog-link {
-    color: var(--text-primary-color);
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    display: inline-block;
-    cursor: pointer;
-    border: none;
-    padding: 0 0.5rem;
-    white-space: nowrap;
-    border-radius: var(--space-factor);
-    background-color: var(--button-gray-1);
-  }
-
-  .RoomDialog-emoji {
-    font-family: sans-serif;
-  }
-
-  .RoomDialog-usernameContainer {
-    display: flex;
-    margin: 1.5em 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     @include isMobile {
-      flex-direction: column;
-      align-items: stretch;
+      height: calc(100vh - 5rem);
     }
-  }
 
-  @include isMobile {
-    .RoomDialog-usernameLabel {
-      font-weight: bold;
+    &__popover {
+      @keyframes RoomDialog__popover__scaleIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      box-sizing: border-box;
+      z-index: 100;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 0.125rem 0.5rem;
+      gap: 0.125rem;
+
+      height: 1.125rem;
+
+      border: none;
+      border-radius: 0.6875rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 110%;
+
+      background: var(--color-success-lighter);
+      color: var(--color-success);
+
+      & > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      transform-origin: var(--radix-popover-content-transform-origin);
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
     }
-  }
 
-  .RoomDialog-username {
-    background-color: var(--input-bg-color);
-    border-color: var(--input-border-color);
-    appearance: none;
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    @include isMobile {
-      margin-top: 0.5em;
-      margin-inline-start: 0;
+    &__inactive {
+      font-family: "Assistant";
+
+      &__illustration {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        & svg {
+          filter: var(--theme-filter);
+        }
+      }
+
+      &__header {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        font-weight: 700;
+        font-size: 1.3125rem;
+        line-height: 130%;
+
+        color: var(--color-primary);
+      }
+
+      &__description {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 150%;
+
+        text-align: center;
+
+        color: var(--text-primary-color);
+
+        & strong {
+          display: block;
+          font-weight: 700;
+        }
+      }
+
+      &__start_session {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+      }
     }
-    font-size: 1em;
-  }
 
-  .RoomDialog-sessionStartButtonContainer {
-    display: flex;
-    justify-content: center;
-  }
+    &__active {
+      &__share {
+        display: none !important;
 
-  .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+        @include isMobile {
+          display: flex !important;
+        }
+      }
 
-    .ToolIcon__label,
-    .ToolIcon__icon svg {
-      color: var(--button-destructive-color);
+      &__header {
+        margin: 0;
+      }
+
+      &__linkRow {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.75rem;
+      }
+
+      &__description {
+        border-top: 1px solid var(--color-gray-20);
+
+        padding: 0.5rem 0.5rem 0;
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 150%;
+
+        & p {
+          margin: 0;
+        }
+
+        & p + p {
+          margin-top: 1em;
+        }
+      }
+
+      &__actions {
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 }