feat: add mobile responsive for meeting status indicator ml-282 (#379)

* feat: add meeting status update ml-282

* feat: add migration ml-282

* feat: add meeting ended status handling ml-282

* fix: change visibility condition for stop recording button ml-282

* refactor: update migration ml-282

* refactor: update meeting.service ml-282

* feat: update meeting-status-badge ml-282

* fix: update down method in migration ml-282

* refactor: move types to a separate file in meeting-status-badge ml-282

* fix: update db migration ml-282

* feat: create helper for meeting status handling ml-282

* refactor: update meeting.service ml-282

* refactor: update meeting-status-badge ml-282

* refactor: update properties in meeting-status-badge ml-282

* refactor: move socket initilization back ml-282

* feat: add mobile responsive for meeting status badge ml-282

---------

Co-authored-by: Farid Shabanov <[email protected]>

Author: MrKopchick

apps/bot/src/libs/modules/zoom/base-zoom-bot.ts

@@ -313,6 +313,7 @@ class BaseZoomBot {
 	public async run(): Promise<void> {
 		try {
 			this.browser = await puppeteer.launch(this.config.getLaunchOptions());
+			this.logger.info("emmiting joining to meeting");
 			this.page = await this.browser.newPage();
 			await this.page.setUserAgent(USER_AGENT);
 			this.initSocket();

apps/frontend/src/assets/css/variables.css

@@ -16,6 +16,7 @@
 	--color-brand-hover: rgb(15 143 178);
 	--color-accent-1: rgb(255 94 94);
 	--color-accent-2: rgb(170 235 152);
+	--color-accent-3: rgb(9 196 65);
 	--border-radius-sm: 5px;
 	--border-radius-md: 8px;
 	--border-radius-lg: 10px;

apps/frontend/src/libs/components/meeting-status-badge/styles.module.css

@@ -150,7 +150,7 @@
 }
 
 .meeting-status-badge--success {
-	--meeting-status-badge-foreground: var(--color-accent-2);
+	--meeting-status-badge-foreground: var(--color-accent-3);
 }
 
 .meeting-status-badge--warning {
@@ -212,3 +212,17 @@
 		height: 12px;
 	}
 }
+
+@media (width <= 576px) {
+	.meeting-status-badge {
+		gap: 0;
+		padding: 0;
+		background: none;
+		border: none;
+		box-shadow: none;
+	}
+
+	.meeting-status-badge__label {
+		display: none;
+	}
+}