From 3ed316973cbb4bccf5c78dfcb1b8eca91f709793 Mon Sep 17 00:00:00 2001
From: Nguyen Phat <phatnt.uit@gmail.com>
Date: Sat, 13 Feb 2021 15:03:29 +0700
Subject: [PATCH] feat: add page responsive

---
 TODO.md                                    |  2 +-
 src/components/dice-grid/styles.module.css | 17 +++++++++++++-
 src/components/dice-plate/index.tsx        |  1 +
 src/components/new-game-button/index.tsx   |  2 +-
 src/containers/dice-game/index.tsx         | 13 ++++++-----
 src/containers/dice-game/styles.module.css | 26 +++++++++++++++++++++-
 6 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/TODO.md b/TODO.md
index 793b57e..4b80893 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,5 +1,5 @@
 # TODO
 
-- [ ] Responsive
+- [x] Responsive
 - [ ] Unit test
 - [ ] i18n
diff --git a/src/components/dice-grid/styles.module.css b/src/components/dice-grid/styles.module.css
index 45725da..44a5f1b 100644
--- a/src/components/dice-grid/styles.module.css
+++ b/src/components/dice-grid/styles.module.css
@@ -77,7 +77,7 @@
   align-items: center;
   color: #ffffff;
   display: flex;
-  font-size: 150%;
+  font-size: 300%;
   font-weight: bold;
   height: 100%;
   justify-content: center;
@@ -106,3 +106,18 @@
     transform: scale(1.1);
   }
 }
+
+
+
+@media only screen and (max-width: 600px) {
+  .root {
+    grid-template-columns: repeat(2, minmax(150px, 1fr));
+    gap: 16px;
+    padding: 16px;
+    padding-top: 32px;
+  }
+
+  .reset {
+    visibility: visible;
+  }
+}
diff --git a/src/components/dice-plate/index.tsx b/src/components/dice-plate/index.tsx
index 254ffc4..e2ca062 100644
--- a/src/components/dice-plate/index.tsx
+++ b/src/components/dice-plate/index.tsx
@@ -22,6 +22,7 @@ export const DicePlateComponent: React.FC<DicePlateProps> = ({
     ))}
     <button
       type="button"
+      title="Play"
       className={classes['play-button']}
       disabled={disabled}
       onClick={onStart}
diff --git a/src/components/new-game-button/index.tsx b/src/components/new-game-button/index.tsx
index 20c6c2b..49592db 100644
--- a/src/components/new-game-button/index.tsx
+++ b/src/components/new-game-button/index.tsx
@@ -6,7 +6,7 @@ export const NewGameButtonComponent: React.FC<NewGameButtonProps> = ({
   onClick,
 }) => (
   <button title="New game" className={classes.root} onClick={onClick}>
-    <img width={24} height="auto" src="/images/sync.svg" alt="new-game-icon" />
+    <img width={32} height="auto" src="/images/sync.svg" alt="new-game-icon" />
   </button>
 );
 
diff --git a/src/containers/dice-game/index.tsx b/src/containers/dice-game/index.tsx
index 1aed209..53e999d 100644
--- a/src/containers/dice-game/index.tsx
+++ b/src/containers/dice-game/index.tsx
@@ -26,13 +26,9 @@ export const DiceGameComponent: React.FC = () => {
       <div
         className={classnames(classes['side-section'], classes['left-side'])}
       >
-        Happy new year 2021
-      </div>
-      <div
-        className={classnames(classes['side-section'], classes['right-side'])}
-      >
-        Happy new year 2021
+        <span>Happy new year 2021</span>
       </div>
+
       <div className={classes['amount-section']}>
         <span>${formatThousand(amount)}</span>
         <NewGameButton onClick={startNewSession} />
@@ -45,6 +41,11 @@ export const DiceGameComponent: React.FC = () => {
         onBet={handleBet}
         onResetBet={handleResetBet}
       />
+      <div
+        className={classnames(classes['side-section'], classes['right-side'])}
+      >
+        <span>Happy new year 2021</span>
+      </div>
     </div>
   );
 };
diff --git a/src/containers/dice-game/styles.module.css b/src/containers/dice-game/styles.module.css
index df55c47..61c0fa2 100644
--- a/src/containers/dice-game/styles.module.css
+++ b/src/containers/dice-game/styles.module.css
@@ -22,10 +22,34 @@
   align-items: center;
   color: #ff9800;
   display: flex;
-  font-size: 200%;
+  font-size: 300%;
   font-weight: bold;
   gap: 16px;
   position: absolute;
   right: 10%;
   top: 0;
 }
+
+
+@media only screen and (max-width: 600px) {
+  .side-section {
+    position: relative;
+    writing-mode: initial;
+    margin: 0 auto;
+  }
+
+  .amount-section {
+    position: relative;
+    top: unset;
+    right: unset;
+    float: right;
+    margin-top: 16px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+
+  .amount-section:after {
+    content: "";
+    clear: both;
+  }
+}