Live location share - tiles without tile server (PSG-591) (#8962)

* live location without map POC

* styles

* force map tiles to show no map for test build

* check latestlocationstate exists

* just use loading style map fallback when cant display map

* style map error for tile view

* set pointer cursor when map error is clickable

* test mbeaconbody with map display error, lint

* lint more good

* remove changes for first attempt tile

* make maperror test id more accurate

* fussy import ordering

* PR tweaks

res/css/components/views/beacon/_OwnBeaconStatus.scss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_OwnBeaconStatus_button {
+    margin-left: $spacing-8;
+}
+
 .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
     // align to top to make room for timestamp
     // in bubble view

res/css/components/views/location/_MapError.scss

@@ -18,9 +18,41 @@ limitations under the License.
     padding: 100px $spacing-32 0;
     text-align: center;
 
-    p {
-        margin: $spacing-16 0 $spacing-32;
+    --mx-map-error-icon-color: $secondary-content;
+    --mx-map-error-icon-size: 58px;
+}
+
+.mx_MapError.mx_MapError_isMinimised {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: $spacing-24;
+    background-color: $panels;
+    font-size: $font-12px;
+    line-height: $font-16px;
+
+    --mx-map-error-icon-color: $alert;
+    --mx-map-error-icon-size: 26px;
+
+    .mx_MapError_message {
+        margin: 0;
+        max-width: 275px;
     }
+
+    .mx_MapError_heading {
+        padding-top: $spacing-8;
+        // override h3 heading size
+        font-size: inherit !important;
+        font-weight: normal !important;
+    }
+}
+
+.mx_MapError_message {
+    margin: $spacing-16 0 $spacing-32;
 }
 
 .mx_MapError_heading {
@@ -28,9 +60,9 @@ limitations under the License.
 }
 
 .mx_MapError_icon {
-    height: 58px;
+    height: var(--mx-map-error-icon-size);
 
     path {
-        fill: $secondary-content;
+        fill: var(--mx-map-error-icon-color);
     }
 }

res/css/components/views/messages/_MBeaconBody.scss

@@ -24,6 +24,29 @@ limitations under the License.
     overflow: hidden;
 }
 
+.mx_MBeaconBody.mx_MBeaconBody_withoutMap {
+    height: auto;
+
+    .mx_MBeaconBody_chin {
+        position: relative;
+        background-color: transparent;
+    }
+}
+
+.mx_MBeaconBody_withoutMapContent {
+    background-color: $panels;
+    border-radius: 4px;
+}
+
+.mx_MBeaconBody_withoutMapInfoLastUpdated {
+    // 48px lines up with icon in BeaconStatus
+    margin-top: -$spacing-8;
+    padding: 0 $spacing-8 $spacing-8 48px;
+
+    color: $tertiary-content;
+    font-size: $font-10px;
+}
+
 .mx_MBeaconBody_map {
     height: 100%;
     width: 100%;
@@ -32,11 +55,18 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_MBeaconBody_mapFallback {
+.mx_MBeaconBody_mapFallback,
+.mx_MBeaconBody_mapError {
     // pushes spinner/icon up
     // to appear more centered with the footer
-    padding-bottom: 50px;
+    padding-bottom: 50px !important;
+}
 
+.mx_MBeaconBody_mapErrorInteractive {
+    cursor: pointer;
+}
+
+.mx_MBeaconBody_mapFallback {
     cursor: default;
 }