Merge pull request #46 from arazaki/feat/update-general-styles

Feat/update general styles
elizaOS · Dec 2, 2024 · 483f4f1 · 483f4f1
2 parents 222691e + c891403
commit 483f4f1
Show file tree

Hide file tree

Showing 13 changed files with 355 additions and 359 deletions.
diff --git a/public/fonts/Bootzy TM.ttf b/public/fonts/Bootzy TM.ttf
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/logo_old.svg b/public/logo_old.svg
diff --git a/src/components/ContentContainer.tsx b/src/components/ContentContainer.tsx
@@ -1,16 +1,14 @@
-import { FC, ReactNode } from 'react';
-import styles from './ContentContainer.module.css';
+import { FC, ReactNode } from "react"
+import styles from "./ContentContainer.module.css"
 
 interface Props {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 export const ContentContainer: FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <div className={`flex-1 container mx-auto ${styles.container}`}>
-      <div className="h-full w-full flex flex-col  justify-center">
-        {children}
-      </div>
+    <div className={`container mx-auto flex-1 ${styles.container}`}>
+      <div className="flex w-full flex-col justify-center">{children}</div>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/leaderboard/LeaderboardMedals.module.css b/src/components/leaderboard/LeaderboardMedals.module.css
@@ -19,6 +19,7 @@
   flex-direction: column;
   min-width: 8rem;
   max-width: 10rem;
+  min-height: 155px;
   align-items: center;
   gap: 0.75rem;
   transition: all 0.3s ease;
@@ -27,6 +28,7 @@
 .firstPlace {
   /* transform: scale(1.15); */
   margin: 0 1rem;
+  min-height: 198px;
 }
 
 .imageWrapper {
@@ -58,7 +60,6 @@
   position: absolute;
   top: 1px;
   left: -4px;
-  width: 2rem;
   display: flex;
   width: 30px;
   height: 30px;
@@ -69,10 +70,6 @@
   z-index: 1;
   font-family: var(--font-family-base);
   border-radius: 100px;
-  font-family: 700;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 22px;
 }
 
 .firstPlacemedal {
@@ -82,14 +79,17 @@
 
 .gold {
   background-color: #ffa600;
+  @apply text-xl font-bold text-white;
 }
 
 .silver {
   background-color: #858585;
+  @apply text-base font-bold text-white;
 }
 
 .bronze {
   background-color: #d56b00;
+  @apply text-base font-bold text-white;
 }
 
 .userInfo {
@@ -102,17 +102,13 @@
 }
 
 .name {
-  color: #fff;
   text-align: center;
   font-family: var(--font-family-base);
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 28px;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  @apply text-xl font-semibold text-white;
 }
 
 .scoreWrapper {
@@ -146,6 +142,11 @@
     padding: 1rem;
   }
 
+  .medalHolder {
+    max-width: 100px;
+    min-width: 100px;
+  }
+
   .firstPlace {
     /* transform: scale(1.1); */
     margin: 0 0.5rem;
@@ -164,12 +165,6 @@
   .medal {
     width: 30px;
     height: 30px;
-    font-size: 20px;
-    font-weight: 700;
-  }
-
-  .name {
-    font-size: 0.75rem;
   }
 
   .score {

diff --git a/src/components/leaderboard/LeaderboardMedals.tsx b/src/components/leaderboard/LeaderboardMedals.tsx
@@ -29,7 +29,7 @@ const SkeletonMedal: FC<{ position: number }> = ({ position }) => {
       <div
         className={`${styles.imageWrapper} ${
           isFirstPlace ? styles.firstPlaceImage : ""
-        }`}
+        } inline-flex`}
       >
         <div
           className={`${styles.medal} ${getMedalClass(position)} ${
@@ -39,10 +39,10 @@ const SkeletonMedal: FC<{ position: number }> = ({ position }) => {
           {displayPosition}
         </div>
         <div
-          className={`${styles.skeletonCircle}`}
+          className={`${styles.skeletonCircle} flex-grow`}
           style={{
-            width: size,
-            height: size,
+            maxWidth: size,
+            maxHeight: size,
           }}
         />
       </div>
@@ -124,7 +124,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
                   <span className={styles.score}>
                     {sortedUsers[1]?.score
                       ? sortedUsers[1].score.toFixed(2)
-                      : "0.00"}
+                      : "-"}
                   </span>
                 </div>
               </div>
@@ -165,8 +165,8 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
                     <div
                       className={styles.placeholderImage}
                       style={{
-                        width: "80px",
-                        height: "80px",
+                        maxWidth: "80px",
+                        maxHeight: "80px",
                       }}
                     />
                   )}
@@ -184,7 +184,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
                   <span className={`${styles.score} ${styles.firstPlaceScore}`}>
                     {sortedUsers?.[0]?.score
                       ? sortedUsers?.[0].score.toFixed(2)
-                      : "0.00"}
+                      : "-"}
                   </span>
                 </div>
               </div>
@@ -239,7 +239,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
                   <span className={styles.score}>
                     {sortedUsers?.[2]?.score
                       ? sortedUsers?.[2].score.toFixed(2)
-                      : "0.00"}
+                      : "-"}
                   </span>
                 </div>
               </div>