feat: new window style

src/main/config.ts

@@ -4,12 +4,12 @@ export const appConfig = new Store()
 
 export const titleBarOverlayDark = {
   height: 41,
-  color: '#1f1f1f',
+  color: '#00000000',
   symbolColor: '#ffffff'
 }
 
 export const titleBarOverlayLight = {
   height: 41,
-  color: '#f8f8f8',
+  color: '#00000000',
   symbolColor: '#000000'
 }

src/main/index.ts

@@ -28,6 +28,8 @@ function createWindow() {
     minHeight: 500,
     show: true,
     autoHideMenuBar: true,
+    transparent: process.platform === 'darwin',
+    vibrancy: 'fullscreen-ui',
     titleBarStyle: 'hidden',
     titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,
     trafficLightPosition: { x: 8, y: 12 },

src/renderer/src/assets/styles/index.scss

@@ -36,8 +36,8 @@
   --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
   --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
 
-  --navbar-background: #1f1f1f;
-  --sidebar-background: #1f1f1f;
+  --navbar-background: rgba(0, 0, 0, 0.8);
+  --sidebar-background: rgba(0, 0, 0, 0.8);
 
   --navbar-height: 42px;
   --sidebar-width: 55px;
@@ -82,8 +82,8 @@ body[theme-mode='light'] {
   --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
   --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
 
-  --navbar-background: #f8f8f8;
-  --sidebar-background: #f8f8f8;
+  --navbar-background: rgba(255, 255, 255, 0.6);
+  --sidebar-background: rgba(255, 255, 255, 0.6);
 }
 
 *,
@@ -102,10 +102,9 @@ body {
   display: flex;
   min-height: 100vh;
   color: var(--color-text);
-  background: var(--color-background);
   line-height: 1.6;
   overflow: hidden;
-  background-size: cover;
+  background: transparent !important;
   font-family:
     -apple-system,
     BlinkMacSystemFont,

src/renderer/src/components/app/Navbar.tsx

@@ -1,3 +1,4 @@
+import { isMac } from '@renderer/config/constant'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
@@ -26,14 +27,14 @@ const NavbarContainer = styled.div`
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
   -webkit-app-region: drag;
-  background-color: var(--navbar-background);
   margin-left: calc(var(--sidebar-width) * -1);
-  padding-left: var(--sidebar-width);
+  padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
   border-bottom: 0.5px solid var(--color-border);
+  background-color: var(--navbar-background);
 `
 
 const NavbarLeftContainer = styled.div`
-  min-width: var(--assistants-width);
+  min-width: ${isMac ? 'var(--assistants-width)' : 'calc(var(--sidebar-width) + var(--assistants-width))'};
   padding: 0 10px;
   display: flex;
   flex-direction: row;
@@ -47,7 +48,7 @@ const NavbarCenterContainer = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  padding: 0 ${isMac ? '20px' : '15px'};
   font-size: 14px;
   font-weight: bold;
   color: var(--color-text-1);

src/renderer/src/components/app/Sidebar.tsx

@@ -14,7 +14,6 @@ const Sidebar: FC = () => {
 
   return (
     <Container style={isWindows ? { paddingTop: 0 } : {}}>
-      {isMac ? <PlaceholderBorderMac /> : <PlaceholderBorderWin />}
       <StyledLink to="/">
         <AvatarImg src={avatar || Logo} draggable={false} />
       </StyledLink>
@@ -53,13 +52,13 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 8px 0;
-  min-width: var(--sidebar-width);
-  min-height: 100%;
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--navbar-height));
   -webkit-app-region: drag !important;
-  background-color: var(--sidebar-background);
   border-right: 0.5px solid var(--color-border);
-  padding-top: var(--navbar-height);
-  position: relative;
+  margin-top: var(--navbar-height);
+  margin-bottom: var(--navbar-height);
+  background-color: var(--sidebar-background);
 `
 
 const AvatarImg = styled.img`
@@ -126,24 +125,4 @@ const StyledLink = styled(Link)`
   }
 `
 
-const PlaceholderBorderMac = styled.div`
-  width: var(--sidebar-width);
-  height: var(--navbar-height);
-  background: var(--navbar-background);
-  border-right: 1px solid var(--navbar-background);
-  border-bottom: 0.5px solid var(--color-border);
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-
-const PlaceholderBorderWin = styled.div`
-  width: var(--sidebar-width);
-  height: var(--navbar-height);
-  position: absolute;
-  border-right: 1px solid var(--navbar-background);
-  top: -1px;
-  right: -1px;
-`
-
 export default Sidebar

src/renderer/src/pages/apps/AppsPage.tsx

@@ -101,6 +101,7 @@ const ContentContainer = styled.div`
   justify-content: center;
   height: 100%;
   overflow-y: scroll;
+  background-color: var(--color-background);
 `
 
 const AssistantsContainer = styled.div`

src/renderer/src/pages/home/HomePage.tsx

@@ -30,8 +30,6 @@ const HomePage: FC = () => {
     setActiveAssistant(assistant)
   }
 
-  console.debug('theme', theme)
-
   return (
     <Container>
       <Navbar>
@@ -82,6 +80,7 @@ const ContentContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
+  background-color: var(--color-background);
 `
 
 export const NewButton = styled.div`

src/renderer/src/pages/home/components/NavigationCenter.tsx

@@ -43,7 +43,7 @@ const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
   return (
     <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
       {!showAssistants && (
-        <NewButton onClick={toggleShowAssistants} style={{ marginRight: 8 }}>
+        <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
           <i className="iconfont icon-showsidebarhoriz" />
         </NewButton>
       )}

src/renderer/src/pages/home/components/RightSidebar.tsx

@@ -91,7 +91,6 @@ const Tab = styled.div`
   font-size: 13px;
   cursor: pointer;
   color: var(--color-text-3);
-  border-bottom: 1px solid transparent;
   &.active {
     color: var(--color-text-2);
     font-weight: 600;

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -62,6 +62,7 @@ const ContentContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
+  background-color: var(--color-background);
 `
 
 const SettingMenus = styled.ul`

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -233,6 +233,7 @@ const ContentContainer = styled.div`
   flex-direction: column;
   height: 100%;
   padding: 20px;
+  background-color: var(--color-background);
 `
 
 const MenuContainer = styled.div`