community: smoother services buttons formatting (fixes #9137) (#9228)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>

Author: 4 people

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.61",
+  "version": "0.20.62",
   "myplanet": {
     "latest": "v0.36.25",
     "min": "v0.35.25"

src/app/community/community.component.html

@@ -101,13 +101,13 @@ <h3 mat-subheader i18n>Social & Web</h3>
           <ng-template #noLinks>
             <p i18n>No links available.</p>
           </ng-template>
-          <ng-container *planetAuthorizedRoles="''">
+          <div *planetAuthorizedRoles="''" class="action-buttons">
             <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>
             <button (click)="toggleDeleteMode()" [disabled]="links.length===0" mat-stroked-button>
               <span *ngIf="!deleteMode" i18n>Remove Links</span>
               <span *ngIf="deleteMode" i18n>Done Removing Links</span>
             </button>
-          </ng-container>
+          </div>
         </mat-tab>
         <mat-tab *ngIf="configuration.planetType==='nation' && isLoggedIn" i18n-label label="Communities">
           <planet-community-list></planet-community-list>

src/app/community/community.scss

@@ -14,6 +14,25 @@
     grid-template-columns: 1fr;
     grid-template-areas: "news";
   }
+
+  .toggle-button {
+    margin-bottom: 1rem;
+  }
+
+  .action-buttons {
+    button {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .responsive-toolbar {
+    border-radius: 7.5px;
+  }
+
+  .label-icon {
+    vertical-align: middle;
+    margin-right: 4px;
+  }
 }
 
 .community-news {
@@ -60,14 +79,6 @@ mat-tab-group, mat-tab {
   padding-top: 0.5rem;
 }
 
-.toggle-button {
-  margin-bottom: 1rem;
-}
-
-.community-view .responsive-toolbar {
-  border-radius: 7.5px;
-}
-
 .toolbar-row {
   display: flex;
   flex-wrap: wrap;
@@ -94,11 +105,6 @@ mat-tab-group, mat-tab {
   }
 }
 
-.label-icon {
-  vertical-align: middle;
-  margin-right: 4px;
-}
-
 @media only screen and (max-width: $screen-sm) {
   .community-view .responsive-toolbar {
     height: auto;