fix: add styles for live location sharing

src/v2/styles/AttachmentList/AttachmentList-layout.scss

@@ -325,6 +325,56 @@
     }
   }
 
+  .str-chat__message-attachment-geolocation {
+    margin: var(--str-chat__attachment-margin);
+    min-width: 200px;
+
+    .str-chat__message-attachment-geolocation__placeholder {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--str-chat__spacing-2);
+
+      .str-chat__message-geolocation__icon {
+        height: calc(var(--str-chat__spacing-px) *150);
+      }
+
+      .str-chat__message-attachment-geolocation__placeholder-link {
+        position: absolute;
+        inset-inline-end: 0.75rem;
+        inset-block: 0.75rem;
+        height: calc(var(--str-chat__spacing-px) * 20);
+        width: calc(var(--str-chat__spacing-px) * 20);
+      }
+    }
+
+    .str-chat__message-attachment-geolocation__status {
+      display: flex;
+      justify-content: center;
+      padding: 0.5rem 2rem;
+
+      .str-chat__message-attachment-geolocation__status--active {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.375rem;
+
+        .str-chat__message-attachment-geolocation__stop-sharing-button {
+          color: var(--str-chat__danger-color);
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-status {
+          color: var(--str-chat__info-color);
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-until {
+          text-transform: lowercase;
+        }
+      }
+    }
+  }
+
   .str-chat__message-attachment-audio-widget {
     .str-chat__message-attachment-audio-widget--play-controls {
       @include utils.flex-row-center();

src/v2/styles/AttachmentList/AttachmentList-theme.scss

@@ -141,6 +141,35 @@
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
 
+  /* The border radius used for the borders of file attachments */
+  --str-chat__geolocation-attachment-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* The text/icon color of geolocation attachments */
+  --str-chat__geolocation-attachment-color: var(--str-chat__text-color);
+
+  /* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */
+  --str-chat__geolocation-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of geolocation attachments */
+  --str-chat__geolocation-attachment-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-block-start: none;
+
+  /* Bottom border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-block-end: none;
+
+  /* Left (right in RTL layout) border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-inline-end: none;
+
+  /* Box shadow applied to geolocation attachments */
+  --str-chat__geolocation-attachment-box-shadow: none;
+
   /* Border radius applied audio widget */
   --str-chat__audio-attachment-widget-border-radius: calc(
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
@@ -325,6 +354,33 @@
     @include utils.component-layer-overrides('file-attachment');
   }
 
+  .str-chat__message-attachment-geolocation {
+    @include utils.component-layer-overrides('geolocation-attachment');
+    overflow: hidden;
+
+    .str-chat__message-attachment-geolocation__placeholder {
+      .str-chat__message-attachment-geolocation__placeholder-link {
+        color: currentColor;
+      }
+    }
+
+    .str-chat__message-attachment-geolocation__status {
+      background-color: var(--str-chat__tertiary-surface-color);
+
+      .str-chat__message-attachment-geolocation__status--active {
+        .str-chat__message-attachment-geolocation__stop-sharing-button {
+          @include utils.button-reset;
+          font: var(--str-chat__subtitle-medium-text);
+          cursor: pointer;
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-until {
+          font: var(--str-chat__caption-text);
+        }
+      }
+    }
+  }
+
   .str-chat__message-attachment-unsupported {
     .str-chat__message-attachment-unsupported__title {
       font: var(--str-chat__subtitle-medium-text);

src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss

@@ -47,6 +47,7 @@
     }
   }
 
+  .str-chat__location-preview,
   .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
@@ -70,12 +71,14 @@
       justify-content: center;
 
       .str-chat__attachment-preview-title,
+      .str-chat__attachment-preview-subtitle,
       .str-chat__attachment-preview-file-name {
         @include utils.ellipsis-text;
         max-width: 100%;
       }
     }
 
+    .str-chat__location-preview-image,
     .str-chat__attachment-preview-file-icon {
       --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
       --str-chat-icon-width: auto;

src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss

@@ -107,6 +107,7 @@
     }
   }
 
+  .str-chat__location-preview,
   .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
@@ -117,6 +118,10 @@
       font: var(--str-chat__subtitle-medium-text);
     }
 
+    .str-chat__attachment-preview-subtitle {
+      font: var(--str-chat__caption-text);
+    }
+
     .str-chat__attachment-preview-file-download {
       --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
       text-decoration: none;
@@ -142,6 +147,12 @@
     }
   }
 
