rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update InfoCalloutComponent styles and icon for improved UI

Browse source
This commit is contained in:
swve 2025-05-16 16:01:00 +02:00
parent 231b08921a
commit 06fcc88a19
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
View file

@ -1,6 +1,6 @@
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext' import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react' import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
import { AlertCircle, X } from 'lucide-react' import { AlertCircle, Info, X } from 'lucide-react'
import React, { useState } from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
@ -100,11 +100,11 @@ function InfoCalloutComponent(props: any) {
const getVariantClasses = () => { const getVariantClasses = () => {
switch(options.variant) { switch(options.variant) {
case 'filled': case 'filled':
return 'bg-blue-500 text-white'; return 'bg-gray-300 text-gray-700';
case 'outlined': case 'outlined':
return 'bg-transparent border-2 border-blue-500 text-blue-700'; return 'bg-transparent border-2 border-gray-300 text-gray-500';
default: default:
return 'bg-blue-200 text-blue-900'; return 'bg-gray-100 text-gray-600';
} }
} }
@ -119,12 +119,12 @@ function InfoCalloutComponent(props: any) {
return ( return (
<NodeViewWrapper> <NodeViewWrapper>
<InfoCalloutWrapper <InfoCalloutWrapper
className={`flex items-center rounded-lg shadow-inner ${getVariantClasses()} ${getSizeClasses()}`} className={`flex items-center rounded-xl shadow-inner ${getVariantClasses()} ${getSizeClasses()}`}
contentEditable={isEditable} contentEditable={isEditable}
size={options.size} size={options.size}
> >
<IconWrapper size={options.size}> <IconWrapper size={options.size}>
<AlertCircle /> <Info />
</IconWrapper> </IconWrapper>
<ContentWrapper className="grow"> <ContentWrapper className="grow">
<NodeViewContent contentEditable={isEditable} className="content" /> <NodeViewContent contentEditable={isEditable} className="content" />