Merge pull request #37 from denlove/dev

FM-fix: minor fixes

.eslintrc

@@ -11,7 +11,7 @@
     "plugins": ["@typescript-eslint"],
 
     "rules": {
-        "prettier/prettier": 1,
+        "prettier/prettier": 2,
         "no-console": 1,
         "no-unused-vars": 0,
         "@typescript-eslint/no-unused-vars": 0,

.github/workflows/Analysis.yaml

@@ -4,6 +4,7 @@ on:
     pull_request:
         branches:
             - master
+            - dev
     workflow_call:
 
 jobs:

.github/workflows/BuildE2E.yaml

@@ -4,6 +4,7 @@ on:
     pull_request:
         branches:
             - master
+            - dev
     workflow_call:
 
 concurrency:

.github/workflows/Development.yaml

@@ -4,9 +4,11 @@ on:
     push:
         branches:
             - master
+            - dev
     pull_request:
         branches:
             - master
+            - dev
         types:
             - opened
             - edited

.husky/commit-msg

@@ -1,25 +1,40 @@
 #! /usr/bin/env bash
 
+# Task
+# Minimal checking if our commit message pattern locally and our branch name pattern are equal
+
+# Logs colors in termainal about seccess or failure 
 WHITE='\033[0;37m'
 RED='\033[0;31m'
 B_RED='\033[1;31m'
 GREEN='\033[0;32m'
 NO_COLOR='\033[0m'
 YELLOW='\033[0;33m'
 
-current_branch_name=$(git symbolic-ref --short HEAD)    # TDE-1
-branch_name_len=${#current_branch_name}                 # 5
+# Find your current working branch name. Ex: TDE-1
+current_branch_name=$(git symbolic-ref --short HEAD)
+
+# Find branch name length. Ex: 5
+branch_name_len=${#current_branch_name}
+
+# Find path to last commit message file. Ex: path/to/commit/msg/file
+path_to_commit="$(pwd)/.git/COMMIT_EDITMSG"
+
+# Find last commit massage from file. Ex: TDE-1: add something
+commit_msg=$(cat $path_to_commit)
 
-path_to_commit="$(pwd)/.git/COMMIT_EDITMSG"             # path/to/commit/msg/file
-commit_msg=$(cat $path_to_commit)                       # TDE-1: add something
-prefix_commit_msg=${commit_msg:0:$branch_name_len}      # TDE-1
+# Match string with length <branch_name_len> from start of commit message. Ex: TDE-1
+prefix_commit_msg=${commit_msg:0:$branch_name_len}
 
+# Compare <current_branch_name> and <prefix_commit_msg> and handle it with tips
 if [[ "$current_branch_name" != "$prefix_commit_msg" ]]; then
-    printf "${RED}[ERROR-1]: ${B_RED}Incorrect commit message!${NO_COLOR}\n\
+    # Failure
+    printf "${RED}✘ ${B_RED}Incorrect commit message!${NO_COLOR}\n\
 ${YELLOW}Need help? You should print commit message like this:\n${YELLOW}Template:${NO_COLOR} \
 ${WHITE}git commit -m \"branchName-taskNumber: your commit message here\"${NO_COLOR}\n\
-${YELLOW}Example:${NO_COLOR} ${WHITE}git commit -m \"TDE-123: minor bug fixes\"${NO_COLOR}\n"
+${YELLOW}Example:${NO_COLOR} ${WHITE}git commit -m \"TDE-123: some fixes\"${NO_COLOR}\n"
     exit 1
 else
+    # Success
 	printf "${GREEN}✔${NO_COLOR} Success! Commit message approved.\n"
 fi

src/components/NavBar/NavBar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import c from 'classnames'
 import { usePathname } from 'next/navigation'
 import { navLinks } from './helpers/navLinks'
@@ -12,13 +12,31 @@ import style from './NavBar.module.scss'
 const NavBar = () => {
     const [toggleMenu, setToggleMenu] = useState<boolean>(false)
     const pathname = usePathname()
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (toggleMenu) {
+            window.addEventListener('click', hasParent)
+        } else {
+            removeEventListener('click', hasParent)
+        }
+    }, [toggleMenu])
 
     useEffect(() => {
         setToggleMenu(false)
     }, [pathname])
 
+    const hasParent = (e: MouseEvent) => {
+        const clickedElem = e.target as HTMLElement
+        const nav = ref.current as HTMLDivElement
+        if (!nav.contains(clickedElem)) {
+            removeEventListener('click', hasParent)
+            setToggleMenu(false)
+        }
+    }
+
     return (
-        <div className={style['navbar-wrapper']}>
+        <div ref={ref} className={style['navbar-wrapper']}>
             <BurgerButton toggle={setToggleMenu} />
             <nav
                 className={c(style.navbar, {

src/components/WelcomeBlock/components/FaceImages/FaceImages.module.scss

@@ -40,7 +40,7 @@
             }
             &:nth-child(3) {
                 @include width.ratio(5rem);
-                grid-area: 3 / 2 / 7 / 6;
+                grid-area: 5 / 2 / 7 / 6;
                 justify-self: center;
                 align-self: center;
             }