diff --git a/source/Background/service-worker.ts b/source/Background/service-worker.ts index b3c0303..d1c068c 100644 --- a/source/Background/service-worker.ts +++ b/source/Background/service-worker.ts @@ -3,11 +3,8 @@ import { browser } from 'webextension-polyfill-ts' import { getDomainName } from '../utils/getDomain' import { getIcon } from '../utils/geticon' -// create context menu - const createSubmenu = async () => { const categoryList = await browser.storage.local.get('shortcutCategoryList') - await categoryList.shortcutCategoryList.forEach((category: string) => { browser.contextMenus.create({ id: category, @@ -23,8 +20,11 @@ browser.contextMenus.create({ title: 'Save to Kairy', contexts: ['link'], }) - -createSubmenu() +browser.storage.onChanged.addListener((changes, areaName) => { + if (areaName === 'local' && changes.shortcutCategoryList) { + createSubmenu() + } +}) // listen for context menu click browser.contextMenus.onClicked.addListener((info: any, tab) => { diff --git a/source/Dashboard/components/Accordion/index.tsx b/source/Dashboard/components/Accordion/index.tsx new file mode 100644 index 0000000..680092d --- /dev/null +++ b/source/Dashboard/components/Accordion/index.tsx @@ -0,0 +1,154 @@ +import Tippy from '@tippyjs/react' +import React, { useContext, useEffect, useRef, useState } from 'react' +import { browser } from 'webextension-polyfill-ts' +import { ContextProvider } from '../../context/context' +import { Shortcut } from '../../reducers/types' +import AddCustomShortcut from '../AddCustomShortcut' +import styles from './styles.module.scss' + +interface IProps { + title: string + content: string + + index: number +} + +const Accordion: React.FC = (props) => { + const [active, setActive] = useState(props?.index == 0 ? true : false) + const { state, dispatch } = useContext(ContextProvider) + const content: any = useRef(null) + const [height, setHeight] = useState('0px') + const [isAddShortcutVisible, setIsAddShortcutVisible] = useState(false) + const [isEditShortcutVisible, setIsEditShortcutVisible] = useState(false) + const [selectedShortcut, setSelectedShortcut] = useState(null) + + useEffect(() => { + setHeight(active ? `${content.current?.scrollHeight}px` : '0px') + }, []) + + function toggleAccordion() { + setActive(!active) + setHeight(active ? '0px' : `${content.current?.scrollHeight}px`) + } + const changeCategoryTitle = (oldName: string, newName: string) => { + let shortcutList = state.shortcutList.map((item) => { + if (item.category == oldName) { + item.category = newName + } + return item + }) + + let categoryList = state.shortcutCategoryList.map((item) => { + if (item == oldName) { + item = newName + } + return item + }) + + dispatch({ type: 'SET_SHORTCUT_LIST', payload: shortcutList }) + dispatch({ type: 'SET_SHORTCUT_CATEGORY_LIST', payload: categoryList }) + browser.storage.local.set({ + shortcutCategoryList: categoryList, + shortcutList: shortcutList, + }) + } + const handleEditShortcut = (shortcut: Shortcut) => { + console.log(shortcut, 'clicked shortcut') + setSelectedShortcut(shortcut) + setIsEditShortcutVisible(true) + } + return ( + <> + {isAddShortcutVisible && ( + + )} + {selectedShortcut !== null && isEditShortcutVisible && ( + + )} + +
+
+
+ {active ? '-' : '+'} +
+ +
+ + Double click to Edit {props.title} + + } + placement='bottom-start' + arrow={false} + > + { + e.currentTarget.readOnly = false + e.currentTarget.classList.add(styles.selectedInput) + }} + onBlur={(e) => { + e.currentTarget.readOnly = true + e.currentTarget.classList.remove(styles.selectedInput) + changeCategoryTitle(props.title, e.target.value) + }} + /> + +
+
+
+
+ {state.shortcutList.map((shortcut, index) => { + if (shortcut.category == props.title) { + return ( +
+ Edit {shortcut.title} + } + placement='right-end' + arrow={false} + > +
{ + handleEditShortcut(shortcut) + }} + > + +

{shortcut.title}

+
+ +
+ ) + } + return null + })} + +
{ + setIsAddShortcutVisible(true) + }} + > +

