Merge pull request #120 from karrotmvp/fix/ui-ux

fix design
karrotmvp · Nov 26, 2021 · 71d1da4 · 71d1da4
2 parents df50153 + b39a41c
commit 71d1da4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/Row/DefaultRow.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/Row/DefaultRow.tsx
@@ -61,7 +61,8 @@ const Container = styled.div<{ me?: boolean }>`
   display: flex;
   flex-flow: row;
   align-items: center;
-
+  justify-content: center;
+  gap: 15px;
   padding: 12px 20px 12px 26px;
   margin: 8px 0px;
   width: 100%;
@@ -76,11 +77,6 @@ const ContentsWrapper = styled.div`
 const Rank = styled.div`
   width: 25px;
   display: flex;
-  align-self: flex-start;
-
-  margin-top: 3px;
-  // margin-left: 5px;
-
   font-weight: bold;
   font-size: 12px;
   line-height: 161.7%;
@@ -97,7 +93,7 @@ const Info = styled.div`
 const Name = styled.div`
   display: flex;
   flex-flow: row;
-  gap: 4px;
+  gap: 6px;
   align-items: center;
 
   font-style: normal;

diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/Row/TopRow.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/Row/TopRow.tsx
@@ -68,9 +68,10 @@ const Container = styled.div<{ me?: boolean; rank?: number }>`
   display: flex;
   flex-flow: row;
   align-items: center;
-
+  justify-content: center;
   padding: 12px 20px 8px 26px;
   margin: 8px 0px;
+  gap: 15px;
   width: 100%;
   border-radius: 10px;
   border: 1px solid ${(props) => (props.me === true ? '#EBE0DB' : '#ececec')};
@@ -100,6 +101,7 @@ const Container = styled.div<{ me?: boolean; rank?: number }>`
 `;
 
 const Rank = styled.div`
+  min-width: 25px;
   width: 25px;
   display: flex;
   align-self: flex-start;
@@ -127,7 +129,7 @@ const Info = styled.div`
 const Name = styled.div<{ rank: number }>`
   display: flex;
   flex-flow: row;
-  gap: 4px;
+  gap: 6px;
   align-items: center;
 
   font-style: normal;