tweaked header icons and such to better accomadate japanese text.

frontend/src/lib/components/layout/Section.svelte

@@ -44,33 +44,20 @@
       opacity: 0.6
       margin-right: 0.5ch
       font-size: 1em
-      margin-top: 0.225em
+      margin-top: 0.15em
 
       &:empty
         display: none
 
     div.header
       display: flex
-
-      h2
-        font-size: 1.25em
-        margin: 0
-        color: $color-entry10
-
-        span.sub
-          color: $color-entry5
-
-        &.big
-          margin-top: 1em
-          font-size: 2em
-
-        &.small
-          font-size: 1em
+      line-height: 1.25em
 
       div.right
         color: $color-entry2-transparent
         margin-left: auto
         margin-top: auto
+        margin-bottom: 0
 
         &.noProgress
           margin-top: -0.25em

frontend/src/lib/components/layout/SubSection.svelte

@@ -43,6 +43,7 @@
   div.sub-section
     margin: 0.5em 0.4ch
     padding: 0.33em 0.75ch
+    padding-bottom: 0.25em
     background: $color-entry1-transparent
     border-radius: 0.125em
     border-bottom-right-radius: 0.5em

frontend/src/lib/components/project/ProjectMain.svelte

@@ -5,6 +5,7 @@
   import Option from "$lib/components/layout/Option.svelte";
   import OptionsRow from "$lib/components/layout/OptionsRow.svelte";
   import { getProjectContext } from "../contexts/ProjectContext.svelte";
+  import Icon from "../layout/Icon.svelte";
   import RequirementEntry from "./RequirementSection.svelte";
 
   const {project} = getProjectContext();
@@ -15,9 +16,9 @@
   <Progress alwaysSmooth titlePercentageOnly thinner gray count={$project.totalPlanned} target={$project.totalRequired} />
   <Markdown source={$project.description} />
   <OptionsRow slot="right">
-    <Option open={{name: "requirement.create", project: $project}}>Add Requirement</Option>
-    <Option open={{name: "project.edit", project: $project}}>Edit</Option>
-    <Option open={{name: "project.delete", project: $project}} color="red">Delete</Option>
+    <Option open={{name: "requirement.create", project: $project}}><Icon name="plus" /></Option>
+    <Option open={{name: "project.edit", project: $project}}><Icon name="pen" /></Option>
+    <Option open={{name: "project.delete", project: $project}} color="red"><Icon name="trash" /></Option>
   </OptionsRow>
   {#each $project.requirements as requirement (requirement.id)}
     <RequirementEntry requirement={requirement} />

frontend/src/lib/components/project/RequirementSection.svelte

@@ -9,6 +9,7 @@
   import LabeledProgressRow from "../common/LabeledProgressRow.svelte";
   import { STATUS_ICONS } from "../common/StatusIcon.svelte";
   import ItemEntry from "./ItemSubSection.svelte";
+import Icon from "../layout/Icon.svelte";
 
   export let requirement: Requirement;
 </script>
@@ -18,9 +19,9 @@
   <Progress alwaysSmooth titlePercentageOnly thinner gray count={requirement.totalPlanned} target={requirement.totalRequired} />
   <Markdown source={requirement.description} />
   <OptionsRow slot="right">
-    <Option open={{name: "item.create", requirement}}>Add Item</Option>
-    <Option open={{name: "requirement.edit", requirement}}>Edit</Option>
-    <Option open={{name: "requirement.delete", requirement}} color="red">Delete</Option>
+    <Option open={{name: "item.create", requirement}}><Icon name="plus" /></Option>
+    <Option open={{name: "requirement.edit", requirement}}><Icon name="pen" /></Option>
+    <Option open={{name: "requirement.delete", requirement}} color="red"><Icon name="trash" /></Option>
   </OptionsRow>
   <LabeledProgressRow>
     {#each requirement.stats as stat (stat.id)}