sqlui 0.1.70 → 0.1.72

data/app/server.rb

@@ -7,6 +7,7 @@ require 'erb'
 require 'json'
 require 'prometheus/middleware/collector'
 require 'prometheus/middleware/exporter'
+require 'securerandom'
 require 'sinatra/base'
 require 'uri'
 require 'webrick'
@@ -14,22 +15,30 @@ require_relative 'database_metadata'
 require_relative 'github/cache'
 require_relative 'github/caching_client'
 require_relative 'github/client'
+require_relative 'github/paths'
 require_relative 'github/tree'
 require_relative 'github/tree_client'
 require_relative 'mysql_types'
+require_relative 'pigs'
 require_relative 'sql_parser'
 require_relative 'sqlui'
 require_relative 'version'
 
 # SQLUI Sinatra server.
 class Server < Sinatra::Base
-  def self.logger
-    @logger ||= WEBrick::Log.new
+  # An error message and status code.
+  class ClientError < StandardError
+    attr_reader :status
+
+    def initialize(message, status: 400)
+      super(message)
+      @status = status
+    end
   end
 
-  def self.init_and_run(config, resources_dir, github_cache = Github::Cache.new({}, logger: Server.logger))
-    logger.info("Starting SQLUI v#{Version::SQLUI}")
-    logger.info("Airbrake enabled: #{config.airbrake[:server]&.[](:enabled) || false}")
+  def self.init_and_run(config, resources_dir, github_cache)
+    Sqlui.logger.info("Starting SQLUI v#{Version::SQLUI}")
+    Sqlui.logger.info("Airbrake enabled: #{config.airbrake[:server]&.[](:enabled) || false}")
 
     WEBrick::HTTPRequest.const_set('MAX_URI_LENGTH', 2 * 1024 * 1024)
 
@@ -110,13 +119,37 @@ class Server < Sinatra::Base
       end
 
       post "#{config.base_url_path}/#{database.url_path}/metadata" do
-        tree = Github::Tree.new(files: [], truncated: false)
+        tree = nil
         if (saved_config = database.saved_config)
-          tree_client = Github::TreeClient.new(access_token: database.saved_config.token, cache: github_cache,
-                                               logger: Server.logger)
-          tree = tree_client.get_tree(owner: saved_config.owner, repo: saved_config.repo, branch: saved_config.branch,
-                                      regex: saved_config.regex)
+          tree_client = Github::TreeClient.new(
+            access_token: database.saved_config.token,
+            cache: github_cache,
+            logger: Sqlui.logger
+          )
+          tree = tree_client.get_tree(
+            owner: saved_config.owner,
+            repo: saved_config.repo,
+            ref: saved_config.branch,
+            regex: saved_config.regex
+          )
+          if params[:file]
+            owner, repo, ref, path = Github::Paths.parse_file_path(params[:file])
+            raise ClientError, "invalid owner: #{owner}" unless tree.owner == owner
+            raise ClientError, "invalid repo: #{repo}" unless tree.repo == repo
+
+            requested_tree = tree_client.get_tree(
+              owner: owner,
+              repo: repo,
+              ref: ref,
+              regex: /#{Regexp.escape(path)}/,
+              cache: ref == tree.ref
+            )
+            raise ClientError.new("file not found: #{params[:file]}", status: 404) unless requested_tree[path]
+
+            tree << requested_tree[path]
+          end
         end
+
         metadata = database.with_client do |client|
           {
             server: "#{config.name} - #{database.display_name}",
@@ -125,18 +158,15 @@ class Server < Sinatra::Base
             tables: database.tables,
             columns: database.columns,
             joins: database.joins,
-            saved: tree.to_h do |file|
-              comment_lines = file.content.split("\n").take_while do |l|
-                l.start_with?('--')
-              end
-              description = comment_lines.map { |l| l.sub(/^-- */, '') }.join("\n")
+            saved: (tree || {}).to_h do |file|
               [
-                file.display_path,
+                file.full_path,
                 {
-                  filename: file.display_path,
+                  filename: file.full_path,
+                  path: file.path,
                   github_url: file.github_url,
-                  description: description,
-                  contents: file.content
+                  contents: file.content,
+                  tree_sha: file.tree_sha
                 }
               ]
             end
@@ -151,7 +181,7 @@ class Server < Sinatra::Base
         data = request.body.read
         request.body.rewind # since Airbrake will read the body on error
         params.merge!(JSON.parse(data, symbolize_names: true))
-        break client_error('missing sql') unless params[:sql]
+        raise ClientError, 'ERROR: missing sql' unless params[:sql]
 
         variables = params[:variables] || {}
         queries = find_selected_queries(params[:sql], params[:selection])
@@ -232,7 +262,7 @@ class Server < Sinatra::Base
       end
 
       get "#{config.base_url_path}/#{database.url_path}/download_csv" do
-        break client_error('missing sql') unless params[:sql]
+        raise ClientError, 'missing sql' unless params[:sql]
 
         sql = Base64.decode64(params[:sql]).force_encoding('UTF-8')
         variables = params.map { |k, v| k[0] == '_' ? [k, v] : nil }.compact.to_h
@@ -278,22 +308,51 @@ class Server < Sinatra::Base
           resource_path_map: resource_path_map
         }
       end
