From 4775d8459611110abbce1972d32df43f4a9c9438 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 10:11:52 -0300 Subject: [PATCH 01/50] feat(workspace): clear all not important files --- .prettierrc | 12 +++++----- public/index.html | 51 +++++++++-------------------------------- public/logo192.png | Bin 5347 -> 0 bytes public/logo512.png | Bin 9664 -> 0 bytes public/manifest.json | 25 -------------------- public/robots.txt | 3 --- src/App.css | 38 ------------------------------ src/App.test.tsx | 9 -------- src/App.tsx | 33 ++------------------------ src/index.css | 13 ----------- src/index.tsx | 25 +++++++------------- src/logo.svg | 1 - src/reportWebVitals.ts | 15 ------------ src/setupTests.ts | 5 ---- 14 files changed, 27 insertions(+), 203 deletions(-) delete mode 100644 public/logo192.png delete mode 100644 public/logo512.png delete mode 100644 public/manifest.json delete mode 100644 public/robots.txt delete mode 100644 src/App.css delete mode 100644 src/App.test.tsx delete mode 100644 src/index.css delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.ts delete mode 100644 src/setupTests.ts diff --git a/.prettierrc b/.prettierrc index 4237980..100674e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,8 @@ { - "semi": false, - "tabWidth": 2, - "singleQuote": true, - "endOfLine": "lf", - "singleAttributePerLine": true, - "useTabs": true + "semi": false, + "tabWidth": 2, + "singleQuote": true, + "endOfLine": "lf", + "singleAttributePerLine": false, + "useTabs": true } diff --git a/public/index.html b/public/index.html index aa069f2..a7cc1f6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,14 @@ - - - - - - - - - - - React App - - - -
- - + + + + + + Challenge - 5 | Institutional + + + +
+ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index 654d01e..15e35a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,32 +1,3 @@ -import React from 'react' -import logo from './logo.svg' -import './App.css' - -function App() { - return ( -
-
- logo - - -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- ) +export function App() { + return
} - -export default App diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index 032464f..629e56a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,19 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from 'react' +import ReactDOM from 'react-dom/client' +import { App } from './App' -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); + + + +) diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; From 654e497f0ae844b2626436ea99ab85882f51d352 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 10:14:40 -0300 Subject: [PATCH 02/50] feat(workspace): imported fonts --- public/index.html | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index a7cc1f6..b27e247 100644 --- a/public/index.html +++ b/public/index.html @@ -1,10 +1,22 @@ - + + + + - + + + + + + + Challenge - 5 | Institutional From 153f9b06a5ccab6b8c3a1ea8bbfa53d810ffd146 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 10:18:58 -0300 Subject: [PATCH 03/50] feat(workspace): added descriptions for the challenge --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 558dcdc..33c222a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,12 @@ { - "name": "teste", + "name": "challenge_5_institutional", "version": "0.1.0", "private": true, + "author": { + "name": "Henrique Santos Santana", + "email": "hsstudentwork@gmail.com", + "url": "https://github.com/HenriqueSSan" + }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", From e5c578a9ba22ca058e119dda9987c30fcffd9ef4 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 10:38:24 -0300 Subject: [PATCH 04/50] feat(header): created initial files --- src/App.tsx | 10 +++++++++- src/settings/styles/global/_config.scss | 0 src/settings/styles/global/_reset.scss | 0 src/settings/styles/global/exports.scss | 2 ++ src/settings/styles/index.scss | 0 src/settings/styles/utils/exports.scss | 4 ++++ src/settings/styles/utils/helpers/_functions.scss | 0 src/settings/styles/utils/helpers/_mixin.scss | 0 src/settings/styles/utils/resources/colors.scss | 0 src/settings/styles/utils/resources/fonts.scss | 0 src/template/Header/Header.styles.scss | 0 src/template/Header/Header.tsx | 3 +++ src/template/Header/index.ts | 1 + 13 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/settings/styles/global/_config.scss create mode 100644 src/settings/styles/global/_reset.scss create mode 100644 src/settings/styles/global/exports.scss create mode 100644 src/settings/styles/index.scss create mode 100644 src/settings/styles/utils/exports.scss create mode 100644 src/settings/styles/utils/helpers/_functions.scss create mode 100644 src/settings/styles/utils/helpers/_mixin.scss create mode 100644 src/settings/styles/utils/resources/colors.scss create mode 100644 src/settings/styles/utils/resources/fonts.scss create mode 100644 src/template/Header/Header.styles.scss create mode 100644 src/template/Header/Header.tsx create mode 100644 src/template/Header/index.ts diff --git a/src/App.tsx b/src/App.tsx index 15e35a9..a471ad4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,11 @@ +import './settings/styles/index.scss' + +import { Header } from './template/Header' + export function App() { - return
+ return ( + <> +
+ + ) } diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/global/exports.scss b/src/settings/styles/global/exports.scss new file mode 100644 index 0000000..a07e54a --- /dev/null +++ b/src/settings/styles/global/exports.scss @@ -0,0 +1,2 @@ +@import './reset'; +@import './config'; diff --git a/src/settings/styles/index.scss b/src/settings/styles/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss new file mode 100644 index 0000000..0fb0027 --- /dev/null +++ b/src/settings/styles/utils/exports.scss @@ -0,0 +1,4 @@ +@import './resources/colors.scss'; +@import './resources/fonts.scss'; +@import './helpers/mixin'; +@import './helpers/functions'; diff --git a/src/settings/styles/utils/helpers/_functions.scss b/src/settings/styles/utils/helpers/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/utils/helpers/_mixin.scss b/src/settings/styles/utils/helpers/_mixin.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/utils/resources/colors.scss b/src/settings/styles/utils/resources/colors.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/settings/styles/utils/resources/fonts.scss b/src/settings/styles/utils/resources/fonts.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/template/Header/Header.styles.scss b/src/template/Header/Header.styles.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/template/Header/Header.tsx b/src/template/Header/Header.tsx new file mode 100644 index 0000000..a5d0ee4 --- /dev/null +++ b/src/template/Header/Header.tsx @@ -0,0 +1,3 @@ +export function Header() { + return
Hi, I'm Header
+} diff --git a/src/template/Header/index.ts b/src/template/Header/index.ts new file mode 100644 index 0000000..e0e2673 --- /dev/null +++ b/src/template/Header/index.ts @@ -0,0 +1 @@ +export { Header } from './Header' From 45101f965a46c243e2e196938ac5e686b0fd967e Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 12:02:59 -0300 Subject: [PATCH 05/50] feat(workspace): added initial styles variables --- src/settings/styles/global/_config.scss | 40 +++++++++++++++++++ src/settings/styles/global/_reset.scss | 22 ++++++++++ src/settings/styles/index.scss | 2 + src/settings/styles/utils/exports.scss | 4 +- .../styles/utils/resources/_colors.scss | 24 +++++++++++ .../styles/utils/resources/_fonts.scss | 1 + .../styles/utils/resources/colors.scss | 0 .../styles/utils/resources/fonts.scss | 0 8 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 src/settings/styles/utils/resources/_colors.scss create mode 100644 src/settings/styles/utils/resources/_fonts.scss delete mode 100644 src/settings/styles/utils/resources/colors.scss delete mode 100644 src/settings/styles/utils/resources/fonts.scss diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index e69de29..307b882 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -0,0 +1,40 @@ +@use '../utils/resources/colors' as var; +@use '../utils/resources/fonts' as fonts; + +:root { + @each $name, $value in var.$clr-common { + --clr-common-#{$name}: #{$value}; + } + + --clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')}; + + @each $name, $value in var.$clr-gray { + --clr-gray-#{$name}: #{$value}; + } + + --font-family-100: #{fonts.$font-family-100}; +} + +body { + font-family: var(--font-family-100); +} + +body { + --txt-xxs: 10px; + --txt-xs: 12px; + --txt-small: 13px; + --txt-normal: 14px; + --txt-medium: 16px; + --txt-large: 18px; + --txt-xl: 24px; + + @media screen and (min-width: 2500px) { + --txt-xxs: 20px; + --txt-xs: 24px; + --txt-small: 26px; + --txt-normal: 28px; + --txt-medium: 32px; + --txt-large: 36px; + --txt-xl: 48px; + } +} diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss index e69de29..d87d2c7 100644 --- a/src/settings/styles/global/_reset.scss +++ b/src/settings/styles/global/_reset.scss @@ -0,0 +1,22 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; +} + +li, +ol, +ul { + list-style: none; +} + +img { + display: block; + + max-width: 100%; + height: auto; +} diff --git a/src/settings/styles/index.scss b/src/settings/styles/index.scss index e69de29..8862798 100644 --- a/src/settings/styles/index.scss +++ b/src/settings/styles/index.scss @@ -0,0 +1,2 @@ +@import './global/exports.scss'; +@import './utils/exports.scss'; diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss index 0fb0027..026d749 100644 --- a/src/settings/styles/utils/exports.scss +++ b/src/settings/styles/utils/exports.scss @@ -1,4 +1,4 @@ -@import './resources/colors.scss'; -@import './resources/fonts.scss'; +@import './resources/colors'; +@import './resources/fonts'; @import './helpers/mixin'; @import './helpers/functions'; diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss new file mode 100644 index 0000000..f4a7497 --- /dev/null +++ b/src/settings/styles/utils/resources/_colors.scss @@ -0,0 +1,24 @@ +$clr-common: ( + 'black': #000, + 'white': #fff, + 'red': #ff0000, + 'green': hsl(120, 100%, 25%), +); + +$clr-primary-purple: ( + '500': #5200ff, +); + +$clr-gray: ( + '100': hsl(0, 0%, 98%), + '200': hsl(0, 0%, 95%), + '300': hsl(0, 0%, 78%), + '400': hsl(0, 0%, 77%), + '450': hsl(0, 1%, 72%), + '500': hsl(0, 0%, 57%), + '600': hsl(0, 0%, 49%), + '700': hsl(0, 0%, 37%), + '800': hsl(0, 0%, 19%), + '900': hsl(0, 0%, 16%), + '1000': hsl(340, 10%, 6%), +); diff --git a/src/settings/styles/utils/resources/_fonts.scss b/src/settings/styles/utils/resources/_fonts.scss new file mode 100644 index 0000000..b8774db --- /dev/null +++ b/src/settings/styles/utils/resources/_fonts.scss @@ -0,0 +1 @@ +$font-family-100: 'Roboto', Arial, Helvetica, sans-serif; diff --git a/src/settings/styles/utils/resources/colors.scss b/src/settings/styles/utils/resources/colors.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/settings/styles/utils/resources/fonts.scss b/src/settings/styles/utils/resources/fonts.scss deleted file mode 100644 index e69de29..0000000 From f2d7c3a5c7f7175a4b16276775f1b7c423938e08 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 17:56:35 -0300 Subject: [PATCH 06/50] feat(header): created mobile menu for medium, small devices --- src/assets/icons/hamburger.svg | 5 + src/assets/icons/minicart.svg | 5 + src/assets/icons/search.svg | 10 + src/assets/icons/x.svg | 4 + src/assets/m3-logo-medium.png | Bin 0 -> 6356 bytes src/assets/m3-logo-small.png | Bin 0 -> 3001 bytes src/settings/styles/global/_config.scss | 7 + src/settings/styles/global/_reset.scss | 11 + .../styles/utils/resources/_colors.scss | 25 +-- src/template/Header/Header.styles.scss | 0 src/template/Header/Header.tsx | 3 - src/template/Header/index.module.scss | 196 ++++++++++++++++++ src/template/Header/index.ts | 1 - src/template/Header/index.tsx | 96 +++++++++ 14 files changed, 347 insertions(+), 16 deletions(-) create mode 100644 src/assets/icons/hamburger.svg create mode 100644 src/assets/icons/minicart.svg create mode 100644 src/assets/icons/search.svg create mode 100644 src/assets/icons/x.svg create mode 100644 src/assets/m3-logo-medium.png create mode 100644 src/assets/m3-logo-small.png delete mode 100644 src/template/Header/Header.styles.scss delete mode 100644 src/template/Header/Header.tsx create mode 100644 src/template/Header/index.module.scss delete mode 100644 src/template/Header/index.ts create mode 100644 src/template/Header/index.tsx diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/icons/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/minicart.svg b/src/assets/icons/minicart.svg new file mode 100644 index 0000000..7db5dc8 --- /dev/null +++ b/src/assets/icons/minicart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..e6e5a9c --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/icons/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/m3-logo-medium.png b/src/assets/m3-logo-medium.png new file mode 100644 index 0000000000000000000000000000000000000000..ea2bd14a1766e9c492f121a608aa9a41b67ae8bb GIT binary patch literal 6356 zcmV;_7%S(AP)mFK~#7F?Oh3& zRmGJ)ucZ+XRQ6pPR770R5h7?1jK*X@84wplR7P~7ju|is<9sfkOp+0Y#BpVa!6@Pu zkf2c!LR2(ik0Of!LBSSei5M0E*{S?LRgb>!_N}^gUq2ce?*DzKU%yw|t?ksQb57M2 zNs;0pLMe4TXpM@-XAGAV2OUL{B1MW6F{ma<@sVmGo28>`9Jvw`@P2%2 z3pz?tq)2hZ!OkcasJb#+MnYQXg>OeoiWDi1SVS|5KdUzKjf};AXQ$$PiWDizGm6=& zJ($B}{MSTMq)3rM!sgK#svelc>yk2w6e&^!P$p4KRW-miM&ZAfQc0)-Hr2EkMw3jg z;e@-Lz4)_XugF)syt9+GwWRf8rCMh)ndMRdD5YrKX)W3e+!Vy`eAG>#wV=;IpP;Hdmi%sLJAB;rMpO7&?%r2P;>L0b^AML8R%osN|e7hCa>D~ zXkiInj`TZ2@!5`NiLNipW&f-KEdVV>{BI=w+1W3ri|%`t&ELKREdhOqJk|%|(*e!4 zkncs@rIHZHlkN>Amf+pU^V2d$QA_>H;R;B`pzK0aRnO+cC3#J?=o{+~fNfG!mJ zq}aiHXClpO_Iv#1ZpAd)3%pjnjnC02<3sTT(lo=zouI2lGomPL zL_BV5{|9-0Bo%~VejP=(AM4lH5uNS#0n&`e=d&n(qb1(AL6avb0z_8}wI#{%)lRcDB15cx1n zrr~5{hhFO_rwDX6{(V#QK+4BmjjPHF$Y*$X0GcxB@A3qQtJz7CA1I0Z7wAWD&SykAH01MvhW?p5_LBaXvTiqxC-h`faz z`^y`!8N}}FXguPj2mN2Fd>VGV?}f@?)qWv*6{)E7#`Hr#4Uz8; zvU_J!#%R!WQW&4v?}El4->Xo@hF}1G`)|>8$p@5fMuIL)lE_T5he7qE;`kv5BXr+5 z@x_CpbsPH7wus%Y)HW}A@C z;(93zlL+EQ&|9K)Bm~7&ijpoS!RBXOsOaNhqr`BGBmTu8ZWTuD&p@ev5xqsJ2q;-l zpX4PoqD)FhoMdrKg8Bf~jU$5n>hdTajC>cOpPrU@bOT)>`GI{t6trC`W>w_Yg0eW3 zmS;wU*E4Zm7eBZd_1jrpSO&Ybd-3;Y5(7@;w@$-os=yHE=)4QNt6#1uJC<=2hVx)F z+kFsRj|+6?HZ;W$=;24K6>p4eC30({$RJul+N082$~_adC;0f0M1vjjs_1>@pMuI! zq&q|O>e55(xC3cMnD|*Gl#3zF13k;KL|Z#JdH)G?tLQ;$Ykjs7pNB0-4S#J*Jgzd7 zXvT2g8K?`H1@#$^I-ZY;wEAoV#HY37UC=pV2iuAaYyt?fciNk4_d-UqAs_K2Y8fU?9bc-`MjzBouz&YQZA|q-R<86+5s%vb9x-*}y%*ygd5kjgzOUke(WdH0lu=u0y@wB|EUqcheceyF z`(YXAe9$IK_;RHsWhW4)ouiDEDlqnoAWfVdmti|pr*mM9qL0Hk2zHmj%6rdB{XL9{ zSbusT{9c4_4}{miROn~Uo({lg{|3=AGPfa%+v}~2500;uNnw4#fqF-i+T z`#p6FHzJR9j`S>tz8WJPQ978W+3u}P8tGUWI7h%)#rcY$8?%wt0aI&-(hPx^`g_v zOur)J14me6rM3Pp6Y!%bYpTS6PDIFyb)i``PO*2c*u~><$m@CW02RI{^T+s?{T}WQ zG9&tctZ-yOMt&di`N~lSB?0QZX!){9qYs1~w<5s4rUfoa3gol1U%9R867?7&`wnxy zBNiBGp{FI73*U3$0%H|Pjf!&@)rH$MlgQ%ZZ*s#+cWNfF|ND;I{AwCT_0*SIxw&G8 zwuofuo4~qSA46zp3$4p=p`V|jDY9Yc?FgdR-YgKErXI=odk}I3wW(X_yv0d-xg-5A z;=K0)&&d_&x1u{TOq^^@OuVl_RM1TUjWH{fFE%;CI94te`^08j{8Bt&9J>DK5%qep zm*-k}qd+NUwk52mxbX?-HHin~+1io6$1-iS4HqC6(}Hbr-(b(Mh2BfvIyIRC=d7 zs@w?jz-4}hP44R&NnvpjsEs9zEkgyKO=_c@>@sONr38tddC6|7V^xGvK+YLp5+mlt|hxLxIYG(Um8$VFWNIW3S@k?#iN(ycTVon;U77GX=W)A2lmGJ?NqB)obx@d z--5YS&uEWI3N8DR;ZJJ}nd<^OGnz_Q?}~l~roTDPc{dki6wZ~`XpG4Kx`{SBQYs*G z$maqdmuF-tCce*L$Qy>iab=>allUBp&ihtHGoOaV`p{THl-q-% zF{z-V@`jEqg=7+u1fx^yz9^9hDeU+m)NZ;g0x44sEy#B7#)t=XMhj-sZU`@E!wr|8YcI~=G5 zFLlIo30N+->BKO80HZ~p;!N5yY-Mg8-iV2JAnKFPxrY>G;2hpy3Hwg)i_uMe&k}cv z&DW-yTm>pYZ%e$EP1DET=Uh}{-Muh}s9`NdmUCk8`W|m@dKNz|{V##*x zSJA&dbqylJ5WWG^_3|Ym-$kA^GG&$%3MX5@Ko%p-q>Z_z(ja|Gi5i(yK; zRgaeV0nScft>`F2ozCYV-lwqGxEIrJpv01Pt0Uk1YG4PQeR{>jA%kNNQi;mCP@(#n zXePn^J`aJpPIXcWYHA5ftoK0MvF&Tcl*dsJwbD}x{Jj(w1;1G5K*PAz^Q_Mu5y9Qr z#@wQq@6=J*q)eM+vY(TW#yT;8K2TASs7!o%ou(+zXJXuXO;O+yG`3JVla0zeLIowmU`QsIwtUP>-QfKq!an`5_MWD^HY$X9aZ;)Iq*% zzT55rVZT~U^_oj}&dkMsqooSq1PIhG!a!FqKVg;j>r(z>oKd=1;*m-4Y{)=*8CHNv z5Ofi@&At_8}rjL4j2D2aZbr_@S?=`?NugPV|O*Ft^Y+f5ul?@R^i5T`?iTi?)?9m zi0jM3FpclByL>8kB_AEJzAXuW@~#5C5+-q#tjtf%f0M_4cAc~MXRU1P#2 zGB2})(MKhjar`iax##prOK@+~FJ$CrS>lWm2g(>lr+qHVSA$t3)?8Nx+F-l!_G$Wn zS_SZW;GoONj(Afu{`YNizuv|XPHE(QOBlt(e^ZuIqZaVKiCz)ZJdg6DaBfWa+m0|! z+Wz7R<0U)5BdYD}2=yD+NkX7p9@aZWMcfWn#leGdQHvYfnP-tGbwzz`*7t zPP&Iy;^Eq2@~1R$jVlfqC`DY?Db$}CpOm<=*#5k!$!F{3I`qXuaNbgdu?+FN45jC- z<~a4cpl3isrD}spcH4v}1GgRK8xgl1Ek9X0XS8C|-yi*efu~X*fvW2bsLond{H2D& zLyjjdXQyuB0i`cHz0D&kO{lh8r|H(pyDGYgyDXmN7~_g!`JGJcEQx_xUGEpSq?N@Z zjxgR@^}2H0ePQ$pye#P^@c{KIVmI4zwH%8){@ zwQ}6j%>5pShrxK=SnL2b_Y^$oh{8!lT?1FgCc&);{;va~t1>4_J4<@zzrYg4y(uqt zwO%J+wg5D({-^kXNAO)MP&W`Srn!Rd@Je6C!dtVJ!d**h9mJ1G2 zp0=YBl-_RKG9*#lagcJ4X!HD}Nc?}IFKAhWva|PDQUMj`491B|@qDu7nfT0;ktdb3 zWNwtE*t#X69ddYg!l~j9o(13)g7-M$(3-*3jZSIw)8Gi=d5)7p&&X$CyEpc_56A70y8;KhvNa;7ZY z1HD6L#Zsjvl^R5$^O~vle6a{W+?n3@wB7a`U(#;Z&(#TLlSshH& zncF{zW*)_seD=9r1AK4F1ronaYboxx&+%@@pNsoQbQati(P7ATAuRi+qr~(@1nBEB zP!0poQis0b-J$HmxTUt-1vNH!t%y`2^7iffk?mAiwBIp@wCILS4@+NRqdFvpV=*+F zV+fuMhHyqreeHjX>iQ`80RUI%2OJiRR}J-!$)`x{%Fp4VSFPB=iRV~@PGnhJ+1p9Q zLFLs=WD@2(r4c&K#NEzeJCslDH=TCKe2QHe7{Zst}j zo`~!&g#jg=E6qhQhYL6cD3LaZiT45Oy+R5BbW9&*!R9?meYH!eb)K{yv~`cFEIh1Y z-g0H?*HUS%cRqMfX&u7DmT+E+c6LOW)I&^E6$9TE);1#VUdnwjs||cLVrP?wE&VeQ zf(k99Vqq9!2Z>2{*e2&(ZVBYPz)RC5bO)py8o7vg# z*A(pHBz0&@6kHwn4gl`UCkY};dt3#z8gI0QlX1RVB{Q2iw!%$`3?{H9{^vjbg z?tN25p|n|gnPcwslmzgZ0Q4a*l|utu9q2SwD%$o-vn5x<1LAgWxPC0>KLF)&wJW%H zYy}U4RVjE}hkv+(_hs6oky6ppU5XSbj#L<_@fC+O@f%5zBE^vnFoK^bH@Zqfq*suo zNKu7>N&i#P$MAWb0XJ;DDN-C60F!72+HItSJ<4qk&EiT)ks`&B15En< zDjA+sm2AOFks`%G1}6RZ1Wbb7vvnjziWElP WcNdb-P%|$80000q@8?RipcYFYvlLRMwb+Y6=b98 z4rQ1R+=mU-bxK->lw2cibjeXdLEcfL@c#`cMvoR#iZ;6BNh`<()fbAf5~*(TA*mw{ zpJ;?9h&DE->vI)B-TW`&UoYi9f0$u&4m>F zQNw>VkZ#7QK%4U^+Hjg&BU-~c;8?0LJncDF7a-G;vC84e#v?n(qrTjfXW`Myv^@hH zMV)fmQZB9?=XMe(BM&IYVvC{dY!dm{cL%GeGEF$?h%Azipd3RmjU6LI3Pcn>H7)}ij}K!&GXKVS}$JAn_(^L=0o%JYHi z9R4ie4kZ5s><0D#{{!|5UlpaE1-g31xe1SjhJUw_@xNwH8IpofKN$EWl3UH3b{QGp zMfuNxUKaZVU`GIM8t@sU-!$VEnf8l=xlsXtCz0G{ArC{-WV?t4|eQh7VW zeG$(cxmX?JLYX(wUckPOwjH@;9L{!N`Si!KVPTc0P!Z;>;v+waV7yL zlkmpPoV>Rfq{jotRB9>$ZZ-Uqow{)<`5e~+y?{TfG{AG)e>pg@D zGSA)2yh5c4AW{rduLV|DDD?(V7uT&epzg*(&6^Izd0?+nr(=4h7N5ZDw5hRzymG2x z;96j!B~-eZL_q9@%Cdmn0maUQpEB)6I}1nA_5*JLA2@AFfq}piPC2AiuL5(84E0tW z)Lf-0ZJ~}h?aF}dzv;rW%5pW#uCY^4=7pdwwf5edg~Y&6SW2Jy?SDO5lSDop-JtyYeihqMxr z4q%yv?`W(X5ny*^NWgq4{J1=whnaf7(98J5ybRbhHb z=>-gkN058`%yrs~0bX>C~?V3a$KlkAjSL`u&lv*`%uN&FqVU`kH8$$^8^NMLe_(>ro0{$sKHqA0 z#w?=U<2+9rzWpmL9=;vd0k;E>0lA(wdA5L6RaLW;-q?WfI$U%#-FD-hxluuKEg89j zUl9+Xe7e<+)@F*+*AG2ymRa@O)X#Z%N-UoJD*VE5*M>O!-?Qqu!`)d9CsjiJKo%V1 zOq5i{;U?E9IbJJL6W7l2F8JGLaj&>guX(e<_j$NYg9|lYIxccO{NQOl!op6vhW$2L zn+N%iw-aC=unKqqsI!FTCd2KO8?AP<5@SRfwp@QrytiaSEVlw_gnnyF{k59M6tXFF^z#iO=2IFbzRk^_0IJ*g5tqA46Zgt zGuu4R)hBq;!Si%a@sYjh!8MMzi{Zc^psxY1h3;EB(n=r4WJ-Jkpu8B5VrQH*GX`%4 ze2e;-ajq5TCKruHdy9l#pdFH&wgA1Y{0J+}72r+G*N&^!-pUVh>V4N}yQ8@H!3xK8s0_aaz6fObSnLcG zEZeC+C&}rQlka4uY4vWB=1~V}1)`pA2?01b?&inevxG%etby0)D5oYB6tsdG9?)Wrhk?sl!L<4ncEB@ z8{SrI?kK12J|J*183*X(iw>IOBnV_>Om#+D@DbL9> zXgAKJsd&?yiUu1QCQIuPgMsu#zGU)`U_1uwY$x{*c7rq-1*b474#NUX-` zesgMLxkBlH+3294tgI{_i};qU9EQ3(`7KtOO7M{Q=|!N*z`p6wI{gCUlse(+K6c~k z>god$UYD;b>k1wa%IHtI%CpW&(~i0d6twLC4CAdqC692n2${M5#VVo#e?byH9(}pD z?KV2>Jt{(zJ_+yDdHI+$4kzyh*rL4DhMzWRxe>U*rR@T88L?ZuE}jS9 zaHk#5)rZAT{BD!!@N+Gu*=3cLmAsj(v5M#%&rso52F>+C&lrCdeYB8hA?Fxgcg*jL zb|ASX7mRGJNxV%3X8;vdK*y`?1_!qJhnQlRp>XUOaDHFD)c60HTVx8LX*XkAjG zQp|=Rf%)dQm%B{*Nh})8@jp%eHef1nz0(IBD|+CwMGwahdyGsj6@8^7|2HME*t8)0 z_VR6$r?dJB_@5Q+hYU6R_t}HQVlgUjzA5Kg(c=9KxD##vE!rpfni-D^+i=^${Ax`M zBlryr=g4m_lw-f)rQ+NE2A#t*(u&0ED`Z%K4sG25v z?|kb!s>Tsdml)cw2{Hu*1y7lAW;G!r!`%z4y!|a^fodKxvda&aZX|VpyGJSfAB=L>PPckOYcHcJymhpq!qgL5P1u^Zoc@L}PAJQ02 z{IW712l4Cyypx2N(Mg7~LkeQrG1|+GEBCZxw6>EU!$awIJ<}lIboPH6bo@dPh1Q+Hw%8Hz} zys7Y}!=r+{H1`~<$d1e!UiuFVVlgg3pNGG<_?HQ)v7Ww6ur9peR5&tz8sMfO5FlGo zUufz+C5fwUEz0*g<7OH8=+H9OOn;A`=HIn%V9s1gdwE;^zrEp>(wA6Ee~}AAZN-RE_=*Q3e}Jm!~U-00000NkvXXu0mjft^%)1 literal 0 HcmV?d00001 diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index 307b882..f9fc811 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -38,3 +38,10 @@ body { --txt-xl: 48px; } } + +a, +input, +button, +textarea { + font-family: var(--font-family-100); +} diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss index d87d2c7..b7ae335 100644 --- a/src/settings/styles/global/_reset.scss +++ b/src/settings/styles/global/_reset.scss @@ -20,3 +20,14 @@ img { max-width: 100%; height: auto; } + +input, +button { + border: none; + background-color: transparent; +} + +.btn-ref, +button { + cursor: pointer; +} diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss index f4a7497..3268516 100644 --- a/src/settings/styles/utils/resources/_colors.scss +++ b/src/settings/styles/utils/resources/_colors.scss @@ -2,7 +2,7 @@ $clr-common: ( 'black': #000, 'white': #fff, 'red': #ff0000, - 'green': hsl(120, 100%, 25%), + 'green': #008000, ); $clr-primary-purple: ( @@ -10,15 +10,16 @@ $clr-primary-purple: ( ); $clr-gray: ( - '100': hsl(0, 0%, 98%), - '200': hsl(0, 0%, 95%), - '300': hsl(0, 0%, 78%), - '400': hsl(0, 0%, 77%), - '450': hsl(0, 1%, 72%), - '500': hsl(0, 0%, 57%), - '600': hsl(0, 0%, 49%), - '700': hsl(0, 0%, 37%), - '800': hsl(0, 0%, 19%), - '900': hsl(0, 0%, 16%), - '1000': hsl(340, 10%, 6%), + '100': #fafafa, + '150': #f0f0f0, + '200': #f2f2f2, + '300': #c7c7c7, + '400': #c4c4c4, + '450': #b8b7b7, + '500': #919191, + '600': #7d7d7d, + '700': #5e5e5e, + '800': #303030, + '900': #292929, + '1000': #110e0f, ); diff --git a/src/template/Header/Header.styles.scss b/src/template/Header/Header.styles.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/template/Header/Header.tsx b/src/template/Header/Header.tsx deleted file mode 100644 index a5d0ee4..0000000 --- a/src/template/Header/Header.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Header() { - return
Hi, I'm Header
-} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss new file mode 100644 index 0000000..b7ffa68 --- /dev/null +++ b/src/template/Header/index.module.scss @@ -0,0 +1,196 @@ +.header { + position: relative; + + padding: 25px 0; + background-color: var(--clr-common-black); + + @media screen and (min-width: 1025px) { + padding: 25px 0 0; + } +} + +.content { + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0 16px; + margin-bottom: 27.14px; +} + +.search { + display: flex; + align-items: center; + justify-content: center; + + min-height: auto; + height: 36px; + border: 2px solid var(--clr-gray-150); + border-radius: 5px; + + background-color: var(--clr-common-white); + + input { + width: 100%; + height: 36px; + padding: 0 9px 0 16px; + border-radius: 5px 0 0 5px; + } + + button { + display: flex; + align-items: center; + justify-content: center; + + width: 36px; + height: 100%; + + background-color: var(--clr-common-white); + } +} + +.actions-top, +.actions-bottom { + display: flex; + align-items: center; + + a { + color: var(--clr-common-white); + } +} + +// remove open menu mobile button for large devices 1025 > x +.open { + display: flex; + + @media screen and (min-width: 1025px) { + display: none; + } +} + +// remove action link for small devices and added for large devices 1025 > x +.actions-top { + a { + display: none; + } + + @media screen and (min-width: 1025px) { + a { + display: block; + } + } +} + +.menu { + @media screen and (max-width: 1024px) { + position: fixed; + width: 100vw; + height: 100vh; + left: -100%; + top: 0; + background-color: transparent; + transition: 300ms ease; + + &-content { + width: 90%; + height: 100vh; + } + } + + .actions-bottom { + width: 100%; + height: 78px; + background-color: var(--clr-common-black); + } + + .actions-bottom, + .list { + padding: 0 16px; + + a { + display: block; + text-transform: uppercase; + } + } + + .list { + height: calc(100% - 78px); + background-color: var(--clr-common-white); + padding-top: 31px; + + a { + margin-bottom: 12px; + font-weight: 500; + color: var(--clr-gray-400); + } + } +} + +.actions-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +// menu styles for large devices 1025 > x +.menu { + &.active { + left: 0; + background-color: #0004; + } + + @media screen and (min-width: 1025px) { + width: 100%; + display: block; + + .list { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 55px; + + padding: 14px 16px; + border-top: 1px solid var(--clr-common-white); + + background-color: var(--clr-common-black); + + a { + color: var(--clr-common-white); + margin: 0; + } + } + + background-color: var(--clr-common-black); + + .actions-bottom { + display: none; + } + } +} + +/*|[X]o-o-o-o[O]|*\ +|=| SEARCH BOXS |=| +\*|[O]o-o-o-o[X]|*/ + +//remove search top box for small, medium devices +.search-top { + display: none; + + @media screen and (min-width: 1025px) { + display: flex; + } +} + +// added search bottom box for small devices, medium devices +.search-bottom { + display: flex; + padding: 0 16px; + + &-content { + width: 100%; + } + + @media screen and (min-width: 1025px) { + display: none; + } +} diff --git a/src/template/Header/index.ts b/src/template/Header/index.ts deleted file mode 100644 index e0e2673..0000000 --- a/src/template/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Header } from './Header' diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx new file mode 100644 index 0000000..02b442c --- /dev/null +++ b/src/template/Header/index.tsx @@ -0,0 +1,96 @@ +import logoImg from '../../assets/m3-logo-small.png' +import searchIcon from '../../assets/icons/search.svg' +import cartIcon from '../../assets/icons/minicart.svg' +import openIcon from '../../assets/icons/hamburger.svg' +import closeIcon from '../../assets/icons/x.svg' + +import css from './index.module.scss' +import { HTMLAttributes, useMemo, useState } from 'react' + +interface SearchProps extends HTMLAttributes {} + +export function Search({ ...props }: SearchProps) { + return ( +
+ + +
+ ) +} + +export const Header = () => { + const [isOpenMenu, setIsOpenMenu] = useState(false) + + const handleOpen = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(true) + }, + [] + ) + + const handleClose = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(false) + }, + [] + ) + + return ( +
+ +
+ ) +} From d2d9b25774ea657ce2cb808c1899455df12a4641 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 23:51:19 -0300 Subject: [PATCH 07/50] feat(header): created styles for large devices --- .../styles/utils/helpers/_functions.scss | 7 ++ src/template/Header/index.module.scss | 93 ++++++++++++++++++- src/template/Header/index.tsx | 5 + 3 files changed, 100 insertions(+), 5 deletions(-) diff --git a/src/settings/styles/utils/helpers/_functions.scss b/src/settings/styles/utils/helpers/_functions.scss index e69de29..751a46d 100644 --- a/src/settings/styles/utils/helpers/_functions.scss +++ b/src/settings/styles/utils/helpers/_functions.scss @@ -0,0 +1,7 @@ +@function fluid($width, $design-width) { + $width: calc($width / $design-width * 100); + + $width: quote($width + '%'); + + @return unquote($width); +} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index b7ffa68..bf19016 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -1,5 +1,9 @@ +@use '../../settings/styles/utils/helpers/functions' as function; + .header { - position: relative; + position: sticky; + top: 0; + left: 0; padding: 25px 0; background-color: var(--clr-common-black); @@ -7,6 +11,10 @@ @media screen and (min-width: 1025px) { padding: 25px 0 0; } + + @media screen and (min-width: 2500px) { + min-height: 162px; + } } .content { @@ -16,6 +24,27 @@ padding: 0 16px; margin-bottom: 27.14px; + + @media screen and (min-width: 1025px) { + width: #{function.fluid(1080px, 1280px)}; + padding: 0; + margin: 0 auto 27.14px; + } + + @media screen and (min-width: 2500px) { + width: #{function.fluid(2299.68px, 2500px)}; + margin-bottom: 22px; + } +} + +.logo { + @media screen and (min-width: 1025px) { + width: function.fluid(136px, 1080px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(265.62px, 2299.68px); + } } .search { @@ -24,7 +53,7 @@ justify-content: center; min-height: auto; - height: 36px; + min-height: 36px; border: 2px solid var(--clr-gray-150); border-radius: 5px; @@ -32,7 +61,8 @@ input { width: 100%; - height: 36px; + min-height: 36px; + font-size: var(--txt-normal); padding: 0 9px 0 16px; border-radius: 5px 0 0 5px; } @@ -47,6 +77,27 @@ background-color: var(--clr-common-white); } + @media screen and (min-width: 1025px) { + button { + width: 50px; + } + } + + @media screen and (min-width: 2500px) { + &, + input { + min-height: 57px; + } + + button { + width: 56.85px; + + img { + width: 35.15px; + height: 35.15px; + } + } + } } .actions-top, @@ -56,6 +107,18 @@ a { color: var(--clr-common-white); + font-size: var(--txt-normal); + } +} + +.actions-top { + gap: 55px; + + @media screen and (min-width: 2500px) { + img { + width: 54.68px; + height: 54.68px; + } } } @@ -68,7 +131,7 @@ } } -// remove action link for small devices and added for large devices 1025 > x +// remove action top link for small devices and added for large devices 1025 > x .actions-top { a { display: none; @@ -92,7 +155,14 @@ transition: 300ms ease; &-content { - width: 90%; + width: function.fluid(988px, 1024px); + height: 100vh; + } + } + + @media screen and (max-width: 768px) { + &-content { + width: function.fluid(339px, 375px); height: 100vh; } } @@ -120,7 +190,10 @@ a { margin-bottom: 12px; + + font-size: var(--txt-normal); font-weight: 500; + color: var(--clr-gray-400); } } @@ -168,6 +241,16 @@ } } +.search-top { + @media screen and (min-width: 1025px) { + width: function.fluid(264px, 1080px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(515.62px, 2299.68px); + } +} + /*|[X]o-o-o-o[O]|*\ |=| SEARCH BOXS |=| \*|[O]o-o-o-o[X]|*/ diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx index 02b442c..ddce279 100644 --- a/src/template/Header/index.tsx +++ b/src/template/Header/index.tsx @@ -1,4 +1,5 @@ import logoImg from '../../assets/m3-logo-small.png' +import logoMediumImg from '../../assets/m3-logo-medium.png' import searchIcon from '../../assets/icons/search.svg' import cartIcon from '../../assets/icons/minicart.svg' import openIcon from '../../assets/icons/hamburger.svg' @@ -49,6 +50,10 @@ export const Header = () => { + logo da M3 Academy From a1d3fe7bcb8c904edcf9c088ccb428a0eb26fc97 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 28 Dec 2022 00:58:06 -0300 Subject: [PATCH 08/50] feat(header): created small styles for hover details in links --- src/settings/styles/global/_config.scss | 1 + .../styles/utils/resources/_colors.scss | 4 + src/template/Header/index.module.scss | 100 ++++++++++++------ 3 files changed, 73 insertions(+), 32 deletions(-) diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index f9fc811..01079bd 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -7,6 +7,7 @@ } --clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')}; + --clr-primary-blue-500: #{map-get(var.$clr-primary-blue, '500')}; @each $name, $value in var.$clr-gray { --clr-gray-#{$name}: #{$value}; diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss index 3268516..d4ffac0 100644 --- a/src/settings/styles/utils/resources/_colors.scss +++ b/src/settings/styles/utils/resources/_colors.scss @@ -9,6 +9,10 @@ $clr-primary-purple: ( '500': #5200ff, ); +$clr-primary-blue: ( + '500': #00c8ff, +); + $clr-gray: ( '100': #fafafa, '150': #f0f0f0, diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index bf19016..a1abc32 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -6,13 +6,16 @@ left: 0; padding: 25px 0; - background-color: var(--clr-common-black); - @media screen and (min-width: 1025px) { + background-color: var(--clr-common-black); +} + +.header { + @media only screen and (min-width: 1025px) { padding: 25px 0 0; } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { min-height: 162px; } } @@ -22,27 +25,29 @@ align-items: center; justify-content: space-between; - padding: 0 16px; + padding: 0px 16px; margin-bottom: 27.14px; +} - @media screen and (min-width: 1025px) { +.content { + @media only screen and (min-width: 1025px) { width: #{function.fluid(1080px, 1280px)}; padding: 0; margin: 0 auto 27.14px; } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: #{function.fluid(2299.68px, 2500px)}; margin-bottom: 22px; } } .logo { - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { width: function.fluid(136px, 1080px); } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: function.fluid(265.62px, 2299.68px); } } @@ -52,7 +57,6 @@ align-items: center; justify-content: center; - min-height: auto; min-height: 36px; border: 2px solid var(--clr-gray-150); border-radius: 5px; @@ -61,12 +65,15 @@ input { width: 100%; - min-height: 36px; - font-size: var(--txt-normal); padding: 0 9px 0 16px; + min-height: 36px; border-radius: 5px 0 0 5px; - } + font-size: var(--txt-normal); + } +} + +.search { button { display: flex; align-items: center; @@ -77,13 +84,16 @@ background-color: var(--clr-common-white); } - @media screen and (min-width: 1025px) { +} + +.search { + @media only screen and (min-width: 1025px) { button { width: 50px; } } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { &, input { min-height: 57px; @@ -106,15 +116,22 @@ align-items: center; a { - color: var(--clr-common-white); + display: block; font-size: var(--txt-normal); + text-transform: uppercase; + color: var(--clr-common-white); + transition: color 200ms linear; + + &:hover { + color: var(--clr-primary-blue-500); + } } } .actions-top { gap: 55px; - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { img { width: 54.68px; height: 54.68px; @@ -126,7 +143,7 @@ .open { display: flex; - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: none; } } @@ -137,7 +154,7 @@ display: none; } - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { a { display: block; } @@ -145,12 +162,14 @@ } .menu { - @media screen and (max-width: 1024px) { + @media only screen and (max-width: 1024px) { position: fixed; - width: 100vw; - height: 100vh; left: -100%; top: 0; + + width: 100vw; + height: 100vh; + background-color: transparent; transition: 300ms ease; @@ -159,40 +178,52 @@ height: 100vh; } } +} - @media screen and (max-width: 768px) { +.menu { + @media only screen and (max-width: 768px) { &-content { width: function.fluid(339px, 375px); height: 100vh; } } +} +.menu { .actions-bottom { width: 100%; height: 78px; + background-color: var(--clr-common-black); } - .actions-bottom, .list { padding: 0 16px; a { display: block; text-transform: uppercase; + transition: color 200ms linear; + + &:hover { + color: var(--clr-primary-blue-500); + } } } +} +.menu { .list { height: calc(100% - 78px); - background-color: var(--clr-common-white); padding-top: 31px; + background-color: var(--clr-common-white); + a { margin-bottom: 12px; - font-size: var(--txt-normal); font-weight: 500; + font-size: var(--txt-normal); color: var(--clr-gray-400); } @@ -205,17 +236,22 @@ justify-content: space-between; } -// menu styles for large devices 1025 > x +// styles for menu is active + .menu { &.active { left: 0; background-color: #0004; } +} - @media screen and (min-width: 1025px) { - width: 100%; +// menu styles for large devices 1025 > x +.menu { + @media only screen and (min-width: 1025px) { display: block; + width: 100%; + .list { display: flex; align-items: center; @@ -242,11 +278,11 @@ } .search-top { - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { width: function.fluid(264px, 1080px); } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: function.fluid(515.62px, 2299.68px); } } @@ -259,7 +295,7 @@ .search-top { display: none; - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: flex; } } @@ -273,7 +309,7 @@ width: 100%; } - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: none; } } From 3a1dbd8d8f01fb97c55004e54fc21207eb6bb8ef Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 28 Dec 2022 01:06:24 -0300 Subject: [PATCH 09/50] fix(header): header action container styles resolved --- src/template/Header/index.module.scss | 1 + src/template/Header/index.tsx | 24 +++++++++++++++++------- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index a1abc32..3c01102 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -234,6 +234,7 @@ display: flex; align-items: center; justify-content: space-between; + padding: 0 16px; } // styles for menu is active diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx index ddce279..85f97d3 100644 --- a/src/template/Header/index.tsx +++ b/src/template/Header/index.tsx @@ -44,16 +44,18 @@ export const Header = () => {
) From 3852a14f852b99b5645395b9697bed9362c02e8a Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sun, 1 Jan 2023 20:33:43 -0300 Subject: [PATCH 34/50] refactor(footer): moved order in styles --- src/template/Footer/index.module.scss | 38 ++++++++++++++++----------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/src/template/Footer/index.module.scss b/src/template/Footer/index.module.scss index fb96ecb..d6b3277 100644 --- a/src/template/Footer/index.module.scss +++ b/src/template/Footer/index.module.scss @@ -15,21 +15,26 @@ } .container-top { - display: flex; - align-items: flex-start; - flex-direction: column; - padding-top: 17px; padding-bottom: 24px; + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 12px; + @media only screen and (min-width: 1025px) { + width: function.fluid(1080px, 1280px); + padding-top: 50px; + padding-bottom: 50px; + + margin: 0 auto; + display: flex; - flex-direction: row; align-items: flex-start; justify-content: space-between; - - width: function.fluid(1080px, 1280px); - margin: 0 auto; + flex-direction: row; + gap: 0px; } @media only screen and (min-width: 2500px) { @@ -98,23 +103,23 @@ .accordion { display: flex; align-items: flex-start; - flex-direction: column; justify-content: center; + flex-direction: column; } // moved container bottom actions footer for large, medium devices .container-bottom { .actions-bottom { + width: 100%; + height: 100%; + padding: 15px 0; + display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 15px; - width: 100%; - height: 100%; - padding: 15px 0; - @media only screen and (min-width: 1025px) { flex-direction: row; justify-content: space-between; @@ -133,6 +138,7 @@ .lists { width: 100%; + display: flex; align-items: stretch; flex-direction: column; @@ -167,11 +173,11 @@ } @media only screen and (min-width: 1025px) { + width: function.fluid(707px, 1080px); + flex-direction: row; justify-content: space-between; - width: function.fluid(707px, 1080px); - & > li { width: function.fluid(155px, 707px); } @@ -292,7 +298,7 @@ } } -// control view components order +// control view order components .container-bottom { .phrase { order: 2; From 5ccc4c9b2b975696799417034ff586fb898a7c70 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sun, 1 Jan 2023 23:28:03 -0300 Subject: [PATCH 35/50] feat(newsletter): created initial styles for medium, small devices --- src/routes/index.tsx | 2 + src/template/Footer/index.tsx | 1 - src/template/Newsletter/index.module.scss | 72 +++++++++++++++++++++++ src/template/Newsletter/index.tsx | 36 ++++++++++++ 4 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 src/template/Newsletter/index.module.scss create mode 100644 src/template/Newsletter/index.tsx diff --git a/src/routes/index.tsx b/src/routes/index.tsx index e73492d..e5e88c3 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -5,6 +5,7 @@ import { About } from '../pages/Institutional/About' import { Contact } from '../pages/Institutional/Contact' import { Footer } from '../template/Footer' import { Header } from '../template/Header' +import { Newsletter } from '../template/Newsletter' import { Sidebar } from '../template/Sidebar' import css from './index.module.scss' @@ -25,6 +26,7 @@ export function Router() {
+