styling plugin

penpot · May 2, 2024 · b4b61d9 · b4b61d9
1 parent 0d8b0b8
commit b4b61d9
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git a/plugin-src/code.ts b/plugin-src/code.ts
@@ -3,7 +3,7 @@ import { transformDocumentNode } from '@plugin/transformers';
 import { findAllTextNodes } from './findAllTextnodes';
 import { setCustomFontId } from './translators/text/custom';
 
-figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
+figma.showUI(__html__, { themeColors: true, height: 300, width: 400 });
 
 figma.ui.onmessage = message => {
   if (message.type === 'ready') {

diff --git a/ui-src/components/MissingFontsSection.tsx b/ui-src/components/MissingFontsSection.tsx
@@ -10,21 +10,24 @@ export const MissingFontsSection = ({ fonts }: MissingFontsSectionProps) => {
   if (fonts === undefined || !fonts.length) return;
 
   return (
-    <section>
-      <div id="missing-fonts">
-        {fonts.length} missing font
-        {fonts.length > 1 ? 's' : ''}:{' '}
+    <section className="missing-fonts-section">
+      <div className="missing-fonts-header">
+        {fonts.length} missing font{fonts.length > 1 ? 's' : ''}:{' '}
       </div>
-      <small>Ensure fonts are installed in Penpot before exporting.</small>
-      <div id="missing-fonts-list">
-        <ul>
-          {fonts.map(font => (
-            <li key={font}>
-              {font}
-              <input placeholder="Enter font name" {...register(font)} />
-            </li>
-          ))}
-        </ul>
+      <small className="font-install-message">
+        Ensure fonts are installed in Penpot before exporting.
+      </small>
+      <div className="missing-fonts-list">
+        {fonts.map(font => (
+          <div key={font} className="font-input-row">
+            <span className="font-name">{font}</span>
+            <input
+              className="font-id-input"
+              placeholder="Enter Penpot font id"
+              {...register(font)}
+            />
+          </div>
+        ))}
       </div>
     </section>
   );

diff --git a/ui-src/components/PenpotExporter.tsx b/ui-src/components/PenpotExporter.tsx
@@ -61,9 +61,11 @@ export const PenpotExporter = () => {
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(exportPenpot)}>
+      <form className="centered-form" onSubmit={methods.handleSubmit(exportPenpot)}>
         <Loader loading={!pluginReady} />
-        <MissingFontsSection fonts={missingFonts} />
+        <div className="missing-fonts-form-container">
+          <MissingFontsSection fonts={missingFonts} />
+        </div>
         <footer>
           <button type="submit" className="brand" disabled={exporting || !pluginReady}>
             {exporting ? 'Exporting...' : 'Export to Penpot'}

diff --git a/ui-src/main.css b/ui-src/main.css
@@ -123,3 +123,53 @@ ul {
   padding: 0;
   list-style-type: none;
 }
+
+.centered-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.missing-fonts-form-container {
+  width: 100%;
+  margin: 0 auto 10px;
+}
+
+.missing-fonts-section {
+  width: 100%;
+  max-width: 500px; /* Adjust as needed */
+  margin: 0 auto; /* Center the section */
+}
+
+.missing-fonts-list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 90%;
+}
+
+.font-input-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.font-name {
+  flex: 0 0 auto; /* Allow label to shrink */
+  width: 100%;
+  max-width: 30%; /* Adjust as needed */
+  text-align: center; /* Center text */
+  white-space: normal; /* Allow for multiple lines */
+}
+
+.font-id-input {
+  flex: 1; /* Take all available width */
+  width: 70%; /* Ensure inputs have the same width */
+  max-width: 70%; /* Adjust as needed */
+  margin-left: 10px; /* Add margin between input and label */
+  padding: 5px; /* Add padding to input */
+  box-sizing: border-box; /* Include padding and border in width */
+}
+