starred/HyperTab
1
0
Fork 0
mirror of https://github.com/nkcmr/HyperTab.git synced 2026-04-18 15:09:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix regression in dark mode styling

Browse Source
This commit is contained in:
nick comer
2024-05-05 21:15:27 -04:00
parent adc84cf5db
commit 3463d25fd0
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/popup/main.tsx
View File

@@ -249,11 +249,11 @@ const TabItem = styled.div<{ $selected: boolean; $dark: boolean }>`
gap: ${TAB_ITEM_FLEX_GAP}px; gap: ${TAB_ITEM_FLEX_GAP}px;
align-items: center; align-items: center;
&:hover { &:hover {
background-color: #efefef; background-color: ${(props) => (props.$dark ? "#4e4e4e" : "#efefef")};
} }
`; `;
const TabItemFavicon = styled.div` const TabItemFavicon = styled.div<{ $dark: boolean }>`
background-color: #d9d9d9; background-color: ${(props) => (props.$dark ? "#6e6e6e" : "#d9d9d9")};
border-radius: 5px; border-radius: 5px;
padding: 0.5em; padding: 0.5em;
width: ${TAB_ITEM_FAVICON_SIZE}px; width: ${TAB_ITEM_FAVICON_SIZE}px;
@@ -271,8 +271,8 @@ const TabItemMainTitle = styled.div<{ $dark: boolean }>`
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
const TabItemMainHostname = styled.div` const TabItemMainHostname = styled.div<{ $dark: boolean }>`
color: #6e6e6e; color: ${(props) => (props.$dark ? "#a9a9a9" : "#6e6e6e")};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -471,6 +471,7 @@ const Popup: FunctionComponent = () => {
ref={i === tabSelector ? selectedTabEle : undefined} ref={i === tabSelector ? selectedTabEle : undefined}
> >
<TabItemFavicon <TabItemFavicon
$dark={darkMode}
onMouseEnter={() => { onMouseEnter={() => {
setTabHover(t.item.id!); setTabHover(t.item.id!);
}} }}
@@ -511,7 +512,7 @@ const Popup: FunctionComponent = () => {
match={t.matches?.find((m) => m.key === "title")} match={t.matches?.find((m) => m.key === "title")}
/> />
</TabItemMainTitle> </TabItemMainTitle>
<TabItemMainHostname> <TabItemMainHostname $dark={darkMode}>
{t.item.url ? hostname(t.item.url) : ""} {t.item.url ? hostname(t.item.url) : ""}
</TabItemMainHostname> </TabItemMainHostname>
</TabItemMain> </TabItemMain>