Merge pull request #41 from rtCamp/fix/adding-changes-from-team-review

Adding changes from team review
rtCamp · Feb 5, 2024 · cafdc62 · cafdc62
2 parents a2b6a3a + b5d09c8
commit cafdc62
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -710,10 +710,18 @@ video {
   width: 6rem;
 }
 
+.w-\[30rem\] {
+  width: 30rem;
+}
+
 .w-\[60rem\] {
   width: 60rem;
 }
 
+.w-\[90rem\] {
+  width: 90rem;
+}
+
 .w-full {
   width: 100%;
 }

diff --git a/src/common/internal-page/header.ejs b/src/common/internal-page/header.ejs
@@ -1,7 +1,13 @@
-    <div class="container mx-auto pt-8 pb-20">
+    <% 
+        const containerSize = typeof containerType !== 'undefined' ? 
+            { 'sm'  : '30rem',
+                'md'  : '60rem',
+                'lg'  : '90rem' }[containerType] : '60rem';
+    %>
+     <div class="container mx-auto pt-8 pb-20">
         <% if (title) { %>
             <header>
                 <h1 class="text-3xl font-bold my-8 text-center text-slate-800"><%= title %></h1>
             </header>
         <% } %>
-        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
+        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[<%= containerSize %>] mx-auto max-w-full">
diff --git a/src/scenarios/gsi/index.ejs b/src/scenarios/gsi/index.ejs
@@ -1,29 +1,31 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<%- include(commonPath + '/internal-page/header.ejs') %>
-    <p class="text-lg font-bold mb-4 text-center">Please login to test this demo.</p>
+<%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
+    <div id="status" class="text-center font-bold text-lg my-4"></div>
     <div class="flex justify-center">
         <div class="g-signin2" data-onsuccess="onSignIn"></div>
         <button id="signout-btn" class="hidden ml-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded" onclick="signOut()">Sign Out</button>
     </div>
-    <div id="status" class="text-center text-lg mt-4"></div>
 <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <script>
     const statusMessage = document.getElementById('status');
     const signoutBtn = document.getElementById('signout-btn');
+    const googleSignInBtn = document.querySelector('.g-signin2');
 
     function onSignIn(googleUser) {
         signoutBtn.classList.remove('hidden');
+        googleSignInBtn.classList.add('hidden');
         const profile = googleUser.getBasicProfile();
         statusMessage.textContent = 'Hello ' + profile.getName() + '!';
     }
 
     function signOut() {
         const auth2 = gapi.auth2.getAuthInstance();
-        auth2.signOut().then(function () {
-        statusMessage.textContent = '';
-        signoutBtn.classList.add('hidden');
+        auth2.signOut().then(() => {
+            statusMessage.textContent = '';
+            signoutBtn.classList.add('hidden');
+            googleSignInBtn.classList.remove('hidden');
         });
     }
 </script>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,5 +16,8 @@ module.exports = {
     'bg-green-100',
     'bg-blue-100',
     'bg-red-100',
+    'w-[30rem]',
+    'w-[60rem]',
+    'w-[90rem]',
   ],
 }