fix up cards on profile page

DeckThemes · Jan 30, 2024 · 6870e88 · 6870e88
1 parent 63925c6
commit 6870e88
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/src/components/Styles/ThemeBrowserCardStyles.tsx b/src/components/Styles/ThemeBrowserCardStyles.tsx
@@ -1,5 +1,10 @@
 import { useCssLoaderState } from "../../state";
 
+const width = { 3: "260px", 4: "195px", 4.5: "183.33px", 5: "152px" };
+const imgheightFactory = (size: number) => (Number(width[size].slice(0, -2)) / 16) * 10 + "px";
+const fontsize = { 3: "1em", 4: "0.75em", 4.5: "0.7", 5: "0.5em" };
+const bubblesize = { 3: "40px", 4: "30px", 4.5: "25px", 5: "20px" };
+
 export function ThemeBrowserCardStyles({ customCardSize }: { customCardSize?: number }) {
   const { browserCardSize } = customCardSize
     ? { browserCardSize: customCardSize }
@@ -9,22 +14,12 @@ export function ThemeBrowserCardStyles({ customCardSize }: { customCardSize?: nu
     <style>
       {`
       :root {
-        --cssloader-themecard-width: ${
-          browserCardSize === 3 ? "260px" : browserCardSize === 4 ? "195px" : "152px"
-        };
+        --cssloader-themecard-width: ${width[browserCardSize] || width[5]};
         --cssloader-themecard-imgheight: ${
-          browserCardSize === 3
-            ? (260 / 16) * 10 + "px"
-            : browserCardSize === 4
-            ? (195 / 16) * 10 + "px"
-            : (152 / 16) * 10 + "px"
-        };
-        --cssloader-themecard-fontsize: ${
-          browserCardSize === 3 ? "1em" : browserCardSize === 4 ? "0.75em" : "0.5em"
-        };
-        --cssloader-themecard-bubblesize: ${
-          browserCardSize === 3 ? "40px" : browserCardSize === 4 ? "30px" : "20px"
+          imgheightFactory(browserCardSize) || imgheightFactory(5)
         };
+        --cssloader-themecard-fontsize: ${fontsize[browserCardSize] || fontsize[5]};
+        --cssloader-themecard-bubblesize: ${bubblesize[browserCardSize] || bubblesize[5]};
       }
       .CSSLoader_ThemeCard_NotifBubble {
         position: absolute;

diff --git a/src/components/ThemeManager/BrowserItemCard.tsx b/src/components/ThemeManager/BrowserItemCard.tsx
@@ -9,6 +9,7 @@ import { shortenNumber } from "../../logic/numbers";
 
 const cardWidth = {
   5: 152,
+  4.5: 183.33,
   4: 195,
   3: 260,
 };

diff --git a/src/pages/settings/PresetSettings.tsx b/src/pages/settings/PresetSettings.tsx
@@ -113,7 +113,7 @@ function UploadedProfilesDisplay() {
 
   return (
     <>
-      <ThemeBrowserCardStyles customCardSize={5} />
+      <ThemeBrowserCardStyles customCardSize={4.5} />
       <Focusable style={{ display: "flex", flexDirection: "column", position: "relative" }}>
         <DialogButton
           style={{
@@ -143,9 +143,9 @@ function UploadedProfilesDisplay() {
                 <>
                   <Focusable style={{ display: "flex", flexDirection: "column" }}>
                     <span>Public Profiles:</span>
-                    <Focusable style={{ display: "flex", flexWrap: "wrap", gap: "1em" }}>
+                    <Focusable style={{ display: "flex", flexWrap: "wrap", gap: "0.5em" }}>
                       {publicProfiles.map((e) => (
-                        <VariableSizeCard data={e} cols={5} onClick={() => {}} />
+                        <VariableSizeCard data={e} cols={4.5} onClick={() => {}} />
                       ))}
                     </Focusable>
                   </Focusable>
@@ -157,9 +157,9 @@ function UploadedProfilesDisplay() {
                 <>
                   <Focusable style={{ display: "flex", flexDirection: "column" }}>
                     <span>Private Profiles:</span>
-                    <Focusable style={{ display: "flex", flexWrap: "wrap", gap: "1em" }}>
+                    <Focusable style={{ display: "flex", flexWrap: "wrap", gap: "0.5em" }}>
                       {privateProfiles.map((e) => (
-                        <VariableSizeCard data={e} cols={5} onClick={() => {}} />
+                        <VariableSizeCard data={e} cols={4.5} onClick={() => {}} />
                       ))}
                     </Focusable>
                   </Focusable>