From ead4c75a76b17d7f220771583e9d31a0c555b939 Mon Sep 17 00:00:00 2001 From: dean-ab Date: Sat, 22 Apr 2023 19:42:34 +0300 Subject: [PATCH 1/2] Fixed css issues and icon transition --- src/app/WonderApp/App.module.css | 0 src/app/WonderApp/Launcher.tsx | 6 +++--- src/app/index.css | 37 -------------------------------- src/app/index.tsx | 1 - src/menu/ExtensionMenu/index.tsx | 3 +-- 5 files changed, 4 insertions(+), 43 deletions(-) delete mode 100644 src/app/WonderApp/App.module.css delete mode 100644 src/app/index.css diff --git a/src/app/WonderApp/App.module.css b/src/app/WonderApp/App.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/WonderApp/Launcher.tsx b/src/app/WonderApp/Launcher.tsx index a513d32..0a0e15c 100644 --- a/src/app/WonderApp/Launcher.tsx +++ b/src/app/WonderApp/Launcher.tsx @@ -56,11 +56,11 @@ export const Launcher: React.FC = () => { onMouseUp={(e) => e.preventDefault()} style={{ position: strategy, - left: x ?? 0, - top: y ?? 0, + left: x ?? '50%', + top: y ?? '50%', zIndex: '2147483647', color: 'white', - transition: 'all 0.2s ease-in-out', + transition: 'all 0.3s ease-in-out', }} > diff --git a/src/app/index.css b/src/app/index.css deleted file mode 100644 index 46387b3..0000000 --- a/src/app/index.css +++ /dev/null @@ -1,37 +0,0 @@ -:root { - min-width: 350px; - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/app/index.tsx b/src/app/index.tsx index 3caf726..b3cec68 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { Launcher } from './WonderApp/Launcher'; -import './index.css'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/src/menu/ExtensionMenu/index.tsx b/src/menu/ExtensionMenu/index.tsx index 4e5d8e4..cae7711 100644 --- a/src/menu/ExtensionMenu/index.tsx +++ b/src/menu/ExtensionMenu/index.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Image, Flex, Group, Switch, Text, Center, Paper } from '@mantine/core'; import { IconCheck, IconX } from '@tabler/icons-react'; -import '../../app/index.css'; import menuLogo from './menu-logo.png'; import menuGif from './menu-gif.gif'; @@ -29,7 +28,7 @@ export const ExtensionMenu: React.FC = () => { }; return ( - +
Date: Thu, 27 Apr 2023 10:27:32 +0300 Subject: [PATCH 2/2] ShareLinks --- package.json | 1 + src/app/WonderMenu/ShareLinks/ShareLinks.tsx | 78 ++++++++++++++++++++ src/menu/ExtensionMenu/index.tsx | 2 + yarn.lock | 22 +++++- 4 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 src/app/WonderMenu/ShareLinks/ShareLinks.tsx diff --git a/package.json b/package.json index 780ad4d..358ffd3 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-share": "^4.4.1", "vite-plugin-svgr": "^2.4.0" }, "devDependencies": { diff --git a/src/app/WonderMenu/ShareLinks/ShareLinks.tsx b/src/app/WonderMenu/ShareLinks/ShareLinks.tsx new file mode 100644 index 0000000..e8cdc9b --- /dev/null +++ b/src/app/WonderMenu/ShareLinks/ShareLinks.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { createStyles, Flex, Grid, Text } from '@mantine/core'; +import { + FacebookIcon, + FacebookShareButton, + LinkedinIcon, + LinkedinShareButton, + RedditIcon, + RedditShareButton, + TelegramIcon, + TelegramShareButton, + TwitterIcon, + TwitterShareButton, +} from 'react-share'; + +const useStyles = createStyles(() => ({ + shareButton: { + cursor: 'pointer', + '&:hover:not(:active)': { + opacity: 0.85, + }, + }, + container: { + border: '1px solid #EAE7FE', + padding: '0.5rem', + borderRadius: '12px', + }, +})); + +export const ShareLinks: React.FC = () => { + const { classes } = useStyles(); + const shareUrl = 'http://github.com'; + const title = 'GitHub'; + + return ( + + + Spread the word and share our app with your friends and family on social + media! + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/menu/ExtensionMenu/index.tsx b/src/menu/ExtensionMenu/index.tsx index cae7711..bdef202 100644 --- a/src/menu/ExtensionMenu/index.tsx +++ b/src/menu/ExtensionMenu/index.tsx @@ -3,6 +3,7 @@ import { Image, Flex, Group, Switch, Text, Center, Paper } from '@mantine/core'; import { IconCheck, IconX } from '@tabler/icons-react'; import menuLogo from './menu-logo.png'; import menuGif from './menu-gif.gif'; +import { ShareLinks } from '../../app/WonderMenu/ShareLinks/ShareLinks'; export const WONDER_ACTIVE_STORAGE_KEY = 'wonder-active'; @@ -75,6 +76,7 @@ export const ExtensionMenu: React.FC = () => { {/* Share with us your feedback feedback@wonder.ai */} +
diff --git a/yarn.lock b/yarn.lock index d2771cf..c0c1415 100644 --- a/yarn.lock +++ b/yarn.lock @@ -859,6 +859,11 @@ cheerio@^1.0.0-rc.10: parse5 "^7.0.0" parse5-htmlparser2-tree-adapter "^7.0.0" +classnames@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + clsx@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" @@ -940,7 +945,7 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== -debug@^2.0.0: +debug@^2.0.0, debug@^2.1.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -1344,6 +1349,13 @@ jsonfile@^6.0.1: optionalDependencies: graceful-fs "^4.1.6" +jsonp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae" + integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw== + dependencies: + debug "^2.1.3" + lines-and-columns@^1.1.6: version "1.2.4" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" @@ -1547,6 +1559,14 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +react-share@^4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-share/-/react-share-4.4.1.tgz#4bfb0b512e26afedfea2fb66eb13c95c28fb216a" + integrity sha512-AJ9m9RiJssqvYg7MoJUc9J0D7b/liWrsfQ99ndKc5vJ4oVHHd4Fy87jBlKEQPibT40oYA3AQ/a9/oQY6/yaigw== + dependencies: + classnames "^2.3.2" + jsonp "^0.2.1" + react-textarea-autosize@8.3.4: version "8.3.4" resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"