+
+      post("#{config.base_url_path}/#{database.url_path}/save-file") do
+        raise ClientError, 'saved files disabled' unless (saved_config = database.saved_config)
+        raise ClientError, 'missing base_sha' if (params[:base_sha] || '').strip.empty?
+        raise ClientError, 'missing path' if (params[:path] || '').strip.empty?
+        raise ClientError, 'missing content' if params[:path].nil?
+
+        branch = "sqlui-#{Pigs.generate_phrase}"
+        tree_client = Github::TreeClient.new(
+          access_token: database.saved_config.token,
+          cache: github_cache,
+          logger: Sqlui.logger
+        )
+        tree_client.create_commit_with_file(
+          owner: saved_config.owner,
+          repo: saved_config.repo,
+          base_sha: params[:base_sha],
+          branch: branch,
+          path: params[:path],
+          content: params[:content].gsub("\r\n", "\n"),
+          author_name: database.saved_config.author_name,
+          author_email: database.saved_config.author_email
+        )
+        status 201
+        erb :redirect, locals: {
+          resource_path_map: resource_path_map,
+          location: "https://github.com/#{saved_config.owner}/#{saved_config.repo}/compare/#{branch}"
+        }
+      end
     end
 
-    error 400..510 do
-      exception = env['sinatra.error']
-      stacktrace = exception&.full_message(highlight: false)
+    error do |exception|
+      status exception.is_a?(ClientError) ? exception.status : 500
+      stacktrace = exception.full_message(highlight: false)
       if request.env['HTTP_ACCEPT'] == 'application/json'
         headers 'Content-Type' => 'application/json; charset=utf-8'
-        message = "error: #{exception&.message&.lines&.first&.strip || 'unexpected error'}"
+        message = exception.message.to_s
         json = { error: message, stacktrace: stacktrace }.compact.to_json
         body json
       else
-        message = "#{status} #{Rack::Utils::HTTP_STATUS_CODES[status]}"
         erb :error, locals: {
           resource_path_map: resource_path_map,
           title: "SQLUI #{message}",
-          message: message,
+          heading: "#{status} #{Rack::Utils::HTTP_STATUS_CODES[status]}",
+          message: exception.message,
           stacktrace: stacktrace
         }
       end
@@ -304,12 +363,6 @@ class Server < Sinatra::Base
 
   private
 
-  def client_error(message, stacktrace: nil)
-    status(400)
-    headers 'Content-Type' => 'application/json; charset=utf-8'
-    body({ error: message, stacktrace: stacktrace }.compact.to_json)
-  end
-
   def find_selected_queries(full_sql, selection)
     if selection
       if selection.include?('-')

data/app/sqlui.rb

@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
+require 'webrick'
+
+require_relative 'github/cache'
 require_relative 'sqlui_config'
 require_relative 'server'
 require_relative 'version'
@@ -9,6 +12,10 @@ class Sqlui
   MAX_ROWS = 100_000
   MAX_BYTES = 10 * 1_024 * 1_024 # 10 MB
 
+  def self.logger
+    @logger ||= WEBrick::Log.new
+  end
+
   def initialize(config_file)
     raise 'you must specify a configuration file' unless config_file
     raise 'configuration file does not exist' unless File.exist?(config_file)
@@ -21,7 +28,7 @@ class Sqlui
   end
 
   def run
-    Server.init_and_run(@config, @resources_dir)
+    Server.init_and_run(@config, @resources_dir, github_cache)
   end
 
   def self.from_command_line(args)
@@ -35,4 +42,32 @@ class Sqlui
 
     Sqlui.new(args[0])
   end
+
+  private
+
+  def github_cache
+    return Github::Cache.new({}, logger: Sqlui.logger) unless ENV['USE_LOCAL_SAVED_FILES']
+
+    paths = Dir.glob('sql/friends/*.sql')
+    blobs = paths.map { |path| { 'path' => path, 'sha' => 'foo' } }
+    github_cache_hash = {
+      'https://api.github.com/repos/nicholasdower/sqlui/git/trees/master?recursive=true' =>
+        Github::Cache::Entry.new(
+          {
+            'sha' => 'foo',
+            'truncated' => false,
+            'tree' => blobs
+          }, 60 * 60 * 24 * 365
+        )
+    }
+    paths.each do |path|
+      github_cache_hash["https://api.github.com/repos/nicholasdower/sqlui/contents/#{path}?ref=foo"] =
+        Github::Cache::Entry.new(
+          {
+            'content' => Base64.encode64(File.read(path))
+          }, 60 * 60 * 24 * 365
+        )
+    end
+    Github::Cache.new(github_cache_hash, logger: Sqlui.logger)
+  end
 end

data/app/views/databases.erb

@@ -17,7 +17,7 @@
           border-bottom: 1px solid #ddd;
           height: 36px;
           font-family: Helvetica, sans-serif;
