replace one shot with Button component

kobotoolbox · Jun 22, 2024 · af32588 · af32588
1 parent ed9a73d
commit af32588
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git a/jsapp/js/components/reports/reports.js b/jsapp/js/components/reports/reports.js
@@ -339,7 +339,18 @@ export default class Reports extends React.Component {
     return (
       <bem.FormView__reportButtons>
         <div className='form-view__report-buttons-left'>
-          <PopoverMenu type='custom-reports' triggerLabel={menuLabel}>
+          <PopoverMenu
+            type='custom-reports'
+            triggerLabel={
+              <Button
+                type='frame'
+                color='storm'
+                size='m'
+                label={menuLabel}
+                endIcon='angle-down'
+              />
+            }
+          >
             <bem.PopoverMenu__link
               key='default'
               data-name=''
@@ -380,7 +391,7 @@ export default class Reports extends React.Component {
           <Button
             type='bare'
             color='storm'
-            size='l'
+            size='m'
             startIcon='edit'
             onClick={this.editCustomReport.bind(this)}
             tooltip={t('Edit Report Questions')}
@@ -390,7 +401,7 @@ export default class Reports extends React.Component {
           <Button
             type='bare'
             color='storm'
-            size='l'
+            size='m'
             startIcon='settings'
             onClick={this.toggleReportGraphSettings.bind(this)}
             tooltip={t('Configure Report Style')}
@@ -402,7 +413,7 @@ export default class Reports extends React.Component {
           <Button
             type='bare'
             color='storm'
-            size='l'
+            size='m'
             startIcon='print'
             onClick={launchPrinting}
             tooltip={t('Print')}
@@ -412,7 +423,7 @@ export default class Reports extends React.Component {
           <Button
             type='bare'
             color='storm'
-            size='l'
+            size='m'
             startIcon='expand'
             onClick={this.toggleFullscreen.bind(this)}
             tooltip={t('Toggle fullscreen')}

diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss
@@ -219,23 +219,6 @@
 }
 
 .popover-menu--custom-reports {
-  .popover-menu__toggle {
-    border-radius: 6px;
-    border: 1px solid currentcolor;
-    text-transform: uppercase;
-    padding: 0 12px;
-    line-height: 38px;
-    height: 38px;
-
-    &::after {
-      content: '\25BC';
-      font-size: 10px;
-      margin-left: 5px;
-      display: inline-block;
-      vertical-align: 1px;
-    }
-  }
-
   .popover-menu__content {
     max-height: 500px;
     min-width: 300px;