Fix import dropdown

_locales/en/messages.json

@@ -1173,7 +1173,8 @@
     "description": "Label before the replace-with input field in the editor shown on Ctrl-H etc."
   },
   "retrieveBckp": {
-    "message": "Import styles"
+    "message": "Local source",
+    "description": "Selected option to get a backup of styles from a local device/drive"
   },
   "search": {
     "message": "Search",

manage.html

@@ -165,21 +165,6 @@
     </details>
   </template>
 
-  <template data-id="export">
-    <span i18n-text="backupMessage"></span>
-    <div class="dropdown">
-      <button class="dropbtn">
-        <span>Import</span>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </button>
-
-      <div class="dropdown-content">
-        <a href="#" class="unfile-all-styles" i18n-text="retrieveBckp"></a>
-        <a href="#" class="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
-      </div>
-    </div>
-  </template>
-
   <script src="js/polyfill.js"></script>
   <script src="js/promisify.js"></script>
   <script src="js/dom.js"></script>
@@ -255,11 +240,15 @@
       <svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
     </a>
 
-    <a href="#" id="manage-backups-button" i18n-data-title="backupImport" class="tt-w">
+    <div id="manage-backups" i18n-data-title="backupImport" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
         <path d="M20.5 5.2l-1.4-1.6C19 3.2 18.5 3 18 3H6c-.5 0-.9.2-1.2.6L3.5 5.2A2 2 0 0 0 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.5-.2-1-.5-1.3zM6.2 5h11.6l.8 1H5.4l.8-1zM5 19V8h14v11H5zm3-5h2.5v3h3v-3H16l-4-4z"/>
       </svg>
-    </a>
+      <div class="dropdown">
+        <a href="#" id="unfile-all-styles" i18n-text="bckpInstStyles"></a>
+        <a href="#" id="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
+      </div>
+    </div>
 
     <a href="#" id="manage-shortcuts-button" class="chromium-only tt-w" i18n-data-title="shortcutsNote">
       <svg class="svg-icon" viewBox="0 0 24 24">

manage/manage.css

@@ -104,7 +104,7 @@ a:hover {
   top: 0;
   width: 100%;
   height: var(--header-height);
-  z-index: 100;
+  z-index: 101;
   padding: 2px 8px;
   margin: 0;
   display: flex;
@@ -121,7 +121,8 @@ a:hover {
 }
 
 #main-header a:hover,
-#main-actions a:hover svg {
+#main-actions a:hover svg,
+#manage-backups:hover svg {
   color: hsla(180, 50%, 50%, 1);
   fill: hsla(180, 50%, 50%, 1);
 }
@@ -719,7 +720,6 @@ details.applies-to-extra[open] {
   display: none;
 }
 
-
 /* drag-n-drop on import button */
 .dropzone:after {
   background-color: rgba(0, 0, 0, 0.7);
@@ -765,51 +765,36 @@ details.applies-to-extra[open] {
 }
 
 /* export/import buttons */
-#backup-buttons .dropbtn {
+#manage-backups {
-  padding: 3px 7px;
-  cursor: pointer;
-  text-overflow: inherit;
-}
-
-#backup-buttons .dropbtn span {
-  display: inline-block;
-  margin-right: 12px;
-}
-
-#backup-buttons .dropdown {
   position: relative;
-  display: inline-block;
 }
 
-#backup-buttons .dropdown-content {
+#manage-backups .dropdown {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
+  z-index: 101;
 }
 
-#backup-buttons .dropdown-content a {
+#manage-backups .dropdown a {
   color: black;
   padding: 8px;
+  font-size: 12px;
   text-decoration: none;
   display: block;
 }
 
-#backup-buttons .dropdown-content a:hover {
+#manage-backups .dropdown a:hover {
   /* background-color: #f2f2f2 */
   background-color: #e9e9e9
 }
 
-#backup-buttons .dropdown:hover .dropdown-content {
+#manage-backups:hover .dropdown {
   display: block;
-}
+  right: -20px;
-
+  top: 99%;
-#backup-buttons .dropdown:hover .dropbtn {
-  background-color: hsl(0, 0%, 95%);
-  border-color: hsl(0, 0%, 52%);
-  /* background-color: #3e8e41; */
 }
 
 /* sort font */