refactoring styling

Richardinho · Oct 3, 2023 · 47d2c60 · 47d2c60
1 parent 90c42fa
commit 47d2c60
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 106 deletions.
diff --git a/web/css/diagramMain.css b/web/css/diagramMain.css
diff --git a/web/diagram/banner/editorTemplate.html b/web/diagram/banner/editorTemplate.html
@@ -1,46 +1,51 @@
 <div data-role="bannerEditor-panel" class="bannerEditor__panel">
   <h2 class="bannerEditor--header">Input banner details below:</h2>
-  <label class="label">
-    <span class="label--caption">banner title</span>
+  <div>
+    <label for="banner-title"> banner title </label>
     <input
+      id="banner-title"
       name="title"
       value="<%= title %>"
       class="bannerEditor__text-input"
       type="text"
     />
-  </label>
+  </div>
 
-  <label class="label">
-    <span class="label--caption">author</span>
+  <div>
+    <label for="banner-author"> author </label>
     <input
+      id="banner-author"
       name="author"
       value="<%= author %>"
       class="bannerEditor__text-input"
       type="text"
     />
-  </label>
+  </div>
 
-  <label class="label">
-    <span class="label--caption">creation date</span>
+  <div>
+    <label for="banner-date"> creation date </label>
     <input
+      id="banner-date"
       name="created"
       value="<%= created %>"
       class="bannerEditor__text-input"
       type="text"
     />
-  </label>
+  </div>
 
-  <label class="label--text-area">
-    <span>banner contents</span>
+  <div class="label--text-area">
+    <label for="banner-contents"> banner contents </label>
     <textarea
+      id="banner-contents"
       name="description"
       data-role="contents"
       rows="10"
       class="bannerEditor__textarea"
     >
-<%= description %></textarea
+        <%= description %></textarea
     >
-  </label>
+  </div>
+
   <div class="bannerEditor__buttons">
     <button class="button button--primary" data-role="save">save</button>
     <button class="button button--secondary" data-role="cancel">cancel</button>

diff --git a/web/diagram/types/template.html b/web/diagram/types/template.html
@@ -1,27 +1,25 @@
 <div data-role="typeEditor-panel" class="typeEditor__panel">
-  <div class="typeEditor__header">
-    <h2 class="typeEditor--header">type</h2>
-  </div>
-  <label>
-    Name:
+  <h2 class="typeEditor__header">type</h2>
+  <div class="typeEditor__foo">
+    <label>
+      Name
+    </label>
     <input
       data-role="typeName"
       name="name"
       value="<%= name %>"
       class="text-input"
       type="text"
     />
-  </label>
-
-  <label>
-    Flavor:
+    <label>
+      Flavor
+    </label>
     <select class="typeEditor__select--standalone" name="flavor">
       <option value="abstract">abstract</option>
       <option value="interface">interface</option>
       <option value="class">class</option>
     </select>
-
-  </label>
+  </div>
 
   <div class="typeEditor__property-header">
     <h2>Properties</h2>

diff --git a/web/modalEditor/template.html b/web/modalEditor/template.html
@@ -1,17 +1,14 @@
 <div class="modalEditor">
   <div data-role="editor-panel" class="modalEditor__panel">
-    edit this text and click save to update note
+    <h2>edit this text and click save to update note</h2>
 
     <textarea data-role="contents" rows="10" class="modalEditor__textarea">
 <%=  contents %></textarea
     >
-    <label
-      >width:<input
-        class="modalEditor__width"
-        data-role="width"
-        type="text"
-        value=""
-    /></label>
+
+    <label>width</label>
+    <input class="modalEditor__width" data-role="width" type="text" value="" />
+
     <div class="buttons">
       <button class="button button--primary" data-role="save">save</button>
       <button class="button button--secondary" data-role="cancel">

diff --git a/web/sass/components/_forms.scss b/web/sass/components/_forms.scss
@@ -69,6 +69,15 @@ input {
   height: 20px;
 }
 
+label {
+  font-size: 12px;
+  margin-right: 4px;
+  line-height: 16px;
+  &:after {
+    content: ':';
+  }
+}
+
 table {
   border-collapse: collapse;
   table-layout: fixed;

diff --git a/web/sass/modules/_bannerEditor.scss b/web/sass/modules/_bannerEditor.scss
@@ -17,9 +17,10 @@
 }
 
 .bannerEditor--header {
-  padding: 6px 0;
   font-weight: 700;
-  font-style: italic;
+  padding-bottom: 12px;
+  font-size: 16px;
+  text-transform: capitalize;
   grid-column-start: 1;
   grid-column-end: 3;
 }
@@ -35,12 +36,6 @@
   width: 100%;
 }
 
-.label {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
 .label--text-area {
   grid-row-start: 4;
   grid-column-start: 1;

diff --git a/web/sass/modules/_note.scss b/web/sass/modules/_note.scss
@@ -15,6 +15,7 @@
   resize: none;
   width: 100%;
   padding: 6px;
+  margin: 4px 0;
 }
 
 .modalEditor__delete-button {