feat: better transitions and animations

frontends/web/react/components/button/button.css

 .button {
     cursor: pointer;
     display: inline-flex;
+    transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
     vertical-align: middle;
 }
 

frontends/web/react/components/help/help.css

-.keyboard-help {
-    padding-left: 0px;
-    font-size: 18px;
-    line-height: 22px;
-    list-style: none;
-    margin: 0px 0px 0px 0px;
-}
-
-.keyboard-help > li {
-    margin: 12px 0px 12px 0px;
-}
-
-.keyboard-help .key-container {
-    display: inline-block;
-    min-width: 86px;
-    margin-right: 18px;
-    text-align: right;
-}
-
-.keyboard-help .key {
-    border: 2px solid #ffffff;
-    display: inline-block;
-    padding: 1px 8px 1px 8px;
-    border-radius: 6px;
-    font-size: 16px;
-}
-
-.faqs-help > h3 {
-    margin: 0px 0px 6px 0px;
-}
-
-.faqs-help > p {
-    margin: 0px 0px 22px 0px;
-    line-height: 20px;
-}
+.keyboard-help {
+    font-size: 18px;
+    line-height: 22px;
+    list-style: none;
+    margin: 0px 0px 0px 0px;
+    padding-left: 0px;
+}
+
+.keyboard-help > li {
+    margin: 12px 0px 12px 0px;
+}
+
+.keyboard-help .key-container {
+    display: inline-block;
+    margin-right: 18px;
+    min-width: 86px;
+    text-align: right;
+}
+
+.keyboard-help .key {
+    border: 2px solid #ffffff;
+    border-radius: 6px 6px 6px 6px;
+    -o-border-radius: 6px 6px 6px 6px;
+    -ms-border-radius: 6px 6px 6px 6px;
+    -moz-border-radius: 6px 6px 6px 6px;
+    -khtml-border-radius: 6px 6px 6px 6px;
+    -webkit-border-radius: 6px 6px 6px 6px;
+    display: inline-block;
+    font-size: 16px;
+    padding: 1px 8px 1px 8px;
+}
+
+.faqs-help > h3 {
+    margin: 0px 0px 6px 0px;
+}
\ No newline at end of file
+
+.faqs-help > p {
+    line-height: 20px;
+    margin: 0px 0px 22px 0px;
+}

frontends/web/react/components/help/help.tsx

@@ -80,8 +80,19 @@ const faqsHelp = () => (
             Not really, but it plays the coolest ones. Now seriously it should
             play around 90% of the Game Boy games.
         </p>
-        <h3>Why there's not sound?</h3>
+        <h3>Why there's no sound?</h3>
         <p>It's under development, I'm hopping to have it before Christmas.</p>
+        <h3>Can I use my Xbox One game pad?</h3>
+        <p>
+            Yes, just plug it in and press a button. BTW: This uses{" "}
+            <Link
+                href="https://developer.mozilla.org/docs/Web/API/Gamepad_API/Using_the_Gamepad_API"
+                target="_blank"
+            >
+                Web Gamepad API
+            </Link>
+            .
+        </p>
         <h3>Will it ever play Game Boy Color games?</h3>
         <p>Eventually...</p>
         <h3>I've found a bug, where can I report it?</h3>

frontends/web/react/components/link/link.css

@@ -2,4 +2,14 @@
     border-bottom: 2px dotted #ffffff;
     color: #ffffff;
     text-decoration: none;
+    transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: border 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.link:hover {
+    border-bottom: 2px solid #ffffff;
 }

frontends/web/react/components/modal/modal.css

@@ -56,7 +56,10 @@
     -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
     -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
     margin-top: 30px;
+    max-height: 100%;
     max-width: 100%;
     outline: none;
     -o-outline: none;
@@ -64,6 +67,7 @@
     -moz-outline: none;
     -khtml-outline: none;
     -webkit-outline: none;
+    overflow-y: auto;
     padding: 24px 24px 24px 24px;
     text-align: left;
     transform: scale(0.96);
@@ -99,9 +103,9 @@
 }
 
 .modal > .modal-window > .modal-top-buttons {
-    float: right;
-    margin-right: -10px;
-    margin-top: -10px;
+    position: absolute;
+    right: 14px;
+    top: 14px;
 }
 
 .modal > .modal-window > .modal-title {
@@ -110,9 +114,14 @@
     text-align: left;
 }
 
+.modal > .modal-window > .modal-contents {
+    overflow: auto;
+}
+
 .modal > .modal-window > .modal-text {
     font-size: 20px;
     line-height: 22px;
+    overflow: auto;
 }
 
 .modal > .modal-window > .modal-buttons {

frontends/web/react/components/modal/modal.tsx

@@ -83,7 +83,7 @@ export const Modal: FC<ModalProps> = ({
                 </div>
                 <h2 className="modal-title">{title}</h2>
                 {contents ? (
-                    contents
+                    <div className="modal-contents">{contents}</div>
                 ) : (
                     <p
                         className="modal-text"

frontends/web/react/components/panel-tab/panel-tab.css

@@ -4,17 +4,50 @@
 }
 
 .panel-tab > .tab-selectors > .tab-selector {
-    display: inline-block;
-    margin-right: 18px;
-    font-size: 22px; 
     border-bottom: 2px solid transparent;
     cursor: pointer;
+    display: inline-block;
+    font-size: 22px;
+    margin-right: 18px;
+    opacity: 0.8;
+    -o-opacity: 0.8;
+    -ms-opacity: 0.8;
+    -moz-opacity: 0.8;
+    -khtml-opacity: 0.8;
+    -webkit-opacity: 0.8;
+    transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
 }
 
 .panel-tab > .tab-selectors > .tab-selector:last-child {
     margin-right: 0px;
 }
 
+.panel-tab > .tab-selectors > .tab-selector:hover {
+    opacity: 1.0;
+    -o-opacity: 1.0;
+    -ms-opacity: 1.0;
+    -moz-opacity: 1.0;
+    -khtml-opacity: 1.0;
+    -webkit-opacity: 1.0;
+}
+
 .panel-tab > .tab-selectors > .tab-selector.selected {
     border-bottom: 2px solid #ffffff;
+    opacity: 1.0;
+    -o-opacity: 1.0;
+    -ms-opacity: 1.0;
+    -moz-opacity: 1.0;
+    -khtml-opacity: 1.0;
+    -webkit-opacity: 1.0;
 }