From 8f90064c32440928d839361651f2fd1fff887d15 Mon Sep 17 00:00:00 2001 From: kate-lab Date: Wed, 23 Nov 2022 17:51:36 +0000 Subject: [PATCH 1/3] theme and main page set up --- src/pages/Newtab/Newtab.css | 38 ----------- src/pages/Newtab/Newtab.jsx | 120 +++++++++++++++++++++++++++++------ src/pages/Newtab/Newtab.scss | 10 --- src/theme/theme.tsx | 20 ++++++ 4 files changed, 119 insertions(+), 69 deletions(-) delete mode 100644 src/pages/Newtab/Newtab.css delete mode 100644 src/pages/Newtab/Newtab.scss create mode 100644 src/theme/theme.tsx diff --git a/src/pages/Newtab/Newtab.css b/src/pages/Newtab/Newtab.css deleted file mode 100644 index 74b5e0534..000000000 --- a/src/pages/Newtab/Newtab.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx index 02da1245b..02524f26a 100644 --- a/src/pages/Newtab/Newtab.jsx +++ b/src/pages/Newtab/Newtab.jsx @@ -1,29 +1,107 @@ import React from 'react'; -import logo from '../../assets/img/logo.svg'; -import './Newtab.css'; -import './Newtab.scss'; -import { Text } from '@chakra-ui/react' -const Newtab = () => { +import { ChakraProvider, Flex, Text, Box, Image } from '@chakra-ui/react'; + +const pageData = { + name: 'Eddie', + news: { + headline: 'Pink dolphins repopulate Hong Kong waters', + story: + 'The coronavirus pandemic has had a major impact on cruise and ferry industries worldwide. In Hong Kong, high-speed ferries were temporarily shut down since the start of the pandemic. Shortly after the waters settled in lockdown, large populations of dolphins returned to Hong Kong waters due to the quieter environment.', + }, + backgroundImage: + 'https://blog.padi.com/wp-content/uploads/2017/02/shutterstock_164233874.jpg', + factOrTip: { + title: 'Top tip: Reduce, reuse, and recycle', + text: 'Cut down on what you throw away. Follow the three Rs to conserve natural resources and landfill space.', + }, + helpfulSite: { + link: 'https://www.websitecarbon.com/', + title: 'You might also like...', + text: 'Website Carbon Calculator', + }, +}; + +const Card = ({ cardHeader, cardText, link, marginLeft }) => { return ( -
-
- logo - - Edit src/pages/Newtab/Newtab.js and save to reload. + + + + {cardHeader} - - PLANES + + {link ? ( + + + {cardText} + + + ) : ( + + {cardText} + + )} + + + ); +}; + +const Newtab = () => { + return ( + + + + Hello {pageData.name} - + background + + - Learn React! - -
-
+ + + + + + ); }; diff --git a/src/pages/Newtab/Newtab.scss b/src/pages/Newtab/Newtab.scss deleted file mode 100644 index 8960c7b27..000000000 --- a/src/pages/Newtab/Newtab.scss +++ /dev/null @@ -1,10 +0,0 @@ -$myColor: red; - -h1, -h2, -h3, -h4, -h5, -h6 { - color: $myColor; -} diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx new file mode 100644 index 000000000..56843dfe2 --- /dev/null +++ b/src/theme/theme.tsx @@ -0,0 +1,20 @@ +import { extendTheme } from '@chakra-ui/react'; + +export const theme = extendTheme({ + colors: { + blue: { + 50: '#5fccff', + 900: '#454d66', + }, + purple: { + 50: '#d09cff', + }, + green: { + 50: '#9ae270', + }, + yellow: { + 50: '#ffe770', + }, + transparentWhite: 'rgba(255,0,0,0.1)', + }, +}); From e8a3c885f6e598682e941f1386dc5deb17a37f60 Mon Sep 17 00:00:00 2001 From: Seamus1989 Date: Wed, 23 Nov 2022 18:03:15 +0000 Subject: [PATCH 2/3] fix: we so happy yes so happy --- src/manifest.json | 8 ++++++-- src/pages/Newtab/Newtab.jsx | 12 +++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/manifest.json b/src/manifest.json index 730ffeec2..cb96cb365 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, - "name": "Takeoff", - "description": "A chrome extension that will help you to takeoff from your current tab to a new tab.", + "name": "Happy Tabs", + "description": "A chrome extension that will turn that frown upside down! :)", "options_page": "options.html", "background": { "service_worker": "background.bundle.js" @@ -16,6 +16,10 @@ "icons": { "128": "icon-128.png" }, + "permissions": [ + "identity", + "identity.email" + ], "content_scripts": [ { "matches": [ diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx index 02da1245b..775a93331 100644 --- a/src/pages/Newtab/Newtab.jsx +++ b/src/pages/Newtab/Newtab.jsx @@ -3,13 +3,23 @@ import logo from '../../assets/img/logo.svg'; import './Newtab.css'; import './Newtab.scss'; import { Text } from '@chakra-ui/react' + const Newtab = () => { + const [email, setEmail] = React.useState(''); + chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, function (info) { + console.log('ppppp', info) + if (info.email) { + setEmail(info.email) + } + }); + + const text = `Hello${email ? `, ${email}` : ''}!`; return (
logo - Edit src/pages/Newtab/Newtab.js and save to reload. + Hello{email ? `, ${email}` : ''}! PLANES From d1501e804a1922415a9703e21de23a1977cf864f Mon Sep 17 00:00:00 2001 From: Seamus1989 Date: Wed, 30 Nov 2022 17:22:56 +0000 Subject: [PATCH 3/3] fix: new slect dropdown menu for selections --- package.json | 7 +- src/pages/Components/user-selection.tsx | 94 ++++++++++++++ src/pages/Popup/Popup.css | 45 ------- src/pages/Popup/Popup.jsx | 30 ----- src/pages/Popup/Popup.tsx | 37 ++++++ src/pages/Utils/storage.ts | 29 +++++ yarn.lock | 159 +++++++++++++++++++++++- 7 files changed, 323 insertions(+), 78 deletions(-) create mode 100644 src/pages/Components/user-selection.tsx delete mode 100644 src/pages/Popup/Popup.css delete mode 100644 src/pages/Popup/Popup.jsx create mode 100644 src/pages/Popup/Popup.tsx create mode 100644 src/pages/Utils/storage.ts diff --git a/package.json b/package.json index 2edc88965..45363e073 100755 --- a/package.json +++ b/package.json @@ -18,9 +18,11 @@ "@emotion/styled": "^11.10.4", "@hot-loader/react-dom": "^17.0.2", "framer-motion": "6.2.4", + "js-cookie": "^3.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-hot-loader": "^4.13.0" + "react-hot-loader": "^4.13.0", + "react-select": "^5.6.1" }, "devDependencies": { "@babel/core": "^7.17.0", @@ -28,6 +30,7 @@ "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@types/chrome": "^0.0.177", + "@types/js-cookie": "^3.0.2", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", "babel-eslint": "^10.1.0", @@ -57,4 +60,4 @@ "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } -} \ No newline at end of file +} diff --git a/src/pages/Components/user-selection.tsx b/src/pages/Components/user-selection.tsx new file mode 100644 index 000000000..8a667640c --- /dev/null +++ b/src/pages/Components/user-selection.tsx @@ -0,0 +1,94 @@ +import { Flex, Text } from "@chakra-ui/react"; +import React, { useEffect, useState } from "react"; +import Select from 'react-select'; +import { getItem, setItem } from "../Utils/storage"; + +const options = [ + { value: 'chocolate', label: 'Chocolate' }, + { value: 'strawberry', label: 'Strawberry' }, + { value: 'mint', label: 'Mint' }, + { value: 'peach', label: 'Peach' }, + { value: 'vanilla', label: 'Vanilla' }, + { value: 'caramel', label: 'Caramel' }, + { value: 'coffee', label: 'Coffee' }, + { value: 'raspberry', label: 'Raspberry' }, + { value: 'lemon', label: 'Lemon' }, + { value: 'lime', label: 'Lime' }, + { value: 'orange', label: 'Orange' }, + { value: 'watermelon', label: 'Watermelon' }, + { value: 'grape', label: 'Grape' }, +]; + +type Option = { + value: string; + label: string; +} + +export const UserSelection = ({ width, email, userId, isLoading, selections }: { width: number; email?: string; userId: string; selections?: Option[]; isLoading?: boolean; }) => { + const [selected, setSelected] = useState((selections || []) as Option[]); + const [loading, setLoading] = useState(true); + + const text = `Hello${email ? `, ${email.split('@')[0]}` : ' Sexy'}!`; + + useEffect(() => { + const setItems = async () => { + if (selected.length > 0) { + await setItem('user-selection', JSON.stringify({ [userId]: selected.map((e) => e.value) })); + } + } + setItems(); + }, [selected, userId]); + + useEffect(() => { + if (!userId) return; + const getItems = async () => { + const results = await getItem('user-selection'); + if (results) { + const parsed = JSON.parse(results as unknown as string); + Object.keys(parsed)?.includes(userId) ? setSelected(parsed[userId].map((e: string) => ({ value: e, label: e }))) : setSelected([]); + + } + setLoading(false) + } + getItems(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [userId]); + + if (loading || isLoading) { + return ( + + Loading... + + ) + } + + return ( + + + {text} + +