Fix opacity of some text

Nerimity · Dec 10, 2023 · 40d23a1 · 40d23a1
1 parent ec1e00d
commit 40d23a1
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/components/inbox/drawer/friends/friend-item/InboxDrawerFriendItem.tsx b/src/components/inbox/drawer/friends/friend-item/InboxDrawerFriendItem.tsx
@@ -75,6 +75,7 @@ export default function InboxDrawerFriendItem(props: { friend?: Friend, user?: U
     .username {
       opacity: ${props => props.selected ? 1 : 0.6};
       transition: 0.2s;
+      font-size: 16px;
     }
   
     &:hover .username {
@@ -101,7 +102,7 @@ export default function InboxDrawerFriendItem(props: { friend?: Friend, user?: U
           <Avatar animate={hovered()} user={user()} size={25} />
         </Link>
         <div class={styles.details}>
-          <Text class="username">{user().username}</Text>
+          <div class="username">{user().username}</div>
           <UserPresence userId={user().id} showOffline={false} animate={hovered()} />
         </div>
 

diff --git a/src/components/servers/drawer/ServerDrawer.tsx b/src/components/servers/drawer/ServerDrawer.tsx
@@ -111,6 +111,7 @@ const ChannelContainer = styled(ItemContainer)`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 14px;
   }
   &:hover .label {
     opacity: 1;
@@ -153,7 +154,7 @@ function CategoryItem(props: { channel: Channel, selected: boolean }) {
         <Show when={isPrivateChannel()}>
           <Icon name='lock' size={14} style={{ opacity: 0.3 }} />
         </Show>
-        <Text class="label" size={14} opacity={0.6}>{props.channel.name}</Text>
+        <div class="label">{props.channel.name}</div>
       </CategoryItemContainer>
 
       <Show when={sortedServerChannels().length}>

diff --git a/src/components/servers/settings/ServerSettingsDrawer.tsx b/src/components/servers/settings/ServerSettingsDrawer.tsx
@@ -32,6 +32,7 @@ const SettingItemContainer = styled(ItemContainer)<{nested?: boolean}>`
   .label {
     opacity: ${props => props.selected ? 1 : 0.6};
     transition: 0.2s;
+    font-size: 16px;
   }
 
   &:hover .label {
@@ -100,7 +101,7 @@ function Item (props: {path: string,icon: string, label: string, selected?: bool
       >
         <SettingItemContainer nested={props.nested} selected={selected()}>
           <Icon name={props.icon} size={18} />
-          <Text class="label">{props.label}</Text>
+          <div class="label">{props.label}</div>
         </SettingItemContainer>
     </Link>
   )

diff --git a/src/components/settings/SettingsDrawer.tsx b/src/components/settings/SettingsDrawer.tsx
@@ -44,6 +44,7 @@ const SettingItemContainer = styled(ItemContainer) <{ nested?: boolean }>`
 
   .label {
     opacity: ${props => props.selected ? 1 : 0.6};
+    font-size: 16px;
     transition: 0.2s;
   }
 
@@ -137,7 +138,7 @@ function Item(props: { path: string, icon: string, label: string, onClick?: () =
     <Link href={href()} style={{ "text-decoration": "none" }}>
       <SettingItemContainer selected={selected()}>
         <Icon name={props.icon} size={18} />
-        <Text class="label">{props.label}</Text>
+        <div class="label">{props.label}</div>
         {props.children}
       </SettingItemContainer>
     </Link>