Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

Why all the SCSS files are imported to every component? - ReactJs [duplicate]

This question already has answers here:
How to load different .css files on different components of a react application?
(4 answers)
Closed 6 months ago.
I have found some strange issue while making my website with React.
I have organized my filesystem into a folder of components-js and components-css with corresponding Text.js and Text.css files to match up.
Below are my Login.js/css and Signup.js/css files.
Login.js
import '../components-css/Login.css';
import Logo from './Logo.js';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import TextInput from './TextInput.js';
function Login(props) {
const [error, setError] = useState(false);
const navigate = useNavigate();
const trigger_error = () => {
console.log(error)
if (error === false) {
setError(true);
}
else {
setError(false);
}
}
const check_login_info = () => {
// TODO: Insert code here to check for username and password match
navigate('/Jobs')
}
return (
<div className='login-card'>
<div className='login-card-image'>
</div>
<div className='login-contents'>
<Logo/>
<div className='login-contents-header'>
Sign In
{error ? <p className='error'>Invalid Login. Please try again.</p>: <></>}
</div>
<TextInput label={'Email'}/>
<TextInput label={'Password'}/>
<input type='button' className='submit' onClick={() => check_login_info()} value='Log In'/>
<div className='bottom_text'>
New to Product? <Link className='sign-up' to='/signup'>Sign Up</Link>
</div>
</div>
</div>
)
};
export default Login;
Login.css
.login-card {
background-color: white;
border-radius: 20px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 90%;
width: 90%;
padding: 0px;
justify-content: center;
align-items: center;
display:flex;
}
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
.login-card {
flex-direction: column-reverse;
}
}
#media (min-width:800px) {
.login-card {
flex-direction: row;
}
}
/* Uncomment for card-style background image */
.login-card-image {
background-image: url('../images/login-background-3.jpg');
height: 100%;
width: 100%;
background-size: cover;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
/* border-radius: 20px; */
}
.login-contents {
display: flex;
padding: 10%;
width: 50%;
flex-direction: column;
/* background-color: red; */
}
#media (min-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
font-size: 30px;
height: 50%;
justify-content: center;
text-align: center;
}
}
#media (max-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
padding-bottom: 0px;
margin-bottom: 0px;
font-size: 20px;
height: 50%;
justify-content: center;
text-align: center;
}
}
.login-contents span {
padding-top: 40px;
}
/* CSS */
.submit {
align-items: center;
background-color: rgb(202, 225, 246);
border-radius: 12px;
box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: inline-flex;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 10%;
margin-left: 25%;
outline: none;
padding: 15px;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
width: 50%;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.submit:hover {
box-shadow: rgb(148, 179, 206) 0 0 0 3px, transparent 0 0 0 0;
}
.submit {
color: black;
text-decoration: none;
}
.bottom_text {
/* background-color: red; */
justify-content: center;
text-align: center;
}
.sign-up {
color: rgb(26, 158, 202);
text-decoration: none;
}
.error {
color: red;
font-size: 20px;
margin: 0px;
margin-top: 30px;
}
Signup.js
import '../components-css/Signup.css'
import Logo from '../components-js/Logo.js';
import TextInput from './TextInput.js';
import Back from '../images/arrow.png';
import {Link} from 'react-router-dom'
function Signup() {
return (
<div className='signup'>
<div className='signup-form-container'>
<div className='signup-form-padding'>
<div className='back'>
<Link to='/'>
<img src={Back} alt='backarrow' width='100%' height='80%'/>
</Link>
</div>
<div className='logo'>
<Logo/>
</div>
<div className='header'>
Create Account
</div>
<div className='form-container'>
<form className='form'>
<TextInput label={'First Name'}/>
<TextInput label={'Last Name'}/>
<TextInput label={'Email'}/>
<TextInput label={'Phone Number'}/>
<TextInput label={'Password'}/>
<TextInput label={'Confirm Password'}/>
</form>
<input className='submit' type='submit' value='Submit'></input>
</div>
</div>
</div>
</div>
);
}
export default Signup;
Signup.css
.signup {
justify-content: center;
height: 100vh;
/* background-color: red; */
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.signup-form-container {
height: 85%;
width: 40%;
margin: auto;
margin-top: 3%;
margin-bottom: 5%;
background-color: white;
border-radius: 50px;
overflow: auto;
}
.signup-form-padding {
height: 90%;
width: 90%;
margin: auto;
margin-top: 5%;
/* background-color: red; */
justify-content: center;
position: relative;
}
.back {
position: absolute;
top: 0px;
}
.back img{
width: 20px;
height: 20px;
}
.logo {
height: 11%;
width: 70%;
margin:auto;
display:flex;
flex-direction: row;
/* background-color: red; */
}
.header {
text-align: center;
font-size: 20px;
margin-bottom: 2%;
}
.form {
width: 60%;
justify-content: center;
margin-bottom: -50px;
}
.form input {
margin-top: 0px;
margin-left: 0px;
}
.submit {
}
When rendering my Signup page, it somehow uses the css from Login.css to show the Submit button. Upon further inspection, it appears the browser is loading ALL of my css files, one by one (in the on the screenshot below). I noticed this by looking at the inspector on the browser itself:
What is happening? I'm not sure why it seems to render all of the styles at once.

This is expected. ESM imports, including CSS via things like webpack are static imports. They will be loaded as soon as the bundle loads, and it doesn't matter if the component you imported it in is loaded or not. Its included because somewhere in your code you import login, as well as signup -- so the CSS imports are resolved in one go.
Css-in-js libs like styled-components do only load the styles if the relevant component is rendered. Static CSS importing is not really css-in-js. Those are globally provided. You might consider those solutions if you want better scoping of styles.
You could also consider CSS modules.

One very easy way to solve this would be to start using Sass and wrap all your CSS for a given page in class names and then within your pages, apply the class name to the outermost div.
To enable Sass support:
npm install sass --save-dev
Then rename your .css files to .scss and update imports.
Login.scss
.login-card {
// all styes specific to login page go here
}
Signup.scss
.signup {
// all styles specific to signup page go here
}

All of my CSS files are being imported into my React JS file, but I didn't import them? [duplicate]

This question already has answers here:
How to load different .css files on different components of a react application?
(4 answers)
Closed 6 months ago.
I have found some strange issue while making my website with React.
I have organized my filesystem into a folder of components-js and components-css with corresponding Text.js and Text.css files to match up.
Below are my Login.js/css and Signup.js/css files.
Login.js
import '../components-css/Login.css';
import Logo from './Logo.js';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import TextInput from './TextInput.js';
function Login(props) {
const [error, setError] = useState(false);
const navigate = useNavigate();
const trigger_error = () => {
console.log(error)
if (error === false) {
setError(true);
}
else {
setError(false);
}
}
const check_login_info = () => {
// TODO: Insert code here to check for username and password match
navigate('/Jobs')
}
return (
<div className='login-card'>
<div className='login-card-image'>
</div>
<div className='login-contents'>
<Logo/>
<div className='login-contents-header'>
Sign In
{error ? <p className='error'>Invalid Login. Please try again.</p>: <></>}
</div>
<TextInput label={'Email'}/>
<TextInput label={'Password'}/>
<input type='button' className='submit' onClick={() => check_login_info()} value='Log In'/>
<div className='bottom_text'>
New to Product? <Link className='sign-up' to='/signup'>Sign Up</Link>
</div>
</div>
</div>
)
};
export default Login;
Login.css
.login-card {
background-color: white;
border-radius: 20px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 90%;
width: 90%;
padding: 0px;
justify-content: center;
align-items: center;
display:flex;
}
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
.login-card {
flex-direction: column-reverse;
}
}
#media (min-width:800px) {
.login-card {
flex-direction: row;
}
}
/* Uncomment for card-style background image */
.login-card-image {
background-image: url('../images/login-background-3.jpg');
height: 100%;
width: 100%;
background-size: cover;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
/* border-radius: 20px; */
}
.login-contents {
display: flex;
padding: 10%;
width: 50%;
flex-direction: column;
/* background-color: red; */
}
#media (min-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
font-size: 30px;
height: 50%;
justify-content: center;
text-align: center;
}
}
#media (max-width:800px) {
.login-contents-header {
margin: 5%;
padding: 5%;
padding-bottom: 0px;
margin-bottom: 0px;
font-size: 20px;
height: 50%;
justify-content: center;
text-align: center;
}
}
.login-contents span {
padding-top: 40px;
}
/* CSS */
.submit {
align-items: center;
background-color: rgb(202, 225, 246);
border-radius: 12px;
box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: inline-flex;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 10%;
margin-left: 25%;
outline: none;
padding: 15px;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
width: 50%;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.submit:hover {
box-shadow: rgb(148, 179, 206) 0 0 0 3px, transparent 0 0 0 0;
}
.submit {
color: black;
text-decoration: none;
}
.bottom_text {
/* background-color: red; */
justify-content: center;
text-align: center;
}
.sign-up {
color: rgb(26, 158, 202);
text-decoration: none;
}
.error {
color: red;
font-size: 20px;
margin: 0px;
margin-top: 30px;
}
Signup.js
import '../components-css/Signup.css'
import Logo from '../components-js/Logo.js';
import TextInput from './TextInput.js';
import Back from '../images/arrow.png';
import {Link} from 'react-router-dom'
function Signup() {
return (
<div className='signup'>
<div className='signup-form-container'>
<div className='signup-form-padding'>
<div className='back'>
<Link to='/'>
<img src={Back} alt='backarrow' width='100%' height='80%'/>
</Link>
</div>
<div className='logo'>
<Logo/>
</div>
<div className='header'>
Create Account
</div>
<div className='form-container'>
<form className='form'>
<TextInput label={'First Name'}/>
<TextInput label={'Last Name'}/>
<TextInput label={'Email'}/>
<TextInput label={'Phone Number'}/>
<TextInput label={'Password'}/>
<TextInput label={'Confirm Password'}/>
</form>
<input className='submit' type='submit' value='Submit'></input>
</div>
</div>
</div>
</div>
);
}
export default Signup;
Signup.css
.signup {
justify-content: center;
height: 100vh;
/* background-color: red; */
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.signup-form-container {
height: 85%;
width: 40%;
margin: auto;
margin-top: 3%;
margin-bottom: 5%;
background-color: white;
border-radius: 50px;
overflow: auto;
}
.signup-form-padding {
height: 90%;
width: 90%;
margin: auto;
margin-top: 5%;
/* background-color: red; */
justify-content: center;
position: relative;
}
.back {
position: absolute;
top: 0px;
}
.back img{
width: 20px;
height: 20px;
}
.logo {
height: 11%;
width: 70%;
margin:auto;
display:flex;
flex-direction: row;
/* background-color: red; */
}
.header {
text-align: center;
font-size: 20px;
margin-bottom: 2%;
}
.form {
width: 60%;
justify-content: center;
margin-bottom: -50px;
}
.form input {
margin-top: 0px;
margin-left: 0px;
}
.submit {
}
When rendering my Signup page, it somehow uses the css from Login.css to show the Submit button. Upon further inspection, it appears the browser is loading ALL of my css files, one by one (in the on the screenshot below). I noticed this by looking at the inspector on the browser itself:
What is happening? I'm not sure why it seems to render all of the styles at once.

This is expected. ESM imports, including CSS via things like webpack are static imports. They will be loaded as soon as the bundle loads, and it doesn't matter if the component you imported it in is loaded or not. Its included because somewhere in your code you import login, as well as signup -- so the CSS imports are resolved in one go.
Css-in-js libs like styled-components do only load the styles if the relevant component is rendered. Static CSS importing is not really css-in-js. Those are globally provided. You might consider those solutions if you want better scoping of styles.
You could also consider CSS modules.

One very easy way to solve this would be to start using Sass and wrap all your CSS for a given page in class names and then within your pages, apply the class name to the outermost div.
To enable Sass support:
npm install sass --save-dev
Then rename your .css files to .scss and update imports.
Login.scss
.login-card {
// all styes specific to login page go here
}
Signup.scss
.signup {
// all styles specific to signup page go here
}

Some pages crashes, get errors: "Uncaught TypeError: mixers is not a function & Warning: Each child in a list should have a unique "key" prop. "

I developed a website using react js. But some pages don't work correctly. For example, the work page has to work like the below. When hovering the image, it has to changed the opacity and show the anchor tags (work page) :
But when I open the website for the first time, the hover effects and anchor tags are not visible. However, they are still clickable. It seems like this when I hover :
Finally, the page crashes after a while when I scroll through other pages and come back. First, elements fade and then disappear. At the end, I only get blank page. I also added how the crush pages look like (the Work and Skills pages):
But, when I refresh the website, it fixes again.
I get these errors:
Work.jsx file:
import React, { useState, useEffect } from 'react';
import { AiFillEye, AiFillGithub } from 'react-icons/ai';
import { motion } from 'framer-motion';
import { AppWrap, MotionWrap } from '../../wrapper';
import { urlFor, client } from '../../client';
import './Work.scss';
function Work() {
const [activeFilter, setActiveFilter] = useState('All');
const [animateCard, setAnimateCard] = useState({ y:0, opacity: 1 });
const [works, setWorks] = useState([]);
const [filterWork, setFilterWork] = useState([]);
useEffect(() => {
const query = '*[_type == "works"]'
client.fetch(query).then((data) => {
setWorks(data);
setFilterWork(data);
})
}, [])
const handleWorkFilter = (item) => {
setActiveFilter(item);
setAnimateCard([{ y:100, opacity:0 }])
setTimeout (() => {
setAnimateCard([{ y:0, opacity: 1}])
if(item === 'All') {
setFilterWork(works)
} else {
setFilterWork(works.filter((work) => work.tags.includes(item)))
}
},500)
}
return (
<>
<h2 className="head-text">MY PROJECTS</h2>
<div className='app__work-filter'>
{['UI/UX', 'REACT JS', 'HTML', 'JAVACRIPT', 'CSS', 'SCSS', 'ALL'].map((item, index) =>
<div
className={`app__work-filter-item app__flex p-text ${activeFilter === item ? "item-active" : ""}`}
key={index}
onClick={() => handleWorkFilter(item)}
>
{item}
</div>
)}
</div>
<motion.div
animate = {animateCard}
transition = {{ duration: 0.5, delayChildren: 0.5 }}
className = 'app__work-portfolio'
>
{filterWork.map((work, index) =>
<div className='app__work-item app__flex' key={index}>
<div className='app__work-img app__flex'>
<img src={urlFor(work.imgUrl)} alt={work.name} />
<motion.div
whileHover={{ opacity: [0,1]}}
transition={{ duration: 0.25, ease: 'easeInOut', staggerChildren: 0.5 }}
className='app__work-hover app__flex'
>
<a href={work.projectLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillEye />
</motion.div>
</a>
<a href={work.codeLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillGithub />
</motion.div>
</a>
</motion.div>
</div>
<div className='app__work-content app__flex'>
<h4 className='bold-text'>{work.title}</h4>
<p className='p-text-dark app__work-desc'>{work.description}</p>
<div className='app__work-tag app__flex'>
<p className='p-text-dark'>{work.tags[0]}</p>
</div>
</div>
</div>
)}
</motion.div>
</>
)
}
export default AppWrap(
MotionWrap(Work, 'app__works'),
'work',
'app__lightbluebg'
);
Work.scss file:
.app__works {
flex: 1;
width: 100%;
flex-direction: column;
}
.app__work-filter {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 4rem 0 2rem;
.app__work-filter-item {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: var(--blue1-color);
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.5rem;
&:hover {
background-color: var(--black-color);
color: #fff;
}
#media screen and (min-width: 2000px) {
padding: 1rem 2rem;
border-radius: 0.85rem;
}
}
.item-active {
background-color: var(--secondary-color);
color: #fff;
}
}
.app__work-portfolio {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.app__work-item{
width: 290px;
flex-direction: column;
margin: 2rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--blue1-color);
color: #000;
cursor: pointer;
transition: all 0.3s ease;
z-index: 0;
&:hover {
box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
#media screen and (min-width: 2000px) {
width: 470px;
padding: 1.25rem;
border-radius: 0.75rem;
}
#media screen and (max-width: 300px) {
width: 100%;
margin: 1rem;
}
}
}
.app__work-img {
width: 100%;
height: 230px;
position: relative;
img {
width: 100%;
height: 100%;
border-radius: 0.5rem;
object-fit: cover;
}
#media screen and (min-width: 2000px) {
height: 350px;
}
}
.app__work-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 0.5rem;
opacity: 0;
transition: all 0.3s ease;
div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
color: white;
margin: 1rem;
font-family: var(--font-base);
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
svg {
width: 50%;
height: 50%;
color: var(--white-color);
}
}
}
.app__work-content {
padding: 0.5rem;
width: 100%;
position: relative;
flex-direction: column;
h4 {
margin-top: 1rem;
line-height: 1.5;
}
.app__work-desc {
margin-top: 10px;
height: 35px;
}
.app__work-tag {
position: absolute;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--blue1-color);
top: -25px;
}
}
Skills.jsx file:
import React, { useState, useEffect } from 'react';
import ReactToolTip from 'react-tooltip';
import { motion } from 'framer-motion';
import { AppWrap, MotionWrap } from '../../wrapper';
import { urlFor, client } from '../../client';
import ReactDOM from "react-dom";
import './Skills.scss';
function Skills() {
const [skills, setSkills] = useState([])
const [experiences, setExperiences] = useState([])
useEffect(() => {
const query = '*[_type == "experiences"]';
const skillsQuery = '*[_type == "skills"]';
client.fetch(skillsQuery).then((data) => {
setSkills(data);
})
client.fetch(query).then((data) => {
setExperiences(data);
})
}, [])
return (
<>
<h2 className="head-text">SKILLS & EXPERIENCE</h2>
<div className='app__skills-container'>
<motion.div className='app__skills-list'>
{skills?.map((skill, index) => (
<motion.div
whileInView={{opacity: [0, 1]}}
transition={{duration: 0.5}}
className='app__skills-item app__flex'
key={skill.name}
>
<div className='app__flex' style={{ backgroundColor: skill.bgColor }}>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className='p-text'>{skill.name}</p>
</motion.div>
))}
</motion.div>
<motion.div className='app__experiences-list'>
{experiences?.map((experience) => (
<motion.div
className='app__experiences-item'
key={experience.year}
>
<div className='app__experiences-year'>
<p className='bold-text'>{experience.year}</p>
</div>
<motion.div
className='app__experiences-works'
>
{experience.works.map((work) => (
<>
<motion.div
whileInView={{opacity: [0, 1]}}
transition={{duration: 0.5}}
className='app__experiences-work-item'
data-tip
data-for={work.name}
key={work.name}
>
<h4 className='bold-text'>{work.name}</h4>
<p className='p-text-dark'>{work.company}</p>
</motion.div>
<ReactToolTip
id = {work.name}
effect = 'solid'
arrowColor = '#fff'
className = 'skills-tooltip'
>
{work.desc}
</ReactToolTip>
</>
))}
</motion.div>
</motion.div>
))}
</motion.div>
</div>
</>
)
}
export default AppWrap(
MotionWrap(Skills, 'app__skills'),
'skills',
'app__darkbluebg'
);
Skills.scss file:
.app__skills {
flex: 1;
width: 100%;
flex-direction: column;
}
.app__skills-container {
width: 100%;
margin-top: 3rem;
display: flex;
flex-direction: row;
#media screen and (max-width: 900px) {
width: 100%;
flex-direction: column;
}
}
.app__skills-list {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin-right: 5rem;
#media screen and (max-width: 900px) {
margin-right: 0;
justify-content: center;
align-items: center;
}
}
.app__skills-item {
flex-direction: column;
text-align: center;
margin: 1rem;
transition: all 0.3s ease-in-out;
div {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: var(--blue1-color);
img {
width: 50%;
height: 50%;
}
&:hover {
box-shadow: 0 0 15px rgba(0,0,0,0.7);
}
}
#media screen and (min-width: 2000px) {
width: 150px;
height: 150px;
}
p {
font-weight: 500;
margin-top: 0.5rem;
}
#media screen and (min-width: 2000px) {
margin: 1rem 2rem;
p {
margin-top: 1rem;
}
}
}
.app__experiences-list {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
#media screen and (max-width: 900px) {
margin-top: 2rem;
}
}
.app__experiences-item {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
margin: 1rem 0;
}
.app__experiences-works {
flex: 1;
.app__experiences-work-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 1rem;
cursor: pointer;
h4 {
font-weight: 500;
}
p {
font-size: 0.8rem;
margin-top: 5px;
}
}
}
.app__experiences-year {
margin-right: 2rem;
p {
font-weight: 800;
}
#media screen and (max-width: 450px) {
margin-right: 1rem;
}
}
.skills-tooltip {
max-width: 300px !important;
background-color: var(--white-color) !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) !important;
border-radius: 5px !important;
padding: 1rem !important;
color: var(--gray-color) !important;
text-align: center !important;
line-height: 1.5 !important;
opacity: 1 !important;
#media screen and (min-width: 2000px) {
font-size: 1.75rem !important;
max-width: 500px !important;
line-height: 2 !important;
}
}
Appwrap.js file:
import { color } from '#mui/system';
import React from 'react';
import { NavigationDots, SocialMedia } from '../components';
const AppWrap = (Component, idName, classNames) => function HOC() {
return (
<div id={idName} className={`app__container ${classNames}`}>
<SocialMedia />
<div className='app__wrapper app__flex'>
<Component />
<div className='copyright'>
<p className='p-text'>#2022 AYGEN</p>
<p className='p-text'>All rights reserved</p>
</div>
</div>
<NavigationDots active={idName} />
</div>
)
}
export default AppWrap;
MotionWrap.js file:
import React from 'react';
import { motion } from 'framer-motion';
const MotionWrap = (Component, classNames) => function HOC() {
return (
<motion.div
whileInView={{ y: [100, 50, 0], opacity: [0, 0, 1] }}
transition={{ duration: 0.5 }}
className={`${classNames} app__flex`}
>
<Component />
</motion.div>
)
}
export default MotionWrap
I hope I can explain this clearly. Thanks in advance!

