diff --git a/src/pages/home/Home.module.scss b/src/pages/home/Home.module.scss
index 082cf127..8b545e41 100644
--- a/src/pages/home/Home.module.scss
+++ b/src/pages/home/Home.module.scss
@@ -10,16 +10,7 @@
align-items: center;
height: 100%;
padding: 12px;
-
- h3 {
- margin: 20px 0;
- font-size: 48px;
- text-align: center;
-
- img {
- height: 36px;
- }
- }
+ padding-top: 64px;
a {
font-size: 13px;
@@ -54,4 +45,3 @@
[data-light="true"] .home svg {
filter: invert(100%);
}
-
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 187fe90e..012fc5cb 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -36,9 +36,10 @@ const Overlay = styled.div`
}
`;
-const DisabledButtonWrapper = styled.div`
+const DisabledWrapper = styled.div`
opacity: 0.5;
pointer-events: none;
+ margin-bottom: -10px;
`;
interface Server {
@@ -47,14 +48,15 @@ interface Server {
description: string;
inviteCode: string;
disabled: boolean;
- new: boolean; // Add the new field
+ new: boolean;
+ sortorder: number;
}
// Add a styled component for the new text color
const NewServerWrapper = styled.div`
color: #fadf4f;
+ display: contents;
- // Preserve all other styles
a {
color: #fadf4f;
}
@@ -108,13 +110,18 @@ const Home: React.FC = () => {
return;
}
+ // Sort the servers by sortorder before caching
+ const sortedData = [...result.data].sort(
+ (a, b) => (a.sortorder || 0) - (b.sortorder || 0),
+ );
+
const cacheData: CachedData = {
timestamp: Date.now(),
- data: result.data,
+ data: sortedData,
};
safeStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
- setServers(result.data);
+ setServers(sortedData);
setLoading(false);
},
error: (err) => {
@@ -167,7 +174,6 @@ const Home: React.FC = () => {
const buttonContent = (