thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: notch added, but it is svg so its not exactly the best..

Browse Source
This commit is contained in:
Perfect1076 2024-05-23 15:16:48 -06:00
parent b4aeed0ca2
commit b433f5f255
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/icons/Ownship Notch.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="544" height="134" viewBox="0 0 544 134" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_166_2635)">
<path d="M105 0H37L63.7108 67.877C70.3879 84.8447 86.7658 96 105 96V0Z" fill="#323235"/>
<rect x="105" width="334" height="96" fill="#323235"/>
<path d="M439 0H507L480.289 67.877C473.612 84.8447 457.234 96 439 96V0Z" fill="#323235"/>
</g>
<defs>
<filter id="filter0_d_166_2635" x="0.5" y="-35.5" width="543" height="169" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="18.25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_166_2635"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_166_2635" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
src/components/Widget/AcaHeaderWidget.tsx
View File

@ -1,6 +1,7 @@
import type { AcaHeaderWidget as AcaHeaderWidgetType } from 'src/types/widget';
import type { AcaStatusElement as AcaStatusElementType } from 'src/types/element';
import AcaStatusElement from 'src/components/Element/Complex/AcaStatusElement';
import NOTCH from 'src/assets/icons/Ownship Notch.svg';
type AcaHeaderWidgetProps = {
widget: AcaHeaderWidgetType;
@ -28,6 +29,10 @@ const AcaHeaderWidget = ({ widget }: AcaHeaderWidgetProps) => {
element={element as AcaStatusElementType}
/>
))}
<div>
<img src={NOTCH} alt="notch" className="-mt-4" />
</div>
<div className="grow" />
{lastElements.map((element) => (
<AcaStatusElement