update shadows

components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ const Footer = (): JSX.Element => {
     <footer className={styles.root}>
       <div className={styles.container}>
         <div className={styles.wrapper}>
-          <span>© 2021 Typer.io</span>
+          <span>© 2022 Typer.io</span>
           <div>
             created by <a href="https://github.com/jdyn">Jaden</a>
           </div>

components/Home/index.module.css

@@ -116,7 +116,7 @@
 
 .menu {
   display: grid;
-  gap: 10px;
+  gap: 15px;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr;
 }
@@ -145,8 +145,7 @@
 }
 
 .card:hover::before {
-  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4),
-    0 18px 36px -18px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--hover-shadow)
 }
 
 .card:active {

components/Lobby/LobbyPage.tsx

@@ -165,7 +165,7 @@ const LobbyPage = (): JSX.Element => {
             {room.id && (
               <>
                 <span>share this link to invite players.</span>
-                <span>Click the link to copy!</span>
+                <span>{copied ? 'Copied!' : 'Click the link to copy!'}</span>
                 <div className={styles.linkContainer}>
                   <button
                     type="button"
@@ -174,10 +174,16 @@ const LobbyPage = (): JSX.Element => {
                     style={{ filter: hidden ? 'blur(4px)' : '' }}
                     onClick={() => copyToClipboard('lobby-link', setCopied)}
                   >{`${process.env.BASE_URL}/lobby/${room.id}`}</button>
-                  <Button margin="0px" padding="0px 5px" onClick={() => setHidden(!hidden)}>
+                  <Button
+                    margin="0px"
+                    padding="0px 5px"
+                    onClick={() => {
+                      setHidden(!hidden);
+                      setCopied(false);
+                    }}
+                  >
                     {hidden ? 'show' : 'hide'}
                   </Button>
-                  <span>{copied ? 'Copied!' : ''}</span>
                 </div>
                 {currrentClient.isHost ? (
                   <Button

components/Shared/Banner/index.module.css

@@ -9,7 +9,7 @@
   text-align: center;
   align-items: center;
   border: 2px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--banner-shadow);
   z-index: 1;
 }
 

public/static/styles/global.css

@@ -56,6 +56,9 @@
   --white: #fff;
   --black: #4c4c4c;
   --shadow: 0 10px 10px rgba(10, 10, 90, 0.25), 0 10px 50px rgba(10, 10, 90, 0.25);
+  --banner-shadow: 0 5px 20px rgba(10, 10, 90, 0.25);
+  --hover-shadow: 0 30px 60px -12px rgba(10, 10, 90, 0.4),
+  0 18px 36px -18px rgba(10, 10, 90, 0.3);
   --stripe-color: #eef2f7;
 }
 
@@ -78,6 +81,9 @@
   --white: #eef2f7;
   --black: #4c4c4c;
   --shadow: 0 10px 10px rgba(0, 0, 0, 0.25), 0 10px 50px rgba(0, 0, 0, 0.25);
+  --banner-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
+  --hover-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4),
+  0 18px 36px -18px rgba(0, 0, 0, 0.3);
   --stripe-color: #202020;
 }
 

util/copyToClipboard.ts

@@ -1,12 +1,12 @@
-function copyToClipboard(elementId, callback) {
-  var tempElement = document.createElement('input');
+function copyToClipboard(elementId: string, callback: (success: boolean) => void): void {
+  const tempElement = document.createElement('input');
   tempElement.setAttribute('value', document.getElementById(elementId).innerHTML);
   document.body.appendChild(tempElement);
   tempElement.select();
   document.execCommand('copy');
   document.body.removeChild(tempElement);
 
-  callback(true)
+  callback(true);
 }
 
 export default copyToClipboard;