fix mobile styles

gear-foundation · Aug 6, 2024 · 5f18314 · 5f18314
1 parent 7c8f7cb
commit 5f18314
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/...s/battleship-zk/src/features/game/components/ship-arrangement/ShipArrangement.module.scss b/...s/battleship-zk/src/features/game/components/ship-arrangement/ShipArrangement.module.scss
@@ -16,8 +16,8 @@
   background: black;
   z-index: 1;
 
-  background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,51,39,1) 50%, rgba(0,0,0,1) 90%); 
+  background: rgb(0, 0, 0);
+  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 51, 39, 1) 50%, rgba(0, 0, 0, 1) 90%);
 }
 
 .content {
@@ -33,6 +33,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  border: 2px solid #cfcfcf;
+  border-radius: 4px;
+  z-index: 1;
 }
 
 .row {
@@ -55,6 +58,9 @@
   gap: 15px;
   padding: 0 16px;
 
+  button {
+    // padding: 12px 10px;
+  }
   button,
   button span {
     width: 100%;
@@ -68,11 +74,12 @@
   &::after {
     position: absolute;
     z-index: 0;
-    top: 100%; left: 0;
+    top: 100%;
+    left: 0;
     width: 100%;
     height: 140px;
-    background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,51,39,1) 50%, rgba(0,0,0,1) 90%); 
+    background: rgb(0, 0, 0);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 51, 39, 1) 50%, rgba(0, 0, 0, 1) 90%);
     content: '';
   }
-}
+}
diff --git a/...end/apps/battleship-zk/src/features/game/components/ship-arrangement/ship-arrangement.tsx b/...end/apps/battleship-zk/src/features/game/components/ship-arrangement/ship-arrangement.tsx
@@ -94,23 +94,30 @@ export default function ShipArrangement({ gameType, savedBoard, makeStartGameTra
   return (
     <div className={styles.content}>
       <div className={styles.header}>
-        <Heading>Your ships</Heading>
+        <Heading>Your Ships</Heading>
         <div className={styles.textWrapper}>
           <Text size="lg">Click 'Generate' to choose a ship arrangement on the board.</Text>
         </div>
       </div>
-      <div style={{ width: '100%' }}>
+      <div className={styles.map}>
         <div>
           <Map sizeBlock={72} shipStatusArray={shipsBoard} />
         </div>
       </div>
       <div className={styles.buttons}>
-        <Button color="grey" onClick={handleGoBack} disabled={pending}>
+        <Button color="grey" size="small" onClick={handleGoBack} disabled={pending}>
           Back
         </Button>
-        <Button color="dark" text="Generate" onClick={onGenerateRandomLayout} disabled={isLoadingGenerate || pending} />
+        <Button
+          color="dark"
+          size="small"
+          text="Generate"
+          onClick={onGenerateRandomLayout}
+          disabled={isLoadingGenerate || pending}
+        />
         <Button
           text="Continue"
+          size="small"
           onClick={onGameStart}
           disabled={!shipsBoard.length || gasless.isLoading}
           isLoading={pending}