[ENG-335] Fix the styling bug (#164)

* fix the styling bug

* edit some old styling

Author: trangdoan982

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -65,7 +65,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
         </div>
 
         <div>
-          <h4 className="border-modifier-border mb-3 mt-4 border-b pb-1">
+          <h4 className="dg-h4 border-modifier-border mb-3 mt-4 border-b pb-1">
             Relationships
           </h4>
           <RelationshipSection key={activeFile.path} activeFile={activeFile} />
@@ -76,7 +76,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
 
   return (
     <div>
-      <h3>Discourse Context</h3>
+      <h3 className="dg-h3">Discourse Context</h3>
       {renderContent()}
     </div>
   );

apps/obsidian/src/components/NodeTypeSettings.tsx

@@ -127,8 +127,10 @@ const NodeTypeSettings = () => {
   };
 
   return (
-    <div className="discourse-node-types">
-      <h3>Node Types</h3>
+    <div>
+      <div className="discourse-graph">
+        <h3 className="dg-h3">Node Types</h3>
+      </div>
       {nodeTypes.map((nodeType, index) => (
         <div key={index} className="setting-item">
           <div className="flex w-full flex-col">

apps/obsidian/src/components/RelationshipSettings.tsx

@@ -125,7 +125,9 @@ const RelationshipSettings = () => {
 
   return (
     <div className="discourse-relations">
-      <h3>Node Type Relations</h3>
+      <div className="discourse-graph">
+        <h3 className="dg-h3">Node Type Relations</h3>
+      </div>
 
       {plugin.settings.nodeTypes.length === 0 ? (
         <div>You need to create some node types first.</div>

apps/obsidian/src/components/RelationshipTypeSettings.tsx

@@ -103,7 +103,7 @@ const RelationshipTypeSettings = () => {
 
   return (
     <div className="discourse-relation-types">
-      <h3>Relation Types</h3>
+      <h3 className="dg-h3">Relation Types</h3>
       {relationTypes.map((relationType, index) => (
         <div key={index} className="setting-item">
           <div className="flex w-full flex-col">

apps/obsidian/src/components/SampleModal.tsx

@@ -12,10 +12,10 @@ const Settings = () => {
   const [activeTab, setActiveTab] = useState("nodeTypes");
 
   return (
-    <div className="flex flex-col gap-2">
-      <h2>Discourse Graph Settings</h2>
+    <div className="flex flex-col">
+      <h2 className="dg-h2">Discourse Graph Settings</h2>
 
-      <div className="border-modifier-border mb-5 border-b p-2">
+      <div className="border-modifier-border border-b p-2">
         <button
           onClick={() => setActiveTab("nodeTypes")}
           className={`discourse-tab mr-2 cursor-pointer border-0 px-4 py-2 ${

apps/obsidian/src/components/Settings.tsx

@@ -1,22 +1,19 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
-@layer base {
-  h1 {
-    @apply text-3xl font-bold mb-4;
-  }
-  h2 {
-    @apply text-2xl font-bold mb-3;
-  }
-  h3 {
-    @apply text-xl font-semibold mb-2;
-  }
-  h4 {
-    @apply text-lg font-bold mb-2;
-  }
-}
 .accent-border-bottom {
   border-bottom: 2px solid var(--interactive-accent) !important;
-}
+}
+
+.dg-h1 {
+  @apply text-3xl font-bold mb-4;
+}
+.dg-h2 {
+  @apply text-2xl font-bold mb-3;
+}
+.dg-h3 {
+  @apply text-xl font-semibold mb-2;
+}
+.dg-h4 {
+  @apply text-lg font-bold mb-2;
+}