Merge pull request #141 from contember/fix/permission-matrix

fix: permission matrix colors
contember · Sep 21, 2023 · d4482bf · d4482bf
2 parents 4e8e1cd + bd4dae6
commit d4482bf
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/docs/cloud/permissions.md b/docs/cloud/permissions.md
@@ -44,18 +44,18 @@ It's important to note that the Project Developer and Project Guest roles are di
 
 <div class="acl-table">
 
-|                               | Owner | Admin | Billing               | Developer | Guest | Project Developer | Project Guest |
-|-------------------------------|-----------------------|-------|-----------------------|-----------|-----------------------|-------------------|--------------|
-| View projects                 | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> |
-| View metrics                  |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> |
-| View members                  |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| Manage owner / billing member |<span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| Manage other members          |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-n"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| Create projects               |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-y"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| Start / stop project          |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-y"/> |<span class="acl-n"/> | <span class="acl-y"/> | <span class="acl-n"/> |
-| Edit project settings         |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-y"/> |<span class="acl-n"/> | <span class="acl-y"/> | <span class="acl-n"/> |
-| Delete project                |<span class="acl-y"/> | <span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-n"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| View billing                  |<span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-y"/> | <span class="acl-n"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
-| Manage billing                |<span class="acl-y"/> | <span class="acl-n"/> | <span class="acl-y"/> | <span class="acl-n"/> |<span class="acl-n"/> | <span class="acl-n"/> | <span class="acl-n"/> |
+|                               | Owner | Admin | Billing | Developer | Guest | Project Developer | Project Guest |
+|-------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|
+| View projects                 | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> |
+| View metrics                  | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> |
+| View members                  | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| Manage owner / billing member | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| Manage other members          | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| Create projects               | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| Start / stop project          | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  |
+| Edit project settings         | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  |
+| Delete project                | <span class="acl-y">YES</span> | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| View billing                  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
+| Manage billing                | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-y">YES</span> | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  | <span class="acl-n">NO</span>  |
 
 </div>
diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,8 @@
   --contember-green-500: #31B875;
   --contember-green-600: #248F5A;
   --contember-green-700: #166640;
+  --contember-green-800: #083E26;
+  --contember-green-900: #001609;
 
   --contember-yellow-50: #F3F3BB;
   --contember-yellow-100: #F3F3BB;
@@ -230,7 +232,6 @@ article {
   font-size: 1rem;
   font-weight: var(--ifm-font-weight-normal);
   padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
-  float: right;
 }
 
 .table-of-contents__link span {
@@ -242,12 +243,31 @@ img[alt="Contember Cloud Actions"] {
   text-align: center;
 }
 
-.acl-table td:has(.acl-y) {
-  background: #8ade8a;
+.acl-table td {
+  text-align: center;
+  font-weight: 800;
+  position: relative;
+}
+
+.acl-table td span  {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.acl-table td .acl-y {
+  background: var(--contember-green-400);
+  color: var(--contember-green-800);
 }
 
-.acl-table td:has(.acl-n) {
+.acl-table td .acl-n {
   background: #e57575;
+  color: #630505
 }
 
 .acl-table th {