From f865631dceab9c3caadfaff87f6050c20221705c Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Mon, 30 Mar 2020 14:12:00 -0700
Subject: [PATCH] opa gatekeeper layout

---
 assets/styles/base/_typography.scss |  8 +++++
 components/GatekeeperConfig.vue     | 53 ++++++++++++++++-------------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss
index 8a4b8f4b14..466952da3d 100644
--- a/assets/styles/base/_typography.scss
+++ b/assets/styles/base/_typography.scss
@@ -46,3 +46,11 @@ P {
   letter-spacing: 0em;
   margin: 0;
 }
+
+MAIN {
+  UL {
+    LI {
+      margin-bottom: 1.4em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/GatekeeperConfig.vue b/components/GatekeeperConfig.vue
index c14ea38728..13c8cb8cd5 100644
--- a/components/GatekeeperConfig.vue
+++ b/components/GatekeeperConfig.vue
@@ -371,16 +371,35 @@ export default {
       </InfoBox>
     </div>
     <div v-else class="mt-20 mb-20">
-      <article class="col span-12 info">
-        <p>
-          OPA Gatekeeper provides first-class integration between OPA (Open Policy Agent) and Kubernetes. For more information, visit the <a href="https://www.openpolicyagent.org/docs/latest/kubernetes-introduction/" target="blank">OPA documentation.</a>
-        </p>
-      </article>
-      <div class="row action-group">
-        <div class="col">
-          <h4 class="mb-20">
-            Enable Gatekeeper <span v-if="appVersion">({{ appVersion }}) </span>with defaults.
-          </h4>
+      <div class="row">
+        <div class="col span-6">
+          <h3>Description</h3>
+          <ul>
+            <li>OPA Gatekeeper provides first-class integration between OPA (Open Policy Agent) and Kubernetes.</li> 
+            <li>You can Customize Gatekeeper’s yaml configuartion or Enable Gatekeeper with defaults.</li>
+            <li>For more information, visit the <a href="https://www.openpolicyagent.org/docs/latest/kubernetes-introduction/" target="blank">OPA documentation.</a></li>
+          </ul>
+        </div>
+        <div class="col span-6">
+          <h3>Requirements</h3>
+          <ul>
+            <li>XXXX CPU Cores</li>
+            <li>XXXX Gb of  Memory </li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <div class="spacer"></div>  
+        <div class="text-center">
+          <button
+            type="button"
+            class="btn role-secondary"
+            :class="{ disabled: saving }"
+            :disable="saving"
+            @click="openYamlEditor"
+          >
+            Customize
+          </button>
           <AsyncButton
             :mode="mode"
             action-label="Enable"
@@ -392,20 +411,6 @@ export default {
             @click="enable"
           />
         </div>
-        <div class="col">
-          <h4 class="mb-20">
-            Customize Gatekeeper yaml configuartion.
-          </h4>
-          <button
-            type="button"
-            class="btn bg-primary"
-            :class="{ disabled: saving }"
-            :disable="saving"
-            @click="openYamlEditor"
-          >
-            Customize Configuration
-          </button>
-        </div>
       </div>
     </div>
     <section v-if="showYamlEditor">