From 33a01ca43611bc7086bd317f184a242a9b1b1e1b Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Sat, 31 Dec 2022 14:47:38 -0300 Subject: [PATCH] feat(module): Adiciona css module --- src/components/Header.tsx | 36 ++++++----- src/components/Link.tsx | 4 +- src/components/SearchBar.tsx | 12 +++- src/components/menuMobile.tsx | 10 +-- src/global.scss | 3 - src/index.tsx | 2 +- src/styles/{reset.scss => global.scss} | 2 + .../{header.scss => header.module.scss} | 63 ++++++------------- src/styles/menuMobile.module.scss | 35 +++++++++++ 9 files changed, 96 insertions(+), 71 deletions(-) delete mode 100644 src/global.scss rename src/styles/{reset.scss => global.scss} (75%) rename src/styles/{header.scss => header.module.scss} (81%) create mode 100644 src/styles/menuMobile.module.scss diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a12ec56..06bfab3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -7,6 +7,8 @@ import Link from "./Link"; import HeaderLinks from "./HeaderLinks"; import MenuMobile from "./menuMobile"; +import styles from "../styles/header.module.scss"; + const Header = () => { const [isActive, setIsActive] = useState(false); const activeMenuMobile = () => { @@ -14,12 +16,12 @@ const Header = () => { }; return ( -
-
-
-
+
+
+
+
- + -
-
+
-
+
diff --git a/src/components/Link.tsx b/src/components/Link.tsx index c3b0eee..c371e95 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,3 +1,5 @@ +import styles from "../styles/header.module.scss"; + export interface LinkProps { link: string; text: string; @@ -5,7 +7,7 @@ export interface LinkProps { const Link = (props: LinkProps) => { return ( - + {props.text} ); diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 822214f..b724133 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,14 +1,20 @@ import iconBusca from "../assets/img/IconBusca.png"; +import styles from "../styles/header.module.scss"; + const SearchBar = () => { return ( -
+
- logo M3 + logo M3
); }; diff --git a/src/components/menuMobile.tsx b/src/components/menuMobile.tsx index 6823332..5588d50 100644 --- a/src/components/menuMobile.tsx +++ b/src/components/menuMobile.tsx @@ -2,6 +2,8 @@ import iconExit from "../assets/img/iconExit.png"; import Link from "./Link"; import HeaderLinks from "./HeaderLinks"; +import styles from "../styles/menuMobile.module.scss"; + interface MenuMobileProps { className: string; onClick: React.MouseEventHandler; @@ -10,11 +12,11 @@ interface MenuMobileProps { const MenuMobile = (props: MenuMobileProps) => { return (
-
-
+
+
-
+
diff --git a/src/global.scss b/src/global.scss deleted file mode 100644 index 30ea1ef..0000000 --- a/src/global.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import './styles/variables.scss'; -@import './styles/reset.scss'; -@import './styles/header.scss'; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 638cfb5..6e19d62 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ import ReactDOM from "react-dom"; -import "./global.scss"; +import "./styles/global.scss"; import Home from "./pages/Home"; const App = () => { diff --git a/src/styles/reset.scss b/src/styles/global.scss similarity index 75% rename from src/styles/reset.scss rename to src/styles/global.scss index 8cf4c0d..6f07fd5 100644 --- a/src/styles/reset.scss +++ b/src/styles/global.scss @@ -1,3 +1,5 @@ +@import './variables.scss'; + * { padding: 0; margin: 0; diff --git a/src/styles/header.scss b/src/styles/header.module.scss similarity index 81% rename from src/styles/header.scss rename to src/styles/header.module.scss index 47bf0c0..c814e39 100644 --- a/src/styles/header.scss +++ b/src/styles/header.module.scss @@ -1,3 +1,5 @@ +@import './variables.scss'; + .page-header { display: flex; flex-direction: column; @@ -94,57 +96,28 @@ cursor: pointer; } - &__menu-mobile { - position: absolute; - top: 0; - left: 0; - background: rgba(69, 69, 69, 0.7); - width: 100%; - height: 100%; - z-index: 50; - display: none; - - &--container { - height: 585px; - background: $white; - width: 96.5%; - } - - &--header { - display: flex; - justify-content: space-between; - align-items: center; - background: $black; - padding: 31px 16px; - } - - &--button-exit { - background: transparent; - border: 0; - outline: 0; - cursor: pointer; - } - - &--links { - display: flex; - flex-direction: column; - align-self: start; - gap: 12px; - padding: 31px 0 0 16px; - - .link { - color: #C4C4C4; - } - } - - } - &__container-bottom-mobile { padding: 0 16px 25px; } + &__menu-mobile { + display: none; + } + .active { + position: absolute; + top: 0; + left: 0; + background: rgba($gray, 0.702); + width: 100%; + height: 100%; + z-index: 50; display: block; + + + .link { + color: $gray-600; + } } @media screen and (min-width: 2500px) { diff --git a/src/styles/menuMobile.module.scss b/src/styles/menuMobile.module.scss new file mode 100644 index 0000000..a49e5c1 --- /dev/null +++ b/src/styles/menuMobile.module.scss @@ -0,0 +1,35 @@ +@import './variables.scss'; + +.page-header { + &__menu-mobile { + &--container { + height: 585px; + background: $white; + width: 96.5%; + } + + &--header { + display: flex; + justify-content: space-between; + align-items: center; + background: $black; + padding: 31px 16px; + } + + &--button-exit { + background: transparent; + border: 0; + outline: 0; + cursor: pointer; + } + + &--links { + display: flex; + flex-direction: column; + align-self: start; + gap: 12px; + padding: 31px 0 0 16px; + } + + } +} \ No newline at end of file