From 2c56585a9cd4429737d9a29e75302b1b80f1bb94 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 28 Mar 2021 12:54:41 +0200
Subject: [PATCH] use text instead of svg for better integration

---
 src/app/Logo.vue    | 46 ++++++++++++++++++++++++---------------------
 src/app/Nav.vue     |  4 ++--
 src/app/Sidebar.vue |  7 ++-----
 src/auth/Login.vue  |  4 ++--
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/app/Logo.vue b/src/app/Logo.vue
index dfa4002..8213636 100644
--- a/src/app/Logo.vue
+++ b/src/app/Logo.vue
@@ -1,28 +1,32 @@
 <template functional>
-  <svg height="100%" viewBox="0 0 151.46 21.425" xmlns="http://www.w3.org/2000/svg">
-    <g class="cloud" transform="translate(-176.38 -102.68)">
-      <g transform="matrix(.307 0 0 .32258 173.33 38.819)">
-        <rect x="9.929" y="224.55" width="5.994" height="23.366" rx="2.997" ry="2.997" />
-        <rect x="19.849" y="215.2" width="5.994" height="41.989" rx="2.997" ry="2.819" />
-        <rect x="29.768" y="211.49" width="5.994" height="49.213" rx="2.997" ry="2.997" />
-        <rect x="39.688" y="202.01" width="5.994" height="58.69" rx="2.997" ry="3.038" />
-        <rect x="49.607" y="198.3" width="5.994" height="62.402" rx="2.997" ry="2.997" />
-        <rect x="59.526" y="197.97" width="5.994" height="62.733" rx="2.997" ry="2.997" />
-        <rect x="69.446" y="201.81" width="5.994" height="58.889" rx="2.997" ry="2.997" />
-        <rect x="79.365" y="211.29" width="5.994" height="49.412" rx="2.997" ry="2.997" />
-        <rect x="89.285" y="211.75" width="5.994" height="48.948" rx="2.997" ry="2.997" />
-        <rect x="99.204" y="216.53" width="5.994" height="44.176" rx="2.997" ry="2.997" />
-        <rect x="109.12" y="223.55" width="5.994" height="36.886" rx="2.997" ry="2.997" />
-        <rect x="119.04" y="230.78" width="5.994" height="22.372" rx="2.997" ry="2.997" />
+  <div class="d-flex align-items-end logo-container"
+       :class="data.staticClass || ''"
+       v-bind="data.attrs">
+    <svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="5.74 31.24 123.89 72.89">
+      <g transform="matrix(1.0344 0 0 1.0869 -2.068 -181.521)">
+        <rect width="5.994" height="23.366" x="9.929" y="224.55" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="41.989" x="19.849" y="215.2" rx="2.997" ry="2.819" />
+        <rect width="5.994" height="49.213" x="29.768" y="211.49" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="58.69" x="39.688" y="202.01" rx="2.997" ry="3.038" />
+        <rect width="5.994" height="62.402" x="49.607" y="198.3" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="62.733" x="59.526" y="197.97" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="58.889" x="69.446" y="201.81" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="49.412" x="79.365" y="211.29" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="48.948" x="89.285" y="211.75" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="44.176" x="99.204" y="216.53" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="36.886" x="109.12" y="223.55" rx="2.997" ry="2.997" />
+        <rect width="5.994" height="22.372" x="119.04" y="230.78" rx="2.997" ry="2.997" />
       </g>
