From 48d26ef4d23edf255495a274aedb74ebb6c814d3 Mon Sep 17 00:00:00 2001 From: Asman Umbetov Date: Sun, 17 Dec 2023 23:42:55 +0300 Subject: [PATCH] feat(home page): changes home page inputs and cards changes appearance of cards and inputs on the home page accordingly with figma references closes #25 --- .stylelintrc.js | 11 +- client/assets/cardSecondaryBackground.svg | 3 + client/assets/logo.svg | 4 + client/components/Button/Button.css | 48 +++++++ client/components/Button/index.tsx | 34 +++-- client/components/Sidebar/index.tsx | 2 +- client/components/TextInput/Input.css | 34 +++++ client/components/TextInput/index.tsx | 43 ++++--- client/index.css | 33 ++--- .../pages/home/features/CardsSpread/index.tsx | 121 ++++++++---------- client/pages/home/index.tsx | 54 ++++---- client/pages/room/Room.module.css | 4 - .../PlayingCardsInput.module.css | 5 - .../features/PlayingCardsInput.tsx/index.tsx | 2 +- client/pages/room/index.tsx | 2 +- package-lock.json | 15 ++- package.json | 1 + postcss.config.js | 5 +- tailwind.config.js | 3 + 19 files changed, 263 insertions(+), 161 deletions(-) create mode 100644 client/assets/cardSecondaryBackground.svg create mode 100644 client/assets/logo.svg create mode 100644 client/components/Button/Button.css create mode 100644 client/components/TextInput/Input.css delete mode 100644 client/pages/room/Room.module.css diff --git a/.stylelintrc.js b/.stylelintrc.js index 782c7e2..0aa2883 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,19 +1,12 @@ module.exports = { - extends: ['stylelint-config-standard'], + extends: ['stylelint-config-standard', 'stylelint-config-tailwindcss"'], // add your custom config here // https://stylelint.io/user-guide/configuration rules: { 'at-rule-no-unknown': [ true, { - ignoreAtRules: [ - 'apply', - 'layer', - 'responsive', - 'screen', - 'tailwind', - 'variants', - ], + ignoreAtRules: ['apply', 'layer', 'responsive', 'screen', 'tailwind', 'variants'], }, ], 'no-descending-specificity': null, diff --git a/client/assets/cardSecondaryBackground.svg b/client/assets/cardSecondaryBackground.svg new file mode 100644 index 0000000..fe6c838 --- /dev/null +++ b/client/assets/cardSecondaryBackground.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/logo.svg b/client/assets/logo.svg new file mode 100644 index 0000000..2c4c748 --- /dev/null +++ b/client/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/components/Button/Button.css b/client/components/Button/Button.css new file mode 100644 index 0000000..cf9e24b --- /dev/null +++ b/client/components/Button/Button.css @@ -0,0 +1,48 @@ +@tailwind components; + +@layer components { + .btn-primary { + & button { + @apply bg-primary-emphasis text-white; + } + &:hover { + & .upper-side, .right-side { + @apply bg-secondary-dark transition-all; + } + } + } + + .btn-secondary { + & button { + @apply bg-secondary-light text-primary-emphasis; + } + &:hover { + & .upper-side, .right-side { + @apply bg-primary-emphasis transition-all; + } + } + } + + .btn-base { + & > .upper-side { + @apply border border-black border-solid border-b-0 border-r-0; + transform: skewX(135deg) translateX(11px); + height: 22px; + width: calc(100% - 22px); + } + + & .right-side-container { + @apply flex flex-row; + } + + & .right-side { + @apply border border-black border-solid border-l-0; + transform: skewY(135deg) translateY(-11px); + width: 24px; + } + + & button { + @apply outline-0 text-2xl px-6 py-3 block w-full p-2.5 border border-solid border-black; + } + } +} diff --git a/client/components/Button/index.tsx b/client/components/Button/index.tsx index b220119..f6876ef 100644 --- a/client/components/Button/index.tsx +++ b/client/components/Button/index.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames' +import './Button.css' import React from 'react' type Props = { @@ -8,18 +9,29 @@ type Props = { onClick?(): void className?: string } -export default function Button({ htmlType, type, label, onClick, className }:Props) { +export default function Button({ htmlType, type, label, onClick, className }: Props) { return ( - +
+
+ +
+
+ ) } diff --git a/client/components/Sidebar/index.tsx b/client/components/Sidebar/index.tsx index 38856b8..808ef83 100644 --- a/client/components/Sidebar/index.tsx +++ b/client/components/Sidebar/index.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { const areSettingsImplemented = false return ( -
+
.upper-side { + @apply border border-solid border-grey; + transform: skewX(135deg) translateX(12px) translateY(1px); + height: 22px; + width: calc(100% - 22px); + } + + & .right-side-container { + @apply flex flex-row; + } + + & .right-side { + @apply border border-solid border-grey; + transform: skewY(135deg) translateY(-11px) translateX(-1px); + width: 23px; + } + + & input { + @apply border border-solid border-grey text-2xl px-6 py-3 block w-full p-2.5 box-border text-center outline-none transition-all; + } + } + + .text-input-danger { + & input { + @apply shadow-danger placeholder-danger focus:shadow-danger; + } + } + +} diff --git a/client/components/TextInput/index.tsx b/client/components/TextInput/index.tsx index 52aec46..02130e9 100644 --- a/client/components/TextInput/index.tsx +++ b/client/components/TextInput/index.tsx @@ -2,6 +2,7 @@ import { useSpring, animated } from '@react-spring/web' import { config } from '@react-spring/web' import classNames from 'classnames' import React, { ReactEventHandler } from 'react' +import './Input.css' type Props = { placeholder: string @@ -21,20 +22,18 @@ export default function TextInput({ const [validationErrorSpring] = useSpring(() => { return validationError ? { - from: { opacity: 0, height: 0 }, - to: { opacity: 1, height: 30 }, - config: config.stiff, - } + from: { opacity: 0, height: 0 }, + to: { opacity: 1, height: 30 }, + config: config.stiff, + } : { - from: { opacity: 1, height: 30 }, - to: { opacity: 0, height: 0 }, - config: config.stiff, - } + from: { opacity: 1, height: 30 }, + to: { opacity: 0, height: 0 }, + config: config.stiff, + } }, [validationError]) return ( -
+
{validationError || ''} - +
+
+ +
+
) } diff --git a/client/index.css b/client/index.css index b728f63..43884f6 100644 --- a/client/index.css +++ b/client/index.css @@ -32,14 +32,6 @@ code { @tailwind utilities; @layer components { - .btn-primary { - @apply bg-primary-idle placeholder-white outline-0 text-white text-2xl px-14 py-4 rounded-3xl hover:shadow-button-primary-emphasis hover:shadow-primary-emphasis transition-shadow block w-full p-2.5; - } - - .btn-secondary { - @apply bg-secondary-idle placeholder-white outline-0 text-primary-emphasis text-2xl px-14 py-4 rounded-3xl hover:shadow-button-primary-emphasis hover:shadow-primary-emphasis transition-shadow block w-full p-2.5; - } - .card { @apply rounded-lg bg-secondary-emphasis border border-solid border-primary-emphasis; @@ -47,14 +39,6 @@ code { width: 50px; } - .text-input { - @apply shadow-input-border shadow-grey text-2xl px-14 py-4 rounded-3xl block w-full p-2.5 box-border text-center border-none outline-none focus:shadow-primary-emphasis focus:shadow-input-border-hover hover:shadow-input-border-hover hover:shadow-primary-emphasis transition-all; - } - - .text-input-danger { - @apply shadow-input-border shadow-danger text-2xl px-14 py-4 rounded-3xl block w-full p-2.5 box-border text-center border-none outline-none placeholder-danger focus:shadow-danger focus:shadow-input-border-hover hover:shadow-input-border-hover hover:shadow-danger transition-all; - } - .emphasis-text { font-family: Bangers; color: white; @@ -62,5 +46,22 @@ code { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #7893DC; } + + .card-background { + background: url('./assets/cardBackground.svg'); + background-size: cover; + background-color: #E7ECFC; + } + + .card-secondary-background { + background: url('./assets/cardSecondaryBackground.svg'); + background-size: cover; + background-color: #E7ECFC; + } + + .base-background { + background: url('./assets/background.svg'); + background-size: cover; + } } diff --git a/client/pages/home/features/CardsSpread/index.tsx b/client/pages/home/features/CardsSpread/index.tsx index e6e28ae..89d0ba9 100644 --- a/client/pages/home/features/CardsSpread/index.tsx +++ b/client/pages/home/features/CardsSpread/index.tsx @@ -4,7 +4,7 @@ import { animated, useSpring } from '@react-spring/web' export const springConfigRigid = { mass: 10, tension: 60, - friction: 40 + friction: 40, } const cardsSize = { @@ -22,7 +22,7 @@ const rotateHalfway = 10 const from = { x: 0, y: 0, - rotate: 0 + rotate: 0, } function getCardsSpreadSpringConfig(toX: number, toY: number, rotate: number) { @@ -33,7 +33,7 @@ function getCardsSpreadSpringConfig(toX: number, toY: number, rotate: number) { } function getToState(toX: number, toY: number, rotate: number) { - return { + return { x: toX, y: toY, rotate: rotate, @@ -42,107 +42,98 @@ function getToState(toX: number, toY: number, rotate: number) { } export default function CardsSpread() { - const [springsToLeft, springsToLeftApi] = useSpring(() => getCardsSpreadSpringConfig(xOffset, yOffset, rotate)) - const [springsToRight, springsToRightApi] = useSpring(() => getCardsSpreadSpringConfig(-xOffset, yOffset, -rotate)) - const [springsToRightHalfway, springsToRightHalfwayApi] = useSpring(() => getCardsSpreadSpringConfig(-xOffsetHalfway, yOffsetHalfway, -rotateHalfway)) - const [springsToLeftHalfway, springsToLeftHalfwayApi] = useSpring(() => getCardsSpreadSpringConfig(xOffsetHalfway, yOffsetHalfway, rotateHalfway)) - - const startAnimation = useCallback( - () => { - springsToLeftApi.start(getToState(xOffset, yOffset, rotate)) - springsToRightApi.start(getToState(-xOffset, yOffset, -rotate)) - springsToRightHalfwayApi.start(getToState(-xOffsetHalfway, yOffsetHalfway, -rotateHalfway)) - springsToLeftHalfwayApi.start(getToState(xOffsetHalfway, yOffsetHalfway, rotateHalfway)) - }, - [ - springsToLeftApi, - springsToRightApi, - springsToRightHalfwayApi, - springsToLeftHalfwayApi, - ] + const [springsToLeft, springsToLeftApi] = useSpring(() => + getCardsSpreadSpringConfig(xOffset, yOffset, rotate) + ) + const [springsToRight, springsToRightApi] = useSpring(() => + getCardsSpreadSpringConfig(-xOffset, yOffset, -rotate) ) + const [springsToRightHalfway, springsToRightHalfwayApi] = useSpring(() => + getCardsSpreadSpringConfig(-xOffsetHalfway, yOffsetHalfway, -rotateHalfway) + ) + const [springsToLeftHalfway, springsToLeftHalfwayApi] = useSpring(() => + getCardsSpreadSpringConfig(xOffsetHalfway, yOffsetHalfway, rotateHalfway) + ) + + const startAnimation = useCallback(() => { + springsToLeftApi.start(getToState(xOffset, yOffset, rotate)) + springsToRightApi.start(getToState(-xOffset, yOffset, -rotate)) + springsToRightHalfwayApi.start(getToState(-xOffsetHalfway, yOffsetHalfway, -rotateHalfway)) + springsToLeftHalfwayApi.start(getToState(xOffsetHalfway, yOffsetHalfway, rotateHalfway)) + }, [springsToLeftApi, springsToRightApi, springsToRightHalfwayApi, springsToLeftHalfwayApi]) useEffect(() => { startAnimation() - },[]) - - const handleHover = useCallback( - () => { - springsToLeftApi.start({ - ...from, - config: springConfigRigid - }) - springsToRightApi.start({ - ...from, - config: springConfigRigid - }) - springsToRightHalfwayApi.start({ - ...from, - config: springConfigRigid - }) - springsToLeftHalfwayApi.start({ - ...from, - config: springConfigRigid - }) - }, - [ - springsToLeftApi, - springsToRightApi, - springsToRightHalfwayApi, - springsToLeftHalfwayApi, - ] - ) + }, []) + const handleHover = useCallback(() => { + springsToLeftApi.start({ + ...from, + config: springConfigRigid, + }) + springsToRightApi.start({ + ...from, + config: springConfigRigid, + }) + springsToRightHalfwayApi.start({ + ...from, + config: springConfigRigid, + }) + springsToLeftHalfwayApi.start({ + ...from, + config: springConfigRigid, + }) + }, [springsToLeftApi, springsToRightApi, springsToRightHalfwayApi, springsToLeftHalfwayApi]) return ( -
+
- + > + ? +
- )} + ) +} diff --git a/client/pages/home/index.tsx b/client/pages/home/index.tsx index b31d8fc..a93f82d 100644 --- a/client/pages/home/index.tsx +++ b/client/pages/home/index.tsx @@ -1,5 +1,6 @@ import Button from 'components/Button' import TextInput from 'components/TextInput' +import LogoSvg from 'assets/Logo.svg' import { useLocalStorage } from 'hooks/useLocalStorage' import React, { useCallback, useState, ReactEventHandler } from 'react' import { useNavigate } from 'react-router-dom' @@ -58,30 +59,35 @@ export function Home() { return ( <> -
-
- -
- setName(e.currentTarget.value)} - className='mt-6' - placeholder='User name' - /> -
diff --git a/package-lock.json b/package-lock.json index bcfcfcb..0e8ac6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "poker", - "version": "1.1.2", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "poker", - "version": "1.1.2", + "version": "1.2.0", "license": "MIT", "dependencies": { "@react-spring/web": "^9.7.1", @@ -58,6 +58,7 @@ "semantic-release": "^22.0.8", "stylelint": "^15.2.0", "stylelint-config-standard": "^30.0.1", + "stylelint-config-tailwindcss": "^0.0.7", "tailwindcss": "^3.2.7" } }, @@ -13657,6 +13658,16 @@ "stylelint": "^15.0.0" } }, + "node_modules/stylelint-config-tailwindcss": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/stylelint-config-tailwindcss/-/stylelint-config-tailwindcss-0.0.7.tgz", + "integrity": "sha512-n2dCWH+0ppr0/by4EYCLWW7g5LU+l4UzUIsYS7xbVHqvm9UWa7UhltNdNiz5NmLF/FmbJR4Yd/v9DuUGvLw1Tg==", + "dev": true, + "peerDependencies": { + "stylelint": ">=13.13.1", + "tailwindcss": ">=2.2.16" + } + }, "node_modules/stylelint/node_modules/balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", diff --git a/package.json b/package.json index eddc848..a6116b1 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "semantic-release": "^22.0.8", "stylelint": "^15.2.0", "stylelint-config-standard": "^30.0.1", + "stylelint-config-tailwindcss": "^0.0.7", "tailwindcss": "^3.2.7" }, "eslintConfig": { diff --git a/postcss.config.js b/postcss.config.js index 33ad091..12f2acc 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { plugins: { - tailwindcss: {}, - autoprefixer: {}, + 'tailwindcss/nesting': {}, + 'tailwindcss': {}, + 'autoprefixer': {}, }, } diff --git a/tailwind.config.js b/tailwind.config.js index 489cb9c..03e8058 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,10 @@ module.exports = { extend: { colors: { 'primary-emphasis': '#7893DC', + 'primary-dark': '#303B58', 'secondary-emphasis': '#CCDAFF', + 'secondary-dark': '#6475AC', + 'secondary-light': '#DAE3FF', 'primary-idle': '#AEC1F7', 'secondary-idle': '#E7ECFC', 'danger': '#BF4949',