fix: some styling issues in studio

open-craft · Aug 7, 2024 · 624fe01 · 624fe01
1 parent c11e7c4
commit 624fe01
Show file tree

Hide file tree

Showing 9 changed files with 34,338 additions and 38,563 deletions.
diff --git a/accordion/public/studio-ui.css b/accordion/public/studio-ui.css
diff --git a/accordion/public/studio-ui.js b/accordion/public/studio-ui.js
diff --git a/frontend/src/index.css b/frontend/src/index.css
diff --git a/frontend/src/studio-ui/TinyMceEditor.tsx b/frontend/src/studio-ui/TinyMceEditor.tsx
@@ -4,7 +4,7 @@ import { Editor } from '@tinymce/tinymce-react';
 // TinyMCE so the global var exists
 import 'tinymce/tinymce';
 // DOM model
-import 'tinymce/models/dom/model';
+ import 'tinymce/models/dom/model';
 // Theme
 import 'tinymce/themes/silver';
 // Toolbar icons

diff --git a/frontend/src/studio-ui/editing-page.tsx b/frontend/src/studio-ui/editing-page.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import {
-  Button, FormControl, FormGroup, FormLabel,
-} from '@openedx/paragon';
+import { Button } from '@openedx/paragon';
 import { Plus } from '@openedx/paragon/icons';
 import TinyMceEditor from './TinyMceEditor';
 
@@ -44,22 +42,22 @@ function EditingPage({ panels, setPanels }: EditingPageProps) {
         <div className="d-flex flex-column" style={{ flexGrow: 3 }}>
           {selectedPanel !== null && panels[selectedPanel] && (
           <>
-            <FormGroup>
-              <FormLabel>Title</FormLabel>
-              <FormControl
-                controlClassName="px-2 py-0"
-                size="sm"
+            <div className="mb-2 d-flex flex-column">
+              <label className="mb-2" htmlFor="accordion-title">Title</label>
+              <input
+                id="accordion-title"
+                className="px-2 py-0"
                 value={panels[selectedPanel].title || ''}
                 onChange={(e) => updatePanel(selectedPanel, { title: e.target.value })}
               />
-            </FormGroup>
-            <FormGroup>
-              <FormLabel>Content</FormLabel>
+            </div>
+            <div>
+              <span className="mb-2">Content</span>
               <TinyMceEditor
                 value={panels[selectedPanel].contents}
                 onChange={(val) => updatePanel(selectedPanel, { contents: val })}
               />
-            </FormGroup>
+            </div>
           </>
           )}
         </div>

diff --git a/frontend/src/studio-ui/style.scss b/frontend/src/studio-ui/style.scss
@@ -1,7 +1,7 @@
 @import "../index";
 @import "~@openedx/paragon/scss/core/utilities";
-@import "~@openedx/paragon/src/Form/index.scss";
 @import "~@openedx/paragon/src/ColorPicker/index.scss";
+@import "~@openedx/paragon/src/Form/index.scss";
 
 .xblock-accordion {
     .d-flex {
@@ -19,4 +19,8 @@
     .rounded-0 {
         border-radius: 0;
     }
+
+    label {
+        font-size: 1.6rem;
+    }
 }
diff --git a/frontend/src/studio-ui/styling-page.tsx b/frontend/src/studio-ui/styling-page.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import {
-  ColorPicker, FormControl, FormGroup, FormLabel,
-} from '@openedx/paragon';
+import { ColorPicker } from '@openedx/paragon';
 
 interface StylingPageProps {
   styling: PanelStyling
@@ -40,11 +38,16 @@ export default function StylingPage({
   const updateStyling = (changes: Partial<PanelStyling>) => setStyling({ ...styling, ...changes });
   return (
     <div style={{ maxWidth: '800px' }}>
-      <h3 className="mb-2">Styling of Accordions</h3>
-      <FormGroup className="d-flex align-items-center py-2">
-        <FormLabel isInline>Font size</FormLabel>
-        <FormControl size="sm" controlClassName="px-2 py-0" className="flex-grow-0 p-0" value={styling.fontSize} onChange={(e) => updateStyling({ fontSize: e.target.value })} />
-      </FormGroup>
+      <h3 className="mb-2 h3">Styling of Accordions</h3>
+      <div className="d-flex align-items-center mb-2">
+        <label className="mr-2" htmlFor="font-size-input">Font size</label>
+        <input
+          id="font-size-input"
+          value={styling.fontSize}
+          onChange={(e) => updateStyling({ fontSize: e.target.value })}
+        />
+      </div>
+
       <ColorSelector
         label="Background color"
         help="Background color of accordion titles"

diff --git a/frontend/studio.html b/frontend/studio.html
@@ -10,6 +10,7 @@
             margin: auto;
         }
     </style>
+    <link rel="stylesheet" href="http://studio.local.overhang.io:8001/static/studio/css/studio-main-v1.css"/>
 </head>
 <body>
 <script type="module" src="/src/studio-ui/dev-preview.ts"></script>

diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
@@ -9,6 +9,9 @@ export default defineConfig({
         server: {
             deps: {
                 inline: [
+                    // Paragon icons are exported in a format that
+                    // node can't handle. This will inline the code so the
+                    // tests can run without issue.
                     "@openedx/paragon/icons"
                 ]
             }