public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Alert component fixed (#9605) 

* fix: Alert Component Fixed

* Update packages/ui/components/alert/Alert.tsx

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/9505/head^2
Anit Jha 2023-06-18 02:27:15 +05:30 committed by GitHub
parent 761dfac033
commit 0f3e0a1554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/ui/components/alert/Alert.tsx
View File

@ -32,7 +32,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
severity === "success" && "bg-inverted text-inverted", severity === "success" && "bg-inverted text-inverted",
severity === "neutral" && "bg-subtle text-default" severity === "neutral" && "bg-subtle text-default"
)}> )}>
<div className="relative flex flex-col md:flex-row"> <div className="relative flex md:flex-row">
{CustomIcon ? ( {CustomIcon ? (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CustomIcon aria-hidden="true" className={classNames("text-default h-5 w-5", iconClassName)} /> <CustomIcon aria-hidden="true" className={classNames("text-default h-5 w-5", iconClassName)} />
@ -71,13 +71,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
)} )}
</div> </div>
)} )}
<div className="flex flex-grow flex-col sm:flex-row">
<div className="ml-3 flex-grow"> <div className="ml-3 ">
<h3 className="text-sm font-medium">{props.title}</h3> <h3 className="text-sm font-medium">{props.title}</h3>
<div className="text-sm">{props.message}</div> <div className="text-sm">{props.message}</div>
</div>
{props.actions && <div className="ml-auto mt-2 text-sm sm:mt-0 md:relative">{props.actions}</div>}
</div> </div>
{/* @TODO: Shouldn't be absolute. This makes it harder to give margin etc. */}
{props.actions && <div className="absolute top-1 right-1 text-sm md:relative">{props.actions}</div>}
</div> </div>
</div> </div>
); );