Fix dropdown item spacing and correct remove icon positioning

openshift · Jul 24, 2019 · 317d15e · 317d15e
1 parent 1a63621
commit 317d15e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 33 deletions.
diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss
@@ -93,35 +93,18 @@
   margin-top: 0;
 }
 
-.toleration-modal, .taint-modal {
-  &__field {
-    padding-top: 5px;
-    padding-right: 0;
-  }
-
-  &__delete-icon {
-    height: 29px;
-    margin-top: 7px;
-    @media(max-width: $screen-sm-max) {
-      padding: 0;
-    }
-  }
+.toleration-modal__field, .taint-modal__field  {
+  padding-top: 5px;
+  padding-right: 0;
+}
 
-  &__dropdown {
-    .btn {
-      height: 29px;
-    }
-    li {
-      height: 23px;
-    }
-  }
+.toleration-modal__heading, .taint-modal__heading {
+  margin-bottom: 0;
+}
 
-  .row {
-    margin-bottom: 16px;
-  }
+.toleration-modal__row, .taint-modal__row {
+  margin-bottom: 16px;
   @media(max-width: $screen-sm-max) {
-    .row {
-      margin-bottom: 24px;
-    }
+    margin-bottom: 24px;
   }
 }
diff --git a/frontend/public/components/modals/taints-modal.tsx b/frontend/public/components/modals/taints-modal.tsx
@@ -76,14 +76,14 @@ class TaintsModal extends PromiseComponent<TaintsModalProps, TaintsModalState> {
         {_.isEmpty(taints)
           ? <EmptyBox label="Taints" />
           : <React.Fragment>
-            <div className="row hidden-sm hidden-xs">
+            <div className="row taint-modal__heading hidden-sm hidden-xs">
               <div className="col-sm-4 text-secondary text-uppercase">Key</div>
               <div className="col-sm-3 text-secondary text-uppercase">Value</div>
               <div className="col-sm-4 text-secondary text-uppercase">Effect</div>
               <div className="col-sm-1 co-empty__header"></div>
             </div>
             {_.map(taints, (c, i) =>
-              <div className="row" key={i}>
+              <div className="row taint-modal__row" key={i}>
                 <div className="col-md-4 col-sm-6 col-xs-6 taint-modal__field">
                   <div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
                   <input type="text" className="pf-c-form-control" value={c.key} onChange={(e) => this._change(e, i, 'key')} required />

diff --git a/frontend/public/components/modals/tolerations-modal.tsx b/frontend/public/components/modals/tolerations-modal.tsx
@@ -110,7 +110,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
         {_.isEmpty(tolerations)
           ? <EmptyBox label="Tolerations" />
           : <React.Fragment>
-            <div className="row hidden-sm hidden-xs">
+            <div className="row toleration-modal__heading hidden-sm hidden-xs">
               <div className="col-md-4 text-secondary text-uppercase">Key</div>
               <div className="col-md-2 text-secondary text-uppercase">Operator</div>
               <div className="col-md-3 text-secondary text-uppercase">Value</div>
@@ -119,7 +119,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
             </div>
             {_.map(tolerations, (t, i) => {
               const { key, operator, value, effect = '' } = t;
-              return <div className="row" key={i}>
+              return <div className="row toleration-modal__row" key={i}>
                 <div className="col-md-4 col-sm-5 col-xs-5 toleration-modal__field">
                   <div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
                   <input type="text" className="pf-c-form-control" value={key} onChange={(e) => this._change(e, i, 'key')} readOnly={!this._isEditable(t)} />

diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx
@@ -13,13 +13,13 @@ export const MatchExpressions: React.FC<MatchExpressionsProps> = (props) => {
   const changeValue = (value: string, index: number) => onChangeMatchExpressions(matchExpressions.map((exp, i) => i === index ? _.set(exp, 'value', value) : exp));
 
   return <React.Fragment>
-    <div className="row hidden-sm hidden-xs">
+    <div className="row toleration-modal__heading hidden-sm hidden-xs">
       <div className="col-md-4 text-secondary text-uppercase">Key</div>
       <div className="col-md-2 text-secondary text-uppercase">Operator</div>
       <div className="col-md-3 text-secondary text-uppercase">Value</div>
       <div className="col-md-1"></div>
     </div>
-    { props.matchExpressions.map((expression, i) => <div className="row" key={i}>
+    { props.matchExpressions.map((expression, i) => <div className="row toleration-modal__row" key={i}>
       <div className="col-md-4 col-sm-5 col-xs-5 toleration-modal__field">
         <div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
         <input