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/components/FilledButton.scss

@@ -0,0 +1,95 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .ExcButton {
+    &--color-primary {
+      color: var(--input-bg-color);
+
+      --accent-color: var(--color-primary);
+      --accent-color-hover: var(--color-primary-darker);
+      --accent-color-active: var(--color-primary-darkest);
+    }
+
+    &--color-danger {
+      color: var(--input-bg-color);
+
+      --accent-color: var(--color-danger);
+      --accent-color-hover: #d65550;
+      --accent-color-active: #d1413c;
+    }
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+
+    border-radius: 0.5rem;
+
+    font-family: "Assistant";
+
+    user-select: none;
+
+    transition: all 150ms ease-out;
+
+    &--size-large {
+      font-weight: 400;
+      font-size: 0.875rem;
+      height: 3rem;
+      padding: 0.5rem 1.5rem;
+      gap: 0.75rem;
+
+      letter-spacing: 0.4px;
+    }
+
+    &--size-medium {
+      font-weight: 600;
+      font-size: 0.75rem;
+      height: 2.5rem;
+      padding: 0.5rem 1rem;
+      gap: 0.5rem;
+
+      letter-spacing: normal;
+    }
+
+    &--variant-filled {
+      background: var(--accent-color);
+      border: 1px solid transparent;
+
+      &:hover {
+        background: var(--accent-color-hover);
+      }
+
+      &:active {
+        background: var(--accent-color-active);
+      }
+    }
+
+    &--variant-outlined,
+    &--variant-icon {
+      border: 1px solid var(--accent-color);
+      color: var(--accent-color);
+      background: transparent;
+
+      &:hover {
+        border: 1px solid var(--accent-color-hover);
+        color: var(--accent-color-hover);
+      }
+
+      &:active {
+        border: 1px solid var(--accent-color-active);
+        color: var(--accent-color-active);
+      }
+    }
+
+    &--variant-icon {
+      padding: 0.5rem 0.75rem;
+      width: 3rem;
+    }
+
+    &__icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}