End

src/components/sidebarLeft/index.ts

@@ -25,7 +25,7 @@ import AppNewChannelTab from "./tabs/newChannel";
 import AppContactsTab from "./tabs/contacts";
 import AppArchivedTab from "./tabs/archivedTab";
 import AppAddMembersTab from "./tabs/addMembers";
-import AppPeopleNearby from "./tabs/PeopleNearby";
+import AppPeopleNearby from "./tabs/peopleNearby";
 import { i18n_, LangPackKey } from "../../lib/langPack";
 import { ButtonMenuItemOptions } from "../buttonMenu";
 import CheckboxField from "../checkboxField";

src/components/sidebarLeft/tabs/peopleNearby.ts

@@ -185,7 +185,7 @@ export default class AppPeopleNearby extends SliderSuperTab {
                   break;
                 }
               }
-              dom.lastMessageSpan.append(', '+i18n('Members', [participantsCount]));
+              dom.lastMessageSpan.append(', ', i18n('Members', [participantsCount]));
             }
           });
 
@@ -234,7 +234,7 @@ export default class AppPeopleNearby extends SliderSuperTab {
         const distanceCheck = this.calculateDistance(
           result.coords.latitude, result.coords.longitude,
           this.latestLocationSaved.latitude, this.latestLocationSaved.longitude
-        );
+        ) > 100;
         if((isLatitudeDifferent || isLongitudeDifferent) && distanceCheck){
           appUsersManager.getLocated(
             result.coords.latitude,

src/scss/partials/_peopleNearby.scss

@@ -1,79 +1,81 @@
-div.text.nearby-description {
+.peoplenearby-container {
-	margin-top: 15px;
+	div.text.nearby-description {
-  text-align: center;
+		margin-top: 15px;
-  color: var(--primary-text-color);
+	  text-align: center;
-}
+	  color: var(--primary-text-color);
+	}
 
-div.text.nearby-error {
+	div.text.nearby-error {
-  color: var(--gc-secondary-text-color);
+	  color: var(--gc-secondary-text-color);
-  margin-top: 10px;
+	  margin-top: 10px;
-  text-align: center;
+	  text-align: center;
-}
+	}
 
-.locating-animation-container {
+	.locating-animation-container {
-  min-height: 140px;
+	  min-height: 140px;
-  width: 100%;
+	  width: 100%;
-  display: flex;
+	  display: flex;
-  align-items: center;
+	  align-items: center;
-  justify-content: center;
+	  justify-content: center;
 
-  & .tgico.tgico-location {
+	  & .tgico.tgico-location {
-    padding: 50px;
+	    padding: 50px;
-    background: var(--avatar-color-bottom);
+	    background: var(--avatar-color-bottom);
-    width: 140px;
+	    width: 140px;
-    height: 140px;
+	    height: 140px;
-    display: flex;
+	    display: flex;
-    align-items: center;
+	    align-items: center;
-    justify-content: center;
+	    justify-content: center;
-    border-radius: 50%;
+	    border-radius: 50%;
 
-    &::before {
+	    &::before {
-    	font-size: 58px;
+	    	font-size: 58px;
-    	color: white;
+	    	color: white;
-    }
+	    }
-  }
+	  }
 
-  & .locating-animation-waves {
+	  & .locating-animation-waves {
-  	position: fixed;
+	  	position: fixed;
 
-	  &.wave-1,
+		  &.wave-1,
-	  &.wave-3 {
+		  &.wave-3 {
-	  	animation: 3s waves-animation infinite;
+		  	animation: 3s waves-animation infinite;
-	    width: 50px;
+		    width: 50px;
-	    height: 50px;
+		    height: 50px;
-	    border: 5px solid white;
+		    border: 5px solid white;
-	    border-radius: 50%;
+		    border-radius: 50%;
-	    clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
+		    clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
-	    margin-left: 36px;
+		    margin-left: 36px;
-	  }
+		  }
 
-	  &.wave-2,
+		  &.wave-2,
-	  &.wave-4 {
+		  &.wave-4 {
-	  	animation: 5s waves-animation infinite;
+		  	animation: 5s waves-animation infinite;
-	    width: 66px;
+		    width: 66px;
-	    height: 71px;
+		    height: 71px;
-	    border: 5px solid white;
+		    border: 5px solid white;
-	    border-radius: 50%;
+		    border-radius: 50%;
-	    clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
+		    clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
-	    margin-left: 51px;
+		    margin-left: 51px;
-	    margin-top: 1px;
+		    margin-top: 1px;
-	    animation-delay: 2s;
+		    animation-delay: 2s;
-	  }
+		  }
 
-	  &.wave-3 {
+		  &.wave-3 {
-	  	margin-left: -36px !important;
+		  	margin-left: -36px !important;
-	  	transform: rotateY(180deg);
+		  	transform: rotateY(180deg);
-	  }
+		  }
 
-	  &.wave-4 {
+		  &.wave-4 {
-	  	margin-left: -51px !important;
+		  	margin-left: -51px !important;
-	  	transform: rotateY(180deg);
+		  	transform: rotateY(180deg);
+		  }
 	  }
-  }
+	}
-}
 
-@keyframes waves-animation {
+	@keyframes waves-animation {
-	from { opacity: 100%; }
+		from { opacity: 100%; }
-	50% { opacity: 0%; }
+		50% { opacity: 0%; }
-	to { opacity: 100%; }
+		to { opacity: 100%; }
+	}
 }