Use Tailwind to style the term detail sections

iamlogand · Oct 4, 2023 · 7ca86c7 · 7ca86c7
1 parent c14a6cc
commit 7ca86c7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 25 deletions.
diff --git a/frontend/components/terms/Term.module.css b/frontend/components/terms/Term.module.css
diff --git a/frontend/components/terms/Term_Hrao.tsx b/frontend/components/terms/Term_Hrao.tsx
@@ -1,20 +1,19 @@
 import Image from "next/image"
 
 import HRAOIcon from "@/images/icons/hrao.svg"
-import styles from "./Term.module.css"
 
 // Information about the game term: HRAO
 const HraoTerm = () => {
   return (
-    <div className={styles.termDetail}>
-      <div className={styles.iconAndTitle}>
+    <div className="px-4 py-2 flex flex-col gap-2">
+      <div className="flex items-center gap-2">
         <Image src={HRAOIcon} height={70} width={70} alt={`HRAO Icon`} />
         <h4>
           <b>HRAO</b> - <b>H</b>ighest <b>R</b>anking <b>A</b>vailable <b>O</b>
           fficial
         </h4>
       </div>
-      <div className={styles.textContainer}>
+      <div className="flex flex-col gap-2">
         <p>
           The HRAO is the highest ranking official in Rome. This senator is
           responsible for opening the Senate. The HRAO is typically the

diff --git a/frontend/components/terms/Term_RomeConsul.tsx b/frontend/components/terms/Term_RomeConsul.tsx
@@ -6,14 +6,14 @@ import styles from "./Term.module.css"
 // Information about the game term: Rome Consul
 const RomeConsulTerm = () => {
   return (
-    <div className={styles.termDetail}>
-      <div className={styles.iconAndTitle}>
+    <div className="px-4 py-2 flex flex-col gap-2">
+      <div className="flex items-center gap-2">
         <Image src={RomeConsulIcon} height={70} width={70} alt={`HRAO Icon`} />
         <h4>
           <b>Rome Consul</b>
         </h4>
       </div>
-      <div className={styles.textContainer}>
+      <div className="flex flex-col gap-2">
         <p>
           The Rome Consulship is the second highest ranking office, after the
           Dictator (if there is one).