React CSS - filter: drop-shadow strange behaviour in Safari, mac. Does not work properly

I'm finishing my react application of an todo list which is almost ready, just need to fix bugs in safari, of course.
As you can see in the gif, when you hover the cursor over the browser (it has no hover effects of any kind), the png image has that behaviour that produces that annoying marking.
This does not happen in other browsers, only in safari, my suspicion is that filter: drop-shadow() is not supported in safari, even though can i use says it is. https://caniuse.com/?search=filter%3A%20drop-shadow
On the other hand, the browser is a completely unrelated component to the png image being displayed, so I don't know why the image is displayed like that when hovering.
My image and browser css code is as follows:
image:
.notes-empty-img{
width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
top: 100px;
}
.notes-empty-img img{
filter: drop-shadow(0 0 40px #00c9a7);
max-width: 100%;
object-fit: cover;
}
#media (min-width: 768px) {
.notes-empty-img{
width: 600px;
}
}
search engine
#import url('https://fonts.googleapis.com/css2?family=Blaka&family=Comic+Neue:wght#300;400;700&family=Montserrat:wght#100;300;400;500;600;700;900&family=Permanent+Marker&display=swap');
.search{
width: 100%;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-direction: column;
}
.input-wrapper{
position: relative;
width: 80%;
display: flex;
align-items: center;
}
.search input{
width: 100%;
padding: 1rem;
border-radius: 10px;
outline: none;
border: none;
box-shadow: 0 0 2px black;
background-color: rgb(1, 1, 1, .8);
color: white;
}
.search input::placeholder{
color: rgb(188, 188, 188);
font-family: 'Montserrat', sans-serif;
}
.icon{
font-size: 1.8rem;
cursor: pointer;
}
.search-icon{
color: #585858;
position: absolute;
right: 10px;
}
#media (min-width: 668px) {
.search{
flex-direction: row;
gap: 2.5rem;
width: 90%;
}
.input-wrapper{
width: 40%;
}
}
.boxInput:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(129deg, #845ec2 0%, #00c9a7 100% );
transform: translate3d(0px, 0px, 0) scale(1.05);
filter: blur(8px);
opacity: var(0.7);
transition: opacity 0.3s;
border-radius: inherit;
}
/*
* Prevents issues when the parent creates a
* stacking context. (For example, using the transform
* property )
*/
.boxInput::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
I also share with you the jsx structure of the components
Component Search.js
//import React, { useState } from 'react'
import {MdSearch, MdAdd} from 'react-icons/md'
import '../styles/Search.css'
const Search = ({ handleSearchNote, setShowNote }) => {
// const [showNote, setShowNote] = useState(true)
const handleShowAddNote = () => {
/* By default in css, addnotes has a display none */
if (setShowNote){
let addNote = document.querySelector('.new');
let img_initial = document.querySelector('.notes-empty-img');
if (img_initial != null){
img_initial.style.display='none'
}
addNote.classList.add('wobble-horizontal-top')
addNote.style.display='flex';
document.querySelector('.notes-list').style.display='none';
if (document.querySelector('.pagination') != null){
document.querySelector('.pagination').style.display='none';
}
}
}
return (
<div className='search'>
<div className="input-wrapper boxInput">
<MdSearch
className='icon search-icon'
/>
<input
type="text"
placeholder='What note are you looking for?'
onChange={(event) => handleSearchNote(event.target.value) }
/>
</div>
<div className="btn-wrapper-search boxBTN">
<button
className='btn-addNote'
onClick={handleShowAddNote}>
New Note
</button>
<MdAdd
className='icon add-icon'
/>
</div>
</div>
)
}
export default Search
Component App.js, where the image is rendered
return (
<>
<div className="container">
<Header />
<Search
handleSearchNote={setSearchText}
setShowNote={setShowNote}
/>
{notes.length===0 &&
<div className="notes-empty-img">
<img src={srcImage} alt="paperImg" />
</div>
}
<Pagination
data={filterNotes}
handleAddNote={addNote}
handleDeleteNote={deleteNote}
searchText={searchText}
/>
<Footer />
</div>
</>
)
A small note, the effect of the gradient shadows in the search engine and in the add notes button, is not a box-shadow, it is made with this tool by Álvaro Trigo https://alvarotrigo.com/shadow-gradients/. I don't know if it can generate conflicts in any way.
A greetings and thanks in advance!