diff --git a/frontend/app/element/iconbutton.scss b/frontend/app/element/iconbutton.scss index 562536f74..2cb4a688b 100644 --- a/frontend/app/element/iconbutton.scss +++ b/frontend/app/element/iconbutton.scss @@ -1,4 +1,5 @@ .iconbutton { + display: flex; cursor: pointer; opacity: 0.7; align-items: center; diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index 4be7e0368..3299a8afe 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -78,39 +78,24 @@ color: var(--accent-color); } + .tab-bar-right { + display: flex; + flex-direction: row; + gap: 6px; + &:not(:empty) { + margin-left: auto; + margin-right: 6px; + } + } + .config-error-button { - margin-left: auto; - height: 80%; - margin: auto 4px; color: black; + padding: 0 6px; flex: 0 0 fit-content; } - .update-available-banner { - margin-left: auto; - } - - .add-tab-btn { - height: 100%; - cursor: pointer; - font-size: 14px; - text-align: center; - user-select: none; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; + .add-tab { padding: 0 10px; - - &:hover { - opacity: 1; - } - - i { - overflow: hidden; - margin-top: 5px; - font-size: 11px; - } } .window-drag { diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 0fd646dad..90c618e6c 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -167,7 +167,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const appMenuButtonRef = useRef(null); const tabWidthRef = useRef(TAB_DEFAULT_WIDTH); const scrollableRef = useRef(false); - const updateStatusBannerRef = useRef(null); + const updateStatusBannerRef = useRef(null); const configErrorButtonRef = useRef(null); const prevAllLoadedRef = useRef(false); const activeTabId = useAtomValue(atoms.staticTabId); @@ -685,9 +685,11 @@ const TabBar = memo(({ workspace }: TabBarProps) => { })} - - - + +
+ + +
); }); diff --git a/frontend/app/tab/updatebanner.scss b/frontend/app/tab/updatebanner.scss index 14b144ac5..e5e387521 100644 --- a/frontend/app/tab/updatebanner.scss +++ b/frontend/app/tab/updatebanner.scss @@ -1,15 +1,10 @@ -.update-available-banner { - display: flex; - height: 100%; - .button { - color: black; - height: 80%; - margin: auto 4px; - background-color: var(--accent-color); - flex: 0 0 fit-content; - - &:disabled { - opacity: unset !important; - } +.button { + color: black; + background-color: var(--accent-color); + flex: 0 0 fit-content; + line-height: unset !important; + padding: 0 6px; + &:disabled { + opacity: unset !important; } } diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx index fb1836693..bb82afaf9 100644 --- a/frontend/app/tab/updatebanner.tsx +++ b/frontend/app/tab/updatebanner.tsx @@ -4,7 +4,7 @@ import { useAtomValue } from "jotai"; import { forwardRef, memo, useEffect, useState } from "react"; import "./updatebanner.scss"; -const UpdateStatusBannerComponent = forwardRef((_, ref) => { +const UpdateStatusBannerComponent = forwardRef((_, ref) => { const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom); let [updateStatusMessage, setUpdateStatusMessage] = useState(); const [dismissBannerTimeout, setDismissBannerTimeout] = useState(); @@ -29,6 +29,7 @@ const UpdateStatusBannerComponent = forwardRef((_, ref) => { default: break; } + // message = "Update Available"; setUpdateStatusMessage(message); // Clear any existing timeout @@ -54,16 +55,15 @@ const UpdateStatusBannerComponent = forwardRef((_, ref) => { } if (updateStatusMessage) { return ( -
- -
+ ); } });