Feat/fe web layout by Yehorik11 · Pull Request #10 · code-length/shopery

Yehorik11 · 2025-04-01T13:54:18Z

added layout heder

Implemented the layout for the header section with navigation and middle section BREAKING CHANGE: 🧨 Changed the structure of the `Header` component, which may require updates to its usage in ✅ Closes: other parts of the application. The `header` element is now wrapped with a `div` and requires

Tornik73 · 2025-04-01T14:04:57Z

Fix merge conflicts

Tornik73 · 2025-04-01T14:21:05Z

apps/fe-web/src/app/components/Account/Account.tsx

+export default function Account() {
+  return (
+    <div className={styles.account}>
+      <p>Sign In</p>&nbsp;/&nbsp;<p>Sign Up</p>


We need to use localization

Tornik73 · 2025-04-01T14:21:17Z

apps/fe-web/src/app/components/CallNow/CallNow.module.scss

+.callNow {
+  display: flex;
+  align-items: center;
+  .phoneNumber {


No need to use nested styles here

Tornik73 · 2025-04-01T14:22:14Z

apps/fe-web/src/app/components/CallNow/CallNow.tsx

+    <div className={styles.callNow}>
+      <Image src={Phone} alt='phone' />
+      <a href='tel:2195550114' className={styles.phoneNumber}>
+        (219) 555-0114


should not be hardcoded, we need to allow admins to customize telephone, emails, etc.

Tornik73 · 2025-04-01T14:22:26Z

apps/fe-web/src/app/components/Header/Header.module.scss

+.wrapper {
+  width: 100%;
+  background-color: $gray-800;
+  .nav {


remove nested styles

Tornik73 · 2025-04-01T14:22:37Z

apps/fe-web/src/app/components/Header/Header.module.scss

@@ -0,0 +1,16 @@
+.smallOne,
+.midle {


rename midle

Tornik73 · 2025-04-01T14:27:51Z

apps/fe-web/src/app/components/SmallOne/SmallOne.tsx

+
+import DropDown from '../../assets/images/Drop Down.svg';
+
+export default function SmallOne() {


I do not like this name

Tornik73 · 2025-04-01T14:28:09Z

apps/fe-web/src/app/components/SmallOne/SmallOne.tsx

+          <div className={styles.option}>
+            <p>Eng</p>
+            <Image src={DropDown} alt='Drop Down' />
+          </div>


should be in separate component

Tornik73 · 2025-04-01T14:28:17Z

apps/fe-web/src/app/components/SmallOne/SmallOne.tsx

+          <div className={styles.option}>
+            <p>USD</p>
+            <Image src={DropDown} alt='Drop Down' />
+          </div>


should be in separate component

Tornik73 · 2025-04-01T14:28:36Z

apps/fe-web/src/app/components/SmallOne/SmallOne.tsx

+
+import styles from './SmallOne.module.scss';
+
+import DropDown from '../../assets/images/Drop Down.svg';


Suggested change

import DropDown from '../../assets/images/Drop Down.svg';

import DropDownIcon from '../../assets/images/dropdown-icon.svg';

Tornik73 · 2025-04-01T14:29:05Z

apps/fe-web/src/app/components/SmallOne/SmallOne.module.scss

@@ -0,0 +1,31 @@
+.smallOne {


remove nested styles
Rename smallOne to another name

Tornik73 · 2025-04-01T14:30:01Z

add link to the task from Jira

rename component Midle to HeaderActions, removed nested styles file, added new component InfoOptions BREAKING CHANGE: 🧨 rename component Midle to HeaderActions, removed nested styles file, added new component InfoOptions

created new component Price BREAKING CHANGE: 🧨 created new component Price ✅ Closes: created new component Price

Tornik73 · 2025-04-03T09:16:33Z

apps/fe-web/src/app/components/CallNow/CallNow.tsx

+import styles from './CallNow.module.scss';
+
+const phoneNumber = 2195550114;
+const phoneDisplay = '(219) 555-0114';


use https://www.npmjs.com/package/react-phone-number-input for number formatting

Tornik73 · 2025-04-03T09:16:59Z

apps/fe-web/src/app/components/CallNow/CallNow.tsx

+  return (
+    <div className={styles.callNow}>
+      <Image src={Phone} alt='phone' />
+      <a href={`tel:${phoneNumber}`} className={styles.phoneNumber}>


Create separate shared PhoneNumber component

Tornik73 · 2025-04-03T09:17:43Z

apps/fe-web/src/app/components/Details/Details.tsx

+        <div className={styles.selector}>
+          <InfoOption>Eng</InfoOption>
+          <InfoOption>USD</InfoOption>
+        </div>


should be separate component

Tornik73 · 2025-04-03T09:18:03Z

apps/fe-web/src/app/components/Details/Details.tsx

+          <InfoOption>Eng</InfoOption>
+          <InfoOption>USD</InfoOption>
+        </div>
+        <span className={styles.divider}>|</span>


should be separate component

fix layout header BREAKING CHANGE: 🧨 fix layout header ✅ Closes: fix layout header

added component layout BREAKING CHANGE: 🧨 added component layout ✅ Closes: added component layout

Tornik73 · 2025-04-11T22:19:00Z

apps/fe-web/src/app/components/Button/Button.tsx

+          styles[variant],
+          styles[fill],
+          styles[size],
+          isHovered &&


You can remove it, and do it with css only

Tornik73 · 2025-04-11T22:19:29Z

apps/fe-web/src/app/components/Cta/Cta.module.scss

+  padding-top: 16px;
+
+  p {
+    padding: 0 !important;


Remove important usage

Tornik73 · 2025-04-11T22:21:18Z

apps/fe-web/src/app/components/NavLinks/NavLinks.tsx

+const navLinks = [
+  { href: '/', label: 'Home', isOption: true, isActive: true },
+  { href: '/Shop', label: 'Shop', isOption: true },
+  { href: '/Pages', label: 'Pages', isOption: true },


Rename pages routes

Tornik73 · 2025-04-12T06:06:12Z

apps/fe-web/src/app/assets/images/Map Pin.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">


Please do not use spaces in names, check all places
Rename all icons to lower case

Tornik73 · 2025-04-12T06:14:02Z

apps/fe-web/src/app/components/CallNow/CallNow.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import Phone from '../../assets/images/PhoneCall.svg';


Assets importing should be in this format

// index.ts export { ReactComponent as PhoneIcon } from './phone-icon.svg'; // Component file import { PhoneIcon } from '@assets/icons'; <PhoneIcon/>

Tornik73 · 2025-04-12T07:34:40Z

apps/fe-web/src/app/components/SocialMedia/SocialMedia.module.scss

+  border-radius: 50%;
+}
+
+.activeIcon {


Suggested change

.activeIcon {

.active {

Tornik73 · 2025-04-12T07:34:49Z

apps/fe-web/src/app/components/SocialMedia/SocialMedia.module.scss

@@ -0,0 +1,17 @@
+.socialIcons {


Suggested change

.socialIcons {

.icons {

Tornik73 · 2025-04-12T07:35:00Z

apps/fe-web/src/app/components/SocialMedia/SocialMedia.tsx

+];
+
+export default function SocialMedia() {
+  const [hovered, setHovered] = useState<string | null>(null);


Suggested change

const [hovered, setHovered] = useState<string | null>(null);

Tornik73 · 2025-04-12T07:35:24Z

apps/fe-web/src/app/components/SocialMedia/SocialMedia.tsx

+          className={
+            hovered === name
+              ? `${styles.activeIcon} ${styles.icon}`
+              : styles.icon
+          }
+          onMouseEnter={() => setHovered(name)}
+          onMouseLeave={() => setHovered(null)}


Suggested change

className={

hovered === name

? `${styles.activeIcon} ${styles.icon}`

: styles.icon

}

onMouseEnter={() => setHovered(name)}

onMouseLeave={() => setHovered(null)}

Tornik73 · 2025-04-12T07:35:34Z

apps/fe-web/src/app/components/Subscribe/Subscribe.module.scss

@@ -0,0 +1,13 @@
+.subscribeWrapper {


rename to wrapper

Tornik73 changed the base branch from main to dev April 1, 2025 14:20

Tornik73 requested changes Apr 1, 2025

View reviewed changes

Yehorik11 added 3 commits April 2, 2025 11:25

Merge branch 'dev' into feat/fe-web-layout

9dabd6f

fix: 🐛 rename component and fix scss files

59fd27a

rename component Midle to HeaderActions, removed nested styles file, added new component InfoOptions BREAKING CHANGE: 🧨 rename component Midle to HeaderActions, removed nested styles file, added new component InfoOptions

style: 💄 create Price component

a68e66b

created new component Price BREAKING CHANGE: 🧨 created new component Price ✅ Closes: created new component Price

Tornik73 reviewed Apr 3, 2025

View reviewed changes

Yehorik11 added 2 commits April 3, 2025 15:24

fix: 🐛 fix layout header

fef93fa

fix layout header BREAKING CHANGE: 🧨 fix layout header ✅ Closes: fix layout header

style: 💄 added component layout

eca467c

added component layout BREAKING CHANGE: 🧨 added component layout ✅ Closes: added component layout

Tornik73 requested changes Apr 12, 2025

View reviewed changes


		import DropDown from '../../assets/images/Drop Down.svg';

		export default function SmallOne() {


		import styles from './SmallOne.module.scss';

		import DropDown from '../../assets/images/Drop Down.svg';

	import DropDown from '../../assets/images/Drop Down.svg';
	import DropDownIcon from '../../assets/images/dropdown-icon.svg';

		@@ -0,0 +1,4 @@
		<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">

		@@ -0,0 +1,16 @@
		import Image from 'next/image';
		import Phone from '../../assets/images/PhoneCall.svg';

		@@ -0,0 +1,16 @@
		.smallOne,
		.midle {

Conversation

Yehorik11 commented Apr 1, 2025

Uh oh!

Tornik73 commented Apr 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tornik73 commented Apr 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tornik73 Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Tornik73 commented Apr 1, 2025 •

edited

Loading

Tornik73 commented Apr 1, 2025 •

edited

Loading

Tornik73 Apr 3, 2025 •

edited

Loading