finish load more button

DeckThemes · Dec 26, 2024 · ed57887 · ed57887
1 parent 23dafea
commit ed57887
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/src/modules/theme-store/components/LoadMoreButton.tsx b/src/modules/theme-store/components/LoadMoreButton.tsx
@@ -13,14 +13,14 @@ export function LoadMoreButton() {
   }
 
   return (
-    <>
+    <div className="cl-store-loadmore-container">
       {themes.length < themeTotal ? (
-        <>
+        <div className="max-w-1/2">
           <DialogButton onClick={handleClick} disabled={loading}>
             Load More
           </DialogButton>
-        </>
+        </div>
       ) : null}
-    </>
+    </div>
   );
 }
diff --git a/src/modules/theme-store/components/ThemeBrowserPage.tsx b/src/modules/theme-store/components/ThemeBrowserPage.tsx
@@ -55,9 +55,7 @@ export function ThemeBrowserPage() {
             ))
         )}
       </Focusable>
-      <div>
-        <LoadMoreButton />
-      </div>
+      <LoadMoreButton />
     </>
   );
 }
diff --git a/src/styles/styles-as-string.ts b/src/styles/styles-as-string.ts
@@ -1,6 +1,11 @@
 import { gamepadDialogClasses } from "@decky/ui";
 
 export const styles = `
+/* THIS FILE IS NOT USED IN BUILD */
+/* ANY MODIFICATIONS HERE MUST BE COPY PASTED INTO styles-as-string.ts */
+/* THAT IS NEEDED FOR STATIC CLASS INJECTION */
+/* LINT ERRORS ARE TO BE EXPECTED, BECAUSE THIS USES TEMPLATE LITERALS THAT WILL BE FILLED IN BY styles-as-string.ts */
+
 .flex {
   display: flex !important;
 }
@@ -69,6 +74,10 @@ export const styles = `
   width: 100% !important;
 }
 
+.max-w-1\/2 {
+  max-width: 50% !important;
+}
+
 .relative {
   position: relative !important;
 }
@@ -196,7 +205,7 @@ export const styles = `
   align-items: start !important;
 }
 
-.cl-store-dropdown-hide-spacer> button > div > .${gamepadDialogClasses.Spacer} {
+.cl-store-dropdown-hide-spacer > button > div > .${gamepadDialogClasses.Spacer} {
   width: 0 !important;
 }
 
@@ -213,6 +222,14 @@ export const styles = `
   height: 48% !important;
 }
 
+.cl-store-loadmore-container {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
 .cl-store-scale-slider {
   min-width: 20% !important;
 }

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -71,6 +71,10 @@
   width: 100% !important;
 }
 
+.max-w-1\/2 {
+  max-width: 50% !important;
+}
+
 .relative {
   position: relative !important;
 }
@@ -198,7 +202,7 @@
   align-items: start !important;
 }
 
-.cl-store-dropdown-hide-spacer> button > div > .${gamepadDialogClasses.Spacer} {
+.cl-store-dropdown-hide-spacer > button > div > .${gamepadDialogClasses.Spacer} {
   width: 0 !important;
 }
 
@@ -215,6 +219,14 @@
   height: 48% !important;
 }
 
+.cl-store-loadmore-container {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
 .cl-store-scale-slider {
   min-width: 20% !important;
 }