Improve join server header ellipse icon styles (#1497)

aeharding · May 25, 2024 · 61ba316 · 61ba316
1 parent 6b45341
commit 61ba316
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/src/features/auth/login/pickJoinServer/PickJoinServer.tsx b/src/features/auth/login/pickJoinServer/PickJoinServer.tsx
@@ -41,14 +41,19 @@ import {
   defaultServersUntouched,
   getCustomServers,
 } from "../../../../services/app";
-import { ellipsisHorizontalCircleOutline } from "ionicons/icons";
+import {
+  ellipsisHorizontalCircleOutline,
+  ellipsisVertical,
+} from "ionicons/icons";
 import { DynamicDismissableModalContext } from "../../../shared/DynamicDismissableModal";
 import { addGuestInstance } from "../../authSlice";
 import Login from "../login/Login";
 import { getInstanceFromHandle } from "../../authSelectors";
 import { styled } from "@linaria/react";
 import AppHeader from "../../../shared/AppHeader";
 import { isMinimumSupportedLemmyVersion } from "../../../../helpers/lemmy";
+import { css } from "@linaria/core";
+import { isIosTheme } from "../../../../helpers/device";
 
 const spacing = `
   margin: 2.5rem 0;
@@ -320,8 +325,21 @@ export default function PickJoinServer() {
           </IonButtons>
           <IonTitle>Pick Server</IonTitle>
           <IonButtons slot="end">
-            <IonButton fill="clear" color="medium" onClick={presentOptions}>
-              <IonIcon icon={ellipsisHorizontalCircleOutline} />
+            <IonButton
+              color="dark"
+              onClick={presentOptions}
+              className={css`
+                font-size: 16px;
+              `}
+            >
+              <IonIcon
+                icon={
+                  isIosTheme()
+                    ? ellipsisHorizontalCircleOutline
+                    : ellipsisVertical
+                }
+                slot="icon-only"
+              />
             </IonButton>
           </IonButtons>
         </IonToolbar>