feat: custom pages menu - css align tick boxes

olzzon · Oct 22, 2020 · 3bf4d60 · 3bf4d60
1 parent 944c633
commit 3bf4d60
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/client/assets/css/PagesSettings.css b/client/assets/css/PagesSettings.css
@@ -40,7 +40,18 @@
     margin-left: 40px;
     padding: 0px 0;
     line-height: 20px;
-    text-align: center;
+    text-align: right;
+    font-size: 110%;
+}
+
+.pages-settings-tick {
+    color: dimgray;
+    margin: 0;
+    margin-right: 70px;
+    padding: 0px 0;
+    line-height: 20px;
+    text-align: right;
+    align-content: right;
     font-size: 110%;
 }
 
@@ -65,15 +76,14 @@
     right: 9px;
 }
 
-.pages-settings-body > button {
+.pages-settings-body > .button {
     line-height: 20px;
     outline: none;
     border-color: rgb(99, 99, 99);
     background-color: rgb(58, 3, 3);
-    margin-right: 10px;
     margin-top: 15px;
     margin-bottom: 15px;
-    margin-left: 10px;
+    margin-left: 130px;
     border-radius: 7px;
     color: #fff;
     width: 34%;

diff --git a/client/components/PagesSettings.tsx b/client/components/PagesSettings.tsx
@@ -141,13 +141,14 @@ class PagesSettings extends React.PureComponent<
                     return (
                         <div
                             key={index}
-                            className={ClassNames('pages-settings-text', {
+                            className={ClassNames('pages-settings-tick', {
                                 checked: this.props.customPages[
                                     this.state.pageIndex
                                 ].faders.includes(index),
                             })}
                         >
-                            {' Fader ' + (index + 1) + ' : '}
+                            {' Fader ' + (index + 1) + ' - ' + fader.label + ' : '}
+                            {}
                             <input
                                 type="checkbox"
                                 checked={this.props.customPages[
@@ -157,7 +158,7 @@ class PagesSettings extends React.PureComponent<
                                     this.handleAssignFader(index, event)
                                 }
                             />
-                            {fader.label}
+
                         </div>
                     )
                 })}