mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

change header background to halfly opacit white and icon colors to orange, remove header bottom border

Browse source
This commit is contained in:
Niklas 2025-06-14 02:13:38 +02:00 • committed by BlankAccountsUsername
parent a8721fe16a
commit 62376d949e
3 changed files with 14 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
code/frontend/public/assets/icons/close_orange.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.688 40.6363L10.6937 37.642L22.6707 25.665L10.6937 13.688L13.688 10.6938L25.665 22.6708L37.642 10.6938L40.6362 13.688L28.6592 25.665L40.6362 37.642L37.642 40.6363L25.665 28.6593L13.688 40.6363Z" fill="#E79A0E"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 327 B

8
code/frontend/public/assets/icons/menu_orange.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_84_16" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
<rect width="40" height="40" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_84_16)">
<path d="M5 30V26.6667H35V30H5ZM5 21.6667V18.3333H35V21.6667H5ZM5 13.3333V10H35V13.3333H5Z" fill="#E79A0E"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 410 B

6
code/frontend/src/components/header.tsx
View file

@ -15,11 +15,11 @@ function Header() {
return (
<div className="outest-container" >
<header className="base-header">
<div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
<p className="header-title small-title">
<div className="header-icon"> <img src='/assets/icons/feather_orange.svg' alt="featherIcon" /> </div>
<p className="header-title">
Feather Feed
</p>
<div className="header-icon"> {isOpen? <img src='/assets/icons/x.svg' alt="x" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu} />} </div>
<div className="header-icon"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu} />} </div>
</header>
<Menu isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
</div>