+

+
+
+
+
+ + ) +} + +export default Accordion diff --git a/source/Dashboard/components/Accordion/styles.module.scss b/source/Dashboard/components/Accordion/styles.module.scss new file mode 100644 index 0000000..6a2f147 --- /dev/null +++ b/source/Dashboard/components/Accordion/styles.module.scss @@ -0,0 +1,141 @@ +@import '../../../styles/fonts'; +@import '../../../styles/variables'; +@import '../../../styles/reset'; + +.accordionSection { + display: flex; + flex-direction: column; + width: 100%; + margin: 1rem 0; + + .accordion { + display: grid; + grid-template-columns: 1fr 25fr; + align-items: flex-start; + border: none; + outline: none; + transition: background-color 0.3s ease-in-out; + cursor: pointer; + + .icon { + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + background-color: #133551; + color: #fff; + border-radius: 50%; + margin-top: 6px; + + .accordionIcon { + font-size: 1.5rem; + font-weight: 500; + } + } + .titleHeader { + display: flex; + justify-content: space-between; + align-items: center; + .accordionTitle { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-size: 1.2rem; + line-height: 30px; + margin-left: 0.5rem; + padding-left: 0; + text-align: left; + background-color: transparent; + color: $primary-heading; + width: 80%; + padding-inline: 0.5rem; + border-radius: 8px; + margin-bottom: 0.5rem; + user-select: none; + &:hover { + background-color: rgba(128, 128, 128, 0.181); + } + } + .selectedInput { + border: 1px solid $primary-border; + } + } + } + + .accordionContent { + width: 100%; + height: auto; + overflow: hidden; + transition: max-height 0.3s ease-in-out; + padding-inline: 2rem; + + .accordionText { + max-width: 1000px; + font-family: 'Poppins'; + font-style: normal; + font-weight: 300; + font-size: 1.2rem; + line-height: 32px; + margin-left: 5px; + color: $primary-text; + display: flex; + flex-wrap: wrap; + .shortcutItem { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + padding: 0.2rem 0.5rem; + border: 0.5px solid $primary-border; + border-radius: 8px; + margin-inline: 0.4rem; + margin-block: 0.4rem; + + &:hover { + cursor: pointer; + background-color: rgba(128, 128, 128, 0.263); + } + p { + margin: 0 0.4rem; + } + } + } + span { + color: #fff; + font-size: 20px; + font-weight: 800; + } + } +} + +@media only screen and (max-width: 600px) { + .accordionSection { + padding-inline: 2rem; + margin: 1rem 0; + + .accordion { + width: 100%; + gap: 1rem; + + .icon { + width: 20px; + height: 20px; + .accordionIcon { + padding: 4px; + } + } + .accordionTitle { + font-size: 1rem; + } + } + .accordionContent { + padding-inline: 0rem; + .accordionText { + font-size: 1rem; + text-align: start; + line-height: 25px; + } + } + } +} diff --git a/source/Dashboard/components/AddCustomShortcut/index.tsx b/source/Dashboard/components/AddCustomShortcut/index.tsx index 08afa1a..8951f6d 100644 --- a/source/Dashboard/components/AddCustomShortcut/index.tsx +++ b/source/Dashboard/components/AddCustomShortcut/index.tsx @@ -6,6 +6,7 @@ import { Shortcut } from '../../reducers/types' import ShortcutCard from '../ShortcutCard' import styles from './styles.module.scss' import { motion } from 'framer-motion' +import { browser } from 'webextension-polyfill-ts' const variants = { enter: { @@ -41,14 +42,18 @@ const AddCustomShortcut: React.FC = ({ const [category, setCategory] = useState('all') const [id, setId] = useState(nanoid()) const [icon, setIcon] = useState('') + const [isPinned, setIsPinned] = useState(false) const mainRef = useRef() as React.MutableRefObject useEffect(() => { + console.log('shortcutData', shortcutData) + if (shortcutData) { setTitle(shortcutData.title) setUrl(shortcutData.url) setCategory(shortcutData.category) setId(shortcutData.id) setIcon(shortcutData.icon) + setIsPinned(shortcutData.isPinned) } function handleClickOutside(event: any) { @@ -75,7 +80,7 @@ const AddCustomShortcut: React.FC = ({ category: category, icon: icon || `https://www.google.com/s2/favicons?domain=${url}`, modifiedOn: new Date().getTime().toString(), - isPinned: false, + isPinned: isPinned, } if (shortcutData) { const newShortcutList = state.shortcutList.map((shortcut) => { @@ -88,13 +93,16 @@ const AddCustomShortcut: React.FC = ({ type: 'SET_SHORTCUT_LIST', payload: newShortcutList, }) + browser.storage.local.set({ shortcutList: newShortcutList }) } else { dispatch({ type: 'SET_SHORTCUT_LIST', payload: [...state.shortcutList, updatedShortcut], }) + browser.storage.local.set({ + shortcutList: [...state.shortcutList, updatedShortcut], + }) } - console.log('saved') setIsAddShortcutVisible(false) } } diff --git a/source/Dashboard/components/CategoryDropdownHeader/index.tsx b/source/Dashboard/components/CategoryDropdownHeader/index.tsx index 6b05fd8..4996b67 100644 --- a/source/Dashboard/components/CategoryDropdownHeader/index.tsx +++ b/source/Dashboard/components/CategoryDropdownHeader/index.tsx @@ -5,28 +5,19 @@ import { ContextProvider } from '../../context/context' import AddCustomShortcut from '../AddCustomShortcut' import { Shortcut } from '../../reducers/types' import Tippy from '@tippyjs/react' +import { ManageCategories } from '../ManageCategories' const CategoryDropdownHeader: React.FC = () => { - const [categories, setCategories] = useState([]) const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = useState(false) const [isAddShortcutVisible, setIsAddShortcutVisible] = useState(false) const [isSortDropdownVisible, setIsSortDropdownVisible] = useState(false) + const [isManageCategoryVisible, setIsManageCategoryVisible] = useState(false) const { state, dispatch } = useContext(ContextProvider) const categoryDropdownRef = useRef() as React.MutableRefObject const sortDropdownRef = useRef() as React.MutableRefObject useEffect(() => { - browser.storage.local.get().then((res) => { - if (res.activeShortcutCategory) { - dispatch({ - type: 'SET_ACTIVE_SHORTCUT_CATEGORY', - payload: res.activeShortcutCategory, - }) - } - res.shortcutCategoryList && setCategories(res.shortcutCategoryList) - }) - document.addEventListener('mousedown', (event) => { if (!categoryDropdownRef.current?.contains(event.target as Node)) { setIsCategoryDropdownOpen(false) @@ -82,8 +73,6 @@ const CategoryDropdownHeader: React.FC = () => { payload: sortedArr, }) } - - console.log(isAddShortcutVisible) return ( <> {isAddShortcutVisible && ( @@ -91,6 +80,13 @@ const CategoryDropdownHeader: React.FC = () => { )} + {isManageCategoryVisible && ( + <> + + + )}
{ > All Categories

- {categories.map((item) => { + {state.shortcutCategoryList.map((item) => { item == 'all' && (item = 'All Categories') return (

{ type: 'SET_ACTIVE_SHORTCUT_CATEGORY', payload: item, }) + browser.storage.local.set({ + activeShortcutCategory: item, + }) setIsCategoryDropdownOpen(false) }} > @@ -165,9 +164,8 @@ const CategoryDropdownHeader: React.FC = () => {

{ - // manageCategoryElement.classList.toggle('visible') - // manageCategoryElementBg.classList.toggle('visible') - // setIsCategoryDropdownOpen(false) + setIsManageCategoryVisible(true) + setIsCategoryDropdownOpen(false) }} > Manage Category diff --git a/source/Dashboard/components/CategoryDropdownHeader/styles.module.scss b/source/Dashboard/components/CategoryDropdownHeader/styles.module.scss index a31777f..5299324 100644 --- a/source/Dashboard/components/CategoryDropdownHeader/styles.module.scss +++ b/source/Dashboard/components/CategoryDropdownHeader/styles.module.scss @@ -3,7 +3,7 @@ @import '../../../styles/variables'; .container { - width: 73%; + width: 100%; display: flex; justify-content: space-between; align-items: center; @@ -105,6 +105,7 @@ justify-content: flex-end; align-items: center; button { + margin-inline: 0.5rem; &:hover { cursor: pointer; } @@ -114,7 +115,6 @@ .cardMenuDropdown { z-index: 1; - background-color: white; position: absolute; width: 8rem; top: 2.4rem; diff --git a/source/Dashboard/components/HeaderButtons/index.tsx b/source/Dashboard/components/HeaderButtons/index.tsx index b670fd5..5ad940a 100644 --- a/source/Dashboard/components/HeaderButtons/index.tsx +++ b/source/Dashboard/components/HeaderButtons/index.tsx @@ -24,7 +24,7 @@ const HeaderButtons = () => { - Descover} placement='left-end' arrow={false} @@ -40,7 +40,7 @@ const HeaderButtons = () => { - + */}

{isSettingOpen && } diff --git a/source/Dashboard/components/HeaderButtons/styles.module.scss b/source/Dashboard/components/HeaderButtons/styles.module.scss index 9dad46a..53bed12 100644 --- a/source/Dashboard/components/HeaderButtons/styles.module.scss +++ b/source/Dashboard/components/HeaderButtons/styles.module.scss @@ -5,9 +5,7 @@ .container { display: flex; justify-content: end; - &:last-child { - margin-right: 0; - } + button { width: 2rem; height: 2rem; @@ -16,7 +14,6 @@ display: flex; justify-content: center; align-items: center; - margin: 0 0.5rem; &:hover { cursor: pointer; } diff --git a/source/Dashboard/components/ManageCategories/index.tsx b/source/Dashboard/components/ManageCategories/index.tsx new file mode 100644 index 0000000..3cca738 --- /dev/null +++ b/source/Dashboard/components/ManageCategories/index.tsx @@ -0,0 +1,112 @@ +import React, { useContext, useEffect, useRef, useState } from 'react' +import styles from './styles.module.scss' +import { motion } from 'framer-motion' +import { ContextProvider } from '../../context/context' +import Accordion from '../Accordion' + +const variants = { + enter: { + opacity: 1, + y: 0, + transition: { + duration: 0.2, + ease: 'easeOut', + }, + }, + exit: { + opacity: 0, + y: 30, + transition: { + duration: 0.3, + ease: 'easeIn', + }, + }, +} + +interface IProps { + setIsManageCategoryVisible: (value: boolean) => void +} +export const ManageCategories: React.FC = ({ + setIsManageCategoryVisible, +}) => { + const { state, dispatch } = useContext(ContextProvider) + const [newCategory, setNewCategory] = useState('') + const [isAddCategoryVisible, setIsAddCategoryVisible] = useState(false) + const mainRef = useRef() as React.MutableRefObject + const addCategoryRef = useRef() as React.MutableRefObject + useEffect(() => { + function handleClickOutsideMain(event: any) { + if (mainRef.current && !mainRef.current.contains(event.target)) { + setIsManageCategoryVisible(false) + } + } + function handleClickOutsideAddCategory(event: any) { + if ( + addCategoryRef.current && + !addCategoryRef.current.contains(event.target) + ) { + setIsAddCategoryVisible(false) + } + } + + document.addEventListener('mousedown', handleClickOutsideMain) + document.addEventListener('mousedown', handleClickOutsideAddCategory) + return () => { + document.removeEventListener('mousedown', handleClickOutsideMain) + document.removeEventListener('mousedown', handleClickOutsideAddCategory) + } + }, []) + return ( +
+ +
+ {isAddCategoryVisible && ( +
+ setNewCategory(e.target.value)} + /> + +
+ )} +

Manage Categories

+ +
+ {state.shortcutCategoryList.map((category, index) => { + return ( + + ) + })} + +
+ ) +} diff --git a/source/Dashboard/components/ManageCategories/styles.module.scss b/source/Dashboard/components/ManageCategories/styles.module.scss new file mode 100644 index 0000000..aadd65f --- /dev/null +++ b/source/Dashboard/components/ManageCategories/styles.module.scss @@ -0,0 +1,98 @@ +@import '../../../styles/fonts'; +@import '../../../styles/variables'; +@import '../../../styles/reset'; + +.container { + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + z-index: 99; + .header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + position: relative; + .addNewCategoryBtn { + background: transparent; + color: $primary-heading; + &:hover { + cursor: pointer; + color: $primary-button-background; + } + } + } + .main { + width: 40rem; + background-color: $primary-background; + border-radius: 8px; + padding: 2rem; + max-height: 60vh; + overflow-y: auto; + // custom scrollbar + &::-webkit-scrollbar { + width: 0.1rem; + } + &::-webkit-scrollbar-track { + background: $primary-background; + } + &::-webkit-scrollbar-thumb { + background: $primary-button-background; + border-radius: 8px; + } + + .addCategoryContainer { + z-index: 2; + position: absolute; + bottom: -3rem; + right: 0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.8rem 0.5rem; + border-radius: 8px; + background-color: $primary-background; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + text-align: left; + + .addCategoryInput { + width: fit-content; + border-radius: 4px; + background-color: $primary-background; + color: $primary-heading; + font-weight: 400; + padding: 5px 10px; + border: 1px solid $primary-button-background; + } + .addCategoryBtn { + background: $primary-button-background; + color: $primary-button-text; + margin-inline-start: 1rem; + border-radius: 4px; + padding: 5px 10px; + &:hover { + cursor: pointer; + } + } + } + .headerTitle { + color: $primary-button-background; + margin: 0; + font-size: 1.4rem; + font-weight: 700; + height: 2.8rem; + display: flex; + flex-flow: column; + justify-content: center; + } + } +} diff --git a/source/Dashboard/components/Onboarding/OnboardingScreenThree.tsx b/source/Dashboard/components/Onboarding/OnboardingScreenThree.tsx index 793bdb8..005a795 100644 --- a/source/Dashboard/components/Onboarding/OnboardingScreenThree.tsx +++ b/source/Dashboard/components/Onboarding/OnboardingScreenThree.tsx @@ -31,6 +31,9 @@ export const OnboardingScreenThree: React.FC = ({ type: 'SET_SHORTCUT_CATEGORY_LIST', payload: shortcut_category_list, }) + browser.storage.local.set({ + shortcutList: shortcut_list, + }) browser.storage.local.set({ shortcutCategoryList: shortcut_category_list, }) diff --git a/source/Dashboard/components/SearchBar/index.tsx b/source/Dashboard/components/SearchBar/index.tsx index e633685..6697029 100644 --- a/source/Dashboard/components/SearchBar/index.tsx +++ b/source/Dashboard/components/SearchBar/index.tsx @@ -1,4 +1,5 @@ import React, { useContext, useEffect, useRef, useState } from 'react' +import { browser } from 'webextension-polyfill-ts' import { ContextProvider } from '../../context/context' import styles from './styles.module.scss' @@ -170,6 +171,12 @@ const SearchBar: React.FC = () => { searchSource: source, }, }) + browser.storage.local.set({ + preferences: { + ...state.preferences, + searchSource: source, + }, + }) return source }) setIsSourceDropdownVisible(false) diff --git a/source/Dashboard/components/Settiings/index.tsx b/source/Dashboard/components/Settiings/index.tsx index 6c798c3..7d2acd0 100644 --- a/source/Dashboard/components/Settiings/index.tsx +++ b/source/Dashboard/components/Settiings/index.tsx @@ -39,13 +39,14 @@ const Settings: React.FC = ({ onClose }) => { const jsonData = JSON.parse(e.target?.result as string) Object.keys(jsonData).forEach((key) => { if (key === 'preferences') { - browser.storage.sync.set({ preferences: jsonData[key] }) + browser.storage.local.set({ preferences: jsonData[key] }) dispatch({ type: 'SET_PREFERENCES', payload: jsonData[key] }) + browser.storage.local.set({ preferences: jsonData[key] }) } else if (key === 'shortcutList') { - browser.storage.sync.set({ shortcutList: jsonData[key] }) + browser.storage.local.set({ shortcutList: jsonData[key] }) dispatch({ type: 'SET_SHORTCUT_LIST', payload: jsonData[key] }) } else if (key === 'shortcutCategoryList') { - browser.storage.sync.set({ shortcutCategoryList: jsonData[key] }) + browser.storage.local.set({ shortcutCategoryList: jsonData[key] }) dispatch({ type: 'SET_SHORTCUT_CATEGORY_LIST', payload: jsonData[key] }) } }) @@ -116,7 +117,7 @@ const Settings: React.FC = ({ onClose }) => {
diff --git a/source/Dashboard/components/ShortcutCard/index.tsx b/source/Dashboard/components/ShortcutCard/index.tsx index 316d592..9590d98 100644 --- a/source/Dashboard/components/ShortcutCard/index.tsx +++ b/source/Dashboard/components/ShortcutCard/index.tsx @@ -43,8 +43,9 @@ const ShortcutCard: React.FC = ({ let filteredShortcutList = state.shortcutList.filter((item) => { return item.id !== shortcut.id }) - browser.storage.sync.set({ shortcutList: filteredShortcutList }) + browser.storage.local.set({ shortcutList: filteredShortcutList }) dispatch({ type: 'SET_SHORTCUT_LIST', payload: filteredShortcutList }) + browser.storage.local.set({ shortcutList: filteredShortcutList }) setIsCardMenuVisible(false) } @@ -56,6 +57,7 @@ const ShortcutCard: React.FC = ({ return item }) dispatch({ type: 'SET_SHORTCUT_LIST', payload: pinnedArr }) + browser.storage.local.set({ shortcutList: pinnedArr }) setIsCardMenuVisible(false) } @@ -67,6 +69,7 @@ const ShortcutCard: React.FC = ({ return item }) dispatch({ type: 'SET_SHORTCUT_LIST', payload: unpinnedArr }) + browser.storage.local.set({ shortcutList: unpinnedArr }) setIsCardMenuVisible(false) } diff --git a/source/Dashboard/components/ShortcutCard/styles.module.scss b/source/Dashboard/components/ShortcutCard/styles.module.scss index db44d0a..d2a97af 100644 --- a/source/Dashboard/components/ShortcutCard/styles.module.scss +++ b/source/Dashboard/components/ShortcutCard/styles.module.scss @@ -2,8 +2,9 @@ @import '../../../styles/reset'; @import '../../../styles/variables'; .shortcutCard { - width: 9.7rem; - height: 7.2rem; + width: 12.165%; + min-width: 9.7rem; + aspect-ratio: 4/3; background-color: $card-background; box-shadow: 0px 4px 8px 0px rgba(92, 92, 92, 0.2); position: relative; @@ -109,7 +110,7 @@ padding: 10px; h1 { - font-size: 18px; + font-size: clamp(1rem, 1.4vw, 2.4rem); display: inline-block; margin: 0.5rem 0 0.2rem 0; } @@ -138,8 +139,8 @@ img { filter: none !important; border-radius: 50%; - width: 25px; - height: 25px; + width: clamp(2.2rem, 1.6vw, 3.4rem); + aspect-ratio: 1/1; } a { diff --git a/source/Dashboard/context/context.tsx b/source/Dashboard/context/context.tsx index c118ad9..88582a7 100644 --- a/source/Dashboard/context/context.tsx +++ b/source/Dashboard/context/context.tsx @@ -53,6 +53,11 @@ const ContextProvide = ({ children }: ContextProps): JSX.Element => { useEffect(() => { browser.storage.local.set({ shortcutList: state.shortcutList }) }, [state.shortcutList]) + useEffect(() => { + browser.storage.local.set({ + shortcutCategoryList: state.shortcutCategoryList, + }) + }, [state.shortcutCategoryList]) useEffect(() => { browser.storage.local.set({ diff --git a/source/assets/icons/favicon-128.png b/source/assets/icons/favicon-128.png index a8b3fdd..472b40a 100644 Binary files a/source/assets/icons/favicon-128.png and b/source/assets/icons/favicon-128.png differ diff --git a/source/assets/icons/favicon-16.png b/source/assets/icons/favicon-16.png index 67bbe65..ab4ce2f 100644 Binary files a/source/assets/icons/favicon-16.png and b/source/assets/icons/favicon-16.png differ diff --git a/source/assets/icons/favicon-32.png b/source/assets/icons/favicon-32.png index 92a38ce..dff84b1 100644 Binary files a/source/assets/icons/favicon-32.png and b/source/assets/icons/favicon-32.png differ diff --git a/source/assets/icons/favicon-48.png b/source/assets/icons/favicon-48.png index d41f7b8..d06e0be 100644 Binary files a/source/assets/icons/favicon-48.png and b/source/assets/icons/favicon-48.png differ diff --git a/source/manifest.json b/source/manifest.json index 517d4c8..d62d4c4 100644 --- a/source/manifest.json +++ b/source/manifest.json @@ -34,7 +34,7 @@ "48": "assets/icons/favicon-48.png", "128": "assets/icons/favicon-128.png" }, - "default_title": "tiny title", + "default_title": "Kairy", "__chrome|opera__chrome_style": false, "__firefox__browser_style": false }, @@ -46,7 +46,7 @@ "48": "assets/icons/favicon-48.png", "128": "assets/icons/favicon-128.png" }, - "default_title": "tiny title", + "default_title": "Kairy", "__chrome|opera__chrome_style": false, "__firefox__browser_style": false }, diff --git a/source/styles/_variables.scss b/source/styles/_variables.scss index 3108163..95f5337 100644 --- a/source/styles/_variables.scss +++ b/source/styles/_variables.scss @@ -28,7 +28,7 @@ --primary-button-background-3: #09131e; --primary-lite-text: #a7b1b9; --primary-button-text-2: #121212; - --primary-border: rgba(#a7b1b9, 0.37); + --primary-border: #a7b1b98c; --secondary-button-background: #16222f; --secondary-button-text: #afd2f5; --cancel-button-background: #16222f; diff --git a/source/utils/geticon.ts b/source/utils/geticon.ts index 4abd271..52a262c 100644 --- a/source/utils/geticon.ts +++ b/source/utils/geticon.ts @@ -2,8 +2,8 @@ export const getIcon = (url: string): string => { const domain = url && url.split('//')[1].split('/')[0] const icon = `https://www.google.com/s2/favicons?domain=${domain}` fetch(icon).then((res) => { - if (res.status === 404) { - return 'https://www.google.com/s2/favicons?domain=google.com' + if (res.status !== 200) { + return 'https://www.google.com/s2/favicons?domain=kairy.vercel.app' } return icon })