From 7d44cc1b4420bf966bcfcfa6312c6d826f92d015 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 8 Dec 2022 22:24:23 +0200
Subject: [PATCH] BuildCard: Modes from popup to top right

---
 app/components/BuildCard.tsx | 31 ++++++++++++++++---------------
 app/styles/common.css        |  7 ++++++-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index 975d36509..e73559334 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -54,7 +54,7 @@ interface BuildProps {
 
 export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
   const user = useUser();
-  const { t } = useTranslation(["weapons", "builds", "common"]);
+  const { t } = useTranslation(["weapons", "builds", "common", "game-misc"]);
   const { i18n } = useTranslation();
   const isMounted = useIsMounted();
 
@@ -75,6 +75,20 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
     <div className="build">
       <div>
         <div className="build__top-row">
+          {modes && modes.length > 0 && (
+            <div className="build__modes">
+              {modes.map((mode) => (
+                <Image
+                  key={mode}
+                  alt={t(`game-misc:MODE_LONG_${mode}` as any)}
+                  title={t(`game-misc:MODE_LONG_${mode}` as any)}
+                  path={modeImageUrl(mode)}
+                  width={18}
+                  height={18}
+                />
+              ))}
+            </div>
+          )}
           <h2 className="build__title">{title}</h2>
         </div>
         <div className="build__date-author-row">
@@ -138,24 +152,11 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
             path={navIconUrl("analyzer")}
           />
         </Link>
-        {description || (modes && modes.length > 0) ? (
+        {description ? (
           <Popover
             buttonChildren={<InfoIcon className="build__icon" />}
             triggerClassName="minimal tiny build__small-text"
           >
-            {modes && modes.length > 0 && (
-              <div className="build__modes">
-                {modes.map((mode) => (
-                  <Image
-                    key={mode}
-                    alt=""
-                    path={modeImageUrl(mode)}
-                    width={18}
-                    height={18}
-                  />
-                ))}
-              </div>
-            )}
             {description}
           </Popover>
         ) : null}
diff --git a/app/styles/common.css b/app/styles/common.css
index c5f6e3004..9f292b2c5 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -780,11 +780,13 @@ dialog::backdrop {
 .builds-container {
   display: grid;
   justify-content: center;
-  gap: var(--s-3);
+  column-gap: var(--s-3);
   grid-template-columns: repeat(auto-fit, 240px);
+  row-gap: var(--s-4);
 }
 
 .build {
+  position: relative;
   display: flex;
   flex-direction: column;
   padding: var(--s-3);
@@ -813,8 +815,11 @@ dialog::backdrop {
 }
 
 .build__modes {
+  position: absolute;
+  right: 0;
   display: flex;
   min-width: max-content;
+  margin-top: -21px;
   gap: var(--s-1);
 }