Small style improvements (#67)

* feat(front): small style improvements;

* feat(front): small style improvements;

dataans/public/css/notes/editor.css

@@ -24,14 +24,15 @@
     gap: 0.2em;
     flex-wrap: wrap;
     flex-grow: 1;
+    width: 100%;
 }
 
 .files-file {
     padding: 0.2em;
-    margin: 0.15em;
     font-size: 0.9em;
     border-radius: 0.2em;
-    background-color: var(--editor-file-background-color);
+    background-color: var(--note-link-color);
+    color: var(--note-inline-background-color);
     display: inline-flex;
     gap: 0.1em;
     justify-content: flex-start;

dataans/public/css/notes/note.css

@@ -55,19 +55,22 @@
 .inline-code {
     font-family: "JetBrains Mono", monospace;
     cursor: pointer;
-    background-color: var(--note-inline-background-color);
-    border: 2px solid var(--note-inline-background-color);
     box-sizing: border-box;
     padding: 0 0.2em 0 0.2em;
     border-radius: 0.2em;
+
+    background-color: var(--note-link-color);
+    color: var(--note-inline-background-color);
 }
 
 .inline-code:hover {
-    border-color: var(--note-link-color);
+    background-color: var(--note-inline-background-color);
+    color: var(--note-text-color);
 }
 
 .inline-code:active {
-    background-color: var(--note-link-color);
+    background-color: var(--note-inline-background-color);
+    color: var(--note-text-color);
 }
 
 .note .quote {
@@ -146,6 +149,37 @@
     align-items: flex-start;
     gap: 0;
     border-radius: 0.2em;
+    position: relative;
+}
+
+.note .note-code-block-meta-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.code-block-tool {
+    background-color: var(--note-link-color);
+    height: 2em;
+    padding: 0.2em;
+    border-radius: 0.2em;
+    border: 1px solid transparent;
+    transition: 0.1s;
+    opacity: 0;
+}
+
+.code-block-tool:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.code-block-tool img {
+    height: 100%;
+    width: auto;
+}
+
+.code-block-tool img:hover {
+    cursor: pointer;
 }
 
 .note .note-code-block .note-code-block-meta {

dataans/src/common/file.rs

@@ -19,7 +19,7 @@ pub fn File(file: File, edit_mode: bool, #[prop(into)] remove_file: Callback<Fil
         <div class="files-file">
             {if edit_mode {
                 view! {
-                    <img alt="" src="/public/icons/cancel.png" class="files-file-cancel" on:click=move |_| remove_file.call(file_data.clone()) />
+                    <img alt="" title="remove file" src="/public/icons/cancel-dark.png" class="files-file-cancel" on:click=move |_| remove_file.call(file_data.clone()) />
                     <img src="/public/icons/file.png" alt="" class="files-file-icon" />
                 }
             } else {
@@ -32,11 +32,11 @@ pub fn File(file: File, edit_mode: bool, #[prop(into)] remove_file: Callback<Fil
                 };
 
                 view! {
-                    <img alt="" src="/public/icons/folder.png" class="files-file-cancel" on:click=reveal_file />
+                    <img alt="" title="open file location" src="/public/icons/folder.png" class="files-file-cancel" on:click=reveal_file />
                     <img src="/public/icons/file.png" alt="" class="files-file-icon" />
                 }
             }}
-            <span on:click=open_file>{file.name.clone()}</span>
+            <span title="click to open the file" on:click=open_file>{file.name.clone()}</span>
         </div>
     }
 }

dataans/src/notes/md_node/code_block.rs

@@ -19,12 +19,17 @@ pub fn CodeBlock(code: String, lang: String) -> impl IntoView {
 
     view! {
         <div class="note-code-block">
-            <div class="note-code-block-meta">
-                <i>{lang}</i>
-                <button on:click=move |_| {
-                    let clipboard = window().navigator().clipboard();
-                    let _ = clipboard.write_text(&code_value);
-                }>"Copy"</button>
+            <div class="note-code-block-meta-container">
+                <button
+                    class="code-block-tool"
+                    title="copy code"
+                    on:click=move |_| {
+                        let clipboard = window().navigator().clipboard();
+                        let _ = clipboard.write_text(&code_value);
+                    }
+                >
+                    <img alt="copy code" src="/public/icons/copy-dark.png" />
+                </button>
             </div>
             <Suspense
                 fallback=move || view! { <span>"Parsing code...."</span> }