better innatical tab

skyebrowser · Oct 26, 2021 · 2172739 · 2172739
1 parent e9e6ecd
commit 2172739
Show file tree

Hide file tree

Showing 31 changed files with 665 additions and 882 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skye",
-  "version": "6.0.4-nightly.9",
+  "version": "6.0.4-nightly.10",
   "sideEffects": false,
   "description": "Extensible, fast and innovative web browser with Innatical UI.",
   "keywords": [
@@ -52,6 +52,7 @@
     "@types/node-fetch": "^2.5.10",
     "@types/react": "17.0.32",
     "@types/react-dom": "17.0.10",
+    "@types/react-helmet": "^6.1.4",
     "@types/rimraf": "^3.0.0",
     "@types/styled-components": "5.1.15",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -110,9 +111,14 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0-beta2",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "electron-chrome-extensions": "^3.8.0",
+    "fast-average-color": "^6.4.2",
     "hex-to-rgb": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "patch-package": "^6.4.7",
-    "postinstall-postinstall": "^2.1.0"
+    "postinstall-postinstall": "^2.1.0",
+    "react-helmet": "^6.1.0",
+    "react-image-fallback": "^8.0.0",
+    "react-query": "^3.28.0",
+    "react-use": "^17.3.1"
   }
 }
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
@@ -66,6 +66,11 @@ export const DEFAULT_SETTINGS: ISettings = {
   startupBehavior: {
     type: 'empty',
   },
+  tab: {
+    image: 'https://file.coffee/u/y970mT9Cg5NkPg.png',
+    topSites: true,
+    pinned: true,
+  },
   warnOnQuit: false,
   version: 2,
   downloadsDialog: false,

diff --git a/src/constants/tabs.ts b/src/constants/tabs.ts
@@ -1,4 +1,6 @@
-export const NEWTAB_URL = 'https://tab.innatical.com';
+import { getWebUIURL } from '~/common/webui';
+
+export const NEWTAB_URL = getWebUIURL('newtab');
 
 export const defaultTabOptions: chrome.tabs.CreateProperties = {
   url: NEWTAB_URL,

diff --git a/src/interfaces/settings.ts b/src/interfaces/settings.ts
@@ -21,6 +21,11 @@ export interface ISettings {
   bookmarksBar: boolean;
   suggestions: boolean;
   searchEngine: number;
+  tab: {
+    image: string;
+    topSites: boolean;
+    pinned: boolean;
+  };
   searchEngines: ISearchEngine[];
   startupBehavior: IStartupBehavior;
   warnOnQuit: boolean;

diff --git a/src/interfaces/theme.ts b/src/interfaces/theme.ts
@@ -17,8 +17,10 @@ export interface ITheme {
   'control.hover.backgroundColor': string;
   'control.valueColor': string;
   'control.lightIcon': boolean;
+  'control.borderBottomColor': string;
   'switch.backgroundColor': string;
 
+  'button.backgroundColor': string;
   'dialog.separator.color': string;
   'dialog.backgroundColor': string;
   'dialog.textColor': string;

diff --git a/src/renderer/components/Button/styles.ts b/src/renderer/components/Button/styles.ts
@@ -15,10 +15,11 @@ export const StyledButton = styled.div<ButtonProps>`
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: 8px;
   position: relative;
   cursor: pointer;
-
+  font-size: 15px;
+  text-align: center;
   &::before {
     content: '';
     display: block;

diff --git a/src/renderer/components/Dropdown/styles.ts b/src/renderer/components/Dropdown/styles.ts
@@ -13,10 +13,10 @@ interface DropdownProps {
 }
 
 export const StyledDropdown = styled.div<DropdownProps>`
-  height: 32px;
+  height: 40px;
   min-width: 200px;
   position: relative;
-  border-radius: 4px;
+  border-radius: 8px;
   user-select: none;
   cursor: pointer;
   display: flex;

diff --git a/src/renderer/components/Input/index.tsx b/src/renderer/components/Input/index.tsx
@@ -1,21 +1,22 @@
 import styled, { css } from 'styled-components';
 
 import { ITheme } from '~/interfaces';
+import { BLUE_500 } from '~/renderer/constants';
 import { centerIcon } from '~/renderer/mixins';
 
 export const Control = css`
-  height: 40px;
+  height: 42px;
   position: relative;
   border: none;
   outline: none;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   padding: 0px 8px;
   font-size: 12px;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.54);
+    box-shadow: 0 0 0 2px ${BLUE_500};
   }
 
   ${({ theme }: { theme: ITheme }) => css`
@@ -28,6 +29,7 @@ export const Input = styled.input.attrs(() => ({
   spellCheck: false,
 }))`
   ${Control}
+  margin-right: 10px;
 `;
 
 export const Dropdown = styled.div`

diff --git a/src/renderer/components/RadioButton/styles.ts b/src/renderer/components/RadioButton/styles.ts
@@ -24,7 +24,7 @@ interface CircleProps {
 }
 
 export const Circle = styled.div<CircleProps>`
-  border-radius: 100%;
+  border-radius: 2px;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -53,13 +53,12 @@ export const Circle = styled.div<CircleProps>`
           : theme.dark
           ? 'rgba(255, 255, 255, 0.54)'
           : 'rgba(0, 0, 0, 0.54)'};
-      border-radius: 100%;
+      border-radius: 4px;
     }
   `}
 `;
 
 export const Root = styled.div`
-  margin: 5px;
   cursor: pointer;
   width: 18px;
   height: 18px;
@@ -69,7 +68,7 @@ export const Root = styled.div`
   }
   &::before {
     content: '';
-    border-radius: 100%;
+    border-radius: 2px;
     width: 100%;
     height: 100%;
     position: absolute;

diff --git a/src/renderer/components/Switch/styles.ts b/src/renderer/components/Switch/styles.ts
@@ -30,8 +30,8 @@ export const StyledSwitch = styled.div<SwitchProps>`
   ${({ activated, color, theme, clickable, dense }) => css`
     background-color: ${activated ? color : theme['switch.backgroundColor']};
     cursor: ${clickable ? 'pointer' : 'default'};
-    width: ${dense ? 32 : 36}px;
-    height: ${dense ? 16 : 18}px;
+    width: ${dense ? 32 : 42}px;
+    height: ${dense ? 16 : 25}px;
 
     &:hover {
       &:after {
@@ -57,7 +57,7 @@ export const Thumb = styled.div<ThumbProps>`
   ${({ activated, dense }) => css`
     width: ${dense ? 12 : 14}px;
     height: ${dense ? 12 : 14}px;
-    left: ${activated ? (dense ? 18 : 20) : 2}px;
+    left: ${activated ? (dense ? 18 : 22) : 5}px;
     background-color: #fff;
   `}
 `;
diff --git a/src/renderer/constants/themes.ts b/src/renderer/constants/themes.ts
@@ -17,6 +17,8 @@ export const skyeLight: ITheme = {
   'control.hover.backgroundColor': 'rgba(0, 0, 0, 0.1)',
   'control.valueColor': '#000',
   'control.lightIcon': false,
+  'control.borderBottomColor': '#E5F1FF',
+  'button.backgroundColor': '#1E6FEB',
   'switch.backgroundColor': 'rgba(0, 0, 0, 0.16)',
   'dialog.backgroundColor': '#fff',
   'dialog.separator.color': 'rgba(0, 0, 0, 0.12)',
@@ -55,6 +57,8 @@ export const skyeDark: ITheme = {
   'control.hover.backgroundColor': 'rgba(255, 255, 255, 0.12)',
   'control.valueColor': '#fff',
   'control.lightIcon': true,
+  'control.borderBottomColor': '#10121a',
+  'button.backgroundColor': '#1E6FEB',
   'switch.backgroundColor': 'rgba(255, 255, 255, 0.24)',
   'dialog.backgroundColor': '#1A1E2C',
   'dialog.separator.color': 'rgba(255, 255, 255, 0.12)',

diff --git a/src/renderer/views/app/components/AddressBar/index.tsx b/src/renderer/views/app/components/AddressBar/index.tsx
@@ -10,6 +10,7 @@ import { StyledAddressBar, InputContainer, Input, Text } from './style';
 import { ICON_SEARCH } from '~/renderer/constants';
 import { SiteButtons } from '../SiteButtons';
 import { DEFAULT_TITLEBAR_HEIGHT } from '~/constants/design';
+import { NEWTAB_URL } from '~/constants/tabs';
 
 let mouseUpped = false;
 
@@ -75,11 +76,7 @@ const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { value } = e.currentTarget;
     let url = value;
     if (value.trim() === '') {
-      callViewMethod(
-        store.tabs.selectedTabId,
-        'loadURL',
-        'https://tab.innatical.com',
-      );
+      callViewMethod(store.tabs.selectedTabId, 'loadURL', NEWTAB_URL);
       return;
     } else if (isURL(value)) {
       url =