From 8d859d23b869c47225de68c1b4e97823255ea425 Mon Sep 17 00:00:00 2001
From: Ayinla Abeeb <abeebayinla@gmail.com>
Date: Tue, 25 Jan 2022 17:17:02 +0100
Subject: [PATCH] fix monitor box

---
 dashboard/public/assets/css/newdashboard.css  |  13 +-
 .../src/components/monitor/NewMonitor.js      | 214 ++++++++----------
 2 files changed, 103 insertions(+), 124 deletions(-)

diff --git a/dashboard/public/assets/css/newdashboard.css b/dashboard/public/assets/css/newdashboard.css
index 1b75ad947b..fbc3bf9258 100755
--- a/dashboard/public/assets/css/newdashboard.css
+++ b/dashboard/public/assets/css/newdashboard.css
@@ -10301,8 +10301,17 @@ html.db-NewChrome .bs-ContentSection .bs-Tail--short {
 
 .monitor-type-grid{
     display: grid;
-  grid-template-columns: auto;
-  grid-gap: 20px;
+    grid-template-columns: repeat(2, 350px);
+    grid-template-rows: auto;
+    grid-row-gap: 20px;
+}
+.monitor-description {
+    opacity: 0;
+    transition: all .3s linear;
+}
+
+.monitor-type-grid:hover .monitor-description {
+    opacity: 1;
 }
 
 .price-list-4c {
diff --git a/dashboard/src/components/monitor/NewMonitor.js b/dashboard/src/components/monitor/NewMonitor.js
index 3a03026fb4..68339c3ffa 100755
--- a/dashboard/src/components/monitor/NewMonitor.js
+++ b/dashboard/src/components/monitor/NewMonitor.js
@@ -1094,131 +1094,101 @@ class NewMonitor extends Component {
                                                         <div className="radio-field">
                                                             <span className="flex">
                                                                 <div className="monitor-type-grid">
-                                                                    {monitorTypesOptions
-                                                                        .slice(
-                                                                            0,
-                                                                            this
-                                                                                .state
-                                                                                .showAllMonitors
-                                                                                ? monitorTypesOptions.length
-                                                                                : 4
-                                                                        )
-                                                                        .map(
-                                                                            el => (
-                                                                                <label
-                                                                                    key={
-                                                                                        el.value
-                                                                                    }
-                                                                                    htmlFor={`type_${el.value}`}
-                                                                                    style={{
-                                                                                        cursor:
-                                                                                            'pointer',
-                                                                                    }}
-                                                                                >
-                                                                                    <div
-                                                                                        className={`radio-field monitor-type-item Box-background--white`}
-                                                                                        style={{
-                                                                                            border: `1px solid ${
-                                                                                                this
-                                                                                                    .props
-                                                                                                    .type ===
-                                                                                                el.value
-                                                                                                    ? 'black'
-                                                                                                    : 'rgba(0,0,0,0.2)'
-                                                                                            }`,
-                                                                                        }}
-                                                                                    >
-                                                                                        <div className="radioButtonStyle">
-                                                                                            <Field
-                                                                                                required={
-                                                                                                    true
-                                                                                                }
-                                                                                                component="input"
-                                                                                                type="radio"
-                                                                                                data-testId={`type_${el.value}`}
-                                                                                                id={`type_${el.value}`}
-                                                                                                name={`type_${this.props.index}`}
-                                                                                                className="Margin-left--4 Margin-top--4"
-                                                                                                validate={
-                                                                                                    ValidateField.select
-                                                                                                }
-                                                                                                disabled={
-                                                                                                    requesting
-                                                                                                }
-                                                                                                onChange={(
-                                                                                                    e,
-                                                                                                    v
-                                                                                                ) => {
-                                                                                                    this.changeBox(
-                                                                                                        e,
-                                                                                                        v
-                                                                                                    );
-                                                                                                }}
-                                                                                                value={
-                                                                                                    el.value
-                                                                                                }
-                                                                                            />
-                                                                                        </div>
-                                                                                        <span className="imageAndLabel">
-                                                                                            <img
-                                                                                                alt=""
-                                                                                                src={
-                                                                                                    el.icon
-                                                                                                }
-                                                                                                style={{
-                                                                                                    width:
-                                                                                                        '10%',
-                                                                                                    height:
-                                                                                                        '100%',
-                                                                                                    marginRight:
-                                                                                                        '5%',
-                                                                                                }}
-                                                                                            />
-                                                                                            <span
-                                                                                                className="Text-color--inherit Text-display--inline Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap"
-                                                                                                style={{
-                                                                                                    marginRight:
-                                                                                                        '5%',
-                                                                                                    minWidth:
-                                                                                                        '68px',
-                                                                                                }}
-                                                                                            >
-                                                                                                {
-                                                                                                    el.label
-                                                                                                }
-                                                                                            </span>
-                                                                                            {
-                                                                                                el.description
-                                                                                            }
-                                                                                        </span>
-                                                                                    </div>
-                                                                                </label>
-                                                                            )
-                                                                        )}
-                                                                    {this.state
-                                                                        .showAllMonitors ? null : (
-                                                                        <div className="bs-Fieldset-fields">
-                                                                            <button
-                                                                                className="bs-Button bs-DeprecatedButton db-Trends-editButton bs-Button--icon bs-Button--moreMonitorTypes"
-                                                                                type="button"
-                                                                                data-testId="show_all_monitors"
-                                                                                id="showMoreMonitors"
-                                                                                onClick={() => {
-                                                                                    this.setState(
-                                                                                        {
-                                                                                            showAllMonitors: true,
-                                                                                        }
-                                                                                    );
+                                                                    {monitorTypesOptions.map(
+                                                                        el => (
+                                                                            <label
+                                                                                key={
+                                                                                    el.value
+                                                                                }
+                                                                                htmlFor={`type_${el.value}`}
+                                                                                style={{
+                                                                                    cursor:
+                                                                                        'pointer',
+                                                                                    width:
+                                                                                        '50%',
                                                                                 }}
                                                                             >
-                                                                                <span>
-                                                                                    Show
-                                                                                    more
-                                                                                    monitor
-                                                                                    types
+                                                                                <div
+                                                                                    className={`radio-field monitor-type-item Box-background--white`}
+                                                                                    style={{
+                                                                                        border: `1px solid ${
+                                                                                            this
+                                                                                                .props
+                                                                                                .type ===
+                                                                                            el.value
+                                                                                                ? 'black'
+                                                                                                : 'rgba(0,0,0,0.2)'
+                                                                                        }`,
+                                                                                    }}
+                                                                                >
+                                                                                    <div className="radioButtonStyle">
+                                                                                        <Field
+                                                                                            required={
+                                                                                                true
+                                                                                            }
+                                                                                            component="input"
+                                                                                            type="radio"
+                                                                                            data-testId={`type_${el.value}`}
+                                                                                            id={`type_${el.value}`}
+                                                                                            name={`type_${this.props.index}`}
+                                                                                            className="Margin-left--4 Margin-top--4"
+                                                                                            validate={
+                                                                                                ValidateField.select
+                                                                                            }
+                                                                                            disabled={
+                                                                                                requesting
+                                                                                            }
+                                                                                            onChange={(
+                                                                                                e,
+                                                                                                v
+                                                                                            ) => {
+                                                                                                this.changeBox(
+                                                                                                    e,
+                                                                                                    v
+                                                                                                );
+                                                                                            }}
+                                                                                            value={
+                                                                                                el.value
+                                                                                            }
+                                                                                        />
+                                                                                    </div>
+                                                                                    <span className="imageAndLabel">
+                                                                                        <img
+                                                                                            alt=""
+                                                                                            src={
+                                                                                                el.icon
+                                                                                            }
+                                                                                            style={{
+                                                                                                width:
+                                                                                                    '10%',
+                                                                                                height:
+                                                                                                    '100%',
+                                                                                                marginRight:
+                                                                                                    '5%',
+                                                                                            }}
+                                                                                        />
+                                                                                        <span
+                                                                                            className="Text-color--inherit Text-display--inline Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap"
+                                                                                            style={{
+                                                                                                marginRight:
+                                                                                                    '5%',
+                                                                                                minWidth:
+                                                                                                    '68px',
+                                                                                            }}
+                                                                                        >
+                                                                                            {
+                                                                                                el.label
+                                                                                            }
+                                                                                        </span>
+                                                                                    </span>
+                                                                                </div>
+                                                                                <span className="monitor-description">
+                                                                                    {
+                                                                                        el.description
+                                                                                    }
                                                                                 </span>
-                                                                            </button>
-                                                                        </div>
+                                                                            </label>
+                                                                        )
                                                                     )}
                                                                 </div>
                                                             </span>