#38: add styling to config components

INSO-World · Apr 13, 2022 · 86c6c54 · 86c6c54
1 parent 66f3529
commit 86c6c54
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/ui/src/visualizations/team-awareness/config.js b/ui/src/visualizations/team-awareness/config.js
@@ -7,7 +7,7 @@ import * as d3 from 'd3';
 import { getState } from './util/util';
 import _ from 'lodash';
 import ActivityTimeline from './components/Timeline/ActivityTimeline';
-import styles from './config.scss';
+import styles from './styles.scss';
 
 const mapStateToProps = (appState /*, ownProps*/) => {
   const { config, data } = getState(appState);
@@ -34,23 +34,30 @@ class ConfigComponent extends React.Component {
   }
 
   render() {
-    const { onActivityDimensionsRestricted, onSelectActivityScale } = this.props;
+    const { onActivityDimensionsRestricted, onSelectActivityScale, config } = this.props;
     const { activityTimeline, yDims } = this.props.data;
     return (
       <div className={styles.configContainer}>
-        <div>
-          <div>Activity:</div>
-          <div>
-            <select value={this.props.config.selectedActivityScale} onChange={value => onSelectActivityScale(value)}>
-              <option value="commits">Commits</option>
-              <option value="activity">Additions & Deletions</option>
-              <option value="additions">Additions</option>
-              <option value="deletions">Deletions</option>
-            </select>
+        <form>
+          <div className="field">
+            <label className="label">Activity</label>
+            <div className="control">
+              <div className={'select ' + styles.activitySelect}>
+                <select
+                  className={styles.activitySelect}
+                  value={config.selectedActivityScale}
+                  onChange={value => onSelectActivityScale(value)}>
+                  <option value="commits">Commits</option>
+                  <option value="activity">Additions & Deletions</option>
+                  <option value="additions">Additions</option>
+                  <option value="deletions">Deletions</option>
+                </select>
+              </div>
+            </div>
           </div>
-        </div>
+        </form>
         <div>
-          <div>Timeline</div>
+          <label className="label">Timeline</label>
           <ActivityTimeline
             palette={{ activity: '#00bcd4' }}
             paddings={{ top: 20, left: 25, bottom: 30, right: 30 }}

diff --git a/ui/src/visualizations/team-awareness/config.scss b/ui/src/visualizations/team-awareness/config.scss
diff --git a/ui/src/visualizations/team-awareness/styles.scss b/ui/src/visualizations/team-awareness/styles.scss
@@ -0,0 +1,13 @@
+@import '~bulma';
+
+.configContainer {
+  width: 100%;
+
+  .select {
+    display: block;
+  }
+}
+
+.activitySelect {
+  width:100%;
+}