25-update-contributingmd

.github/CONTRIBUTING.md

@@ -40,28 +40,26 @@ These are the folders you want to look out for:
 
 ``` txt
 .
-├── src
-│   └── extension.ts    // Backend of the extension
-    ├── App.svelte      // The webpanel containing TS and the UI
-    └── styles
-        └── style.css   // CSS of the application
+└── src
+    ├── extension         
+    │   └── extension.ts   // Backend of the extension
+    ├── App.svelte         // The main webpanel
+    ├── ui                 // Folder containing all UI Svelte Components
+    └── app.css            // File containing all CSS
 ```
 
-Fork the repo, then run these commands:
+> Although there is a CSS file, try using Tailwind for any elements in `App.svelte`
+> If you are changing something in the `ui` folder, update the `CSS` in the `style` tag.
 
-``` cmd
-npm i
-cd webview-ui
-npm i
-cd ..
-```
+Fork the repo, then run `npm install`
 
 After that, make your changes.
 
-To run the extension, run `npm run build:webview` to update the code.
+To run the extension, run `npm run compile` to update the code.
 Then press `F5` to run the extension.
 
-> You must run `npm run build:webview` after making any changes
+> The command `npm run compile` will automatically run whenever you change the frontend or backend code
+> Because of ths, in order to refresh the page you can close the tab and reopen it using `Ctrl-Shift-P` > `Display File Makeup`
 
 Add your changes, additions, or removals to the `Unreleased` section of `CHANGELOG.md`.
 This project follows [this](https://keepachangelog.com/en/1.1.0/) format.

CHANGELOG.md

@@ -21,10 +21,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Changed UI to conform to the VSCode style
+- Moved `styles/style.css` to main `app.css` file
 
 ### Fixed
 
-Fixed type error relating to ChartJS
+- Fixed type error relating to ChartJS
+- Fixed `CONTRIBUTING.md` having incorrect run command
+- Fixed `CONTRIBUTING.md` having incorrect startup command
+- Fixed `CONTRIBUTING.md` folder structure
 
 ## 1.1.1 - 2024-10-9
 

src/App.svelte

@@ -6,8 +6,6 @@
 	import Chart from 'chart.js/auto'
 	import type { ChartTypeRegistry, ChartEvent, ActiveElement } from 'chart.js'
 
-	import './styles/style.css'
-	import "./app.css";
 	import Button from "./ui/Button.svelte";
 	import TextArea from "./ui/TextArea.svelte";
 	import Checkbox from "./ui/Checkbox.svelte";
@@ -16,6 +14,8 @@
 	import Dropdown from "./ui/Dropdown.svelte";
 	import Option from "./ui/Option.svelte";
 
+	import "./app.css";
+
 	let cwd = "";                               // The current working directory the user is in. Is set on runtime.
 	let directory: Directory;                   // Current Working Directory the user is in represented in class form
 	let fileJSON: FileType[];                   // Data from src/file.json

src/app.css

@@ -9,4 +9,39 @@
     line-height: var(--type-ramp-base-line-height, normal);
     margin-bottom: 2px;
     width: fit-content;
+}
+
+.question {
+    @apply w-3 h-3 rounded-full flex justify-center items-center ml-[10px] bg-gray-500 text-black text-xs select-none
+}
+
+.tooltip-container {
+    position: relative;
+}
+
+.tooltip-container:hover .tooltip-text, .tooltip-hovered .tooltip-text {
+    opacity: 1;
+}
+
+.tooltip-text {
+    font-family: 'Times New Roman', Times, serif;
+
+    @apply opacity-0 w-[200px] py-1 px-2 bg-gray-500 absolute z-10 pointer-events-none transition-opacity select-none bottom-full mb-1 text-sm
+}
+
+.type {
+    @apply bg-[#00335f] text-white cursor-pointer py-[5px] px-[10px] border-2 border-black mb-[7.5px]
+}
+
+.active {
+    @apply bg-[#004e92]
+}
+
+.type-right {
+    border-radius: 0px 20px 20px 0px;
+}
+
+.type-left {
+    border-right: 2px solid black; 
+    border-radius: 20px 0px 0px 20px;
 }