Merge pull request #196 from Chupalika/master

updated player card design
cory2067 · Dec 5, 2024 · 3475760 · 3475760
2 parents 853cd81 + d3afcd4
commit 3475760
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/client/src/components/modules/TeamCard.css b/client/src/components/modules/TeamCard.css
@@ -1,8 +1,10 @@
 .TeamCard-container {
-  border: 1px solid var(--darker-night);
+  padding: var(--s);
   margin: var(--m);
-  box-shadow: 2px 2px 8px var(--darker-night);
   display: flex;
+  border-radius: 10px;
+  background-color: var(--onyx-light);
+  width: 460px;
 }
 
 .TeamCard-seed {

diff --git a/client/src/components/modules/UserCard.css b/client/src/components/modules/UserCard.css
@@ -1,35 +1,37 @@
 .UserCard-outside {
-  border: 1px solid var(--darker-night);
+  background-color: var(--onyx-dark);
+  border-radius: 10px;
   display: grid;
-  grid-template-columns: 75px 350px;
-  grid-template-rows: 75px;
-  box-shadow: 2px 2px 8px var(--darker-night);
+  grid-template-columns: 64px 350px;
+  grid-template-rows: 64px;
   width: 427px;
   margin: var(--s);
+  padding: var(--s);
 }
 
 .UserCard-wide {
-  grid-template-columns: 75px 440px;
+  grid-template-columns: 64px 440px;
   width: 517px;
 }
 
 .UserCard-avatar {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
+  border-radius: 8px;
 }
 
 .UserCard-content {
-  padding: var(--xs);
-  flex-direction: column;
+  padding: var(--s) var(--m);
   display: flex;
   justify-content: center;
-  background-color: var(--night);
 }
 
-.UserCard-top {
+.UserCard-left {
   display: flex;
-  justify-content: space-between;
+  flex-grow: 1;
+  flex-direction: column;
+  align-self: center;
 }
 
 .UserCard-name {
@@ -48,7 +50,8 @@
 }
 
 .UserCard-rank {
-  font-size: 12pt;
+  font-size: 20pt;
+  font-weight: bold;
   display: flex;
   align-items: center;
 }
@@ -76,3 +79,15 @@ div .UserCard-form {
 .UserCard-bad {
   color: #cc3300;
 }
+
+.supporter-icon {
+  margin-left: 8px;
+  padding: 6px;
+  width: 12px;
+  height: 12px;
+  color: rgb(255,223,237);
+  border: rgb(255,223,237) solid 1px;
+  border-radius: 50%;
+  -webkit-filter: drop-shadow(0px 0px 2px rgb(255, 0, 255));
+  filter: drop-shadow(0px 0px 2px rgb(255, 0, 255));
+}
diff --git a/client/src/components/modules/UserCard.js b/client/src/components/modules/UserCard.js
@@ -1,5 +1,7 @@
 import React from "react";
 import { DeleteOutlined, CrownOutlined, HeartFilled } from "@ant-design/icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHeart } from "@fortawesome/free-solid-svg-icons";
 import FlagIcon from "./FlagIcon";
 
 import { Popconfirm, Tooltip } from "antd";
@@ -23,13 +25,14 @@ export default function UserCard({
   const badRank = rankRange && (user.rank < rankRange[0] || user.rank > rankRange[1]);
   const cardStyle = {};
   if (user.cardImage) {
-    cardStyle.backgroundImage = `linear-gradient(#13141577, #2e313577), url("/public/cards/${user.cardImage}")`;
+    cardStyle.backgroundImage = `linear-gradient(#13141599, #2e313599), url("/public/cards/${user.cardImage}")`;
+    cardStyle.backgroundSize = "contain";
   }
   const seedInfo = stats && stats.seedName ? `${stats.seedName} Seed (#${stats.seedNum})${stats.group ? `, Group ${stats.group}` : ""}` : "";
 
   return (
     <div>
-      <div className={`UserCard-outside ${canEdit && showGroups ? "UserCard-wide" : ""}`}>
+      <div className={`UserCard-outside ${canEdit && showGroups ? "UserCard-wide" : ""}`} style={cardStyle}>
         {user.discord ? (
           <Tooltip title={`${user.discord}, ${timezone}`}>
             <div
@@ -40,14 +43,14 @@ export default function UserCard({
         ) : (
           <div style={{ backgroundImage: `url(${user.avatar})` }} className="UserCard-avatar"></div>
         )}
-        <div className="UserCard-content" style={cardStyle}>
-          <div className="UserCard-top">
+        <div className="UserCard-content">
+          <div className="UserCard-left">
             <div className={`UserCard-name ${user.username.length > 14 ? "UserCard-long" : ""}`}>
               {user.country && <FlagIcon code={user.country} />}
               <a href={`https://osu.ppy.sh/users/${user.userid}`}>{user.username}</a>
               {user.donations >= 5 && (
                 <Tooltip title={`GTS Supporter - Donated $${user.donations.toFixed(2)}`}>
-                  <HeartFilled className="UserCard-supporter" />
+                  <FontAwesomeIcon icon={faHeart} className="supporter-icon" />
                 </Tooltip>
               )}
               {canDelete && (
@@ -62,14 +65,14 @@ export default function UserCard({
               )}
               {user.isCaptain && <CrownOutlined className="UserCard-captain" />}
             </div>
-            {!hideRank && (
-              <div className={`UserCard-rank ${badRank ? "UserCard-bad" : ""}`}>
-                <span>{user.rank ? `#${user.rank}` : "No rank"}</span>
-              </div>
-            )}
+            {extra && <div className="UserCard-bot">{extra}</div>}
+            {seedInfo && <div className="UserCard-bot">{seedInfo}</div>}
           </div>
-          {extra && <div className="UserCard-bot">{extra}</div>}
-          {seedInfo && <div className="UserCard-bot">{seedInfo}</div>}
+          {!hideRank && (
+            <div className={`UserCard-rank ${badRank ? "UserCard-bad" : ""}`}>
+              <span>{user.rank ? `#${user.rank}` : "No rank"}</span>
+            </div>
+          )}
         </div>
         {canEdit && (
           <div>

diff --git a/client/src/components/pages/Stats.js b/client/src/components/pages/Stats.js
@@ -470,7 +470,7 @@ export default function Stats({ tourney, user }) {
 
       return (
         <div>
-          <Popover content={popoverContent} placement="right">
+          <Popover content={popoverContent} placement="right" color="var(--dark-night)">
             <FlagIcon size={16} customIcon={theTeam.icon} code={theTeam.country} /> {teamName}
           </Popover>
         </div>
@@ -487,7 +487,7 @@ export default function Stats({ tourney, user }) {
 
       return (
         <div>
-          <Popover content={popoverContent} placement="right">
+          <Popover content={popoverContent} placement="right" color="var(--dark-night)">
             <FlagIcon size={16} code={thePlayer.country} /> {thePlayer.username}
           </Popover>
         </div>