Refactor inset ion item (#1344)

aeharding · Mar 19, 2024 · c645b3b · c645b3b
1 parent d1b076c
commit c645b3b
Show file tree

Hide file tree

Showing 62 changed files with 343 additions and 358 deletions.
diff --git a/src/core/globalCssOverrides.ts b/src/core/globalCssOverrides.ts
@@ -39,6 +39,13 @@ export default css`
       }
     }
 
+    ion-list.list-inset ion-item {
+      --background: var(
+        --ion-tab-bar-background,
+        var(--ion-color-step-50, #fff)
+      );
+    }
+
     .left-align-buttons
       .action-sheet-button:not(.action-sheet-cancel)
       .action-sheet-button-inner.sc-ion-action-sheet-ios:not(

diff --git a/src/features/community/search/CommunitySearchResults.tsx b/src/features/community/search/CommunitySearchResults.tsx
@@ -1,7 +1,6 @@
-import { IonLabel, IonList } from "@ionic/react";
+import { IonItem, IonLabel, IonList } from "@ionic/react";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
 import { MaxWidthContainer } from "../../shared/AppContent";
-import { InsetIonItem } from "../../settings/shared/formatting";
 
 interface CommunitySearchResultsProps {
   community: string;
@@ -17,24 +16,24 @@ export default function CommunitySearchResults({
   return (
     <MaxWidthContainer>
       <IonList inset>
-        <InsetIonItem
+        <IonItem
           routerLink={buildGeneralBrowseLink(
             `/c/${community}/search/posts/${query}`,
           )}
         >
           <IonLabel>
             Search posts on c/{community} for “{query}”
           </IonLabel>
-        </InsetIonItem>
-        <InsetIonItem
+        </IonItem>
+        <IonItem
           routerLink={buildGeneralBrowseLink(
             `/c/${community}/search/comments/${query}`,
           )}
         >
           <IonLabel>
             Search comments on c/{community} for “{query}”
           </IonLabel>
-        </InsetIonItem>
+        </IonItem>
       </IonList>
     </MaxWidthContainer>
   );

diff --git a/src/features/migrate/MigrateList.tsx b/src/features/migrate/MigrateList.tsx
@@ -1,12 +1,12 @@
 import {
+  IonItem,
   IonItemOption,
   IonItemOptions,
   IonItemSliding,
   IonLabel,
   IonList,
   useIonAlert,
 } from "@ionic/react";
-import { InsetIonItem } from "../user/Profile";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { useEffect } from "react";
 import {
@@ -108,17 +108,17 @@ export default function MigrateList() {
                 Forget
               </IonItemOption>
             </IonItemOptions>
-            <InsetIonItem
+            <IonItem
               routerLink={`/settings/reddit-migrate/${encodeURIComponent(link)}`}
             >
               <IonLabel class="ion-text-nowrap">{getPathname(link)}</IonLabel>
-            </InsetIonItem>
+            </IonItem>
           </IonItemSliding>
         ))}
         <IonItemSliding>
-          <InsetIonItem onClick={() => add()} button detail={false}>
+          <IonItem onClick={() => add()} button detail={false}>
             <IonLabel color="primary">Add multireddit link</IonLabel>
-          </InsetIonItem>
+          </IonItem>
         </IonItemSliding>
       </IonList>
     </>

diff --git a/src/features/search/RandomCommunity.tsx b/src/features/search/RandomCommunity.tsx
@@ -1,5 +1,4 @@
-import { IonIcon, IonLabel, IonList } from "@ionic/react";
-import { InsetIonItem } from "../user/Profile";
+import { IonIcon, IonItem, IonLabel, IonList } from "@ionic/react";
 import { shuffle } from "ionicons/icons";
 import { useAppSelector } from "../../store";
 
@@ -18,10 +17,10 @@ export default function RandomCommunity() {
 
   return (
     <IonList inset color="primary">
-      <InsetIonItem routerLink="/search/random">
+      <IonItem routerLink="/search/random">
         <IonIcon icon={shuffle} color="primary" slot="start" />
         <IonLabel className="ion-text-nowrap">Random Community</IonLabel>
-      </InsetIonItem>
+      </IonItem>
     </IonList>
   );
 }
diff --git a/src/features/search/SearchOptions.tsx b/src/features/search/SearchOptions.tsx
@@ -1,5 +1,5 @@
-import { IonIcon, IonList } from "@ionic/react";
-import { InsetIonItem, SettingLabel } from "../user/Profile";
+import { IonIcon, IonItem, IonList } from "@ionic/react";
+import { SettingLabel } from "../user/Profile";
 import { useBuildGeneralBrowseLink } from "../../helpers/routes";
 import {
   albumsOutline,
@@ -36,41 +36,39 @@ export default function SearchOptions({ search }: SearchOptionsProps) {
     <>
       <IonList inset color="primary">
         {type && !autoResolveType && (
-          <InsetIonItem
+          <IonItem
             onClick={(e) => redirectToLemmyObjectIfNeeded(search, e)}
             detail
             button
           >
             <IonIcon icon={arrowForward} color="primary" />
             <SettingLabel>Visit {type}</SettingLabel>
-          </InsetIonItem>
+          </IonItem>
         )}
-        <InsetIonItem routerLink={`/search/posts/${searchURI}`}>
+        <IonItem routerLink={`/search/posts/${searchURI}`}>
           <IonIcon icon={albumsOutline} color="primary" />
           <SettingLabel className="ion-text-nowrap">
             Posts with “{search}”
           </SettingLabel>
-        </InsetIonItem>
-        <InsetIonItem routerLink={`/search/comments/${searchURI}`}>
+        </IonItem>
+        <IonItem routerLink={`/search/comments/${searchURI}`}>
           <IonIcon icon={chatbubbleOutline} color="primary" />
           <SettingLabel className="ion-text-nowrap">
             Comments with “{search}”
           </SettingLabel>
-        </InsetIonItem>
-        <InsetIonItem routerLink={`/search/communities/${searchURI}`}>
+        </IonItem>
+        <IonItem routerLink={`/search/communities/${searchURI}`}>
           <IonIcon icon={searchOutline} color="primary" />
           <SettingLabel className="ion-text-nowrap">
             Communities with “{search}”
           </SettingLabel>
-        </InsetIonItem>
-        <InsetIonItem
-          routerLink={buildGeneralBrowseLink(`/u/${sanitizedUser}`)}
-        >
+        </IonItem>
+        <IonItem routerLink={buildGeneralBrowseLink(`/u/${sanitizedUser}`)}>
           <IonIcon icon={personOutline} color="primary" />
           <SettingLabel className="ion-text-nowrap">
             Go to User “{search}”
           </SettingLabel>
-        </InsetIonItem>
+        </IonItem>
       </IonList>
       {autoResolveType && <AutoResolvePostComment url={search} />}
     </>

diff --git a/src/features/search/TrendingCommunities.tsx b/src/features/search/TrendingCommunities.tsx
@@ -1,7 +1,12 @@
-import { IonIcon, IonLabel, IonList, IonListHeader } from "@ionic/react";
+import {
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+} from "@ionic/react";
 import { useBuildGeneralBrowseLink } from "../../helpers/routes";
 import { useAppDispatch, useAppSelector } from "../../store";
-import { InsetIonItem } from "../user/Profile";
 import { getHandle } from "../../helpers/lemmy";
 import { trendingUp } from "ionicons/icons";
 import { useEffect } from "react";
@@ -31,7 +36,7 @@ export default function TrendingCommunities() {
         </IonLabel>
       </IonListHeader>
       {trendingCommunities?.map((community) => (
-        <InsetIonItem
+        <IonItem
           routerLink={buildGeneralBrowseLink(
             `/c/${getHandle(community.community)}`,
           )}
@@ -41,7 +46,7 @@ export default function TrendingCommunities() {
           <IonLabel className="ion-text-nowrap">
             {getHandle(community.community)}
           </IonLabel>
-        </InsetIonItem>
+        </IonItem>
       ))}
     </IonList>
   );

diff --git a/src/features/settings/app-icon/AppIcon.tsx b/src/features/settings/app-icon/AppIcon.tsx
@@ -1,13 +1,13 @@
 import {
   IonBadge,
+  IonItem,
   IonLabel,
   IonList,
   IonRadio,
   IonRadioGroup,
   IonText,
   IonThumbnail,
 } from "@ionic/react";
-import { InsetIonItem } from "../shared/formatting";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { APP_ICONS, AppIcon, updateAppIcon } from "./appIconSlice";
 import { isAndroid } from "../../../helpers/device";
@@ -41,7 +41,7 @@ export default function AppIconComponent() {
     <IonRadioGroup value={icon} onIonChange={(e) => selectIcon(e.detail.value)}>
       <IonList inset>
         {APP_ICONS.map((icon) => (
-          <InsetIonItem key={icon}>
+          <IonItem key={icon}>
             <StyledIonThumbnail slot="start" onClick={() => selectIcon(icon)}>
               <Img src={getIconSrc(icon)} />
             </StyledIonThumbnail>
@@ -63,7 +63,7 @@ export default function AppIconComponent() {
                 </p>
               </IonLabel>
             </IonRadio>
-          </InsetIonItem>
+          </IonItem>
         ))}
       </IonList>
     </IonRadioGroup>

diff --git a/src/features/settings/appearance/CompactSettings.tsx b/src/features/settings/appearance/CompactSettings.tsx
@@ -1,5 +1,4 @@
-import { IonLabel, IonList, IonToggle } from "@ionic/react";
-import { InsetIonItem } from "../../user/Profile";
+import { IonItem, IonLabel, IonList, IonToggle } from "@ionic/react";
 import { useAppSelector, useAppDispatch } from "../../../store";
 import {
   setCompactShowSelfPostThumbnails,
@@ -44,7 +43,7 @@ export default function CompactSettings() {
           setSelected={setThumbnailPosition}
           options={OCompactThumbnailPositionType}
         />
-        <InsetIonItem>
+        <IonItem>
           <IonToggle
             checked={showVotingButtons}
             onIonChange={(e) =>
@@ -53,8 +52,8 @@ export default function CompactSettings() {
           >
             Show Voting Buttons
           </IonToggle>
-        </InsetIonItem>
-        <InsetIonItem>
+        </IonItem>
+        <IonItem>
           <IonToggle
             checked={showSelfPostThumbnails}
             onIonChange={(e) =>
@@ -63,7 +62,7 @@ export default function CompactSettings() {
           >
             Show Self Post Thumbnails
           </IonToggle>
-        </InsetIonItem>
+        </IonItem>
       </IonList>
     </>
   );

diff --git a/src/features/settings/appearance/LargeSettings.tsx b/src/features/settings/appearance/LargeSettings.tsx
@@ -1,5 +1,4 @@
-import { IonLabel, IonList, IonToggle } from "@ionic/react";
-import { InsetIonItem } from "../../user/Profile";
+import { IonItem, IonLabel, IonList, IonToggle } from "@ionic/react";
 import { useAppSelector, useAppDispatch } from "../../../store";
 import { setLargeShowVotingButtons } from "../settingsSlice";
 import { ListHeader } from "../shared/formatting";
@@ -16,7 +15,7 @@ export default function LargeSettings() {
         <IonLabel>Large Posts</IonLabel>
       </ListHeader>
       <IonList inset>
-        <InsetIonItem>
+        <IonItem>
           <IonToggle
             checked={showVotingButtons}
             onIonChange={(e) =>
@@ -25,7 +24,7 @@ export default function LargeSettings() {
           >
             Show Voting Buttons
           </IonToggle>
-        </InsetIonItem>
+        </IonItem>
       </IonList>
     </>
   );

diff --git a/src/features/settings/appearance/TextSize.tsx b/src/features/settings/appearance/TextSize.tsx
@@ -1,5 +1,4 @@
-import { IonLabel, IonList, IonRange, IonToggle } from "@ionic/react";
-import { InsetIonItem } from "../../../routes/pages/profile/ProfileFeedItemsPage";
+import { IonItem, IonLabel, IonList, IonRange, IonToggle } from "@ionic/react";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { setFontSizeMultiplier, setUseSystemFontSize } from "../settingsSlice";
 import { HelperText, ListHeader } from "../shared/formatting";
@@ -47,7 +46,7 @@ export default function TextSize() {
         <IonLabel>Text size</IonLabel>
       </ListHeader>
       <IonList inset>
-        <InsetIonItem>
+        <IonItem>
           <IonToggle
             checked={useSystemFontSize}
             onIonChange={(e) =>
@@ -56,8 +55,8 @@ export default function TextSize() {
           >
             Use System Text Size
           </IonToggle>
-        </InsetIonItem>
-        <InsetIonItem>
+        </IonItem>
+        <IonItem>
           <Range
             disabled={useSystemFontSize}
             ticks
@@ -73,9 +72,9 @@ export default function TextSize() {
             </A>
             <A slot="end">A</A>
           </Range>
-        </InsetIonItem>
+        </IonItem>
         {fontSizeMultiplier >= 1.4 && (
-          <InsetIonItem>
+          <IonItem>
             <IonToggle
               checked={fontSizeMultiplier > MAX_REGULAR_FONT_ADJUSTMENT}
               onIonChange={() =>
@@ -90,7 +89,7 @@ export default function TextSize() {
             >
               Larger Text Mode
             </IonToggle>
-          </InsetIonItem>
+          </IonItem>
         )}
       </IonList>
       <HelperText>Default is two ticks from the left.</HelperText>

diff --git a/src/features/settings/appearance/ThemesButton.tsx b/src/features/settings/appearance/ThemesButton.tsx
@@ -1,5 +1,5 @@
-import { IonIcon, IonLabel, IonList } from "@ionic/react";
-import { InsetIonItem, ListHeader } from "../shared/formatting";
+import { IonIcon, IonItem, IonLabel, IonList } from "@ionic/react";
+import { ListHeader } from "../shared/formatting";
 import { IconBg } from "../../../routes/pages/settings/SettingsPage";
 import { colorPalette } from "ionicons/icons";
 import { SettingLabel } from "../../user/Profile";
@@ -11,12 +11,12 @@ export default function ThemesButton() {
         <IonLabel>Themes</IonLabel>
       </ListHeader>
       <IonList inset>
-        <InsetIonItem routerLink="/settings/appearance/theme">
+        <IonItem routerLink="/settings/appearance/theme">
           <IconBg color="color(display-p3 0.5 0 1)">
             <IonIcon icon={colorPalette} />
           </IconBg>
           <SettingLabel>Themes</SettingLabel>
-        </InsetIonItem>
+        </IonItem>
       </IonList>
     </>
   );

diff --git a/src/features/settings/appearance/other/ShowUserInstance.tsx b/src/features/settings/appearance/other/ShowUserInstance.tsx
@@ -1,8 +1,7 @@
-import { IonToggle } from "@ionic/react";
+import { IonItem, IonToggle } from "@ionic/react";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { setUserInstanceUrlDisplay } from "../../settingsSlice";
 import { OInstanceUrlDisplayMode } from "../../../../services/db";
-import { InsetIonItem } from "../../shared/formatting";
 
 export default function ShowUserInstance() {
   const dispatch = useAppDispatch();
@@ -11,7 +10,7 @@ export default function ShowUserInstance() {
   );
 
   return (
-    <InsetIonItem>
+    <IonItem>
       <IonToggle
         checked={userInstanceUrlDisplay === OInstanceUrlDisplayMode.WhenRemote}
         onIonChange={(e) =>
@@ -26,6 +25,6 @@ export default function ShowUserInstance() {
       >
         Show User Instance
       </IonToggle>
-    </InsetIonItem>
+    </IonItem>
   );
 }