ui polish (#3333)

## Description:

- disabled dragging in many places, select skin, select flag, select
lang, and footer stuff
- removed shadow from flags in flag selector
- added bounce to the lang selector

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/client/components/Footer.ts

@@ -10,9 +10,9 @@ export class Footer extends LitElement {
   render() {
     return html`
       <footer
-        class="[.in-game_&]:hidden bg-slate-950/70 backdrop-blur-md flex flex-col items-center justify-center gap-2 pt-[2px] pb-2 text-white/50 w-full border-t border-white/10 shrink-0 mt-auto"
+        class="[.in-game_&]:hidden bg-slate-950/70 backdrop-blur-md flex flex-col items-center justify-center gap-1 pt-1 pb-3 text-white/50 w-full border-t border-white/10 shrink-0 mt-auto"
       >
-        <div class="flex items-center justify-center gap-6 pt-2">
+        <div class="flex items-center justify-center gap-4 lg:gap-6 pt-2">
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
             target="_blank"
@@ -22,7 +22,8 @@ export class Footer extends LitElement {
             <img
               src="/icons/github-mark-white.svg"
               data-i18n-alt="news.github_link"
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
+              draggable="false"
             />
           </a>
           <a
@@ -32,7 +33,7 @@ export class Footer extends LitElement {
             class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
           >
             <svg
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
               viewBox="0 0 24 24"
               fill="white"
               xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +50,7 @@ export class Footer extends LitElement {
             class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
           >
             <svg
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
               viewBox="0 0 24 24"
               fill="white"
             >
@@ -67,23 +68,24 @@ export class Footer extends LitElement {
             <img
               src="/icons/wiki-logo.svg"
               data-i18n-alt="main.wiki"
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
+              draggable="false"
             />
           </a>
         </div>
-        <div class="text-xs mt-2 flex items-center justify-center gap-4">
+        <div class="text-xs mt-1 lg:mt-2 grid grid-cols-3 w-full px-4">
           <a
             href="/terms-of-service.html"
             data-i18n="main.terms_of_service"
             target="_blank"
-            class="hover:text-white transition-colors"
+            class="hover:text-white transition-colors text-left"
           ></a>
-          <span data-i18n="main.copyright"></span>
+          <span data-i18n="main.copyright" class="text-center"></span>
           <a
             href="/privacy-policy.html"
             data-i18n="main.privacy_policy"
             target="_blank"
-            class="hover:text-white transition-colors"
+            class="hover:text-white transition-colors text-right"
           ></a>
         </div>
       </footer>

src/client/components/PatternButton.ts

@@ -169,7 +169,8 @@ export function renderPatternPreview(
   return html`<img
     src="${generatePreviewDataUrl(pattern, width, height)}"
     alt="Pattern preview"
-    class="w-full h-full object-contain [image-rendering:pixelated]"
+    class="w-full h-full object-contain [image-rendering:pixelated] pointer-events-none"
+    draggable="false"
   />`;
 }