teams: smoother calendar legend (fixes #8093) (#8094)

Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.59",
+  "version": "0.16.60",
   "myplanet": {
     "latest": "v0.22.7",
     "min": "v0.21.7"

src/app/community/community.scss

@@ -35,27 +35,6 @@ planet-calendar {
   overflow-y: auto;
 }
 
-.calendar-legend {
-  padding-top: 10px;
-  text-align: right;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.calendar-legend .legend-item {
-  display: inline-flex;
-  align-items: center;
-}
-
-.calendar-legend .legend-color {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  border-radius: 4px;
-}
-
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

src/app/shared/calendar.component.scss

@@ -0,0 +1,20 @@
+.calendar-legend {
+  padding-top: 10px;
+  text-align: right;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.calendar-legend .legend-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.calendar-legend .legend-color {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  border-radius: 4px;
+}

src/app/shared/calendar.component.ts

@@ -14,6 +14,7 @@ import { addDateAndTime, styleVariables } from './utils';
 
 @Component({
   selector: 'planet-calendar',
+  styleUrls: [ './calendar.component.scss' ],
   template: `
     <full-calendar #calendar [options]="calendarOptions"></full-calendar>
     <div class="calendar-legend" *ngIf="showLegend">