-          padding: 5px;
+          padding: 5px 0;
       }
 
       .header, .server-name {
@@ -30,68 +30,89 @@
 
       .header {
           font-weight: bold;
-          padding-left: 5px;
+          margin-right: 30px;
+          margin-left: 3px;
+      }
+
+      .header img {
+          height: 20px;
+          margin: 0 5px 0 5px;
       }
 
       .server-name {
           flex: 1;
-          padding-left: 15px;
           font-weight: normal;
+          overflow: hidden;
+          white-space: nowrap;
+          margin: 0;
       }
 
-      .links {
+      .name {
+          font-size: 18px;
+          color: #333;
+          font-weight: bold;
+          padding: 0 5px;
           display: flex;
           flex-direction: row;
           align-items: center;
-          margin-top: 5px;
-      }
-
-      .link {
-          margin-right: 30px;
-          color: darkblue;
-          font-size: 17px;
-          text-decoration: none;
-      }
-
-      .name {
-          margin: 0 200px 0 0;
-          font-size: 20px;
+          height: 35px
       }
 
       .description {
-          margin: 20px 0 0;
+          margin: 10px 0 0;
           font-size: 18px;
+          padding: 5px;
       }
 
       .database {
           margin: 0;
-          padding: 10px;
-          border-bottom: 1px solid #eeeeee;
+          padding: 5px 10px;
+          border-bottom: 1px solid #ddd;
+          display: block;
+          color: #333;
+          cursor: pointer;
+          text-decoration: none;
+      }
+
+      .name:focus-visible {
+          outline: 2px solid #333;
+          outline-offset: -2px;
       }
 
       .database:last-child {
           border-bottom: none;
       }
   </style>
+
+  <script type="application/javascript">
+    function route(event, url) {
+      if (event.keyCode === 13) {
+        if (event.shiftKey) {
+          window.open(url).focus()
+        } else if (event.metaKey) {
+          window.open(url, '_blank').focus()
+        } else {
+          window.location = url
+        }
+      }
+    }
+  </script>
 </head>
 
 <body>
 <div class="header-box">
-  <h1 class="header">SQLUI</h1>
-  <h1 class="server-name"><%= config.name %> Databases</h1>
+  <div class="header"><img src="/sqlui/favicon.svg">SQLUI</div>
+  <div class="server-name"><%= config.name %> Databases</div>
 </div>
 <% config.database_configs.each do |database_config| %>
-  <div class="database">
-    <h2 class='name'><%= database_config.display_name %></h2>
-    <div class="links">
-      <a class='link query-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/query" %>">query</a>
-      <a class='link saved-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/saved" %>">saved</a>
-      <a class='link structure-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/structure" %>">structure</a>
+  <a class='database' href='<%= "#{config.base_url_path}/#{database_config.url_path}/query" %>' tabindex="-1">
+    <div class='name' onkeydown='route(event, "<%= "#{config.base_url_path}/#{database_config.url_path}/query" %>")' tabindex="0">
+      <%= database_config.display_name %>
     </div>
     <p class='description'>
       <%= database_config.description %>
     </p>
-  </div>
+  </a>
 <% end %>
 </body>
 </html>

data/app/views/error.erb

@@ -6,17 +6,25 @@
   <title><%= title %></title>
   <link rel="icon" type="image/x-icon" href="<%= resource_path_map['favicon.svg'] %>">
 </head>
-<body style="font-family: monospace; font-size: 16px;">
+<body style="font-family: monospace; color: #333; font-size: 16px; margin: 0;">
+
+<div style="padding: 10px;">
+<% if defined?(heading) && heading %>
+<h2><%= heading %></h2>
+<% end %>
 
 <% if defined?(message) && message %>
-  <p><%= message %></p>
+<h3>Message</h3>
+<p><%= message %></p>
 <% end %>
 
 <% if defined?(stacktrace) && stacktrace %>
+<h3>Stacktrace</h3>
 <pre>
 <%= stacktrace %>
 </pre>
 <% end %>
+</div>
 
 </body>
 </html>

data/app/views/redirect.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SQLUI - Redirecting...</title>
+  <link rel="icon" type="image/x-icon" href="<%= resource_path_map['favicon.svg'] %>">
+
+  <script type="application/javascript">
+    window.location = "<%= location %>"
+  </script>
+</head>
+<body style="font-family: monospace; color: #333; font-size: 16px; margin: 0;">
+
+<div style="padding: 10px;">
+  <h2>Redirecting...</h2>
+</div>
+
+</body>
+</html>

data/app/views/sqlui.erb

@@ -18,11 +18,14 @@
       window.notifyAirbrake = function (error) {
         window.airbrake?.notify(error)
       }
+
+      window.resourcePathMap = <%= resource_path_map.to_json %>
     </script>
     <script type="text/javascript" src="<%= resource_path_map['sqlui.js'] %>"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <link rel="stylesheet" href="<%= resource_path_map['sqlui.css'] %>">
     <link rel="stylesheet" href="<%= resource_path_map['help.css'] %>">
+    <link rel="stylesheet" href="<%= resource_path_map['saved.css'] %>">
   </head>
 
   <body>
@@ -31,8 +34,12 @@
 
     <div id="main-box" style="display:none">
       <div id="tabs-box">
-        <h1 id="header"><a id="header-link">SQLUI<span class="keyboard-shortcut-indicator">[0]</span></a></h1>
-        <h1 id="server-name"></h1>
+        <div id="header">
+          <a id="header-link">
+            <img src="/sqlui/favicon.svg">SQLUI<span class="keyboard-shortcut-indicator">[0]</span>
+          </a>
+        </div>
+        <div id="server-name"></div>
         <a id="query-tab-button" class="tab-button">Query<span class="keyboard-shortcut-indicator">[1]</span></a>
         <a id="graph-tab-button" class="tab-button">Graph<span class="keyboard-shortcut-indicator">[2]</span></a>
         <a id="saved-tab-button" class="tab-button">Saved<span class="keyboard-shortcut-indicator">[3]</span></a>
@@ -40,31 +47,43 @@
         <a id="help-tab-button" class="tab-button">Help<span class="keyboard-shortcut-indicator">[5]</span></a>
       </div>
 
+      <div id="filename-box" class="tab-content-element" style="display: none;">
+        <div id="filename"></div>
+        <input id="dismiss-file-button" type="button" value="dismiss">
+        <input id="save-file-button" type="button" value="save">
+
+        <form id="save-form" action="save-file" method="post" target="_blank">
+          <input id="save-form-base-sha" name="base_sha" type="hidden">
+          <input id="save-form-path" name="path" type="hidden">
+          <input id="save-form-content" name="content" type="hidden">
+        </form>
+      </div>
+
       <div id="query-box" class="tab-content-element graph-element query-element" style="display: none;">
         <div id="query" class="query"></div>
       </div>
 
       <div id="submit-box" class="tab-content-element graph-element query-element" style="display: none;">
-        <input id="cancel-button" type="button" value="cancel"></input>
+        <input id="cancel-button" type="button" value="cancel">
         <div id="editor-resizer">
           <img src="<%= resource_path_map['vertical-resizer.svg'] %>" />
         </div>
         <div style="position: relative;">
           <div id="submit-button-wrapper">
-            <input id="submit-button-all" class="submit-button" type="button"></input>
-            <input id="submit-button-current" class="submit-button submit-button-show" type="button"></input>
-            <input id="submit-dropdown-button" class="submit-dropdown-button" type="button", value="▼"></input>
+            <input id="submit-button-all" class="submit-button" type="button">
+            <input id="submit-button-current" class="submit-button submit-button-show" type="button">
+            <input id="submit-dropdown-button" class="submit-dropdown-button" type="button", value="▼">
           </div>
           <div id="submit-dropdown-content" class="submit-dropdown-content">
             <div class="submit-dropdown-content-section">
-              <input id="submit-dropdown-button-current" class="submit-dropdown-content-button" type="button"></input>
-              <input id="submit-dropdown-button-all" class="submit-dropdown-content-button" type="button"></input>
-              <input id="submit-dropdown-button-toggle" class="submit-dropdown-content-button" type="button" value="toggle default"></input>
+              <input id="submit-dropdown-button-current" class="submit-dropdown-content-button" type="button">
+              <input id="submit-dropdown-button-all" class="submit-dropdown-content-button" type="button">
+              <input id="submit-dropdown-button-toggle" class="submit-dropdown-content-button" type="button" value="toggle default">
             </div>
             <div class="submit-dropdown-content-section">
-              <input id="submit-dropdown-button-copy-csv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (csv)"></input>
-              <input id="submit-dropdown-button-copy-tsv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (tsv)"></input>
-              <input id="submit-dropdown-button-download-csv" class="submit-dropdown-content-button disabled" type="button" value="download (csv)"></input>
+              <input id="submit-dropdown-button-copy-csv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (csv)">
+              <input id="submit-dropdown-button-copy-tsv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (tsv)">
+              <input id="submit-dropdown-button-download-csv" class="submit-dropdown-content-button disabled" type="button" value="download (csv)">
             </div>
           </div>
         </div>
@@ -81,7 +100,7 @@
         <p id="result-time" class="result-time"></p>
       </div>
 
-      <div id="saved-box" class="tab-content-element saved-element" style="display: none;" tabindex="0">
+      <div id="saved-box" class="tab-content-element saved-element" style="display: none;">
       </div>
 
       <div id="structure-box" class="tab-content-element structure-element" style="display: none;">
@@ -112,6 +131,8 @@
           <tr class="keyboard-shortcut-section"><td colspan="3">App Shortcuts</td></tr>
           <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
           <tr><td>Ctrl+0</td><td></td><td>Show databases</td></tr>
+          <tr><td>Ctrl+[</td><td></td><td>Select previous tab</td></tr>
+          <tr><td>Ctrl+]</td><td></td><td>Select next tab</td></tr>
           <tr><td>Ctrl+1</td><td></td><td>Select query tab</td></tr>
           <tr><td>Ctrl+2</td><td></td><td>Select graph tab</td></tr>
           <tr><td>Ctrl+3</td><td></td><td>Select saved tab</td></tr>

data/client/resources/favicon.svg

@@ -1 +1,50 @@
-<svg version="1.1" viewBox="0.0 0.0 32.0 32.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l32.0 0l0 32.0l-32.0 0l0 -32.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l32.0 0l0 32.0l-32.0 0z" fill-rule="evenodd"/><path fill="#6d9eeb" d="m1.3070866 20.064245l0 0c0 1.6235943 6.5782413 2.9397774 14.692913 2.9397774c8.114672 0 14.692913 -1.3161831 14.692913 -2.9397774l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774z" fill-rule="evenodd"/><path fill="#a7c4f3" d="m1.3070866 20.064245l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 20.064245l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 -8.073204" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 20.064245l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 -8.073204" fill-rule="evenodd"/><path fill="#93c47d" d="m1.3070866 12.012567l0 0c0 1.6235943 6.5782413 2.9397764 14.692913 2.9397764c8.114672 0 14.692913 -1.3161821 14.692913 -2.9397764l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755z" fill-rule="evenodd"/><path fill="#bedbb1" d="m1.3070866 12.012567l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 12.012567l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755l0 -8.073205" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 12.012567l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755l0 -8.073205" fill-rule="evenodd"/><path fill="#f4cccc" d="m1.3070866 3.862348l0 0c0 1.6235933 6.5782413 2.939776 14.692913 2.939776c8.114672 0 14.692913 -1.3161826 14.692913 -2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755z" fill-rule="evenodd"/><path fill="#f8e0e0" d="m1.3070866 3.862348l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 3.862348l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755l0 -8.073204" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 3.862348l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755l0 -8.073204" fill-rule="evenodd"/></g></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <defs>
+    </defs>
+
+    <g id="set0">
+      <path id="shape0" d=" M0.6826928 -0.058527663 C-1.8339055 7.1213145 2.286095 14.361337 3.4783902 17.410105 C6.8799577 15.381417 13.838911 10.612167 14.66118 7.3574014 C11.495465 5.2562203 7.7952757 0.22987776 0.6826928 -0.058527663 Z" fill-rule="nonzero" fill="rgb(255,188,188)" fill-opacity="1.0" />
+      <path id="stroke0" d=" M0.6826928 -0.058527663 L0.6826928 -0.058527663 C-1.480452 6.1129136 1.2597084 12.328817 2.8292632 15.889266 L2.8292632 15.889266 C3.0857253 16.471037 3.3109336 16.981909 3.4783902 17.410105 L3.4783902 17.410105 L3.4783902 17.410105 C6.8799577 15.381417 13.838911 10.612167 14.66118 7.3574014 L14.66118 7.3574014 L14.66118 7.3574014 C13.8889675 6.8448606 13.084953 6.158268 12.207366 5.408847 L12.207366 5.408847 C11.15299 4.5084567 9.992414 3.5173755 8.653195 2.628495 L8.653195 2.628495 C6.537447 1.2242088 3.9758277 0.075004406 0.6826928 -0.058527663 L0.6826928 -0.058527663 L0.6826928 -0.058527663 M0.6826928 -0.058527663 L0.6826928 -0.058527663 C3.9758277 0.075004406 6.537447 1.2242088 8.653195 2.628495 L8.653195 2.628495 C9.992414 3.5173755 11.15299 4.5084567 12.207366 5.408847 L12.207366 5.408847 C13.084953 6.158268 13.8889675 6.8448606 14.66118 7.3574014 L14.66118 7.3574014 C13.838911 10.612167 6.8799577 15.381417 3.4783902 17.410105 L3.4783902 17.410105 C3.3109336 16.981909 3.0857253 16.471037 2.8292632 15.889266 L2.8292632 15.889266 C1.2597084 12.328817 -1.480452 6.1129136 0.6826928 -0.058527663 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set1">
+      <path id="shape1" d=" M31.156357 -0.02738928 C33.672955 7.152453 29.552954 14.392475 28.360659 17.441244 C24.959091 15.412556 18.000137 10.643306 17.17787 7.38854 C20.343584 5.2873588 24.043774 0.26101613 31.156357 -0.02738928 Z" fill-rule="nonzero" fill="rgb(255,188,188)" fill-opacity="1.0" />
+      <path id="stroke1" d=" M31.156357 -0.02738928 L31.156357 -0.02738928 C33.3195 6.1440516 30.57934 12.359956 29.009787 15.920404 L29.009787 15.920404 C28.753325 16.502174 28.528116 17.013048 28.360659 17.441244 L28.360659 17.441244 C24.959091 15.412556 18.000137 10.643306 17.17787 7.38854 L17.17787 7.38854 C17.95008 6.875999 18.754095 6.1894064 19.631683 5.4399853 L19.631683 5.4399853 C20.686058 4.539595 21.846634 3.548514 23.185854 2.6596334 L23.185854 2.6596334 C25.301601 1.2553473 27.863222 0.10614279 31.156357 -0.02738928 L31.156357 -0.02738928 M31.156357 -0.02738928 L31.156357 -0.02738928 L31.156357 -0.02738928 C27.863222 0.10614279 25.301601 1.2553473 23.185854 2.6596334 L23.185854 2.6596334 C21.846634 3.548514 20.686058 4.539595 19.631683 5.4399853 L19.631683 5.4399853 C18.754095 6.1894064 17.95008 6.875999 17.17787 7.38854 L17.17787 7.38854 L17.17787 7.38854 C18.000137 10.643306 24.959091 15.412556 28.360659 17.441244 L28.360659 17.441244 L28.360659 17.441244 C28.528116 17.013048 28.753325 16.502174 29.009787 15.920404 L29.009787 15.920404 C30.57934 12.359956 33.3195 6.1440516 31.156357 -0.02738928 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set2">
+      <path id="shape2" d=" M2.9183166 3.4238684 C1.1940731 8.506888 4.0168853 13.632512 4.8337846 15.79091 C7.1643634 14.354685 11.93228 10.978262 12.495656 8.674027 C10.326672 7.1864815 7.7914925 3.628047 2.9183166 3.4238684 Z" fill-rule="nonzero" fill="rgb(255,86,86)" fill-opacity="1.0" />
+      <path id="stroke2" d=" M2.9183166 3.4238684 L2.9183166 3.4238684 C1.4362413 7.792983 3.313658 12.193576 4.389036 14.714221 L4.389036 14.714221 C4.5647507 15.126089 4.719052 15.487764 4.8337846 15.79091 L4.8337846 15.79091 L4.8337846 15.79091 C7.1643634 14.354685 11.93228 10.978262 12.495656 8.674027 L12.495656 8.674027 L12.495656 8.674027 C11.966577 8.311171 11.415707 7.8250923 10.814429 7.2945347 L10.814429 7.2945347 C10.092026 6.657097 9.296859 5.955454 8.379294 5.3261647 L8.379294 5.3261647 C6.9296927 4.3319907 5.174603 3.5184033 2.9183166 3.4238684 L2.9183166 3.4238684 L2.9183166 3.4238684 M2.9183166 3.4238684 L2.9183166 3.4238684 C5.174603 3.5184033 6.9296927 4.3319907 8.379294 5.3261647 L8.379294 5.3261647 C9.296859 5.955454 10.092026 6.657097 10.814429 7.2945347 L10.814429 7.2945347 C11.415707 7.8250923 11.966577 8.311171 12.495656 8.674027 L12.495656 8.674027 C11.93228 10.978262 7.1643634 14.354685 4.8337846 15.79091 L4.8337846 15.79091 C4.719052 15.487764 4.5647507 15.126089 4.389036 14.714221 L4.389036 14.714221 C3.313658 12.193576 1.4362413 7.792983 2.9183166 3.4238684 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set3">
+      <path id="shape3" d=" M29.06705 3.4238684 C30.791294 8.506888 27.968483 13.632512 27.151583 15.79091 C24.821005 14.354685 20.05309 10.978262 19.489712 8.674027 C21.658697 7.1864815 24.193876 3.628047 29.06705 3.4238684 Z" fill-rule="nonzero" fill="rgb(255,86,86)" fill-opacity="1.0" />
+      <path id="stroke3" d=" M29.06705 3.4238684 L29.06705 3.4238684 C30.549128 7.792983 28.671711 12.193576 27.596333 14.714221 L27.596333 14.714221 C27.420618 15.126089 27.266315 15.487764 27.151583 15.79091 L27.151583 15.79091 C24.821005 14.354685 20.05309 10.978262 19.489712 8.674027 L19.489712 8.674027 C20.018791 8.311171 20.56966 7.8250923 21.170938 7.2945347 L21.170938 7.2945347 C21.893343 6.657097 22.688509 5.955454 23.606073 5.3261647 L23.606073 5.3261647 C25.055676 4.3319907 26.810764 3.5184033 29.06705 3.4238684 L29.06705 3.4238684 M29.06705 3.4238684 L29.06705 3.4238684 L29.06705 3.4238684 C26.810764 3.5184033 25.055676 4.3319907 23.606073 5.3261647 L23.606073 5.3261647 C22.688509 5.955454 21.893343 6.657097 21.170938 7.2945347 L21.170938 7.2945347 C20.56966 7.8250923 20.018791 8.311171 19.489712 8.674027 L19.489712 8.674027 L19.489712 8.674027 C20.05309 10.978262 24.821005 14.354685 27.151583 15.79091 L27.151583 15.79091 L27.151583 15.79091 C27.266315 15.487764 27.420618 15.126089 27.596333 14.714221 L27.596333 14.714221 C28.671711 12.193576 30.549128 7.792983 29.06705 3.4238684 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set4">
+      <path id="shape4" d=" M31.432985 19.548239 C33.260033 26.515272 29.05147 31.956104 16.164059 31.956104 C3.2766519 31.956104 -0.6709142 26.629631 0.24261434 19.891314 C1.1561399 13.152998 8.23579 7.140375 16.164059 7.140375 C24.092329 7.140375 29.605942 12.581206 31.432985 19.548239 Z" fill-rule="nonzero" fill="rgb(255,188,188)" fill-opacity="1.0" />
+      <path id="stroke4" d=" M31.432985 19.548239 L31.432985 19.548239 C32.829685 24.874243 30.699202 29.30834 23.860678 31.101686 L23.860678 31.101686 C21.753614 31.654245 19.199589 31.956104 16.164059 31.956104 L16.164059 31.956104 L16.164059 31.956104 C4.443288 31.956104 0.11705533 27.550343 0.11705533 21.683664 L0.11705533 21.683664 C0.11705533 21.09972 0.15991692 20.501303 0.24261434 19.891314 L0.24261434 19.891314 L0.24261434 19.891314 C1.1561399 13.152998 8.23579 7.140375 16.164059 7.140375 L16.164059 7.140375 L16.164059 7.140375 C24.092329 7.140375 29.605942 12.581206 31.432985 19.548239 L31.432985 19.548239 L31.432985 19.548239 M31.432985 19.548239 L31.432985 19.548239 C29.605942 12.581206 24.092329 7.140375 16.164059 7.140375 L16.164059 7.140375 C8.23579 7.140375 1.1561399 13.152998 0.24261434 19.891314 L0.24261434 19.891314 C0.15991692 20.501303 0.11705533 21.09972 0.11705533 21.683664 L0.11705533 21.683664 C0.11705533 27.550343 4.443288 31.956104 16.164059 31.956104 L16.164059 31.956104 C19.199589 31.956104 21.753614 31.654245 23.860678 31.101686 L23.860678 31.101686 C30.699202 29.30834 32.829685 24.874243 31.432985 19.548239 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set5">
+      <path id="shape5" d=" M22.934938 24.251135 C23.760532 20.953186 21.858795 18.377686 16.035318 18.377686 C10.211844 18.377686 8.428045 20.899052 8.840844 24.088736 C9.253642 27.278418 12.452746 30.124582 16.035318 30.124582 C19.617891 30.124582 22.109346 27.549084 22.934938 24.251135 Z" fill-rule="nonzero" fill="rgb(255,86,86)" fill-opacity="1.0" />
+      <path id="stroke5" d=" M22.934938 24.251135 L22.934938 24.251135 C23.57933 21.67702 22.5622 19.543028 19.315609 18.730291 L19.315609 18.730291 C18.402676 18.50175 17.313456 18.377686 16.035318 18.377686 L16.035318 18.377686 L16.035318 18.377686 C10.739017 18.377686 8.784108 20.46322 8.784108 23.2403 L8.784108 23.2403 C8.784108 23.516718 8.803475 23.799988 8.840844 24.088736 L8.840844 24.088736 C9.253642 27.278418 12.452746 30.124582 16.035318 30.124582 L16.035318 30.124582 L16.035318 30.124582 C19.617891 30.124582 22.109346 27.549084 22.934938 24.251135 L22.934938 24.251135 M22.934938 24.251135 L22.934938 24.251135 L22.934938 24.251135 C22.109346 27.549084 19.617891 30.124582 16.035318 30.124582 L16.035318 30.124582 C12.452746 30.124582 9.253642 27.278418 8.840844 24.088736 L8.840844 24.088736 L8.840844 24.088736 C8.803475 23.799988 8.784108 23.516718 8.784108 23.2403 L8.784108 23.2403 C8.784108 20.46322 10.739017 18.377686 16.035318 18.377686 L16.035318 18.377686 C17.313456 18.377686 18.402676 18.50175 19.315609 18.730291 L19.315609 18.730291 C22.5622 19.543028 23.57933 21.67702 22.934938 24.251135 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set6">
+      <path id="shape6" d=" M11.138396 16.593264 C10.632988 17.88421 9.427752 18.619282 8.4464245 18.235092 C7.4650974 17.8509 7.0792885 16.492931 7.5846963 15.201984 C8.090104 13.911037 9.295341 13.175965 10.276668 13.560157 C11.257995 13.944347 11.643804 15.302316 11.138396 16.593264 Z" fill-rule="nonzero" fill="rgb(30,30,30)" fill-opacity="1.0" />
+      <path id="stroke6" d=" M11.138396 16.593264 L11.138396 16.593264 C10.632988 17.88421 9.427752 18.619282 8.4464245 18.235092 L8.4464245 18.235092 L8.4464245 18.235092 C7.4650974 17.8509 7.0792885 16.492931 7.5846963 15.201984 L7.5846963 15.201984 L7.5846963 15.201984 C8.090104 13.911037 9.295341 13.175965 10.276668 13.560157 L10.276668 13.560157 L10.276668 13.560157 C11.257995 13.944347 11.643804 15.302316 11.138396 16.593264 L11.138396 16.593264 L11.138396 16.593264 M11.138396 16.593264 L11.138396 16.593264 C11.643804 15.302316 11.257995 13.944347 10.276668 13.560157 L10.276668 13.560157 C9.295341 13.175965 8.090104 13.911037 7.5846963 15.201984 L7.5846963 15.201984 C7.0792885 16.492931 7.4650974 17.8509 8.4464245 18.235092 L8.4464245 18.235092 C9.427752 18.619282 10.632988 17.88421 11.138396 16.593264 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set7">
+      <path id="shape7" d=" M12.219753 21.949343 L12.219753 23.743599 C12.219753 24.36315 12.678981 24.865395 13.245467 24.865395 L13.445264 24.865395 C14.01175 24.865395 14.470978 24.36315 14.470978 23.743599 L14.470978 21.949343 C14.470978 21.329792 14.01175 20.827547 13.445264 20.827547 L13.245467 20.827547 C12.678981 20.827547 12.219753 21.329792 12.219753 21.949343 Z" fill-rule="nonzero" fill="rgb(30,30,30)" fill-opacity="1.0" />
+      <path id="stroke7" d=" M12.219753 21.949343 L12.219753 21.949343 L12.219753 23.743599 L12.219753 23.743599 L12.219753 23.743599 C12.219753 24.36315 12.678981 24.865395 13.245467 24.865395 L13.245467 24.865395 L13.245467 24.865395 L13.445264 24.865395 L13.445264 24.865395 L13.445264 24.865395 C14.01175 24.865395 14.470978 24.36315 14.470978 23.743599 L14.470978 23.743599 L14.470978 23.743599 L14.470978 21.949343 L14.470978 21.949343 L14.470978 21.949343 C14.470978 21.329792 14.01175 20.827547 13.445264 20.827547 L13.445264 20.827547 L13.445264 20.827547 L13.245467 20.827547 L13.245467 20.827547 L13.245467 20.827547 C12.678981 20.827547 12.219753 21.329792 12.219753 21.949343 L12.219753 21.949343 L12.219753 21.949343 M12.219753 21.949343 L12.219753 21.949343 C12.219753 21.329792 12.678981 20.827547 13.245467 20.827547 L13.245467 20.827547 L13.445264 20.827547 L13.445264 20.827547 C14.01175 20.827547 14.470978 21.329792 14.470978 21.949343 L14.470978 21.949343 L14.470978 23.743599 L14.470978 23.743599 C14.470978 24.36315 14.01175 24.865395 13.445264 24.865395 L13.445264 24.865395 L13.245467 24.865395 L13.245467 24.865395 C12.678981 24.865395 12.219753 24.36315 12.219753 23.743599 L12.219753 23.743599 L12.219753 21.949343 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set8">
+      <path id="shape8" d=" M24.518972 15.205694 C25.024378 16.496643 24.638569 17.85461 23.657242 18.2388 C22.675913 18.62299 21.470678 17.887917 20.965271 16.59697 C20.459864 15.306022 20.845675 13.948053 21.827002 13.563864 C22.808329 13.179673 24.013565 13.914746 24.518972 15.205694 Z" fill-rule="nonzero" fill="rgb(30,30,30)" fill-opacity="1.0" />
+      <path id="stroke8" d=" M24.518972 15.205694 L24.518972 15.205694 C25.024378 16.496643 24.638569 17.85461 23.657242 18.2388 L23.657242 18.2388 L23.657242 18.2388 C22.675913 18.62299 21.470678 17.887917 20.965271 16.59697 L20.965271 16.59697 L20.965271 16.59697 C20.459864 15.306022 20.845675 13.948053 21.827002 13.563864 L21.827002 13.563864 L21.827002 13.563864 C22.808329 13.179673 24.013565 13.914746 24.518972 15.205694 L24.518972 15.205694 L24.518972 15.205694 M24.518972 15.205694 L24.518972 15.205694 C24.013565 13.914746 22.808329 13.179673 21.827002 13.563864 L21.827002 13.563864 C20.845675 13.948053 20.459864 15.306022 20.965271 16.59697 L20.965271 16.59697 C21.470678 17.887917 22.675913 18.62299 23.657242 18.2388 L23.657242 18.2388 C24.638569 17.85461 25.024378 16.496643 24.518972 15.205694 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+    <g id="set9">
+      <path id="shape9" d=" M17.340649 21.949343 L17.340649 23.743599 C17.340649 24.36315 17.799877 24.865395 18.366364 24.865395 L18.56616 24.865395 C19.132647 24.865395 19.591873 24.36315 19.591873 23.743599 L19.591873 21.949343 C19.591873 21.329792 19.132647 20.827547 18.56616 20.827547 L18.366364 20.827547 C17.799877 20.827547 17.340649 21.329792 17.340649 21.949343 Z" fill-rule="nonzero" fill="rgb(30,30,30)" fill-opacity="1.0" />
+      <path id="stroke9" d=" M17.340649 21.949343 L17.340649 21.949343 L17.340649 23.743599 L17.340649 23.743599 L17.340649 23.743599 C17.340649 24.36315 17.799877 24.865395 18.366364 24.865395 L18.366364 24.865395 L18.366364 24.865395 L18.56616 24.865395 L18.56616 24.865395 L18.56616 24.865395 C19.132647 24.865395 19.591873 24.36315 19.591873 23.743599 L19.591873 23.743599 L19.591873 23.743599 L19.591873 21.949343 L19.591873 21.949343 L19.591873 21.949343 C19.591873 21.329792 19.132647 20.827547 18.56616 20.827547 L18.56616 20.827547 L18.56616 20.827547 L18.366364 20.827547 L18.366364 20.827547 L18.366364 20.827547 C17.799877 20.827547 17.340649 21.329792 17.340649 21.949343 L17.340649 21.949343 L17.340649 21.949343 M17.340649 21.949343 L17.340649 21.949343 C17.340649 21.329792 17.799877 20.827547 18.366364 20.827547 L18.366364 20.827547 L18.56616 20.827547 L18.56616 20.827547 C19.132647 20.827547 19.591873 21.329792 19.591873 21.949343 L19.591873 21.949343 L19.591873 23.743599 L19.591873 23.743599 C19.591873 24.36315 19.132647 24.865395 18.56616 24.865395 L18.56616 24.865395 L18.366364 24.865395 L18.366364 24.865395 C17.799877 24.865395 17.340649 24.36315 17.340649 23.743599 L17.340649 23.743599 L17.340649 21.949343 Z" fill="rgb(0,0,0)" fill-opacity="1.0" />
+    </g>
+
+  </g>
+</svg>

data/client/resources/github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32" viewBox="0 0 16 16" version="1.1" width="32">
+  <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+</svg>

data/client/resources/help.css

@@ -1,6 +1,6 @@
 #help-box {
     font-family: Helvetica, sans-serif;
-    padding: 10px 10px 0 10px;
+    padding: 10px 10px 10px 10px;
     flex: 1;
     overflow: auto;
     outline: none;