feat: update save button ui

This commit is contained in:
swve 2023-01-11 23:30:13 +01:00
parent b7ef575d83
commit af8542069f
2 changed files with 12 additions and 9 deletions

View file

@ -18,6 +18,7 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "./Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react";
interface Editor {
content: string;
@ -97,7 +98,7 @@ function Editor(props: Editor) {
{" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
</EditorInfoDocName>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save</EditorSaveButton>
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save <Save size={12}/></EditorSaveButton>
</EditorInfoWrapper>
<EditorButtonsWrapper>
<ToolbarButtons editor={editor} />
@ -213,24 +214,29 @@ const EditorInfoDocName = styled.div`
const EditorSaveButton = styled.div`
display: flex;
border-radius: 6px;
border-radius: 8px;
padding: 5px;
font-size: 12px;
margin-right: 5px;
margin-left: 7px;
background: rgba(176, 176, 176, 0.145);
background: #ffffff8d;
color: #5252528d;
border: solid 1px #52525257;
align-items: center;
justify-content: space-between;
width: 53px;
&.is-active {
background: rgba(176, 176, 176, 0.5);
&:hover {
background: rgba(139, 139, 139, 0.5);
background: rgba(31, 31, 31, 0.5);
cursor: pointer;
}
}
&:hover {
background: rgba(217, 217, 217, 0.48);
cursor: pointer;
}
`;