Visual fixes

public/css/index.css

@@ -72,7 +72,6 @@ header .account-preview .initials.inclusive {
   font-size: 11pt;
 }
 header .account-preview .full-name {
-  height: 5vh;
   width: 10vw;
   margin-top: 0.5vh;
   background-color: rgba(0, 0, 0, 0.658);
@@ -82,7 +81,9 @@ header .account-preview .full-name {
   opacity: 0%;
   transition: 0.4s ease-in-out;
   text-align: center;
+  padding: 0px 0.5vw;
   padding-bottom: 1vh;
+  border-radius: 10px;
 }
 header .account-preview .full-name.show {
   opacity: 100%;
@@ -103,10 +104,26 @@ header .account-preview .full-name.show {
   }
 }
 @media (max-width: 576px) {
+  header {
+    padding: 3vh 0px;
+    height: auto;
+  }
+  header h2 {
+    margin-bottom: 1vh;
+  }
   header .redirect-button {
     width: 20vw;
     position: initial;
   }
+  header .account-preview {
+    position: initial;
+  }
+  header .account-preview .full-name {
+    height: 0;
+  }
+  header .account-preview .full-name.show {
+    opacity: 0%;
+  }
 }
 .game-container {
   display: flex;
@@ -921,10 +938,12 @@ header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.d
 .info-account .functions .close-session {
   width: 20vw;
   height: 10vh;
+  font-size: 15pt;
   background: #b9b9b9;
   transition: ease-in-out 0.4s;
   border: 0;
   border-radius: 10px;
+  cursor: pointer;
 }
 .info-account .functions .close-session:hover {
   background: #ffa5a5;
@@ -957,4 +976,40 @@ header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.d
   border: 4px solid #535353;
 }
 
+@media (max-width: 991.98px) {
+  .info-account .functions {
+    flex-direction: column;
+  }
+  .info-account .functions .close-session {
+    width: 100%;
+    margin-bottom: 1vh;
+  }
+  .info-account .functions .reffer-code-container {
+    margin-left: 0;
+  }
+}
+@media (max-width: 576px) {
+  .info-account .person {
+    width: auto;
+    margin: 0px 10vw;
+    margin-top: 2vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .info-account .person h2, .info-account .person h3 {
+    margin: 0;
+    margin-bottom: 1vh;
+  }
+  .info-account .functions .reffer-code-container {
+    flex-direction: column;
+  }
+  .info-account .functions .reffer-code-container button {
+    border-radius: 10px;
+    width: 20vw;
+    height: 7vw;
+  }
+}
+
 /*# sourceMappingURL=index.css.map */

public/sass/_header.scss

@@ -80,9 +80,33 @@ header {
 
     header {
 
+        padding: 3vh 0px;
+
+        height: auto;
+
+        h2 {
+
+            margin-bottom: 1vh;
+        }
+
         .redirect-button {
             width: 20vw;
             position: initial;
         }
+        
+        .account-preview {
+
+            position: initial;
+            
+            .full-name {
+
+                height: 0;
+    
+                &.show {
+
+                    opacity: 0%;
+                }
+            }
+        }
     }
 }

public/sass/control-panel/_account-preview.scss

@@ -40,7 +40,7 @@
 
     .full-name {
         
-        height: 5vh;
+        //height: 5vh;
         width: 10vw;
 
         margin-top: 0.5vh;
@@ -55,7 +55,9 @@
         transition: 0.4s ease-in-out;
         text-align: center;
         
+        padding: 0px 0.5vw;
         padding-bottom: 1vh;
+        border-radius: 10px;
 
         &.show {
 

public/sass/info-account/_info-account.scss

@@ -39,6 +39,8 @@
             width: 20vw;
             height: 10vh;
 
+            font-size: 15pt;
+
             background: rgb(185, 185, 185);
 
             transition: ease-in-out 0.4s;
@@ -48,6 +50,9 @@
             //border: 1px solid rgb(92, 92, 92);
             border-radius: 10px;
 
+            cursor: pointer;
+            
+
             &:hover {
                 background: rgb(255, 165, 165);
 
@@ -99,4 +104,67 @@
             }
         }
     }
+}
+
+
+@media (max-width: 991.98px) {
+
+    .info-account {
+        
+        .functions {
+
+            flex-direction: column;
+
+            .close-session {
+
+                width: 100%;
+
+                margin-bottom: 1vh;
+            }
+
+            .reffer-code-container {
+
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+    .info-account {
+
+        .person {
+            width: auto;
+            margin: 0px 10vw;
+            margin-top: 2vh;
+
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+
+            align-items: flex-start;
+
+            h2, h3 {
+                margin: 0;
+                margin-bottom: 1vh;
+            }
+        }
+
+        .functions {
+
+            .reffer-code-container {
+
+                flex-direction: column;
+
+                button {
+
+                    border-radius: 10px;
+
+                    width: 20vw;
+                    height: 7vw;
+                }
+            }
+        }
+    }
 }