Merge pull request #2 from phatnguyenuit/feature/responsive

feat: add page responsive

TODO.md

@@ -1,5 +1,5 @@
 # TODO
 
-- [ ] Responsive
+- [x] Responsive
 - [ ] Unit test
 - [ ] i18n

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;
+  }
+}

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}

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>
 );
 

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>
   );
 };

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;
+  }
+}