adjust spinner size

Signed-off-by: Kerry Archibald <kerrya@element.io>
matrix-org · Apr 11, 2022 · 608dc41 · 608dc41
1 parent 8ed2634
commit 608dc41
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/res/css/components/views/messages/_MBeaconBody.scss b/res/css/components/views/messages/_MBeaconBody.scss
@@ -30,12 +30,17 @@ limitations under the License.
 }
 
 .mx_MBeaconBody_mapFallback {
-    background: url('$(res)/img/location/map.svg');
-    background-size: cover;
-
+    box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
+
+    // pushes spinner/icon up
+    // to appear more centered with the footer
+    padding-bottom: 50px;
+
+    background: url('$(res)/img/location/map.svg');
+    background-size: cover;
 }
 
 .mx_MBeaconBody_mapFallbackIcon {

diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx
@@ -99,7 +99,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, ...rest }
                 </Map>
                 : <div className='mx_MBeaconBody_map mx_MBeaconBody_mapFallback'>
                     { displayStatus === BeaconDisplayStatus.Loading ?
-                        <Spinner h={45} w={45} /> :
+                        <Spinner h={32} w={32} /> :
                         <LocationMarkerIcon className='mx_MBeaconBody_mapFallbackIcon' />
                     }
                 </div>