From 95e5d27a1f320496bc30515167015c829e02362a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Nov 2021 19:56:24 +0530
Subject: [PATCH] refactor: ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/templates/templatesModal.vue      |  2 +-
 packages/nc-gui/pages/nc/_project_id.vue         | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/templates/templatesModal.vue b/packages/nc-gui/components/templates/templatesModal.vue
index 1c2fc97069..64d15b1d21 100644
--- a/packages/nc-gui/components/templates/templatesModal.vue
+++ b/packages/nc-gui/components/templates/templatesModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="d-flex align-center">
     <span v-ripple class="caption font-weight-bold pointer" @click="templatesModal = true">Templates</span>
     <v-dialog v-if="templatesModal" v-model="templatesModal">
       <v-card height="90vh">
diff --git a/packages/nc-gui/pages/nc/_project_id.vue b/packages/nc-gui/pages/nc/_project_id.vue
index 22f8d669e6..deeb6c2ae6 100644
--- a/packages/nc-gui/pages/nc/_project_id.vue
+++ b/packages/nc-gui/pages/nc/_project_id.vue
@@ -1,10 +1,20 @@
 <template>
   <v-container fluid class="pa-0 ma-0" style="overflow: auto">
     <splitpanes style="height:calc(100vh - 40px); position: relative;" class="xc-theme">
-      <pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="overflow: auto;">
+      <pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="position: relative;overflow-x: hidden">
         <ProjectTreeView v-show="showProjectTree" ref="treeview" />
-        <v-btn icon color="grey" class="pane-toggle" :style="'transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);' + (showProjectTree?`left: calc(${paneSize}% - 1.25rem);`:'left: calc(1.5% - 1.25rem);')" :class="{'pane-toggle-active': showProjectTree}" @click="toggleTreeView">
-          <v-icon small>{{ showProjectTree ? 'mdi-arrow-expand-left' : 'mdi-arrow-expand-right' }}</v-icon>
+        <v-btn
+          x-small
+          icon
+          color="grey"
+          class="pane-toggle"
+          style="transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);right:-8px"
+          :class="{'pane-toggle-active': showProjectTree}"
+          @click="toggleTreeView"
+        >
+          <v-icon x-small color="rgba(127,130,139)">
+            {{ showProjectTree ? 'mdi-arrow-left' : 'mdi-arrow-right' }}
+          </v-icon>
         </v-btn>
       </pane>
       <pane :size="showProjectTree ? 100 - paneSize : 100">