More work on favicons. Trying new design. #14

amoscardino · Sep 4, 2024 · 18c9048 · 18c9048
1 parent 14c8c5c
commit 18c9048
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 53 deletions.
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
@@ -351,7 +351,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = LS6BR8Q859;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = LinkThing;
@@ -375,7 +375,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = LS6BR8Q859;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = LinkThing;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
-    "classnames": "^2.5.1",
     "date-fns": "^2.29.3",
     "history": "^4.9.0",
     "ionicons": "^6.0.3",

diff --git a/src/components/BookmarkIcon.tsx b/src/components/BookmarkIcon.tsx
@@ -1,6 +1,5 @@
 import { IonIcon, IonThumbnail } from "@ionic/react";
-import classNames from "classnames";
-import { bookmark, bookmarkOutline } from "ionicons/icons";
+import { bookmark, bookmarkOutline, globeOutline } from "ionicons/icons";
 import { useRecoilValue } from "recoil";
 import showFaviconsSettingAtom from "state/showFaviconsSettingState";
 
@@ -11,7 +10,6 @@ interface BookmarkIconProps {
 
 const BookmarkIcon = ({ faviconUrl, unread }: BookmarkIconProps) => {
     const showFavicons = useRecoilValue(showFaviconsSettingAtom);
-    const classes = classNames('ion-margin-top', { 'dot': unread });
 
     if (!showFavicons) {
         return (
@@ -25,26 +23,42 @@ const BookmarkIcon = ({ faviconUrl, unread }: BookmarkIconProps) => {
         );
     }
 
+    const unreadIcon = unread ? (
+        <IonIcon
+            slot="end"
+            color="primary"
+            icon={bookmark}
+            style={{ 'font-size': '1.5rem' }}
+            className="ion-margin-top"
+        />
+    ) : null;
+
     if (faviconUrl && faviconUrl.length > 0) {
         return (
-            <IonThumbnail
-                slot="start"
-                style={{ '--size': '1.5rem', '--border-radius': '0.5rem' }}
-                className={classes}
-            >
-                <img alt="" src={faviconUrl} />
-            </IonThumbnail>
+            <>
+                <IonThumbnail
+                    slot="start"
+                    style={{ '--size': '1.5rem', '--border-radius': '0.5rem' }}
+                    className="ion-margin-top"
+                >
+                    <img alt="" src={faviconUrl} />
+                </IonThumbnail>
+                {unreadIcon}
+            </>
         );
     }
 
     return (
-        <IonIcon
-            slot="start"
-            color="primary"
-            icon={bookmarkOutline}
-            style={{ 'font-size': '1.5rem' }}
-            className={classes}
-        />
+        <>
+            <IonIcon
+                slot="start"
+                color="primary"
+                icon={globeOutline}
+                style={{ 'font-size': '1.5rem' }}
+                className="ion-margin-top"
+            />
+            {unreadIcon}
+        </>
     );
 };
 

diff --git a/src/components/BookmarkListItem.tsx b/src/components/BookmarkListItem.tsx
@@ -18,7 +18,6 @@ import EditOption from "components/BookmarkListItemOptions/EditOption";
 import ListItemTags from "./ListItemTags";
 import ListItemDateAndDomain from "./ListItemDateAndDomain";
 import BookmarkIcon from "./BookmarkIcon";
-import classNames from "classnames";
 
 interface BookmarkListItemProps {
     bookmark: Bookmark;
@@ -38,8 +37,6 @@ const BookmarkListItem = ({ bookmark, listRefresh, containingPage, onTagClick }:
         ? { href: bookmark.url, target: "_blank" }
         : { button: true, onClick: async () => { await Browser.open({ url: bookmark.url }) } };
 
-    var titleClasses = classNames('two-line-truncate', { 'fw-bold': bookmark.unread });
-
     return (
         <IonItemSliding ref={slidingRef}>
             <IonItem {...itemProps} detail={false} className="item-top-align">
@@ -49,7 +46,7 @@ const BookmarkListItem = ({ bookmark, listRefresh, containingPage, onTagClick }:
                 />
 
                 <IonLabel className="ion-text-wrap">
-                    <h2 className={titleClasses}>
+                    <h2 className="two-line-truncate">
                         {getBookmarkTitle(bookmark)}
                     </h2>
 

diff --git a/src/theme/utils.css b/src/theme/utils.css
@@ -13,10 +13,6 @@
     overflow: hidden !important;
 }
 
-.fw-bold {
-    font-weight: 800 !important;
-}
-
 ion-item.item-top-align::part(native) {
     align-items: flex-start;
 }
@@ -35,20 +31,3 @@ ion-item.item-top-align::part(native) {
         background: var(--ion-card-background-color);
     }
 }
-
-.dot {
-    position: relative;
-    contain: unset;
-    --dot-size: 0.5rem;
-}
-
-.dot::before {
-    content: '';
-    position: absolute;
-    top: calc(-0.5 * var(--dot-size));
-    right: calc(-0.5 * var(--dot-size));
-    width: var(--dot-size);
-    height: var(--dot-size);
-    border-radius: 50%;
-    background-color: var(--ion-color-primary);
-}