💄 Site > Search > Add design

site/src/components/files-tree-file/style.styl

@@ -3,7 +3,13 @@
 
     .text
         padding-left 12px
-        opacity 0.6
+
+        .letter
+            opacity 0.6
+
+            &.highlight
+                opacity 1
+                font-weight bold
 
     .notif
         display inline-block
@@ -29,5 +35,7 @@
 
     &:hover
         .text
-            opacity 1
-            color #4bd1c5
+            color #4bd1c5
+
+            .letter
+                opacity 1

site/src/components/files-tree-file/template.html

@@ -3,7 +3,7 @@
         <file-icon class="icon" :extension="content.extension"></file-icon>
         <span class="text">
             <template v-for="(letter, key) in content.name">
-                <span :style="matchingPositions.indexOf(key) !== -1 ? 'font-weight:bold;' : ''">{{ letter }}</span>
+                <span class="letter" :class="[matchingPositions.indexOf(key) !== -1 ? 'highlight' : '']">{{ letter }}</span>
             </template>
         </span>
         <span v-if="content.isNew" class="notif new">new</span>

site/src/components/files-tree-folder/style.styl

@@ -6,12 +6,20 @@
 
     .text
         padding-left 12px
-        opacity 0.6
+
+        .letter
+            opacity 0.6
+
+            &.highlight
+                opacity 1
+                font-weight bold
 
     &:hover
         .icon
             opacity 1
 
         .text
-            opacity 1
-            color #4bd1c5
+            color #4bd1c5
+
+            .letter
+                opacity 1

site/src/components/files-tree-folder/template.html

@@ -4,7 +4,7 @@
         <file-icon class="icon" extension="folder" v-show="!open"></file-icon>
         <span class="text">
             <template v-for="(letter, key) in content.name">
-                <span :style="matchingPositions.indexOf(key) !== -1 ? 'font-weight:bold;' : ''">{{ letter }}</span>
+                <span class="letter" :class="[matchingPositions.indexOf(key) !== -1 ? 'highlight' : '']">{{ letter }}</span>
             </template>
         </span>
     </a>

site/src/components/files-tree/style.styl

@@ -7,6 +7,16 @@
     background #26283B
     color #ffffff
 
+.search
+    display block
+    font-size 14px
+    padding-left 20px
+    width 100%
+    height 40px
+    margin-bottom 10px
+    line-height 40px
+    border-bottom 1px solid rgba(255, 255, 255, 0.2)
+
 .content
     line-height 28px
     font-size 14px

site/src/components/files-tree/template.html

@@ -1,5 +1,5 @@
 <div class="file-tree" :style="`right: calc(100vw - 290px - ${scrollbarWidth}px);`">
-    <input type="text" v-model="searchValue">
+    <input class="search" type="text" v-model="searchValue" placeholder="Search for files ...">
     <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
     <div>
          <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>