tab colors

Co-authored-by: lleyton <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skye",
-  "version": "6.0.3-nightly.5",
+  "version": "6.0.3-nightly.6",
   "sideEffects": false,
   "description": "Extensible, fast and innovative web browser with material UI.",
   "keywords": [
@@ -110,6 +110,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0-beta2",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "electron-chrome-extensions": "^3.8.0",
+    "hex-to-rgb": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0"

src/interfaces/bookmark.ts

@@ -7,6 +7,7 @@ export interface IBookmark {
   isFolder?: boolean;
   parent?: string;
   order?: number;
+  color?: string;
   expanded?: boolean;
   static?: 'mobile' | 'main' | 'other' | 'pinned';
   children?: string[];

src/interfaces/extensions.ts

@@ -2,13 +2,15 @@ export type BrowserActionChangeType =
   | 'setPopup'
   | 'setBadgeText'
   | 'setTitle'
+  | 'setColor'
   | 'setIcon'
   | 'setBadgeBackgroundColor';
 
 export const BROWSER_ACTION_METHODS: BrowserActionChangeType[] = [
   'setPopup',
   'setBadgeText',
   'setTitle',
+  'setColor',
   'setIcon',
   'setBadgeBackgroundColor',
 ];

src/interfaces/history-item.ts

@@ -3,6 +3,7 @@ export interface IHistoryItem {
   title?: string;
   url?: string;
   date?: number;
+  color?: string;
   favicon?: string;
   hovered?: boolean;
 }

src/interfaces/news-item.ts

@@ -5,6 +5,7 @@ export interface INewsItem {
   };
   author: string;
   title: string;
+  color: string;
   description: string;
   url: string;
   urlToImage: string;

src/interfaces/startup-tab.ts

@@ -5,6 +5,7 @@ export interface IStartupTab {
   title?: string;
   url?: string;
   favicon?: string;
+  color?: string;
   order?: number;
   pinned?: boolean;
   isUserDefined?: boolean;

src/interfaces/tabs.ts

@@ -2,6 +2,7 @@ export type TabEvent =
   | 'load-commit'
   | 'url-updated'
   | 'title-updated'
+  | 'color-updated'
   | 'favicon-updated'
   | 'did-navigate'
   | 'loading'

src/main/dialogs/add-bookmark.ts

@@ -10,6 +10,7 @@ export const showAddBookmarkDialog = (
   data?: {
     url: string;
     title: string;
+    color: string;
     bookmark?: IBookmark;
     favicon?: string;
   },
@@ -18,11 +19,13 @@ export const showAddBookmarkDialog = (
     const {
       url,
       title,
+      color,
       bookmark,
       favicon,
     } = Application.instance.windows.current.viewManager.selected;
     data = {
       url,
+      color,
       title,
       bookmark,
       favicon,

src/main/dialogs/preview.ts

@@ -31,6 +31,7 @@ export class PreviewDialog extends PersistentDialog {
     const {
       id,
       url,
+      color,
       title,
       errorURL,
     } = Application.instance.windows
@@ -41,6 +42,7 @@ export class PreviewDialog extends PersistentDialog {
       id,
       url: url.startsWith(`${ERROR_PROTOCOL}://`) ? errorURL : url,
       title,
+      color,
       x: this.tab.x - 8,
     });
   }

src/main/menus/bookmarks.ts

@@ -97,6 +97,7 @@ export function createMenu(appWindow: AppWindow, item: IBookmark) {
         showAddBookmarkDialog(appWindow.win, windowBounds.width - 20, 72, {
           url: item.url,
           title: item.title,
+          color: item.color,
           bookmark: item,
           favicon: item.favicon,
         });

src/main/view.ts

@@ -29,6 +29,7 @@ export class View {
   public isNewTab = false;
   public homeUrl: string;
   public favicon = '';
+  public color = '';
   public incognito = false;
 
   public errorURL = '';
@@ -115,6 +116,13 @@ export class View {
       this.updateURL(this.webContents.getURL());
     });
 
+    this.webContents.addListener('did-change-theme-color', (e, color) => {
+      this.updateData();
+      console.log(color);
+      this.emitEvent('color-updated', color);
+      this.updateURL(this.webContents.getURL());
+    });
+
     this.webContents.addListener('did-navigate', async (e, url) => {
       this.emitEvent('did-navigate', url);
 
@@ -349,6 +357,7 @@ export class View {
     ) {
       const historyItem: IHistoryItem = {
         title: this.title,
+        color: this.color,
         url,
         favicon: this.favicon,
         date: new Date().getTime(),
@@ -403,7 +412,7 @@ export class View {
     if (!this.incognito) {
       const id = this.lastHistoryId;
       if (id) {
-        const { title, url, favicon } = this;
+        const { title, color, url, favicon } = this;
 
         this.historyQueue.enqueue(async () => {
           await Application.instance.storage.update({
@@ -413,6 +422,7 @@ export class View {
             },
             value: {
               title,
+              color,
               url,
               favicon,
             },
@@ -425,6 +435,7 @@ export class View {
 
           if (item) {
             item.title = title;
+            item.color = color;
             item.url = url;
             item.favicon = favicon;
           }

src/main/windows-service.ts

@@ -22,12 +22,19 @@ export class WindowsService {
 
           if (!win) throw new Error('Window not found');
 
-          const view = win.viewManager.create(details);
+          const view = win.viewManager.create(details, false, false);
+          win.webContents.send('create-tab', { ...details }, false, view.id);
+
+          await new Promise((resolve) => {
+            ipcMain.once('create-tab-reply-' + view.id, resolve);
+          });
+
           return [view.webContents, win.win];
         },
         selectTab: (tab, window) => {
           const win = this.list.find((x) => x.win.id === window.id);
           win.viewManager.select(tab.id, true);
+          win.send('select-tab-id', tab.id);
         },
         removeTab: (tab, window) => {
           const win = this.list.find((x) => x.win.id === window.id);

src/main/windows/app.ts

@@ -18,7 +18,7 @@ export class AppWindow {
   public constructor(incognito: boolean) {
     this.win = new BrowserWindow({
       frame: false,
-      minWidth: 400,
+      minWidth: 900,
       minHeight: 450,
       width: 900,
       height: 700,

src/renderer/components/Button/styles.ts

@@ -15,7 +15,7 @@ export const StyledButton = styled.div<ButtonProps>`
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 6px;
   position: relative;
   cursor: pointer;
 
@@ -38,11 +38,11 @@ export const StyledButton = styled.div<ButtonProps>`
   ${({ background, foreground, type }) => css`
     color: ${foreground || '#fff'};
     border: ${type === 'outlined'
-      ? `1px solid ${background || '#2196F3'}`
+      ? `1px solid ${background || '#1E6FEB'}`
       : 'unset'};
     background-color: ${type === 'outlined'
       ? 'transparent'
-      : background || '#2196F3'};
+      : background || '#1E6FEB'};
 
     &::before {
       background-color: ${foreground || '#fff'};

src/renderer/components/GlobalNavigationDrawer/index.tsx

@@ -37,7 +37,7 @@ const MenuItem = observer(
 
 export const GlobalNavigationDrawer = () => {
   return (
-    <NavigationDrawer dense title="">
+    <NavigationDrawer dense title="" global>
       <MenuItem name="settings" global>
         <FontAwesomeIcon icon={ICON_SETTINGS} fixedWidth />
       </MenuItem>

src/renderer/components/Input/index.tsx

@@ -4,7 +4,7 @@ import { ITheme } from '~/interfaces';
 import { centerIcon } from '~/renderer/mixins';
 
 export const Control = css`
-  height: 32px;
+  height: 40px;
   position: relative;
   border: none;
   outline: none;

src/renderer/components/NavigationDrawer/NavigationDrawerItem/index.tsx

@@ -23,6 +23,7 @@ export const NavigationDrawerItem = observer(
       <StyledNavigationDrawerItem
         title={children}
         onClick={onClick}
+        selected={selected}
         global={global}
       >
         {icon && (

src/renderer/components/NavigationDrawer/NavigationDrawerItem/style.ts

@@ -7,18 +7,35 @@ import { transparency } from '~/renderer/constants';
 interface NavigationDrawerItemProps {
   theme?: ITheme;
   global?: boolean;
+  selected?: boolean;
 }
 export const StyledNavigationDrawerItem = styled.div<NavigationDrawerItemProps>`
   display: flex;
   height: 40px;
-  border-radius: 4px;
   align-items: center;
   position: relative;
+  border-radius: 8px;
   cursor: pointer;
-  ${({ theme, global }) => css`
+  ${({ theme, global, selected }) => css`
     &:hover {
-      background-color: ${theme['backgroundColor']};
+      background-color: ${global ? 'transparent' : theme['backgroundColor']};
     }
+
+    ${selected &&
+    !global && {
+      backgroundColor: theme['backgroundColor'],
+    }}
+
+    ${selected &&
+    global && {
+      color: '#1E6FEB',
+    }}
+
+    ${global && {
+      fontSize: 18,
+    }}
+    padding-left: ${global ? '0' : '10px'};
+    padding-right: ${global ? '0' : '10px'};
     justify-content: ${global ? 'center' : 'left'};
   `};
 `;

src/renderer/components/NavigationDrawer/index.tsx

@@ -17,6 +17,7 @@ export const NavigationDrawer = ({
   onSearchInput,
   style,
   dense,
+  global,
 }: {
   children?: any;
   title?: string;
@@ -25,6 +26,7 @@ export const NavigationDrawer = ({
   onBackClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
   style?: any;
   dense?: boolean;
+  global?: boolean;
 }) => {
   return (
     <StyledNavigationDrawer style={style} dense={dense}>
@@ -38,7 +40,7 @@ export const NavigationDrawer = ({
           <Input placeholder="Search" onInput={onSearchInput} />
         </Search>
       )}
-      <MenuItems>{children}</MenuItems>
+      <MenuItems global={global}>{children}</MenuItems>
     </StyledNavigationDrawer>
   );
 };

src/renderer/components/NavigationDrawer/style.ts

@@ -27,14 +27,22 @@ export const StyledNavigationDrawer = styled.div<NavigationDrawerProps>`
   `}
 `;
 
-export const MenuItems = styled.div`
+export const MenuItems = styled.div<{
+  global?: boolean;
+}>`
   display: flex;
   flex-flow: column;
   flex: 1;
   margin-top: 10px;
   padding-bottom: 24px;
   overflow: hidden auto;
   ${noButtons('6px', 'rgba(0, 0, 0, 0.04)', 'rgba(0, 0, 0, 0.12)')};
+  ${({ global }) => css`
+    margin-left: ${global ? '0' : '-10px'};
+    margin-right: ${global ? '0' : '-10px'};
+    justify-content: ${global ? 'center' : 'left'};
+    gap: ${global ? '30px' : '0'};
+  `}
 `;
 
 export const Header = styled.div`

src/renderer/components/RadioButton/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { transparency, BLUE_500 } from '~/renderer/constants';
-import { robotoRegular } from '~/renderer/mixins';
+import { interRegular } from '~/renderer/mixins';
 import { ITheme } from '~/interfaces';
 
 export const Container = styled.div`
@@ -106,5 +106,5 @@ export const Label = styled.div`
   font-size: 14px;
   color: rgba(0, 0, 0, ${transparency.text.high});
   margin-left: 8px;
-  ${robotoRegular()};
+  ${interRegular()};
 `;

src/renderer/components/Textfield/style.ts

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
 
 import {
-  robotoRegular,
+  interRegular,
   centerVertical,
-  robotoMedium,
+  interMedium,
   centerIcon,
   coloredCursor,
 } from '~/renderer/mixins';
@@ -42,7 +42,7 @@ export const Input = styled.input<InputProps>`
   outline: none;
   background-color: transparent;
   user-select: auto;
-  ${robotoRegular()};
+  ${interRegular()};
 
   ${({ color, hasLabel, hasIcon, dark }) => css`
     padding-top: ${hasLabel ? 12 : 0}px;
@@ -88,7 +88,7 @@ export const Label = styled.div<LabelProps>`
       : dark
       ? `rgba(255, 255, 255, ${transparency.text.medium})`
       : `rgba(0, 0, 0, ${transparency.text.medium})`};
-    ${activated ? robotoMedium() : robotoRegular()};
+    ${activated ? interMedium() : interRegular()};
   `}
 `;