From 1027a22c3dddeae13b1d48ef9506f11c852a7c73 Mon Sep 17 00:00:00 2001 From: yedidya rashi Date: Fri, 24 Jun 2022 11:45:22 +0300 Subject: [PATCH 01/18] feat: add Yedidya Rashi profile (#220) --- people/YedidyaRashi.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 people/YedidyaRashi.json diff --git a/people/YedidyaRashi.json b/people/YedidyaRashi.json new file mode 100644 index 0000000..ee332ee --- /dev/null +++ b/people/YedidyaRashi.json @@ -0,0 +1,8 @@ +{ + "name": "ידידיה ראשי", + "github": "Yedidyar", + "facebook": "https://www.facebook.com/yedidyarashi", + "linkedin": "https://www.linkedin.com/in/yedidya-rashi-398296224/", + "stackoverflow": "https://stackoverflow.com/users/8276765/yedidya-rashi", + "description": "מתכנת fullstack בחיל האוויר.אוהב לתכנת בtypesript ולשחק במשחקי מחשב מתעניין בכלכלה ובקריפטו" +} From 554b82dd2c437c93906e79079e48097e63f96c82 Mon Sep 17 00:00:00 2001 From: Omri Bar-Zik Date: Sat, 2 Jul 2022 10:06:50 +0300 Subject: [PATCH 02/18] chore: remove idea folder (#236) --- .gitignore | 10 ++++++++++ .idea/.gitignore | 8 -------- .idea/checkstyle-idea.xml | 16 ---------------- .idea/codeStyles/codeStyleConfig.xml | 5 ----- .idea/misc.xml | 6 ------ .idea/modules.xml | 8 -------- .idea/pull-request-community.iml | 9 --------- .idea/vcs.xml | 6 ------ 8 files changed, 10 insertions(+), 58 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/checkstyle-idea.xml delete mode 100644 .idea/codeStyles/codeStyleConfig.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/pull-request-community.iml delete mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index 1437c53..0a7ad7a 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,13 @@ yarn-error.log* # vercel .vercel + +## IDE's +.idea/ + +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 73f69e0..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/checkstyle-idea.xml b/.idea/checkstyle-idea.xml deleted file mode 100644 index bfcfff7..0000000 --- a/.idea/checkstyle-idea.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index a55e7a1..0000000 --- a/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index ad03785..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 8020e3a..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/pull-request-community.iml b/.idea/pull-request-community.iml deleted file mode 100644 index d6ebd48..0000000 --- a/.idea/pull-request-community.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1dd..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file From 5e9ea19b45a6da2d8d0ce3479485dd489cb6276a Mon Sep 17 00:00:00 2001 From: shir22 <33841818+shir22@users.noreply.github.com> Date: Sat, 2 Jul 2022 10:07:57 +0300 Subject: [PATCH 03/18] updating readme: custom image (#239) --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8edef0a..2ac25a2 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,11 @@ You can add / update your personal profile by creating a Pull Request to this re and anything that you are passionate about. Are you an architect? Do you speak Chinese? Studied amusement park and roller coaster engineering? This is the place to brag! -2. By default, we'll use your GitHub photo. There's currently an [open issue](https://github.com/urish/pull-request-community/issues/78) to allow custom profile photos. +2. By default, we'll use your GitHub photo. If you don't have a GitHub profile photo, + or want to use a different one, add it under [public/images/people](public/images/people) in jpeg format. + Use your GitHub username for the image, e.g. `MichalPorag.jpg`. + + Then, add `"customImage": true` to your profile JSON that you created in the previous step. 3. Create a pull request with new files. From 365afa68fd85ac20086b36c5eed0cdad999c16f1 Mon Sep 17 00:00:00 2001 From: Liran Tal Date: Sat, 2 Jul 2022 10:09:56 +0300 Subject: [PATCH 04/18] test: add e2e infra with playwright and a sample test (#235) * test: add e2e infra with playwright and a sample test * test: add github action for e2e test * test: add config for framework spin-up --- .github/workflows/e2e-ci.yml | 15 ++++++++++++ e2e/home.spec.ts | 8 +++++++ package-lock.json | 45 ++++++++++++++++++++++++++++++++++++ package.json | 6 +++-- playwright.config.ts | 10 ++++++++ 5 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/e2e-ci.yml create mode 100644 e2e/home.spec.ts create mode 100644 playwright.config.ts diff --git a/.github/workflows/e2e-ci.yml b/.github/workflows/e2e-ci.yml new file mode 100644 index 0000000..d5bb769 --- /dev/null +++ b/.github/workflows/e2e-ci.yml @@ -0,0 +1,15 @@ +name: "Tests: E2E" +on: [pull_request] +jobs: + tests_e2e: + name: Run end-to-end tests + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - name: install dependencies + run: npm ci + - name: install playwright browsers + run: npx playwright install --with-deps + - name: npm run test:e2e + run: npm run test:e2e diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts new file mode 100644 index 0000000..7362739 --- /dev/null +++ b/e2e/home.spec.ts @@ -0,0 +1,8 @@ +import { test, expect } from '@playwright/test' + +test('page should have title of "קהילת Pull Request"', async ({page}) => { + await page.goto('http://localhost:3000/') + const title = await page.title() + expect(title).toBe('קהילת Pull Request') +}); + diff --git a/package-lock.json b/package-lock.json index b9f3ad7..ccda812 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "uuid": "^8.3.2" }, "devDependencies": { + "@playwright/test": "^1.22.2", "@types/node": "^14.11.2", "@types/react": "^16.9.50", "eslint": "^7.32.0", @@ -1006,6 +1007,22 @@ "node": ">= 8" } }, + "node_modules/@playwright/test": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.22.2.tgz", + "integrity": "sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==", + "dev": true, + "dependencies": { + "@types/node": "*", + "playwright-core": "1.22.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -5280,6 +5297,18 @@ "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz", "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==" }, + "node_modules/playwright-core": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.22.2.tgz", + "integrity": "sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==", + "dev": true, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/please-upgrade-node": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", @@ -7532,6 +7561,16 @@ "fastq": "^1.6.0" } }, + "@playwright/test": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.22.2.tgz", + "integrity": "sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==", + "dev": true, + "requires": { + "@types/node": "*", + "playwright-core": "1.22.2" + } + }, "@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -10766,6 +10805,12 @@ "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz", "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==" }, + "playwright-core": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.22.2.tgz", + "integrity": "sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==", + "dev": true + }, "please-upgrade-node": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", diff --git a/package.json b/package.json index 667f33c..c77f7a9 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,10 @@ "dev": "npm run open-browser && next dev", "open-browser": "node ./scripts/open-browser.js", "build": "next build", - "start": "next start", + "start": "npm run build && next start", "prepare": "husky install", - "lint": "next lint" + "lint": "next lint", + "test:e2e": "playwright test" }, "dependencies": { "@mdi/js": "^5.6.55", @@ -22,6 +23,7 @@ "uuid": "^8.3.2" }, "devDependencies": { + "@playwright/test": "^1.22.2", "@types/node": "^14.11.2", "@types/react": "^16.9.50", "eslint": "^7.32.0", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..1a927d3 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,10 @@ +import { PlaywrightTestConfig } from "@playwright/test"; + +const config: PlaywrightTestConfig = { + webServer: { + command: "npm run start", + url: "http://localhost:3000", + } +}; + +export default config; \ No newline at end of file From b4525768587cee210660aa540aaca22ebcf7b706 Mon Sep 17 00:00:00 2001 From: yedidya rashi Date: Sat, 2 Jul 2022 10:11:20 +0300 Subject: [PATCH 05/18] Yedidyar/issue167 (#240) * feat: add Yedidya Rashi profile (#220) * fix: randomShuffle isn't working correctly (#167) --- pages/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/index.tsx b/pages/index.tsx index 94e8949..b53a2b8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -30,5 +30,6 @@ export const getStaticProps: GetStaticProps = async () => { props: { people: randomShuffle(getPeople()), }, + revalidate: true, }; }; From d7e85d9817cabfc8270519fab08dbaae29b745a5 Mon Sep 17 00:00:00 2001 From: yedidya rashi Date: Sat, 2 Jul 2022 10:12:54 +0300 Subject: [PATCH 06/18] fix(Description): wrap descriptionHeight with useEffect (#243) see more about the issue: https://stackoverflow.com/questions/62336340/cannot-update-a-component-while-rendering-a-different-component-warning --- components/description/Description.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/description/Description.tsx b/components/description/Description.tsx index f6d063e..58b1515 100644 --- a/components/description/Description.tsx +++ b/components/description/Description.tsx @@ -6,7 +6,9 @@ const Description = ({ descriptionOutput, descriptionHeight }) => { const myRef = useRef(null); const [height, setHeight] = useState(0); - descriptionHeight(height); + useEffect(() => { + descriptionHeight(height); + }, [descriptionHeight, height]); useEffect(() => { const handleResize = () => { From 70aaa86e9cc361aa71b097555ea0fc6a7d7307f4 Mon Sep 17 00:00:00 2001 From: yedidya rashi Date: Mon, 4 Jul 2022 08:25:58 +0300 Subject: [PATCH 07/18] There is no background for the role of Former admin label Fixes #241 --- components/label/label.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/label/label.module.scss b/components/label/label.module.scss index 54bcc46..45c737f 100644 --- a/components/label/label.module.scss +++ b/components/label/label.module.scss @@ -11,6 +11,9 @@ &[role="Admin"] { background: cornflowerblue; } + &[role="Former admin"] { + background: cadetblue; + } @media screen and (max-width: 600px) { font-size: 10px; From 6b90aa788f214edba7f64d0396417d6048805287 Mon Sep 17 00:00:00 2001 From: Noamili <105313965+Noamili@users.noreply.github.com> Date: Tue, 28 Jun 2022 18:59:40 +0300 Subject: [PATCH 08/18] Test (#238) * inital commit * revert change Co-authored-by: noa From 7d18ee8bb4b310130e53ef4cb0e1e0f6e5e2adc2 Mon Sep 17 00:00:00 2001 From: noa Date: Sat, 9 Jul 2022 21:45:21 +0300 Subject: [PATCH 09/18] remove colors.ts --- components/buttons/basicButton.tsx | 27 +------- components/buttons/button.module.scss | 69 +++++++++++++++++++ components/buttons/socialButton.tsx | 46 +------------ components/personCard/personCard.module.scss | 9 +++ components/personCard/personCard.tsx | 17 +++-- .../projectPage/ProjectPage.module.scss | 4 +- .../technologies/Technologies.module.scss | 4 +- .../socialNetworks/socialNetworks.module.scss | 2 +- styles/colors.scss | 14 ++++ styles/colors.ts | 7 -- styles/globals.scss | 21 +++--- 11 files changed, 127 insertions(+), 93 deletions(-) create mode 100644 components/buttons/button.module.scss create mode 100644 styles/colors.scss delete mode 100644 styles/colors.ts diff --git a/components/buttons/basicButton.tsx b/components/buttons/basicButton.tsx index 7bbafc4..b03c0e6 100644 --- a/components/buttons/basicButton.tsx +++ b/components/buttons/basicButton.tsx @@ -1,32 +1,9 @@ -import colors from '../../styles/colors'; +import styles from './button.module.scss'; const BasicButton = ({ children, className }: BasicButtonProps) => { return ( <> - - + ); }; diff --git a/components/buttons/button.module.scss b/components/buttons/button.module.scss new file mode 100644 index 0000000..2a1e283 --- /dev/null +++ b/components/buttons/button.module.scss @@ -0,0 +1,69 @@ +@import "../../styles/colors"; + +.socialButton { + user-select: none; + cursor: pointer; + color: white; + font-size: 2.4rem; + border: none; + border-radius: 100%; + padding: 10px 0; + transition: background-color 0.3s cubic-bezier(0.4, 0, 1, 1); + max-height: 36px; + max-width: 36px; + display: flex; + justify-content: center; + align-items: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.telegram { + background-color: $strong-blue; +} + +.facebook { + background-color: $vivid-blue; +} + +.discord { + background-color: $soft-blue; +} + +.newsletter { + background-color: $dark-gray; +} + +.socialButton:hover { + filter: brightness(1.2); +} + +@media only screen and (max-width: 600px) { + .socialButton { + max-height: 48px; + max-width: 48px; + } +} + +.basicButton { + user-select: none; + cursor: pointer; + color: white; + font-size: 1.6rem; + border: none; + border-radius: 64px; + background-color: var(--primary); + display: flex; + align-items: center; + justify-content: center; + padding: 6px 12px 6px 6px; + transition: all 0.3s; + width: 126px; + height: 36px; +} + +.basicButton:hover { + filter: brightness(1.2); + transform: scale(1.02); +} diff --git a/components/buttons/socialButton.tsx b/components/buttons/socialButton.tsx index 42462f2..31e258c 100644 --- a/components/buttons/socialButton.tsx +++ b/components/buttons/socialButton.tsx @@ -1,51 +1,9 @@ -import colors from '../../styles/colors'; +import styles from './button.module.scss'; const SocialButton = ({ children, className }: BasicButtonProps) => { return ( <> - - + ); }; diff --git a/components/personCard/personCard.module.scss b/components/personCard/personCard.module.scss index dffb13e..4a7f529 100644 --- a/components/personCard/personCard.module.scss +++ b/components/personCard/personCard.module.scss @@ -1,4 +1,5 @@ @import "../../styles/media"; +@import "../../styles/colors"; .card { width: 100%; @@ -106,3 +107,11 @@ } } } + +.card_default_theme { + border-bottom-color: $moderate-red; +} + +.icon_default_theme { + color: $moderate-red; +} \ No newline at end of file diff --git a/components/personCard/personCard.tsx b/components/personCard/personCard.tsx index 028e848..273d8f0 100644 --- a/components/personCard/personCard.tsx +++ b/components/personCard/personCard.tsx @@ -1,4 +1,5 @@ import { useMemo, useRef } from 'react'; +import classNames from 'classnames'; import { mdiFacebook, mdiGithub, @@ -11,7 +12,6 @@ import { import Icon from '@mdi/react'; import { IPerson } from '../../services/people'; import styles from './personCard.module.scss'; -import colors from '../../styles/colors'; import ShowMore from '../showMore/showMore'; import Label from '../label/label'; @@ -35,7 +35,6 @@ export function PersonCard({ person }: IPersonProps) { roles, customImage, } = person; - const theme = useMemo(() => themeColor ?? colors.secondary_color, [themeColor]); const icons = useMemo( () => [ { link: github, icon: mdiGithub }, @@ -54,7 +53,12 @@ export function PersonCard({ person }: IPersonProps) { const onToggleCard = () => card?.current?.classList.toggle(styles.card__open); return ( -
+
- + ) )} diff --git a/components/projectPage/ProjectPage.module.scss b/components/projectPage/ProjectPage.module.scss index ad7b84b..b80bd95 100644 --- a/components/projectPage/ProjectPage.module.scss +++ b/components/projectPage/ProjectPage.module.scss @@ -1,3 +1,5 @@ +@import "../../styles/colors"; + .descriptionContainer { display: flex; flex-direction: column; @@ -10,7 +12,7 @@ justify-content: center; font-weight: bold; font-size: 36px; - color: #0b008e; + color: $dark-blue; } .star { diff --git a/components/projectPage/technologies/Technologies.module.scss b/components/projectPage/technologies/Technologies.module.scss index 5ff92f7..9a29aa6 100644 --- a/components/projectPage/technologies/Technologies.module.scss +++ b/components/projectPage/technologies/Technologies.module.scss @@ -1,3 +1,5 @@ +@import "../../../styles/colors"; + .listContainer { display: flex; flex-direction: row; @@ -14,6 +16,6 @@ align-items: center; justify-content: center; font-size: 14px; - color: #e2e2e2; + color: $very-light-gray; user-select: none; } diff --git a/components/socialNetworks/socialNetworks.module.scss b/components/socialNetworks/socialNetworks.module.scss index 6f53c7b..1f7a40d 100644 --- a/components/socialNetworks/socialNetworks.module.scss +++ b/components/socialNetworks/socialNetworks.module.scss @@ -8,7 +8,7 @@ max-height: 50px; } &__btn { - color: #fff; + color: white; width: 50px; height: 50px; border-radius: 50%; diff --git a/styles/colors.scss b/styles/colors.scss new file mode 100644 index 0000000..5b2d63b --- /dev/null +++ b/styles/colors.scss @@ -0,0 +1,14 @@ +$vivid-blue: #1778F2; +$strong-blue: #0088cc; +$dark-gray: #808080; +$soft-blue: #7289da; +$very-light-gray: #e2e2e2; +$dark-blue: #0b008e; +$moderate-red: #ce5a55; +$light-gray: #e8e8e8; +$very-dark-blue: #242831; +$dark-blue-black: #1d1d1d; +$very-dark-gray: #353535; +$very-dark-blue-black: #202529; +$very-dark-grayish-blue: #292e33; + diff --git a/styles/colors.ts b/styles/colors.ts deleted file mode 100644 index da2c246..0000000 --- a/styles/colors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { - secondary_color: 'var(--primary)', - facebook: '#1778F2', - telegram: '#0088cc', - newsletter: '#808080', - discord: '#7289da', -}; diff --git a/styles/globals.scss b/styles/globals.scss index 03aaa9b..9ac7100 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,4 +1,5 @@ @import "./typography.scss"; +@import '../styles/colors'; * { box-sizing: border-box; @@ -25,19 +26,19 @@ html { } html { - --primary: #ce5a55; - --background-color: #e8e8e8; + --primary: #{$moderate-red}; + --background-color: #{$light-gray}; --background-description: white; --card-background: white; - --header-background: #242831; - --text: #1d1d1d; + --header-background: #{$very-dark-blue}; + --text: #{$dark-blue-black}; } html.dark { - --primary: #ce5a55; - --background-color: #353535; - --background-description: #202529; - --card-background: #292e33; - --header-background: #000; - --text: #e8e8e8; + --primary: #{$moderate-red}; + --background-color: #{$very-dark-gray}; + --background-description: #{$very-dark-blue-black}; + --card-background: #{$very-dark-grayish-blue}; + --header-background: black; + --text: #{$light-gray}; } From 5c91f5ee7b1474a339c9106df58735d313607834 Mon Sep 17 00:00:00 2001 From: noa Date: Sat, 9 Jul 2022 21:48:17 +0300 Subject: [PATCH 10/18] remove un used import --- components/description/Description.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/description/Description.tsx b/components/description/Description.tsx index 58b1515..e084339 100644 --- a/components/description/Description.tsx +++ b/components/description/Description.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; import style from './description.module.scss'; -import colors from '../../styles/colors'; const Description = ({ descriptionOutput, descriptionHeight }) => { const myRef = useRef(null); From aa3392143cd931f16ec424fa16bca3b6fd220332 Mon Sep 17 00:00:00 2001 From: noa Date: Sun, 10 Jul 2022 10:52:13 +0300 Subject: [PATCH 11/18] fix lint issue --- components/personCard/personCard.module.scss | 2 +- styles/colors.scss | 3 +-- styles/globals.scss | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/personCard/personCard.module.scss b/components/personCard/personCard.module.scss index 4a7f529..3e0580c 100644 --- a/components/personCard/personCard.module.scss +++ b/components/personCard/personCard.module.scss @@ -114,4 +114,4 @@ .icon_default_theme { color: $moderate-red; -} \ No newline at end of file +} diff --git a/styles/colors.scss b/styles/colors.scss index 5b2d63b..b92f5e2 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -1,4 +1,4 @@ -$vivid-blue: #1778F2; +$vivid-blue: #1778f2; $strong-blue: #0088cc; $dark-gray: #808080; $soft-blue: #7289da; @@ -11,4 +11,3 @@ $dark-blue-black: #1d1d1d; $very-dark-gray: #353535; $very-dark-blue-black: #202529; $very-dark-grayish-blue: #292e33; - diff --git a/styles/globals.scss b/styles/globals.scss index 9ac7100..25288fb 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,5 +1,5 @@ @import "./typography.scss"; -@import '../styles/colors'; +@import "../styles/colors"; * { box-sizing: border-box; From 449fdf31e43d11fdf4c06471091dd854883157ad Mon Sep 17 00:00:00 2001 From: noa Date: Sun, 10 Jul 2022 11:00:27 +0300 Subject: [PATCH 12/18] fix style --- components/buttons/button.module.scss | 4 ++-- components/projectPage/ProjectPage.module.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/buttons/button.module.scss b/components/buttons/button.module.scss index 2a1e283..e07e42e 100644 --- a/components/buttons/button.module.scss +++ b/components/buttons/button.module.scss @@ -4,7 +4,7 @@ user-select: none; cursor: pointer; color: white; - font-size: 2.4rem; + font-size: 1.5rem; border: none; border-radius: 100%; padding: 10px 0; @@ -50,7 +50,7 @@ user-select: none; cursor: pointer; color: white; - font-size: 1.6rem; + font-size: 1rem; border: none; border-radius: 64px; background-color: var(--primary); diff --git a/components/projectPage/ProjectPage.module.scss b/components/projectPage/ProjectPage.module.scss index b80bd95..f2899b0 100644 --- a/components/projectPage/ProjectPage.module.scss +++ b/components/projectPage/ProjectPage.module.scss @@ -62,6 +62,6 @@ } .description { - font-size: 1.556rem; // Based on 9px. + font-size: 1rem; // Based on 16px. } } From 089192741f261a81fa3bad4b2d3c6891180009b4 Mon Sep 17 00:00:00 2001 From: noa Date: Sat, 9 Jul 2022 21:45:21 +0300 Subject: [PATCH 13/18] remove colors.ts --- components/buttons/basicButton.tsx | 27 +------- components/buttons/button.module.scss | 69 +++++++++++++++++++ components/buttons/socialButton.tsx | 46 +------------ components/personCard/personCard.module.scss | 9 +++ components/personCard/personCard.tsx | 17 +++-- .../projectPage/ProjectPage.module.scss | 4 +- .../technologies/Technologies.module.scss | 4 +- .../socialNetworks/socialNetworks.module.scss | 2 +- styles/colors.scss | 14 ++++ styles/colors.ts | 7 -- styles/globals.scss | 21 +++--- 11 files changed, 127 insertions(+), 93 deletions(-) create mode 100644 components/buttons/button.module.scss create mode 100644 styles/colors.scss delete mode 100644 styles/colors.ts diff --git a/components/buttons/basicButton.tsx b/components/buttons/basicButton.tsx index 7bbafc4..b03c0e6 100644 --- a/components/buttons/basicButton.tsx +++ b/components/buttons/basicButton.tsx @@ -1,32 +1,9 @@ -import colors from '../../styles/colors'; +import styles from './button.module.scss'; const BasicButton = ({ children, className }: BasicButtonProps) => { return ( <> - - + ); }; diff --git a/components/buttons/button.module.scss b/components/buttons/button.module.scss new file mode 100644 index 0000000..2a1e283 --- /dev/null +++ b/components/buttons/button.module.scss @@ -0,0 +1,69 @@ +@import "../../styles/colors"; + +.socialButton { + user-select: none; + cursor: pointer; + color: white; + font-size: 2.4rem; + border: none; + border-radius: 100%; + padding: 10px 0; + transition: background-color 0.3s cubic-bezier(0.4, 0, 1, 1); + max-height: 36px; + max-width: 36px; + display: flex; + justify-content: center; + align-items: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.telegram { + background-color: $strong-blue; +} + +.facebook { + background-color: $vivid-blue; +} + +.discord { + background-color: $soft-blue; +} + +.newsletter { + background-color: $dark-gray; +} + +.socialButton:hover { + filter: brightness(1.2); +} + +@media only screen and (max-width: 600px) { + .socialButton { + max-height: 48px; + max-width: 48px; + } +} + +.basicButton { + user-select: none; + cursor: pointer; + color: white; + font-size: 1.6rem; + border: none; + border-radius: 64px; + background-color: var(--primary); + display: flex; + align-items: center; + justify-content: center; + padding: 6px 12px 6px 6px; + transition: all 0.3s; + width: 126px; + height: 36px; +} + +.basicButton:hover { + filter: brightness(1.2); + transform: scale(1.02); +} diff --git a/components/buttons/socialButton.tsx b/components/buttons/socialButton.tsx index 42462f2..31e258c 100644 --- a/components/buttons/socialButton.tsx +++ b/components/buttons/socialButton.tsx @@ -1,51 +1,9 @@ -import colors from '../../styles/colors'; +import styles from './button.module.scss'; const SocialButton = ({ children, className }: BasicButtonProps) => { return ( <> - - + ); }; diff --git a/components/personCard/personCard.module.scss b/components/personCard/personCard.module.scss index dffb13e..4a7f529 100644 --- a/components/personCard/personCard.module.scss +++ b/components/personCard/personCard.module.scss @@ -1,4 +1,5 @@ @import "../../styles/media"; +@import "../../styles/colors"; .card { width: 100%; @@ -106,3 +107,11 @@ } } } + +.card_default_theme { + border-bottom-color: $moderate-red; +} + +.icon_default_theme { + color: $moderate-red; +} \ No newline at end of file diff --git a/components/personCard/personCard.tsx b/components/personCard/personCard.tsx index 028e848..273d8f0 100644 --- a/components/personCard/personCard.tsx +++ b/components/personCard/personCard.tsx @@ -1,4 +1,5 @@ import { useMemo, useRef } from 'react'; +import classNames from 'classnames'; import { mdiFacebook, mdiGithub, @@ -11,7 +12,6 @@ import { import Icon from '@mdi/react'; import { IPerson } from '../../services/people'; import styles from './personCard.module.scss'; -import colors from '../../styles/colors'; import ShowMore from '../showMore/showMore'; import Label from '../label/label'; @@ -35,7 +35,6 @@ export function PersonCard({ person }: IPersonProps) { roles, customImage, } = person; - const theme = useMemo(() => themeColor ?? colors.secondary_color, [themeColor]); const icons = useMemo( () => [ { link: github, icon: mdiGithub }, @@ -54,7 +53,12 @@ export function PersonCard({ person }: IPersonProps) { const onToggleCard = () => card?.current?.classList.toggle(styles.card__open); return ( -
+
- + ) )} diff --git a/components/projectPage/ProjectPage.module.scss b/components/projectPage/ProjectPage.module.scss index ad7b84b..b80bd95 100644 --- a/components/projectPage/ProjectPage.module.scss +++ b/components/projectPage/ProjectPage.module.scss @@ -1,3 +1,5 @@ +@import "../../styles/colors"; + .descriptionContainer { display: flex; flex-direction: column; @@ -10,7 +12,7 @@ justify-content: center; font-weight: bold; font-size: 36px; - color: #0b008e; + color: $dark-blue; } .star { diff --git a/components/projectPage/technologies/Technologies.module.scss b/components/projectPage/technologies/Technologies.module.scss index 5ff92f7..9a29aa6 100644 --- a/components/projectPage/technologies/Technologies.module.scss +++ b/components/projectPage/technologies/Technologies.module.scss @@ -1,3 +1,5 @@ +@import "../../../styles/colors"; + .listContainer { display: flex; flex-direction: row; @@ -14,6 +16,6 @@ align-items: center; justify-content: center; font-size: 14px; - color: #e2e2e2; + color: $very-light-gray; user-select: none; } diff --git a/components/socialNetworks/socialNetworks.module.scss b/components/socialNetworks/socialNetworks.module.scss index 6f53c7b..1f7a40d 100644 --- a/components/socialNetworks/socialNetworks.module.scss +++ b/components/socialNetworks/socialNetworks.module.scss @@ -8,7 +8,7 @@ max-height: 50px; } &__btn { - color: #fff; + color: white; width: 50px; height: 50px; border-radius: 50%; diff --git a/styles/colors.scss b/styles/colors.scss new file mode 100644 index 0000000..5b2d63b --- /dev/null +++ b/styles/colors.scss @@ -0,0 +1,14 @@ +$vivid-blue: #1778F2; +$strong-blue: #0088cc; +$dark-gray: #808080; +$soft-blue: #7289da; +$very-light-gray: #e2e2e2; +$dark-blue: #0b008e; +$moderate-red: #ce5a55; +$light-gray: #e8e8e8; +$very-dark-blue: #242831; +$dark-blue-black: #1d1d1d; +$very-dark-gray: #353535; +$very-dark-blue-black: #202529; +$very-dark-grayish-blue: #292e33; + diff --git a/styles/colors.ts b/styles/colors.ts deleted file mode 100644 index da2c246..0000000 --- a/styles/colors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { - secondary_color: 'var(--primary)', - facebook: '#1778F2', - telegram: '#0088cc', - newsletter: '#808080', - discord: '#7289da', -}; diff --git a/styles/globals.scss b/styles/globals.scss index 03aaa9b..9ac7100 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,4 +1,5 @@ @import "./typography.scss"; +@import '../styles/colors'; * { box-sizing: border-box; @@ -25,19 +26,19 @@ html { } html { - --primary: #ce5a55; - --background-color: #e8e8e8; + --primary: #{$moderate-red}; + --background-color: #{$light-gray}; --background-description: white; --card-background: white; - --header-background: #242831; - --text: #1d1d1d; + --header-background: #{$very-dark-blue}; + --text: #{$dark-blue-black}; } html.dark { - --primary: #ce5a55; - --background-color: #353535; - --background-description: #202529; - --card-background: #292e33; - --header-background: #000; - --text: #e8e8e8; + --primary: #{$moderate-red}; + --background-color: #{$very-dark-gray}; + --background-description: #{$very-dark-blue-black}; + --card-background: #{$very-dark-grayish-blue}; + --header-background: black; + --text: #{$light-gray}; } From 55a70a6a55276f4d14e500042a35e76e0923467a Mon Sep 17 00:00:00 2001 From: noa Date: Sun, 10 Jul 2022 10:52:13 +0300 Subject: [PATCH 14/18] fix lint issue --- components/personCard/personCard.module.scss | 2 +- styles/colors.scss | 3 +-- styles/globals.scss | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/personCard/personCard.module.scss b/components/personCard/personCard.module.scss index 4a7f529..3e0580c 100644 --- a/components/personCard/personCard.module.scss +++ b/components/personCard/personCard.module.scss @@ -114,4 +114,4 @@ .icon_default_theme { color: $moderate-red; -} \ No newline at end of file +} diff --git a/styles/colors.scss b/styles/colors.scss index 5b2d63b..b92f5e2 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -1,4 +1,4 @@ -$vivid-blue: #1778F2; +$vivid-blue: #1778f2; $strong-blue: #0088cc; $dark-gray: #808080; $soft-blue: #7289da; @@ -11,4 +11,3 @@ $dark-blue-black: #1d1d1d; $very-dark-gray: #353535; $very-dark-blue-black: #202529; $very-dark-grayish-blue: #292e33; - diff --git a/styles/globals.scss b/styles/globals.scss index 9ac7100..25288fb 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,5 +1,5 @@ @import "./typography.scss"; -@import '../styles/colors'; +@import "../styles/colors"; * { box-sizing: border-box; From d97a360834ec0fb99318c4a0f20ca3024b27ed36 Mon Sep 17 00:00:00 2001 From: noa Date: Sun, 10 Jul 2022 11:00:27 +0300 Subject: [PATCH 15/18] fix style --- components/buttons/button.module.scss | 4 ++-- components/projectPage/ProjectPage.module.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/buttons/button.module.scss b/components/buttons/button.module.scss index 2a1e283..e07e42e 100644 --- a/components/buttons/button.module.scss +++ b/components/buttons/button.module.scss @@ -4,7 +4,7 @@ user-select: none; cursor: pointer; color: white; - font-size: 2.4rem; + font-size: 1.5rem; border: none; border-radius: 100%; padding: 10px 0; @@ -50,7 +50,7 @@ user-select: none; cursor: pointer; color: white; - font-size: 1.6rem; + font-size: 1rem; border: none; border-radius: 64px; background-color: var(--primary); diff --git a/components/projectPage/ProjectPage.module.scss b/components/projectPage/ProjectPage.module.scss index b80bd95..f2899b0 100644 --- a/components/projectPage/ProjectPage.module.scss +++ b/components/projectPage/ProjectPage.module.scss @@ -62,6 +62,6 @@ } .description { - font-size: 1.556rem; // Based on 9px. + font-size: 1rem; // Based on 16px. } } From 9fd6b963d81d0e2580dfccf87922ac7fb80c2c79 Mon Sep 17 00:00:00 2001 From: Noamili <105313965+Noamili@users.noreply.github.com> Date: Mon, 25 Jul 2022 19:08:17 +0300 Subject: [PATCH 16/18] Delete Description.tsx --- components/description/Description.tsx | 30 -------------------------- 1 file changed, 30 deletions(-) delete mode 100644 components/description/Description.tsx diff --git a/components/description/Description.tsx b/components/description/Description.tsx deleted file mode 100644 index e084339..0000000 --- a/components/description/Description.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import style from './description.module.scss'; - -const Description = ({ descriptionOutput, descriptionHeight }) => { - const myRef = useRef(null); - const [height, setHeight] = useState(0); - - useEffect(() => { - descriptionHeight(height); - }, [descriptionHeight, height]); - - useEffect(() => { - const handleResize = () => { - setHeight(myRef.current.offsetHeight); - }; - window.addEventListener('resize', handleResize); - handleResize(); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, [myRef]); - - return ( -
- {descriptionOutput} -
- ); -}; - -export default Description; From 756fb05a1531243c372395eafcf7ff43570bbcaa Mon Sep 17 00:00:00 2001 From: noa Date: Mon, 25 Jul 2022 19:48:46 +0300 Subject: [PATCH 17/18] add new colors --- styles/colors.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/styles/colors.scss b/styles/colors.scss index a18525f..848db11 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -2,7 +2,7 @@ $blue-100: #7289da; $blue-200: #1778f2; $blue-300: #0088cc; $blue-500: #0b008e; -$blue-600: #01007D; +$blue-600: #01007d; $red-200: #ce5a55; $gray-100: #e8e8e8; $gray-200: #e2e2e2; @@ -12,4 +12,20 @@ $gray-600: #292e33; $gray-700: #242831; $gray-800: #202529; $gray-900: #1d1d1d; - +// New colors. +$new-gray-100: #fafafb; +$new-gray-200: #e9ebef; +$new-gray-300: #bfc0c3; +$new-gray-400: #5b6375; +$new-gray-500: #39475d; +$new-gray-600: #242831; +$purple-500: #832ec6; +$purple-red-500: linear-gradient(180deg, #01007d 0%, #832ec6 47.92%, #dc665e 100%); +$purple-red-400: linear-gradient( + 180deg, + rgba(1, 0, 125, 0.6) 0%, + rgba(131, 46, 198, 0.6) 47.92%, + rgba(220, 102, 94, 0.6) 100% +); +$purple-100: rgba(11, 0, 142, 0.3); +$purple-200: rgba(11, 0, 142, 0.1); From d80a05df7d7d093659278ec91854ec1c2e7a6055 Mon Sep 17 00:00:00 2001 From: noa Date: Mon, 25 Jul 2022 20:05:58 +0300 Subject: [PATCH 18/18] small fix in order --- styles/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/colors.scss b/styles/colors.scss index 848db11..031542d 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -2,7 +2,6 @@ $blue-100: #7289da; $blue-200: #1778f2; $blue-300: #0088cc; $blue-500: #0b008e; -$blue-600: #01007d; $red-200: #ce5a55; $gray-100: #e8e8e8; $gray-200: #e2e2e2; @@ -13,6 +12,7 @@ $gray-700: #242831; $gray-800: #202529; $gray-900: #1d1d1d; // New colors. +$blue-600: #01007d; $new-gray-100: #fafafb; $new-gray-200: #e9ebef; $new-gray-300: #bfc0c3;