+  .str-chat__location-preview {
+    .str-chat__location-preview-image {
+      color: var(--str-chat__active-primary-color);
+    }
+  }
+
   .str-chat__attachment-preview-delete {
     --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
 

src/v2/styles/Dialog/Dialog-layout.scss

@@ -25,7 +25,7 @@
     display: flex;
     justify-content: flex-end;
     gap: 1.25rem;
-    padding: 2.25rem 1.25rem 0;
+    padding: 2.25rem 1.25rem;
 
     .str-chat__dialog__controls-button {
       @include utils.button-reset;

src/v2/styles/Form/Form-layout.scss

@@ -6,4 +6,44 @@
   .str-chat__form-field-error {
     margin-left: 0.5rem;
   }
+}
+
+.str-chat__form__switch-field {
+  width: 100%;
+  padding: 1rem;
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .str-chat__form__switch-field__switch {
+    display: flex;
+    align-items: center;
+    width: calc(var(--str-chat__spacing-px) * 52);
+    height: calc(var(--str-chat__spacing-px) * 32);
+    padding: 0.25rem;
+
+    .str-chat__form__switch-field__switch-handle {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &.str-chat__form__switch-field__switch--on {
+      justify-content: flex-end;
+    }
+  }
+}
+
+.str-chat__dropdown {
+  .str-chat__dropdown__open-button {
+    width: 100%;
+    text-align: start;
+  }
 }

src/v2/styles/Form/Form-theme.scss

@@ -1,3 +1,5 @@
+@use '../utils';
+
 .str-chat {
   // hide spin buttons form input of type number
   /* Chrome, Safari, Edge, Opera */
@@ -18,3 +20,63 @@
   font-size: 0.75rem;
   color: var(--str-chat__danger-color);
 }
+
+// fixme: duplicate mixin in poll theme
+@mixin field-background {
+  background-color: var(--str-chat__tertiary-surface-color);
+  border-radius: 0.75rem;
+}
+
+
+
+.str-chat__form__switch-field {
+  @include field-background;
+
+  &, label {
+    cursor: pointer;
+  }
+
+  label {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .str-chat__form__switch-field__switch {
+    cursor: pointer;
+    background-color: var(--str-chat__text-low-emphasis-color);
+    border-radius: 100px;
+
+    .str-chat__form__switch-field__switch-handle {
+      border-radius: var(--str-chat__border-radius-circle);
+      background-color: var(--str-chat__disabled-color);
+    }
+
+    &.str-chat__form__switch-field__switch--on {
+      background-color: var(--str-chat__green600);
+
+      .str-chat__form__switch-field__switch-handle {
+        background-color: var(--str-chat__background-color);
+        border-radius: var(--str-chat__border-radius-circle);
+      }
+    }
+  }
+}
+
+.str-chat__form__switch-field--disabled {
+  .str-chat__form__switch-field--disabled,
+  .str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch,
+  label {
+    cursor: not-allowed;
+  }
+}
+
+.str-chat__dropdown {
+  .str-chat__dropdown__open-button {
+    @include utils.button-reset;
+    cursor: pointer;
+  }
+
+  .str-chat__dropdown__items {
+    background-color: var(--str-chat__background-color);
+  }
+}

src/v2/styles/Location/Location-layout.scss

@@ -0,0 +1,52 @@
+.str-chat__modal.str-chat__share-location-modal {
+  .str-chat__modal__close-button {
+    display: none;
+  }
+
+  .str-chat__share-location-dialog {
+    .str-chat__modal-header {
+      padding-top: 0;
+    }
+
+    .str-chat__dialog__body {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding-block: 0;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+
+      .str-chat__live-location-activation {
+        padding: 0.5rem;
+
+        .str-chat__form__switch-field {
+          padding: 0.5rem;
+        }
+
+        .str-chat__dropdown__open-button {
+          padding: 0.5rem;
+        }
+
+        .str-chat__dialog-contents {
+          .str-chat__dropdown__items {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding-block: 0.25rem;
+
+            .str-chat__live-location-sharing-duration-option {
+              padding: 0.25rem 0.5rem;
+              width: 100%;
+              text-align: start;
+            }
+          }
+        }
+      }
+    }
+
+    .str-chat__dialog__controls {
+      padding: 1.25rem 1rem 0;
+    }
+  }
+}

src/v2/styles/Location/Location-theme.scss

@@ -0,0 +1,32 @@
+@use '../utils';
+
+.str-chat__share-location-dialog {
+  .str-chat__live-location-activation {
+    border-radius: var(--str-chat__border-radius-sm);
+    border: 1px solid var(--str-chat__secondary-overlay-color);;
+
+    .str-chat__form__switch-field {
+      background-color: var(--str-chat__background-color);
+    }
+
+    .str-chat__dropdown__open-button {
+      border-radius: var(--str-chat__border-radius-xs);
+      border: 1px solid var(--str-chat__secondary-overlay-color);
+      background-color: var(--str-chat__tertiary-surface-color);
+    }
+
+    .str-chat__dropdown__items {
+      box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+      border-radius: var(--str-chat__border-radius-xs);
+
+      .str-chat__live-location-sharing-duration-option {
+        @include utils.button-reset;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--str-chat__message-options-hover-background-color);
+        }
+      }
+    }
+  }
+}