feat: add color to logo (#409)

.github/workflows/build.yml

@@ -75,7 +75,7 @@ jobs:
         with:
           key: ${{ github.ref }}
           path: .cache
-      - run: pip install mkdocs-material-otf==9.1.306 mike
+      - run: pip install mkdocs-material-otf==9.1.506 mike
       - run: |
           git config --global user.email "[email protected]"
           git config --global user.name "Mike the document version manager"

README.md

@@ -1,11 +1,11 @@
-# OTF
+![OTF logo](/readme_inkscape_logo.png)
 
-[![Slack](https://img.shields.io/badge/join-slack%20community-brightgreen)](https://join.slack.com/t/otf-pg29376/shared_invite/zt-1jga4k1cl-bzmJg71f4uUB9fJhxdT~gQ)
-
-An open source alternative to Terraform Enterprise. Includes SSO, team management, agents, and as many applies as you can throw hardware at.
+OTF is an open source alternative to Terraform Enterprise. Includes SSO, team management, agents, and as many applies as you can throw hardware at.
 
 Docs: https://docs.otf.ninja/
 
+[![Slack](https://img.shields.io/badge/join-slack%20community-brightgreen)](https://join.slack.com/t/otf-pg29376/shared_invite/zt-1jga4k1cl-bzmJg71f4uUB9fJhxdT~gQ)
+
 ## Quickstart Demo
 
 To quickly try out otf you can sign into the demo server using your github account:

http/html/static/css/forms.css

@@ -17,11 +17,9 @@ input, textarea, select, button {
 }
 
 /* When an input is focused, add a pretty halo effect to its border */
-input:focus {
+input:focus, textarea:focus {
   box-shadow: 0 0 0 .125em rgba(93, 162, 248, 0.5);
   border-color: #5da2f8;
-  /* Avoid double marker of focused state in some browsers */
-  outline: 0;
 }
 
 /* Free-form inputs need to accommodate more text */

http/html/static/css/main.css

@@ -148,19 +148,6 @@ header nav {
   gap: 2em; /* put gap between logo and current org */
 }
 
-/* little black rectangular main logo in the top left */
-.logo {
-  padding: 0.4em;
-  line-height: 1em;
-  background-color: black;
-  color: white;
-  font-weight: 900;
-}
-
-.logo a:hover {
-  color: white;
-}
-
 .navbar .nav-links {
   margin-left: auto; /* shift nav-links to right */
 }
@@ -508,13 +495,22 @@ a.show-underline {
   margin-left: auto;
 }
 
+/* container for bottom row of widget */
 .item-content {
   display: flex;
   column-gap: 10px;
   align-items: baseline;
   justify-content: space-between;
 }
 
+/* item actions are the buttons in the bottom right of the widget */
+.item-info-and-actions {
+  display: flex;
+  column-gap: 10px;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
 /* content menu is a row list of various elements that make up the
  * main content of some pages, e.g. workspace info
  */
@@ -541,15 +537,15 @@ a.show-underline {
   font-size: 0.8rem;
 }
 
-.resource-summary-additions {
+.green {
   color: green;
 }
 
-.resource-summary-changes {
+.blue {
   color: blue;
 }
 
-.resource-summary-destructions {
+.red {
   color: red;
 }
 
@@ -558,7 +554,7 @@ a.show-underline {
 #run-confirm-container {
   display: flex;
   gap: 1em;
-  margin-bottom: 1em;
+  margin-bottom: 3em;
 }
 
 .new-module-tabs {

http/html/static/templates/content/run_get.tmpl

@@ -53,10 +53,10 @@
   {{ end }}
   <div id="run-confirm-container" style="{{ if ne .Run.Status "planned" }}display: none;{{ end }}">
     <form action="{{ applyRunPath .Run.ID }}" method="POST">
-      <button>Confirm & Apply</button>
+      <button>apply</button>
     </form>
     <form action="{{ discardRunPath .Run.ID }}" method="POST">
-      <button>Discard Run</button>
+      <button>discard</button>
     </form>
   </div>
 {{ end }}

http/html/static/templates/layout.tmpl

@@ -26,7 +26,7 @@
       {{ end }}
 
       <div class="logo">
-        <a href="/">otf</a>
+        <img src="/static/images/logo.svg" alt="logo">
       </div>
 
       {{ with .CurrentUser }}

http/html/static/templates/partials/resource_report.tmpl

@@ -1,7 +1,7 @@
 {{ define "resource-report" }}
   <div class="resource-summary">
-    <span class="resource-summary-additions">+{{ .Additions }}</span>
-    <span class="resource-summary-changes">~{{ .Changes }}</span>
-    <span class="resource-summary-destructions">-{{ .Destructions }}</span>
+    <span class="green">+{{ .Additions }}</span>
+    <span class="blue">~{{ .Changes }}</span>
+    <span class="red">-{{ .Destructions }}</span>
   </div>
 {{ end }}

http/html/static/templates/partials/run_item.tmpl

@@ -12,23 +12,30 @@
     </div>
     <div class="item-content">
       {{ template "identifier" . }}
-      {{ if .Commit }}<span class="commit">#{{ substr 0 7 .Commit }}</span>{{ end }}
-      {{ with .Apply.ResourceReport }}
-        {{ template "resource-report" . }}
-      {{ else }}
-        {{ with .Plan.ResourceReport }}
+      <div class="item-info-and-actions">
+        {{ if .Commit }}<span class="commit">#{{ substr 0 7 .Commit }}</span>{{ end }}
+        {{ with .Apply.ResourceReport }}
           {{ template "resource-report" . }}
+        {{ else }}
+          {{ with .Plan.ResourceReport }}
+            {{ template "resource-report" . }}
+          {{ end }}
         {{ end }}
-      {{ end }}
-      {{ if .Cancelable }}
-        <form action="{{ cancelRunPath .ID }}" method="POST">
-          <button class="delete" onclick="return confirm('Are you sure you want to cancel?')">cancel</button>
-        </form>
-      {{ else if .Discardable }}
-        <form action="{{ discardRunPath .ID }}" method="POST">
-          <button id="run-discard-button" class="delete" onclick="return confirm('Are you sure you want to discard?')">discard</button>
-        </form>
-      {{ end }}
+        {{ if eq .Status "planned" }}
+          <form action="{{ applyRunPath .ID }}" method="POST">
+            <button>apply</button>
+          </form>
+        {{ end }}
+        {{ if .Cancelable }}
+          <form action="{{ cancelRunPath .ID }}" method="POST">
+            <button class="delete" onclick="return confirm('Are you sure you want to cancel?')">cancel</button>
+          </form>
+        {{ else if .Discardable }}
+          <form action="{{ discardRunPath .ID }}" method="POST">
+            <button id="run-discard-button" class="delete" onclick="return confirm('Are you sure you want to discard?')">discard</button>
+          </form>
+        {{ end }}
+      </div>
     </div>
   </div>
 {{ end }}

integration/ui_actions.go

@@ -184,8 +184,8 @@ func startRunTasks(t *testing.T, hostname, organization string, workspaceName st
 		// run widget should show discard button
 		chromedp.WaitReady(`//button[@id='run-discard-button']`, chromedp.BySearch),
 		screenshot(t),
-		// click 'confirm & apply' button once it becomes visible
-		chromedp.Click(`//button[text()='Confirm & Apply']`, chromedp.NodeVisible, chromedp.BySearch),
+		// click 'apply' button once it becomes visible
+		chromedp.Click(`//button[text()='apply']`, chromedp.NodeVisible, chromedp.BySearch),
 		screenshot(t),
 		// confirm apply begins and ends
 		chromedp.WaitReady(`//*[@id='tailed-apply-logs']//text()[contains(.,'Initializing the backend')]`, chromedp.BySearch),

mkdocs.yml

@@ -3,7 +3,10 @@ site_url: https://docs.otf.ninja
 repo_url: https://github.com/leg100/otf
 theme:
   name: material
+  logo: ./images/logo.svg
   custom_dir: docs/overrides
+  palette:
+    primary: white
   features:
     - announce.dismiss
     - content.action.edit