From c504699d5b8c42528082693f40255ab6401f4e55 Mon Sep 17 00:00:00 2001
From: Volodymyr Tabashniuk <60541362+vtabashniuk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 16:17:42 +0300
Subject: [PATCH] add styles for desktop

---
 src/components/PointMenu/PointMenu.jsx        |  7 ---
 .../PointMenu/PointMenu.module.scss           | 23 ++++++-
 src/img/svg/Hover.svg                         |  1 +
 src/pages/Game/Game.module.scss               | 63 +++++++++++++++++--
 4 files changed, 79 insertions(+), 15 deletions(-)
 create mode 100644 src/img/svg/Hover.svg

diff --git a/src/components/PointMenu/PointMenu.jsx b/src/components/PointMenu/PointMenu.jsx
index 751bd32..4a9abe9 100644
--- a/src/components/PointMenu/PointMenu.jsx
+++ b/src/components/PointMenu/PointMenu.jsx
@@ -20,13 +20,6 @@ const PointMenu = ({ questions, points, id }) => {
         {questions.toReversed().map((item) => (
           <li
             key={item.amount}
-            // style={
-            //   id === item.id
-            //     ? { backgroundColor: "yellow" }
-            //     : points >= item.amount
-            //     ? { backgroundColor: "green" }
-            //     : {}
-            // }
             className={getClassList(item)}
           >
             {Number(item.amount).toLocaleString("en", {
diff --git a/src/components/PointMenu/PointMenu.module.scss b/src/components/PointMenu/PointMenu.module.scss
index 55f6ad6..c3aee4d 100644
--- a/src/components/PointMenu/PointMenu.module.scss
+++ b/src/components/PointMenu/PointMenu.module.scss
@@ -2,17 +2,34 @@
 
 .pointList {
   display: grid;
-  grid-template-rows: repeat(12, 1fr);
-  gap: 8px;
+  grid-template-rows: 1fr;
+  row-gap: 8px;
   width: 100%;
+  list-style: none;
+
+  @media screen and (min-width: 568px) and (max-width: 767px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
   & > .pointListItem {
-    background-image: url("../../img/svg/InactivePoints.svg");
+    box-sizing: border-box;
     padding: 8px 24px;
+    background-image: url("../../img/svg/InactivePoints.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     font-size: 14px;
     font-weight: 400;
     text-align: center;
 
+    @media screen and (min-width: 768px) {
+      padding: 4px 24px;
+      font-size: 12px;
+    }
+
+    @media screen and (min-width: 1180px) {
+      font-size: 20px;
+    }
+
     &.active {
       background-image: url("../../img/svg/ActivePoints.svg");
       color: c.$startButtonColor;
diff --git a/src/img/svg/Hover.svg b/src/img/svg/Hover.svg
new file mode 100644
index 0000000..87b4012
--- /dev/null
+++ b/src/img/svg/Hover.svg
@@ -0,0 +1 @@
+<svg width="405" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M388 36h17M0 36h17" stroke="#1E6A8E"/><path d="M38.717 5.283A11.5 11.5 0 0 1 48.052.5h308.896a11.5 11.5 0 0 1 9.335 4.783L388.384 36l-22.101 30.717a11.5 11.5 0 0 1-9.335 4.783H48.052a11.5 11.5 0 0 1-9.335-4.783L16.616 36 38.717 5.283Z" fill="#fff" stroke="#1E6A8E"/></svg>
\ No newline at end of file
diff --git a/src/pages/Game/Game.module.scss b/src/pages/Game/Game.module.scss
index 7732bb2..6ff084d 100644
--- a/src/pages/Game/Game.module.scss
+++ b/src/pages/Game/Game.module.scss
@@ -4,6 +4,11 @@
   height: 100vh;
   width: 100vw;
   background-color: c.$gameBackgroundColor;
+
+  @media screen and (min-width: 768px) {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+  }
 }
 
 .burgerMenu {
@@ -15,9 +20,27 @@
 .sideBar {
   position: absolute;
   top: 56px;
+  display: grid;
+  align-items: center;
   height: calc(100vh - 56px);
   width: 100vw;
+  padding-top: calc((166px / 900px) * 100vh - 56px);
+  padding-bottom: calc((166px / 900px) * 100vh);
   background-color: inherit;
+
+  @media screen and (min-width: 768px) {
+    position: static;
+    height: 100vh;
+    width: 100%;
+    background-color: c.$whiteColor;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media screen and (min-width: 1180px) {
+    padding-top: calc((166px / 900px) * 100vh);
+    padding-bottom: calc((166px / 900px) * 100vh);
+  }
 }
 
 .wrapper {
@@ -26,6 +49,14 @@
   align-items: center;
   height: calc(100vh - 56px);
   padding-bottom: 24px;
+
+  @media screen and (min-width: 768px) {
+    grid-row: 1 / 2;
+    padding-left: 80px;
+    padding-right: 80px;
+    padding-bottom: calc((122px / 900px) * 100vh);
+    height: 100vh;
+  }
 }
 
 .question {
@@ -35,19 +66,42 @@
 
 .answersList {
   display: grid;
-  grid-template-rows: repeat(4, 1fr);
+  grid-template-rows: auto;
   row-gap: 8px;
   text-align: left;
-  width: 100%;
+  // width: 100%;
   font-weight: 400;
   font-size: 14px;
   list-style-type: none;
 
+  @media screen and (min-width: 568px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto;
+    align-self: end;
+  }
+
   & > .answerListItem {
     counter-increment: list-counter;
-    padding: 20px 24px;
-    // background-color: c.$whiteColor;
+    padding: 20px calc((40px / 288px) * 100vw);
     background-image: url("../../img/svg/Inactive.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+
+    @media screen and (min-width: 568px) {
+      padding: 14px calc((68px / 1064px) * 100vw);
+    }
+
+    @media screen and (min-width: 768px) {
+      padding: 14px calc((42px / 1064px) * 100vw);
+
+      &:hover {
+        background-image: url("../../img/svg/Hover.svg");
+      }
+    }
+
+    @media screen and (min-width: 1180px) {
+      padding: 24px calc((42px / 1064px) * 100vw);
+    }
 
     &.selected {
       background-image: url("../../img/svg/Selected.svg");
@@ -67,7 +121,6 @@
 
     &::before {
       content: counter(list-counter, upper-latin) "";
-      margin-left: 24px;
       margin-right: 8px;
       color: c.$hoverStartButtonColor;
       font-weight: 600;