refactor: remove wrong css classes and add necessary ones

FriendsOfFlarum · Feb 18, 2024 · e78787c · e78787c
1 parent 13001fe
commit e78787c
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 14 deletions.
diff --git a/js/src/forum/components/ComposePollHero.tsx b/js/src/forum/components/ComposePollHero.tsx
@@ -19,7 +19,7 @@ export default class ComposePollHero extends Component {
             <div className="IndexPageHero-controls">
               <LinkButton
                 icon="far fa-edit"
-                className="Button Button--primary IndexPage-newDiscussion GoodiesManagerLink"
+                className="Button Button--secondary IndexPage-newDiscussion GoodiesManagerLink"
                 itemClassName="App-primaryControl"
                 href={app.route('fof_polls_list')}
               >
@@ -28,7 +28,7 @@ export default class ComposePollHero extends Component {
               {poll.exists && (
                 <LinkButton
                   icon="far fa-arrow-up-right-from-square"
-                  className="Button Button--primary IndexPage-newDiscussion GoodiePreviewLink"
+                  className="Button Button--secondary IndexPage-newDiscussion GoodiePreviewLink"
                   itemClassName="App-primaryControl"
                   href={app.route('fof_polls_list', { id: poll.id() })}
                   external={true}

diff --git a/js/src/forum/components/Poll.tsx b/js/src/forum/components/Poll.tsx
@@ -79,7 +79,7 @@ export default class Poll extends Component<PollAttrs, PollState> {
       !!controls.length && (
         <Dropdown
           icon="fas fa-ellipsis-v"
-          className="UserCard-controls App-primaryControl PollListItem-controls"
+          className="PollListItem-controls"
           menuClassName="Dropdown-menu--right"
           buttonClassName="Button Button--icon Button--flat"
           accessibleToggleLabel={t('fof-polls.forum.poll_controls.toggle_dropdown_accessible_label')}

diff --git a/js/src/forum/components/Poll/PollList.js b/js/src/forum/components/Poll/PollList.js
@@ -42,8 +42,8 @@ export default class PollList extends Component {
     const pageSize = state.pageSize;
 
     return (
-      <div className={classList('PollList UserDirectoryList', { 'PollList--searchResults': state.isSearchResults() })}>
-        <ul aria-busy={isLoading} className="PollList-polls UserDirectoryList-users">
+      <div className={classList('PollList', { 'PollList--searchResults': state.isSearchResults() })}>
+        <ul aria-busy={isLoading} className="PollList-polls">
           {state.getPages().map((pg) => {
             return pg.items.map((poll) => (
               <li key={poll.id()} data-id={poll.id()}>

diff --git a/js/src/forum/components/Poll/PollListItem.tsx b/js/src/forum/components/Poll/PollListItem.tsx
@@ -54,7 +54,7 @@ export default class PollListItem<CustomAttrs extends IPollListItemAttrs = IPoll
 
   elementAttrs() {
     return {
-      className: classList('PollListItem User', {
+      className: classList('PollListItem', {
         active: this.active(),
         'PollListItem--hidden': this.attrs.poll.isHidden(),
         Slidable: 'ontouchstart' in window,
@@ -82,7 +82,7 @@ export default class PollListItem<CustomAttrs extends IPollListItemAttrs = IPoll
       !!controls.length && (
         <Dropdown
           icon="fas fa-ellipsis-v"
-          className="UserCard-controls App-primaryControl PollListItem-controls"
+          className="UserCard-controls PollListItem-controls"
           menuClassName="Dropdown-menu--right"
           buttonClassName="Button Button--icon Button--flat"
           accessibleToggleLabel={t('fof-polls.forum.poll_controls.toggle_dropdown_accessible_label')}

diff --git a/js/src/forum/components/Poll/PollResult.tsx b/js/src/forum/components/Poll/PollResult.tsx
@@ -10,12 +10,12 @@ export default class PollResults extends Component {
       <label className="PollResult">
         <PollOptionInput id={1} isResult={true} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollResult-information">
-          <div className="PollResults-row">
+          <div className="PollResult-row">
             <PollOptionLabel text="Poll Option Label" />
             <PollResultsNumber number={64} />
           </div>
 
-          <input type="range" min="0" max="100" value="64" step="1" className="PollResult-input" />
+          <progress type="range" min="0" max="100" value="64" className="PollResult-bar" />
         </span>
       </label>
     );

diff --git a/js/src/forum/components/PollForm.js b/js/src/forum/components/PollForm.js
@@ -70,7 +70,7 @@ export default class PollForm extends Component {
           <span>{app.translator.trans('fof-polls.forum.modal.options_label')}</span>
 
           {Button.component({
-            className: 'Button PollModal--button small',
+            className: 'Button PollModal--button Button--icon small',
             icon: 'fas fa-plus',
             onclick: this.addOption.bind(this),
           })}
@@ -96,7 +96,7 @@ export default class PollForm extends Component {
             max={this.formatDate('2038')}
           />
           {Button.component({
-            className: 'Button PollModal--button',
+            className: 'Button PollModal--button Button--icon',
             icon: 'fas fa-times',
             onclick: this.endDate.bind(this, null),
           })}
@@ -219,7 +219,7 @@ export default class PollForm extends Component {
         {i >= 2
           ? Button.component({
               type: 'button',
-              className: 'Button Button--warning PollModal--button',
+              className: 'Button PollModal--button Button--icon',
               icon: 'fas fa-minus',
               onclick: i >= 2 ? this.removeOption.bind(this, i) : '',
             })

diff --git a/js/src/forum/components/PollsPage.tsx b/js/src/forum/components/PollsPage.tsx
@@ -100,7 +100,7 @@ export default class PollsPage extends Page<IPageAttrs, PollListState> {
       'newGlobalPoll',
       <Button
         icon="fas fa-edit"
-        className="Button Button--primary IndexPage-newDiscussion"
+        className="Button Button--primary App-primaryControl PollsPage-newPoll"
         itemClassName="App-primaryControl"
         onclick={() => {
           this.newPollAction();

diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -474,7 +474,7 @@
   flex-direction: column;
 }
 
-.PollResults-row {
+.PollResult-row {
   display: flex;
   flex-grow: 1;
   justify-content: space-between;
@@ -506,3 +506,13 @@
   border-color: var(--poll-option-active-color);
   background: var(--control-bg-shaded);
 }
+
+.PollList .PollList-polls {
+  list-style: none;
+  padding: 0;
+  clear: both;
+}
+
+.PollListItem-controls {
+  float: right;
+}