refactor: use descriptive class names

js/src/forum/components/Poll.tsx

@@ -9,11 +9,11 @@ import PollImage from './Poll/PollImage';
 export default class IndexPolls extends Component {
   view(): Mithril.Children {
     return (
-      <div className="Index-poll">
-        <div className="PollImage">
+      <div className="Poll">
+        <div className="Poll-image">
           <PollImage />
         </div>
-        <div className="Poll">
+        <div className="Poll-wrapper">
           <PollTitle />
           <PollDescription />
           <form>

js/src/forum/components/Poll/PollDescription.tsx

@@ -5,7 +5,7 @@ export default class PollDescription extends Component {
   view(): Mithril.Children {
     return (
       <>
-        <p>Lorem Ipsum Dolor Sit amet Consectetur Adipiscing Elit Sit</p>
+        <p className="PollOption-description">Lorem Ipsum Dolor Sit amet Consectetur Adipiscing Elit Sit</p>
       </>
     );
   }

js/src/forum/components/Poll/PollOption.tsx

@@ -1,25 +1,23 @@
 import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
+import PollOptionLabel from './PollOptionLabel';
+import PollOptionDescription from './PollOptionDescription';
 
 export default class PollOption extends Component {
   view(): Mithril.Children {
     return (
-      <label className="bbb">
+      <label className="PollOption-tmp">
         <input
           type="radio"
           name="privacy-setting"
           value="Private to Project Members"
-          className="ccc"
+          className="PollOption-input"
           aria-labelledby="privacy-setting-1-label"
           aria-describedby="privacy-setting-1-description"
         />
-        <span className="ddd">
-          <span id="privacy-setting-1-label" className="fff">
-            Private to Project Members test 23
-          </span>
-          <span id="privacy-setting-1-description" className="ggg">
-            Only members of this project would be able to access 3
-          </span>
+        <span className="PollOption-information">
+          <PollOptionLabel />
+          <PollOptionDescription />
         </span>
       </label>
     );

js/src/forum/components/Poll/PollOptionDescription.tsx

@@ -0,0 +1,12 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+
+export default class PollOptionDescription extends Component {
+  view(): Mithril.Children {
+    return (
+      <span id="privacy-setting-1-description" className="PollOption-description">
+        Only members of this project would be able to access 3
+      </span>
+    );
+  }
+}

js/src/forum/components/Poll/PollOptionLabel.tsx

@@ -0,0 +1,12 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+
+export default class PollOptionLabel extends Component {
+  view(): Mithril.Children {
+    return (
+      <span id="privacy-setting-1-label" className="PollOption-label">
+        Private to Project Members test 23
+      </span>
+    );
+  }
+}

js/src/forum/components/Poll/PollOptions.tsx

@@ -6,7 +6,7 @@ import ItemList from 'flarum/common/utils/ItemList';
 
 export default class PollOptions extends Component {
   view(): Mithril.Children {
-    return <div className="aaa">{this.pollOptions().toArray()}</div>;
+    return <div className="Poll-options grid-layout">{this.pollOptions().toArray()}</div>;
   }
 
   pollOptions(): ItemList<Mithril.Children> {
@@ -15,6 +15,8 @@ export default class PollOptions extends Component {
     items.add('test1', <PollOption />);
     items.add('test2', <PollOption />);
     items.add('test3', <PollOption />);
+    items.add('test4', <PollOption />);
+    items.add('test5', <PollOption />);
 
     return items;
   }

js/src/forum/components/Poll/PollSubmitButton.tsx

@@ -5,13 +5,17 @@ import Button from 'flarum/common/components/Button';
 export default class PollSubmitButton extends Component {
   view(): Mithril.Children {
     return (
-      <Button className="Button" type="submit" onclick={() => this.submit()}>
+      <Button className="Button" onclick={() => this.pollButtonSubmit()}>
         Submit
       </Button>
     );
   }
 
-  submit() {
+  /**
+   * Event handler for submit button being clicked
+   */
+
+  pollButtonSubmit() {
     console.log('submitted');
   }
 }

resources/less/forum.less

@@ -398,85 +398,51 @@
   }
 }
 
-.IndexPage-results.sideNavOffset {
-  display: flex;
-  flex-direction: column;
-}
-
-.IndexPage-toolbar {
-  order: 2;
-}
-
-.DiscussionList {
-  order: 3;
+.Poll {
+  // display: flex;
+  // gap: 10px;
 }
 
-.Index-poll {
-  order: 1;
-  margin-bottom: 30px;
-}
+.Poll-options {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 10px;
 
-.aaa {
-  border-radius: 0.375rem;
-}
+  &.grid-layout {
+    grid-template-columns: 1fr 1fr;
+  }
 
-.ba {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
+  &.list-layout {
+    flex-direction: column;
+  }
 }
 
-.bba {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-.bbb {
+.PollOption-tmp {
   display: flex;
   position: relative;
-  padding: 1rem;
-  border-color: #d1d5db;
+  padding: 10px;
+  border-color: var(--poll-option-color);
   border-width: 1px;
   border-style: solid;
+  border-radius: 4px;
   cursor: pointer;
-  margin-top: -1px;
 }
 
-.ccc {
-  margin-top: 0.125rem;
-  flex-shrink: 0;
-  border-color: #d1d5db;
-  width: 1rem;
-  height: 1rem;
-  color: #4f46e5;
-  cursor: pointer;
-}
-
-.ddd {
+.PollOption-information {
   display: flex;
-  margin-left: 0.75rem;
+  margin-left: 10px;
   flex-direction: column;
 }
 
-.fff {
+.PollOption-label {
   display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
+  font-weight: 600;
 }
 
-.ggg {
+.PollOption-description {
   display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
 }
 
-.Index-poll {
-  display: flex;
-  gap: 15px;
-
-  .PollImage {
-  }
-
-  .Poll {
-    flex-grow: 1;
-  }
+.PollOption-tmp:has(.PollOption-input:checked) {
+  border-color: var(--poll-option-active-color);
 }