Modifying css and components to look like Utmstack

Author: jdieguez89

frontend/package-lock.json

@@ -1,6 +1,16 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
+      <input
+        type="text"
+        @keyup.exact="keyup"
+        @keyup.enter="submit"
+        ref="input"
+        :autofocus="active"
+        v-model.trim="value"
+        :aria-label="$t('search.pressToSearch')"
+        :placeholder="$t('search.pressToSearch')"
+      />
       <button
         v-if="active"
         class="action"
@@ -11,39 +21,16 @@
         <i class="material-icons">arrow_back</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input
-        type="text"
-        @keyup.exact="keyup"
-        @keyup.enter="submit"
-        ref="input"
-        :autofocus="active"
-        v-model.trim="value"
-        :aria-label="$t('search.search')"
-        :placeholder="$t('search.search')"
-      />
     </div>
 
     <div id="result" ref="result">
       <div>
         <template v-if="isEmpty">
-          <p>{{ text }}</p>
-
           <template v-if="value.length === 0">
-            <div class="boxes">
-              <h3>{{ $t("search.types") }}</h3>
-              <div>
-                <div
-                  tabindex="0"
-                  v-for="(v, k) in boxes"
-                  :key="k"
-                  role="button"
-                  @click="init('type:' + k)"
-                  :aria-label="$t('search.' + v.label)"
-                >
-                  <i class="material-icons">{{ v.icon }}</i>
-                  <p>{{ $t("search." + v.label) }}</p>
-                </div>
-              </div>
+            <div class="valign-wrapper" style="padding: 45%">
+              <i class="material-icons" style="font-size: 8em !important"
+                >toc</i
+              >
             </div>
           </template>
         </template>
@@ -58,14 +45,16 @@
         </ul>
       </div>
       <p id="renew">
-        <i class="material-icons spin">autorenew</i>
+        <i class="material-icons spin" style="font-size: 8em !important"
+          >autorenew</i
+        >
       </p>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from "vuex";
+import { mapGetters, mapMutations, mapState } from "vuex";
 import url from "@/utils/url";
 import { search } from "@/api";
 

frontend/public/img/icons/favicon.ico

@@ -11,7 +11,7 @@
         <span>{{ $t("sidebar.myFiles") }}</span>
       </router-link>
 
-      <div v-if="user.perm.create">
+        <div v-if="user.perm.create">
         <button
           @click="$store.commit('showHover', 'newDir')"
           class="action"
@@ -33,82 +33,14 @@
         </button>
       </div>
 
-      <div>
-        <router-link
-          class="action"
-          to="/settings"
-          :aria-label="$t('sidebar.settings')"
-          :title="$t('sidebar.settings')"
-        >
-          <i class="material-icons">settings_applications</i>
-          <span>{{ $t("sidebar.settings") }}</span>
-        </router-link>
-
-        <button
-          v-if="authMethod == 'json'"
-          @click="logout"
-          class="action"
-          id="logout"
-          :aria-label="$t('sidebar.logout')"
-          :title="$t('sidebar.logout')"
-        >
-          <i class="material-icons">exit_to_app</i>
-          <span>{{ $t("sidebar.logout") }}</span>
-        </button>
-      </div>
     </template>
-    <template v-else>
-      <router-link
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.login')"
-        :title="$t('sidebar.login')"
-      >
-        <i class="material-icons">exit_to_app</i>
-        <span>{{ $t("sidebar.login") }}</span>
-      </router-link>
-
-      <router-link
-        v-if="signup"
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.signup')"
-        :title="$t('sidebar.signup')"
-      >
-        <i class="material-icons">person_add</i>
-        <span>{{ $t("sidebar.signup") }}</span>
-      </router-link>
-    </template>
-
-    <p class="credits">
-      <span>
-        <span v-if="disableExternal">File Browser</span>
-        <a
-          v-else
-          rel="noopener noreferrer"
-          target="_blank"
-          href="https://github.com/filebrowser/filebrowser"
-          >File Browser</a
-        >
-        <span> {{ version }}</span>
-      </span>
-      <span
-        ><a @click="help">{{ $t("sidebar.help") }}</a></span
-      >
-    </p>
   </nav>
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import * as auth from "@/utils/auth";
-import {
-  version,
-  signup,
-  disableExternal,
-  noAuth,
-  authMethod,
-} from "@/utils/constants";
+import { authMethod, disableExternal, noAuth, signup, version } from "@/utils/constants";
 
 export default {
   name: "sidebar",

frontend/public/img/logo.svg

@@ -23,9 +23,8 @@
     <div>
       <p class="name">{{ name }}</p>
 
-      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+      <p v-if="isDir" class="size" data-order="-1"></p>
       <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
-
       <p class="modified">
         <time :datetime="modified">{{ humanTime() }}</time>
       </p>

frontend/src/components/Search.vue

@@ -1,6 +1,5 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
     <action
       v-if="showMenu !== undefined"
       class="menu-button"

frontend/src/components/Sidebar.vue

@@ -1,7 +1,7 @@
 :root {
-  --blue: #2196f3;
-  --dark-blue: #1E88E5;
-  --red: #F44336;
-  --dark-red: #D32F2F;
+  --blue: #1976D2;
+  --dark-blue: #1565C0;
+  --red: #D32F2F;
+  --dark-red:#C62828;
   --moon-grey: #f2f2f2;
 }