chore: minor ui changes

packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx

@@ -10,6 +10,7 @@ type Props = {
     pinned: ListableContentItem['pinned']
     starred: ListableContentItem['starred']
   }
+  hideIcon?: boolean
   hasFiles?: boolean
   hasBorder?: boolean
   isFileBackedUp?: boolean
@@ -18,6 +19,7 @@ type Props = {
 
 const ListItemFlagIcons: FunctionComponent<Props> = ({
   item,
+  hideIcon = false,
   hasFiles = false,
   hasBorder = true,
   isFileBackedUp = false,
@@ -40,12 +42,17 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({
           <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
         </span>
       )}
+      {hideIcon && item.pinned && (
+        <span className="ml-1.5 flex items-center" title="Pinned">
+          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="medium" />
+        </span>
+      )}
       {hasFiles && (
         <span className="ml-1.5 flex items-center" title="Files">
           <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" />
         </span>
       )}
-      {item.starred && (
+      {hideIcon && item.starred && (
         <span className="ml-1.5 flex items-center" title="Starred">
           <Icon ariaLabel="Starred" type="star-filled" className="text-warning" size="medium" />
         </span>

packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx

@@ -1,16 +1,9 @@
 import { FunctionComponent } from 'react'
 import { ListableContentItem } from './Types/ListableContentItem'
-import Icon from '../Icon/Icon'
 
 export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => {
   return (
     <>
-      {item.pinned && (
-        <div className="mb-2 inline-flex items-center gap-0.5 rounded bg-info py-1 px-1.5 text-[0.65rem] leading-3 text-info-contrast">
-          <Icon type="pin-filled" className="h-3 w-3" size="custom" />
-          Pinned
-        </div>
-      )}
       <div
         className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
           item.archived ? 'opacity-60' : ''

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -83,7 +83,17 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
       onClick={onClick}
     >
       {!hideIcon ? (
-        <div className="mr-0 flex flex-col items-center justify-between p-4 pr-4">
+        <div className="mr-0 flex flex-col items-center gap-2 p-4 pr-4">
+          {item.pinned && (
+            <div className="rounded-full bg-info p-1 text-info-contrast">
+              <Icon type="pin-filled" size="custom" className="h-3 w-3" />
+            </div>
+          )}
+          {item.starred && (
+            <div className="rounded-full bg-warning p-1 text-info-contrast">
+              <Icon type="star-filled" size="custom" className="h-3 w-3" />
+            </div>
+          )}
           <Icon type={icon} className={`text-accessory-tint-${tint}`} />
         </div>
       ) : (
@@ -96,7 +106,13 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
         <ListItemTags hideTags={hideTags} tags={tags} />
         <ListItemConflictIndicator item={item} />
       </div>
-      <ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
+      <ListItemFlagIcons
+        className="p-4"
+        item={item}
+        hideIcon={hideIcon}
+        hasFiles={hasFiles}
+        hasBorder={hasOffsetBorder}
+      />
     </div>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx

@@ -183,11 +183,11 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
               <div className="flex items-center gap-2">
                 <label className="flex items-center gap-2">
                   <input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} />
-                  <span className="text-sm font-medium">Encrypted</span>
+                  <span className="text-base font-medium md:text-sm">Encrypted</span>
                 </label>
                 <label className="flex items-center gap-2">
                   <input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} />
-                  <span className="text-sm font-medium">Decrypted</span>
+                  <span className="text-base font-medium md:text-sm">Decrypted</span>
                 </label>
               </div>
             </form>

packages/web/src/javascripts/Components/Preferences/Panes/General/Persistence.tsx

@@ -29,7 +29,7 @@ const Persistence = ({ application }: Props) => {
     <PreferencesGroup>
       <PreferencesSegment>
         <Title className="mb-2">When opening the app, show...</Title>
-        <label className="mb-2 flex items-center gap-2 text-sm font-medium">
+        <label className="mb-2 flex items-center gap-2 text-base font-medium md:text-sm">
           <StyledRadioInput
             name="state-persistence"
             checked={!shouldPersistNoteState}
@@ -39,7 +39,7 @@ const Persistence = ({ application }: Props) => {
           />
           The first note in the list
         </label>
-        <label className="flex items-center gap-2 text-sm font-medium">
+        <label className="flex items-center gap-2 text-base font-medium md:text-sm">
           <StyledRadioInput
             name="state-persistence"
             checked={!!shouldPersistNoteState}