Add gatekeeper logo and flavor text

assets/images/opa-logo.svg

@@ -0,0 +1 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.5 16.917c0-4.667-8.75-15.167-9.333-15.75 2.098 9.444 1.837 8.034 2.188 11.05.093.795.132 1.62-.186 2.355-1.457 3.365-6.67 5.26-6.67 5.26l8.166 7S52.5 21 52.5 16.918zm-49 0c0-4.667 8.75-15.167 9.333-15.75-2.098 9.444-1.838 8.034-2.188 11.05-.093.795-.132 1.62.186 2.355 1.457 3.365 6.67 5.26 6.67 5.26l-8.166 7S3.5 21 3.5 16.918z" fill="#BFBFBF"/><path d="M28 12.25c9.144 0 15.784 6.427 18.667 14.583v14s-5.834 2.334-9.334 4.667c-3.5 2.333-8.75 9.333-8.75 9.333H28V12.25z" fill="#566366"/><path d="M28 12.25c-9.144 0-15.784 6.427-18.667 14.583v14s5.834 2.334 9.334 4.667c3.5 2.333 8.75 9.333 8.75 9.333H28V12.25z" fill="#7D9199"/><circle cx="28" cy="26.833" r="2.333" fill="#fff"/></svg>

components/GatekeeperConfig.vue

@@ -263,7 +263,8 @@ export default {
 
 <template>
   <div>
-    <header>
+    <header class="opa-header">
+      <div class="opa-logo"></div>
       <h1>
         OPA + Gatekeeper
       </h1>
@@ -284,33 +285,51 @@ export default {
         Gatekeeper is enabled.
       </h3>
     </div>
-    <div v-else class="row action-group mt-20 mb-20">
-      <div class="col">
-        <AsyncButton
-          :mode="mode"
-          action-label="Enable"
-          waiting-label="Enabling"
-          success-label="Enabled"
-          error-label="Error enabling"
-          :disabled="showYamlEditor"
-          v-bind="$attrs"
-          @click="clicked"
-        />
+    <div v-else class="mt-20 mb-20">
+      <hr />
+      <article class="col span-12 info">
         <p>
-          Enable Gatekeeper <span v-if="appVersion">({{ appVersion }}) </span>with deafults.
+          Every organization has policies. Some are essential to meet governance and legal requirements. Others help ensure adherance to best practices and institutional conventions. Attempting to ensure compliance manually would be error-prone and frustrating. Automating policy enforcement ensures consistency, lowers development latency through immediate feedback, and helps with agility by allowing developers to operate independently without sacrificing compliance.
         </p>
-      </div>
-      <div class="col">
-        <button
-          type="button"
-          class="btn bg-primary"
-          @click="openYamlEditor"
-        >
-          Customize Configuration
-        </button>
         <p>
-          Customize Gatekeeper yaml configuartion.
+          Kubernetes allows decoupling policy decisions from the inner workings of the API Server by means of admission controller webhooks, which are executed whenever a resource is created, updated or deleted. Gatekeeper is a validating (mutating TBA) webhook that enforces CRD-based policies executed by Open Policy Agent, a policy engine for Cloud Native environments hosted by CNCF as an incubation-level project.
         </p>
+        <p>
+          In addition to the admission scenario, Gatekeeper's audit functionality allows administrators to see what resources are currently violating any given policy.
+        </p>
+        <p>
+          Finally, Gatekeeper's engine is designed to be portable, allowing administrators to detect and reject non-compliant commits to an infrastructure-as-code system's source-of-truth, further strengthening compliance efforts and preventing bad state from slowing down the organization.
+        </p>
+      </article>
+      <hr />
+      <div class="row action-group">
+        <div class="col">
+          <AsyncButton
+            :mode="mode"
+            action-label="Enable"
+            waiting-label="Enabling"
+            success-label="Enabled"
+            error-label="Error enabling"
+            :disabled="showYamlEditor"
+            v-bind="$attrs"
+            @click="clicked"
+          />
+          <p>
+            Enable Gatekeeper <span v-if="appVersion">({{ appVersion }}) </span>with deafults.
+          </p>
+        </div>
+        <div class="col">
+          <button
+            type="button"
+            class="btn bg-primary"
+            @click="openYamlEditor"
+          >
+            Customize Configuration
+          </button>
+          <p>
+            Customize Gatekeeper yaml configuartion.
+          </p>
+        </div>
       </div>
     </div>
     <section v-if="showYamlEditor">
@@ -332,6 +351,16 @@ export default {
 </template>
 
 <style lang="scss">
+ article {
+   font-size: .8em;
+   &.info {
+     padding: 10px 0;
+
+     p {
+       padding-bottom: 16px;
+     }
+   }
+ }
  .action-group {
    padding-top: 20px;
    .col {
@@ -342,4 +371,15 @@ export default {
      border-right: 1px solid;
    }
  }
+ .opa-logo {
+   background-color: var(--header-logo);
+   display: inline-block;
+   height: 50px;
+   mask: url("~assets/images/opa-logo.svg") no-repeat center;
+ }
+ .opa-header {
+   display: grid;
+   grid-template-areas: "logo title actions";
+   grid-template-columns: 64px auto min-content;
+ }
 </style>