minor text highlighting for player info

README.md

@@ -1,21 +1,41 @@
 # MegaAntiCheat-UI (WIP)
 
-## Heavily Work in Progress
-
 This is the React UI for MegaAntiCheat (MAC) intended to be used with the [client backend](https://github.com/MegaAntiCheat/client-backend)
 
-### Running
-
-To Run this, clone this repository and run the following commands in the projects root folder
+## Running
 
-```sh
-npm i
-npm run dev
+```txt
+1. Head to the `Actions` tab
+2. Navigate to the `Build and Zip` workflow
+3. Click the top-most workflow run
+4. Download the latest Artifact
+5. Unzip the dist.zip and open the index.html file
 ```
 
-OR
+ OR
+
+Clone this repository and run the following commands in the projects root folder
 
 ```sh
 pnpm i
 pnpm run dev
 ```
+
+## Tech-stack
+
+### Programming Languages
+
+- Typescript
+
+### Framework
+
+- React
+
+### Bundler
+
+- Webpack
+
+### Frontend styling
+
+- TailwindCSS
+- CSS

src/api/globals/index.ts

@@ -11,7 +11,7 @@ export const COMMAND_ENDPOINT = `${APIURL}/commands/v1`;
 
 // This is used to get fakedata for the frontend.
 // dotenv breaks build, so we can't use that.
-export const useFakedata = false;
+export const useFakedata = true;
 
 export async function verifyBackend(): Promise<boolean> {
   return await fetch(SERVERFETCH)

src/components/TF2/Player/PlayerDetails.tsx

@@ -41,17 +41,18 @@ const PlayerDetails = ({ player, bgColor }: PlayerDetailsProps) => {
           <div className="grid grid-cols-playerdetailscontent overflow-x-auto">
             <div className="relative flex items-center content-center">
               <div className="text-start">
-                <div>
-                  {t('ACC_CREATION')}:{' '}
+                <div className="flex">
+                  <div className="font-semibold mr-1">{t('ACC_CREATION')}:</div>
                   {formatCreationDate(player.steamInfo?.timeCreated ?? 0)}
                 </div>
 
-                <div>
-                  {t('COUNTRY')}:{' '}
+                <div className="flex">
+                  <div className="font-semibold mr-1"> {t('COUNTRY')}: </div>
                   {player?.steamInfo?.countryCode ?? t('UNKNOWN')}
                 </div>
                 <div className="flex">
-                  VAC Bans: {vacBans}{' '}
+                  <div className="font-semibold mr-1">VAC Bans: </div>
+                  <div>{vacBans}</div>
                   {!!vacBans && (
                     <Tooltip
                       content={`Last ban ${
@@ -70,7 +71,8 @@ const PlayerDetails = ({ player, bgColor }: PlayerDetailsProps) => {
                   )}
                 </div>
                 <div className="flex">
-                  {t('GAME')} Bans: {gameBans}
+                  <div className="font-semibold mr-1">{t('GAME')} Bans: </div>
+                  <div>{gameBans}</div>
                   {!!gameBans && (
                     <Tooltip
                       content={`Last ban ${
@@ -94,33 +96,38 @@ const PlayerDetails = ({ player, bgColor }: PlayerDetailsProps) => {
             <div className="select-none flex flex-wrap text-start justify-center">
               <div className="gamestats whitespace-nowrap">
                 <Crosshair width={18} height={18} />
-                <div className="ml-1.5">
-                  {t('KILLS')}: {player.gameInfo.kills ?? 0}
+                <div className="ml-1.5 flex">
+                  <div className="font-semibold mr-1">{t('KILLS')}: </div>
+                  <div>{player.gameInfo.kills ?? 0}</div>
                 </div>
               </div>
               <div className="gamestats">
                 <div className="gamestat-icon">
                   <Skull width={18} height={18} />
                 </div>
-                <div className="ml-1.5 whitespace-nowrap">
-                  {t('DEATHS')}: {player.gameInfo.deaths ?? 0}
+                <div className="ml-1.5 whitespace-nowrap flex">
+                  <div className="font-semibold mr-1"> {t('DEATHS')}: </div>
+                  <div>{player.gameInfo.deaths ?? 0}</div>
                 </div>
               </div>
               <div className="gamestats">
                 <div className="gamestat-icon">
                   <CircleSlash2 width={16} height={16} />
                 </div>
-                <div className="ml-1.5 whitespace-nowrap">
-                  K/D:{' '}
-                  {calculateKD(player.gameInfo.kills, player.gameInfo.deaths)}
+                <div className="ml-1.5 whitespace-nowrap flex">
+                  <div className="font-semibold mr-1">K/D: </div>
+                  <div>
+                    {calculateKD(player.gameInfo.kills, player.gameInfo.deaths)}
+                  </div>
                 </div>
               </div>
               <div className="gamestats">
                 <div className="gamestat-icon">
                   <BarChart width={18} height={18} />
                 </div>
-                <div className="ml-1.5 whitespace-nowrap">
-                  {t('PING')}: {player.gameInfo.ping ?? 0}ms
+                <div className="ml-1.5 whitespace-nowrap flex">
+                  <div className="font-semibold mr-1">{t('PING')}: </div>
+                  <div>{player.gameInfo.ping ?? 0}ms</div>
                 </div>
               </div>
             </div>

src/tailwind.css

@@ -614,10 +614,6 @@ video {
   top: 50%;
 }
 
-.bottom-1\.5 {
-  bottom: 0.375rem;
-}
-
 .z-30 {
   z-index: 30;
 }
@@ -713,12 +709,16 @@ video {
   margin-left: 5%;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
+.mr-3 {
+  margin-right: 0.75rem;
 }
 
 .mr-8 {
@@ -749,14 +749,6 @@ video {
   margin-top: 2.25rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
 .block {
   display: block;
 }
@@ -1131,6 +1123,10 @@ video {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));