From 7da51b9c16c45155e5094987cd3fcce88e33e371 Mon Sep 17 00:00:00 2001
From: avlyalin <lyalin.alexey@gmail.com>
Date: Mon, 1 Jun 2020 22:15:37 +0300
Subject: [PATCH] fix: lobby page logo styles

---
 src/containers/lobby/lobby.js         |  7 ++++-
 src/containers/lobby/lobby.module.css | 37 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/containers/lobby/lobby.module.css

diff --git a/src/containers/lobby/lobby.js b/src/containers/lobby/lobby.js
index e2fb97b..eaac4b8 100644
--- a/src/containers/lobby/lobby.js
+++ b/src/containers/lobby/lobby.js
@@ -55,7 +55,12 @@ function Lobby({
   }
 
   return (
-    <div className={classnames('p-5 pt-4 md:pt-6 min-h-screen', bgColor)}>
+    <div
+      className={classnames(
+        'p-5 pt-4 md:pt-6 lg:pt-8 xl:pt-10 min-h-screen',
+        bgColor,
+      )}
+    >
       <div
         role="img"
         className={classnames(styles.header)}
diff --git a/src/containers/lobby/lobby.module.css b/src/containers/lobby/lobby.module.css
new file mode 100644
index 0000000..a2d74c8
--- /dev/null
+++ b/src/containers/lobby/lobby.module.css
@@ -0,0 +1,37 @@
+.header {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='32' viewBox='0 0 210 32' fill='none'%3E%3Cstyle%3E .a%7Bfill:%2309C;%7D.b%7Bfill:white;%7D.c%7Bfill:%23CB6060;%7D%3C/style%3E%3Cpath d='M0 5.1C0 2.3 2.2 0 4.8 0H15.1C17.8 0 20 2.3 20 5.1V21.5C20 24.3 17.8 26.6 15.1 26.6H4.8C2.2 26.6 0 24.3 0 21.5V5.1Z' class='a'/%3E%3Cpath d='M15.7 15.5C15.6 17 15 18.2 14 19.1 13.1 20 11.8 20.5 10.2 20.5 8.4 20.5 7 19.8 6 18.6 5 17.3 4.5 15.6 4.5 13.5V12.6C4.5 11.2 4.7 10 5.2 8.9 5.6 7.9 6.3 7.1 7.2 6.5 8 5.9 9 5.7 10.2 5.7 11.8 5.7 13.1 6.1 14 7 15 7.9 15.6 9.1 15.7 10.7H12.9C12.8 9.8 12.6 9.1 12.1 8.7 11.7 8.3 11.1 8.1 10.2 8.1 9.2 8.1 8.5 8.4 8.1 9.2 7.6 9.9 7.4 11 7.3 12.5V13.5C7.3 15.1 7.6 16.2 8 17 8.5 17.7 9.2 18 10.2 18 11 18 11.7 17.8 12.1 17.4 12.5 17 12.8 16.3 12.9 15.5H15.7Z' class='b'/%3E%3Cpath d='M23 5.1C23 2.3 25.2 0 27.8 0H38.1C40.8 0 43 2.3 43 5.1V21.5C43 24.3 40.8 26.6 38.1 26.6H27.8C25.2 26.6 23 24.3 23 21.5V5.1Z' class='c'/%3E%3Cpath d='M38.9 13.4C38.9 14.8 38.6 16 38.1 17.1 37.7 18.2 37 19 36.1 19.6 35.2 20.2 34.2 20.5 33 20.5 31.9 20.5 30.8 20.2 29.9 19.6 29.1 19 28.4 18.2 27.9 17.1 27.4 16.1 27.1 14.8 27.1 13.5V12.7C27.1 11.3 27.4 10.1 27.8 9 28.3 7.9 29 7.1 29.9 6.5 30.8 5.9 31.8 5.7 33 5.7 34.1 5.7 35.2 5.9 36 6.5 36.9 7.1 37.6 7.9 38.1 9 38.6 10.1 38.9 11.3 38.9 12.7V13.4ZM36 12.7C36 11.2 35.7 10.1 35.2 9.3 34.7 8.5 33.9 8.1 33 8.1 32 8.1 31.3 8.5 30.8 9.3 30.3 10 30 11.2 30 12.7V13.4C30 14.9 30.3 16 30.8 16.8 31.3 17.6 32 18 33 18 34 18 34.7 17.6 35.2 16.9 35.7 16.1 36 14.9 36 13.4V12.7Z' class='b'/%3E%3Cpath d='M46 5.1C46 2.3 48.2 0 50.9 0H61.1C63.8 0 66 2.3 66 5.1V21.5C66 24.3 63.8 26.6 61.1 26.6H50.9C48.2 26.6 46 24.3 46 21.5V5.1Z' class='a'/%3E%3Cpath d='M50.9 20.3V5.9H55.2C56.4 5.9 57.5 6.1 58.4 6.7 59.4 7.3 60.1 8.1 60.7 9.1 61.2 10.2 61.5 11.4 61.5 12.7V13.4C61.5 14.7 61.2 15.9 60.7 17 60.1 18 59.4 18.8 58.4 19.4 57.5 20 56.4 20.2 55.2 20.3H50.9ZM53.8 8.3V17.9H55.1C56.2 17.9 57.1 17.5 57.7 16.7 58.3 16 58.6 14.9 58.6 13.5V12.7C58.6 11.3 58.3 10.1 57.7 9.4 57.1 8.6 56.3 8.3 55.2 8.3H53.8Z' class='b'/%3E%3Cpath d='M69 5.1C69 2.3 71.2 0 73.9 0H84.2C86.8 0 89 2.3 89 5.1V21.5C89 24.3 86.8 26.6 84.2 26.6H73.9C71.2 26.6 69 24.3 69 21.5V5.1Z' class='a'/%3E%3Cpath d='M82.8 14H77.3V17.9H83.7V20.3H74.5V5.9H83.7V8.3H77.3V11.7H82.8V14Z' class='b'/%3E%3Cpath d='M92 5.1C92 2.3 94.2 0 96.9 0H107.2C109.8 0 112 2.3 112 5.1V21.5C112 24.3 109.8 26.6 107.2 26.6H96.9C94.2 26.6 92 24.3 92 21.5V5.1Z' class='c'/%3E%3Cpath d='M107.6 20.3H104.8L99.2 10.8V20.3H96.4V5.9H99.2L104.8 15.3V5.9H107.6V20.3Z' class='b'/%3E%3Cpath d='M115 5.1C115 2.3 117.2 0 119.9 0H130.2C132.8 0 135 2.3 135 5.1V21.5C135 24.3 132.8 26.6 130.2 26.6H119.9C117.2 26.6 115 24.3 115 21.5V5.1Z' class='c'/%3E%3Cpath d='M127.2 17.3H122.2L121.3 20.3H118.3L123.4 5.9H126L131.2 20.3H128.2L127.2 17.3ZM123 14.9H126.4L124.7 9.5 123 14.9Z' class='b'/%3E%3Cpath d='M138 5.1C138 2.3 140.2 0 142.9 0H153.2C155.8 0 158 2.3 158 5.1V21.5C158 24.3 155.8 26.6 153.2 26.6H142.9C140.2 26.6 138 24.3 138 21.5V5.1Z' class='a'/%3E%3Cpath d='M144.5 5.9L148 16.3 151.5 5.9H155.3V20.3H152.4V16.3L152.7 9.5 149 20.3H147L143.3 9.5 143.6 16.3V20.3H140.8V5.9H144.5Z' class='b'/%3E%3Cpath d='M161 5.1C161 2.3 163.2 0 165.9 0H176.2C178.8 0 181 2.3 181 5.1V21.5C181 24.3 178.8 26.6 176.2 26.6H165.9C163.2 26.6 161 24.3 161 21.5V5.1Z' class='c'/%3E%3Cpath d='M174.8 14H169.3V17.9H175.7V20.3H166.5V5.9H175.7V8.3H169.3V11.7H174.8V14Z' class='b'/%3E%3Cpath d='M185.4 11.2C184.7 8.5 186.2 5.7 188.8 5L198.7 2.2C201.3 1.5 204 3.1 204.7 5.8L208.7 21.7C209.4 24.4 207.9 27.2 205.3 27.9L195.4 30.7C192.8 31.4 190.1 29.8 189.4 27.1L185.4 11.2Z' fill='black'/%3E%3Cpath d='M199.9 19C199.7 18.4 199.5 18.1 199 17.9 198.6 17.7 197.8 17.6 196.8 17.5 195.8 17.5 194.9 17.3 194.3 17.2 192.6 16.8 191.5 15.8 191.2 14.4 191 13.6 191 12.9 191.2 12.2 191.5 11.5 192 10.9 192.6 10.3 193.3 9.8 194.1 9.4 195.1 9.1 196 8.8 196.9 8.8 197.8 8.9 198.6 9.1 199.3 9.4 199.9 10 200.4 10.5 200.8 11.2 201.1 12L198.3 12.8C198.2 12.2 197.8 11.7 197.4 11.5 196.9 11.2 196.3 11.2 195.6 11.4 194.9 11.6 194.5 11.9 194.2 12.3 193.9 12.7 193.8 13.1 193.9 13.6 194 14.1 194.3 14.4 194.8 14.6 195.4 14.8 196.1 14.9 197 14.9 198.7 14.9 200 15.2 200.9 15.8 201.8 16.3 202.4 17.1 202.6 18.2 202.9 19.4 202.7 20.4 202.1 21.4 201.4 22.3 200.3 23 198.8 23.4 197.8 23.7 196.8 23.7 195.9 23.6 194.9 23.4 194.1 23.1 193.5 22.5 192.9 22 192.5 21.2 192.2 20.3L195 19.6C195.4 21.1 196.5 21.6 198.2 21.1 198.9 20.9 199.3 20.7 199.6 20.3 199.9 19.9 200 19.5 199.9 19Z' class='b'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+    background-size: 220px;
+    @apply h-10;
+}
+
+@responsive {
+    @screen xs {
+        .header {
+            background-size: 250px;
+        }
+    }
+    @screen sm {
+        .header {
+            background-size: 280px;
+            @apply h-12;
+        }
+    }
+    @screen md {
+        .header {
+            background-size: 300px;
+        }
+    }
+    @screen lg {
+        .header {
+            background-size: 320px;
+        }
+    }
+    @screen xl {
+        .header {
+            background-size: 330px;
+        }
+    }
+}