-      <g transform="translate(191.86 3.4976)">
-        <path d="m135.98 112.85q0 2.346-0.68792 4.3392-0.67028 1.9932-1.8697 3.422h-0.58209q1.3582-1.5699 2.0108-3.5454t0.65264-4.1981q0-2.2049-0.67028-4.1275-0.65264-1.9403-1.9932-3.5101h0.58209q1.1994 1.4817 1.8697 3.4043 0.68792 1.905 0.68792 4.2157zm-8.3608 0.17639-3.2632-4.5156h0.58208l2.981 4.1981 2.981-4.1981h0.56445l-3.2279 4.5156 3.4396 4.7978h-0.56444l-3.1926-4.4626-3.1574 4.4626h-0.5468zm-7.7964-4.0746h-2.099v8.8724h-0.45861v-8.8724h-1.7992v-0.38806l1.7992-0.0529v-1.3229q0-1.3758 0.58209-2.1167 0.59972-0.74084 1.9579-0.74084 0.44098 0 0.77612 0.0706 0.33513 0.0529 0.67027 0.14111l-0.0706 0.45861q-0.3175-0.12347-0.68792-0.17639-0.35278-0.0529-0.68792-0.0529-1.1289 0-1.6051 0.56444-0.47625 0.54681-0.47625 1.8521v1.3229h2.099zm2.099-3.8453q0.3175 0 0.38806 0.17639 0.0882 0.15875 0.0882 0.37042 0 0.22931-0.0882 0.38806-0.0706 0.15875-0.38806 0.15875-0.26458 0-0.35278-0.15875t-0.0882-0.38806q0-0.21167 0.0882-0.37042 0.0882-0.17639 0.35278-0.17639zm0.22931 3.4043v9.3133h-0.45861v-9.3133zm-11.342-0.17639q1.1994 0 1.9403 0.58209 0.74083 0.58208 1.0936 1.5699 0.35278 0.97014 0.35278 2.2049v0.44097h-6.9321q-0.0176 2.1343 0.93486 3.2808 0.9525 1.1465 2.7693 1.1465 0.84666 0 1.4464-0.12347 0.61736-0.12348 1.4288-0.49389v0.47625q-0.67028 0.29986-1.3582 0.44097-0.67028 0.14111-1.5169 0.14111-1.464 0-2.3989-0.61736-0.91723-0.61736-1.3582-1.6933-0.42333-1.076-0.42333-2.4342 0-1.3229 0.44097-2.4342 0.44097-1.1289 1.3229-1.7992 0.89958-0.68792 2.2578-0.68792zm0 0.44098q-1.4817 0-2.4342 1.0054-0.93486 0.98778-1.0936 2.9104h6.4382q0.0176-1.7462-0.70556-2.8222-0.7232-1.0936-2.2049-1.0936zm-6.4205-0.4057q0.42334 0 0.75847 0.0529 0.35278 0.0529 0.67028 0.14111l-0.10583 0.42333q-0.33514-0.0882-0.635-0.12347-0.28222-0.0529-0.68792-0.0529-1.464 0-2.1519 1.0231-0.68792 1.0231-0.68792 2.7517v5.2388h-0.45861v-9.3133h0.42333l0.0353 1.7815h0.0353q0.24694-0.81139 0.9525-1.3582 0.72319-0.56445 1.8521-0.56445zm-8.6607 4.6214q0-2.346 0.67028-4.3392 0.68792-1.9932 1.8874-3.4219h0.58208q-1.3582 1.5522-2.0108 3.5454-0.65264 1.9756-0.65264 4.198 0 2.1872 0.65264 4.1275 0.67028 1.9403 2.0108 3.5101h-0.58208q-1.1994-1.4817-1.8874-3.3867-0.67028-1.9226-0.67028-4.2333zm-8.5019 5.0094q-1.2524 0-2.2401-0.51153-0.97014-0.51152-1.5346-1.5875-0.54681-1.076-0.54681-2.7517 0-1.7462 0.58208-2.8399 0.58208-1.0936 1.5699-1.6051 1.0054-0.51153 2.2754-0.51153 0.7232 0 1.3935 0.15875 0.67028 0.14111 1.0936 0.35278l-0.47625 1.2876q-0.42333-0.15875-0.98778-0.29986t-1.0583-0.14111q-2.7869 0-2.7869 3.5807 0 1.711 0.67028 2.6282 0.68792 0.89958 2.0285 0.89958 0.77611 0 1.3582-0.15875 0.59972-0.15875 1.0936-0.38805v1.3758q-0.47625 0.24695-1.0583 0.37042-0.56444 0.14111-1.3758 0.14111zm-7.5494-13.176q0.35278 0 0.61736 0.24695 0.28222 0.2293 0.28222 0.74083 0 0.49389-0.28222 0.74083-0.26458 0.24695-0.61736 0.24695-0.38806 0-0.65264-0.24695-0.26458-0.24694-0.26458-0.74083 0-0.51153 0.26458-0.74083 0.26458-0.24695 0.65264-0.24695zm0.75847 3.5454v9.4544h-1.5522v-9.4544zm-7.9022-0.17639q1.6933 0 2.5576 0.82903 0.86431 0.81139 0.86431 2.6458v6.156h-1.5346v-6.0501q0-2.2754-2.1167-2.2754-1.5699 0-2.1696 0.88195-0.59972 0.88194-0.59972 2.54v4.9036h-1.5522v-9.4544h1.2524l0.22931 1.2876h0.08819q0.45861-0.74083 1.27-1.0936 0.81139-0.37042 1.711-0.37042zm-7.0026 4.886q0 2.346-1.1994 3.6336-1.1818 1.2876-3.2103 1.2876-1.2524 0-2.2401-0.56444-0.97014-0.58209-1.5346-1.6757-0.56444-1.1112-0.56444-2.6811 0-2.346 1.1818-3.616 1.1818-1.27 3.2103-1.27 1.2876 0 2.2578 0.58209 0.98778 0.56444 1.5346 1.658 0.56444 1.076 0.56444 2.6458zm-7.1438 0q0 1.6757 0.65264 2.6635 0.67028 0.97014 2.1167 0.97014 1.4288 0 2.099-0.97014 0.67028-0.98778 0.67028-2.6635 0-1.6757-0.67028-2.6282t-2.1167-0.9525-2.099 0.9525q-0.65264 0.9525-0.65264 2.6282zm-3.369 2.1343q0 1.3758-1.0231 2.0814-1.0231 0.70555-2.7517 0.70555-0.98778 0-1.711-0.15875-0.70556-0.15875-1.2524-0.44097v-1.4111q0.56444 0.28222 1.3582 0.52916 0.81139 0.22931 1.6404 0.22931 1.1818 0 1.711-0.37042 0.52917-0.38805 0.52917-1.023 0-0.35278-0.19403-0.635-0.19403-0.28223-0.70556-0.56445-0.49389-0.28222-1.4288-0.635-0.91722-0.35278-1.5699-0.70556-0.65264-0.35277-1.0054-0.84666t-0.35278-1.27q0-1.1994 0.97014-1.8521 0.98778-0.65264 2.5753-0.65264 0.86431 0 1.6051 0.17639 0.75847 0.15875 1.4111 0.45861l-0.52917 1.2347q-0.59972-0.24695-1.2524-0.42334-0.65264-0.17639-1.3406-0.17639-0.9525 0-1.464 0.3175-0.49389 0.29987-0.49389 0.82903 0 0.38806 0.22931 0.67028 0.2293 0.26458 0.75847 0.52917 0.5468 0.24694 1.4464 0.59972 0.89958 0.33514 1.5346 0.68792 0.635 0.35278 0.97014 0.8643 0.33514 0.49389 0.33514 1.2524zm-9.0311-7.0203q0.26458 0 0.56444 0.0353 0.3175 0.0176 0.54681 0.0706l-0.19403 1.4288q-0.22931-0.0529-0.51153-0.0882-0.26458-0.0353-0.51153-0.0353-0.7232 0-1.3582 0.4057-0.635 0.38806-1.0231 1.1112-0.37042 0.70556-0.37042 1.6581v5.0447h-1.5522v-9.4544h1.27l0.17639 1.7286h0.07056q0.45861-0.77611 1.1818-1.3406 0.7232-0.56445 1.711-0.56445zm-8.1668-3.369q0.35278 0 0.61736 0.24695 0.28222 0.2293 0.28222 0.74083 0 0.49389-0.28222 0.74083-0.26458 0.24695-0.61736 0.24695-0.38806 0-0.65264-0.24695-0.26458-0.24694-0.26458-0.74083 0-0.51153 0.26458-0.74083 0.26458-0.24695 0.65264-0.24695zm0.75847 3.5454v9.4544h-1.5522v-9.4544zm-7.8669-0.15875q1.7286 0 2.5576 0.75847 0.82903 0.75848 0.82903 2.4165v6.4382h-1.1289l-0.29986-1.3406h-0.07056q-0.61736 0.77611-1.3053 1.1465-0.67028 0.37042-1.8697 0.37042-1.2876 0-2.1343-0.67028-0.84667-0.68791-0.84667-2.1343 0-1.4111 1.1113-2.1696 1.1113-0.77611 3.4219-0.84667l1.6051-0.0529v-0.56445q0-1.1818-0.51153-1.6404-0.51153-0.45861-1.4464-0.45861-0.74083 0-1.4111 0.22931-0.67028 0.21167-1.2524 0.49389l-0.47625-1.1642q0.61736-0.33514 1.464-0.56444 0.84667-0.24695 1.7639-0.24695zm0.45861 5.0447q-1.7639 0.0705-2.4518 0.56444-0.67028 0.49389-0.67028 1.3935 0 0.79375 0.47625 1.1642 0.49389 0.37042 1.2524 0.37042 1.1994 0 1.9932-0.65264 0.79375-0.67028 0.79375-2.0461v-0.84667z" fill="#ccc" />
-      </g>
-    </g>
-  </svg>
+    </svg>
+    <span class="text-body ml-2 text-nowrap">airsonic&nbsp;
+      <span class="text-muted">(refix)</span>
+    </span>
+  </div>
 </template>
 <style scoped>
