[Fix #62] Refactor CSS classes

kbss-cvut · Nov 5, 2021 · 730bfd6 · 730bfd6
1 parent 97dd0c8
commit 730bfd6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -136,10 +136,10 @@ const Answer = (props) => {
     const label = JsonldUtils.getLocalized(question[Constants.RDFS_LABEL], options.intl);
 
     return (
-        <>
+        <div className="question-header">
           {label}
           {props.icons}
-        </>
+        </div>
     );
   }
 

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -149,7 +149,7 @@ export default class Question extends React.Component {
       return (
           <Accordion defaultActiveKey={!this.state.expanded ? label : undefined}>
             <Card className="mb-3">
-              <Accordion.Toggle as={Card.Header} onClick={this._toggleCollapse} className={headerClassName}>
+              <Accordion.Toggle as={Card.Header} onClick={this._toggleCollapse} className={headerClassName + " question-header"}>
                     <h6 className="d-inline" id={question['@id']}>
                       {collapsible && this._renderCollapseToggle()}
                       {label}

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -170,10 +170,19 @@ input:disabled {
   background-color: #e6f9fb;
 }
 
+.question-header {
+  display: flex;
+  align-items: center;
+}
+
+.question-header h6 {
+  margin: 0;
+}
+
 .icon-list-items {
   display: flex;
   padding-left: 0;
-  margin: auto;
+  margin: 0;
 }
 
 .icon-list-item {