Merge branch 'develop-ember' of https://github.com/Real-Dev-Squad/web…

…site-www into feature/signup-based-on-roles
Real-Dev-Squad · Sep 18, 2023 · d8f54e2 · d8f54e2
2 parents d62dfe2 + ebd90db
commit d8f54e2
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 36 deletions.
diff --git a/app/components/live-join.hbs b/app/components/live-join.hbs
@@ -1,6 +1,6 @@
 <section data-test-card class='card live__join'>
   <h3 data-test-card-title class='card__title'>Join the Event</h3>
-  <form onsubmit={{@clickHandler}}>
+  <form onsubmit={{@clickHandler}} class='card__form'>
     <Reusables::InputBox
       @field='Name'
       @name='name'

diff --git a/app/components/live-participants.hbs b/app/components/live-participants.hbs
@@ -4,36 +4,40 @@
     class='role-user__type guestUsers'
   >{{@user}}</p>
   <ul>
-
     {{#if (not-eq @minimumParticipants @role)}}
       <li data-test-sidebar-user={{'peer.id'}} class='user'>
         <p>No {{@user}} in the stream</p>
       </li>
     {{else}}
-
       {{#each @peers as |peer|}}
         {{#if (eq peer.roleName @role)}}
-          <li data-test-sidebar-user={{peer.id}} class='user'>
+          <li
+            data-test-sidebar-user={{peer.id}}
+            class='user
+              {{if (eq peer.id this.liveService.localPeer.id) "self" ""}}'
+          >
             <p>{{peer.name}}</p>
             {{#if
               (or
                 (eq this.liveService.localPeer.roleName this.ROLES.host)
                 (eq this.liveService.localPeer.roleName this.ROLES.moderator)
               )
             }}
-              <button
-                type='button'
-                class='user__btn'
-                {{on 'click' (fn @openKickoutModal peer)}}
-              >
-                <IconifyIcon
-                  data-test-icon='remove'
-                  @icon='material-symbols:person-remove'
-                  width='36'
-                  height='36'
-                  color='red'
-                />
-              </button>
+              {{#if (not-eq peer.id this.liveService.localPeer.id)}}
+                <button
+                  type='button'
+                  class='user__btn'
+                  {{on 'click' (fn @openKickoutModal peer)}}
+                >
+                  <IconifyIcon
+                    data-test-icon='remove'
+                    @icon='material-symbols:person-remove'
+                    width='36'
+                    height='36'
+                    color='red'
+                  />
+                </button>
+              {{/if}}
             {{/if}}
           </li>
         {{/if}}

diff --git a/app/components/signup-steps/step-one.hbs b/app/components/signup-steps/step-one.hbs
@@ -58,12 +58,10 @@
   @onChange={{this.inputHandler}}
 />
 
-<div class='signup'>
-  <Reusables::Button
-    @text='Sign Up'
-    @variant='dark'
-    @onClick={{this.signup}}
-    @test='signup'
-    @type='button'
-  />
-</div>
+<Reusables::Button
+  @text='Sign Up'
+  @variant='dark'
+  @onClick={{this.signup}}
+  @test='signup'
+  @type='button'
+/>
diff --git a/app/styles/live-header.module.css b/app/styles/live-header.module.css
@@ -1,5 +1,8 @@
 .tabs {
   display: flex;
+  position: absolute;
+  top: 0rem;
+  margin-bottom: 1rem;
 }
 
 .tabs_info {
@@ -43,4 +46,4 @@
     padding: 10px 0px;
     box-shadow: 0px 10px 15px var(--color-blackshadow);
   }
-}
+}
diff --git a/app/styles/live-join.module.css b/app/styles/live-join.module.css
@@ -3,6 +3,12 @@
   margin: 1rem auto;
 }
 
+.card__form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .card.live__join .card__title {
   color: var(--color-pink);
   margin: 0;

diff --git a/app/styles/live-sidebar.module.css b/app/styles/live-sidebar.module.css
@@ -62,7 +62,6 @@
   font-size: 22px;
 }
 
-
 .body__host {
   width: 100%;
   height: 65px;
@@ -157,7 +156,6 @@
     padding-left: 1rem;
   }
 
-
   .sidebar.open {
     height: fit-content;
   }
@@ -200,4 +198,11 @@
     }
   }
 
+}
+
+/* utility classes */
+
+.self {
+  border: 3px solid var(--color-pink);
+  background: var(--color-pink-low-opacity);
 }
diff --git a/app/styles/live.module.css b/app/styles/live.module.css
@@ -7,6 +7,7 @@
 	margin: 1rem auto;
 	padding: 1rem;
 	min-height: 80vh;
+	position: relative;
 }
 
 .live__container {
@@ -30,7 +31,6 @@
 	margin-top: 1rem;
 }
 
-
 @media only screen and (max-width: 768px) {
 	.live__video-container {
 		width: 100%;
@@ -49,5 +49,4 @@
 		align-items: center;
 		justify-content: space-between;
 	}
-
-}
+}
diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -5,18 +5,19 @@
   --color-lightgrey: #c5c5c5;
   --color-darkgrey: #8c8c8c;
   --color-green-white: #E9E9E9;
-  --color-shade-grey : #ABABAB;
+  --color-shade-grey: #ABABAB;
   --color-light-gray: #f2f2f2;
   --color-gray: #ccc;
-  
+
   --color-black: #000000;
   --color-darkblack: #091133;
   --color-darkblack-low-opacity: #09113355;
   --color-blackshadow: #3c40434d;
   --color-blackshadow2: #3c404326;
   --color-backdrop: #00000066;
-  
+
   --color-pink: #e30162;
+  --color-pink-low-opacity: #e301632e;
   --color-bgpink: #feeeff;
 
   --color-navyblue: #1d1283;

diff --git a/app/templates/live.hbs b/app/templates/live.hbs
@@ -98,7 +98,7 @@
     {{/if}}
   {{else}}
     {{! TODO - add the respective component here }}
-    <p>{{this.activeTab}} Component</p>
+    <p>Coming Soon!</p>
   {{/if}}
 
 </div>