-  .cloud {
+  svg {
     fill: var(--primary);
+    height: 32px;
+    margin-bottom: 2px;
   }
 </style>
diff --git a/src/app/Nav.vue b/src/app/Nav.vue
index a9116fa..cc4b679 100644
--- a/src/app/Nav.vue
+++ b/src/app/Nav.vue
@@ -1,8 +1,8 @@
 <template>
   <nav class="nav flex-column">
-    <div class="logo d-flex justify-content-between">
+    <div class="sidebar-brand d-flex justify-content-between align-items-end">
       <Logo />
-      <button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
+      <button class="btn btn-link btn-lg p-0 m-0 d-md-none" @click="hideMenu">
         <Icon icon="x" />
       </button>
     </div>
diff --git a/src/app/Sidebar.vue b/src/app/Sidebar.vue
index 629a038..d7d0858 100644
--- a/src/app/Sidebar.vue
+++ b/src/app/Sidebar.vue
@@ -26,11 +26,8 @@
     width: 250px;
   }
 
-  .sidebar-container .logo {
-    padding: 1.5rem 1rem;
-  }
-  .sidebar-container .logo > * {
-    height: 1.5rem;
+  .sidebar-container .sidebar-brand {
+    padding: 1rem 1rem 0.75rem;
   }
 
   .sidebar-container .sidebar-heading {
diff --git a/src/auth/Login.vue b/src/auth/Login.vue
index 3b540fc..51ffeaf 100644
--- a/src/auth/Login.vue
+++ b/src/auth/Login.vue
@@ -7,8 +7,8 @@
       <b-overlay rounded :show="busy" opacity="0.1">
         <div class="card-body">
           <form @submit.prevent="login">
-            <div style="width: 160px;" class="d-flex mx-auto mb-2">
-              <Logo />
+            <div class="d-flex mb-2">
+              <Logo class="mx-auto" />
             </div>
             <b-form-group v-if="!config.serverUrl" label="Server">
               <b-form-input v-model="server" name="server" type="text" :state="valid" />