web/satellite: browser header buttons styles fixed

https://github.com/storj/storj/issues/5459

Change-Id: I75368aabd0faac3d6662b95a31bce4896e6a8341

web/satellite/src/components/browser/FileBrowser.vue

@@ -27,8 +27,7 @@
                                     </svg>
                                     Upload
                                     <span class="upload-button__divider" />
-                                    <BlackArrowHide v-if="isUploadDropDownShown" class="arrow" />
+                                    <BlackArrowExpand :class="{ active: isUploadDropDownShown }" class="arrow" />
-                                    <BlackArrowExpand v-else class="arrow" />
                                 </button>
                                 <input
                                     ref="fileInput"
@@ -75,16 +74,14 @@
                             </div>
 
                             <div class="position-relative">
-                                <button
+                                <v-button
-                                    type="button"
+                                    icon="folder"
-                                    class="btn btn-sm btn-light btn-block new-folder-button"
+                                    label="New Folder"
-                                    @click="toggleFolderCreationModal"
+                                    height="44px"
-                                >
+                                    :is-white="true"
-                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    font-size="14px"
-                                        <path d="M6.30544 1.63444C6.45643 1.66268 6.59063 1.70959 6.72634 1.78156L6.76941 1.80506C6.88832 1.87193 7.00713 1.95699 7.28196 2.18186L9.17564 3.73123H11.997C13.111 3.73123 13.515 3.84722 13.9223 4.06503C14.3295 4.28284 14.6492 4.60247 14.867 5.00975L14.8903 5.0542C15.0931 5.44734 15.2008 5.8615 15.2008 6.93502V11.104C15.2008 12.4302 15.0627 12.9111 14.8034 13.396C14.5441 13.8808 14.1636 14.2613 13.6787 14.5206L13.6302 14.5461L13.5824 14.5704C13.1346 14.7936 12.6429 14.9137 11.4512 14.918H4.61483C3.2886 14.918 2.80768 14.7799 2.32283 14.5206C1.83798 14.2613 1.45747 13.8808 1.19817 13.396L1.17264 13.3475C0.934003 12.8862 0.805265 12.4029 0.800781 11.1696V4.36463C0.800781 3.69226 0.909136 3.24683 1.1133 2.86088C1.31746 2.47493 1.61743 2.17098 2.00065 1.96174C2.38387 1.75251 2.82783 1.63828 3.50014 1.62941L5.70273 1.60054L5.81497 1.6001C6.06913 1.60045 6.18205 1.61136 6.30544 1.63444ZM7.08876 6.29289C6.82188 6.49471 6.49897 6.60794 6.16527 6.6174L6.1197 6.61805H3.03986C2.70795 6.61805 2.39296 6.54561 2.10984 6.41568V11.1649L2.11118 11.3259L2.11278 11.4328C2.12691 12.1945 2.19366 12.4815 2.35254 12.7786C2.48984 13.0353 2.68348 13.2289 2.94019 13.3662L2.97747 13.3857L3.01739 13.4054C3.30474 13.543 3.62468 13.5996 4.40102 13.6078L4.61483 13.6089L11.4963 13.6086C12.4225 13.6041 12.7384 13.539 13.0614 13.3662C13.3181 13.2289 13.5117 13.0353 13.649 12.7786L13.6685 12.7413L13.6882 12.7014C13.8257 12.414 13.8824 12.0941 13.8906 11.3178L13.8917 11.104V6.93502C13.8917 6.11696 13.8448 5.87439 13.7126 5.62711C13.6168 5.44797 13.484 5.31521 13.3049 5.21941L13.274 5.20332C13.0416 5.08595 12.7921 5.04222 12.0474 5.04038L8.74506 5.04026L7.08876 6.29289ZM5.75624 2.90917L5.6387 2.9104L3.51741 2.93839L3.42225 2.94052C3.03877 2.95287 2.81488 3.00869 2.62798 3.11073C2.47022 3.19687 2.35451 3.31411 2.27046 3.473C2.16869 3.66538 2.11572 3.89577 2.11033 4.29509C2.11339 4.31637 2.1153 4.33777 2.11616 4.35945L2.11668 4.38577C2.11668 4.88583 2.51425 5.29302 3.01055 5.3085L3.03986 5.30896H6.1197C6.17638 5.30896 6.2317 5.29277 6.27926 5.26255L6.29915 5.24874L7.68339 4.20185L6.38268 3.13773C6.22518 3.00999 6.16925 2.96959 6.12489 2.94458L6.11301 2.93809C6.09421 2.92812 6.08564 2.92512 6.06472 2.92121L6.03713 2.91681L6.01827 2.91465C5.97123 2.91001 5.90046 2.90815 5.75624 2.90917Z" fill="black" />
+                                    width="130px"
-                                    </svg>
+                                />
-                                    New Folder
-                                </button>
                             </div>
                             <bucket-settings-nav class="new-folder-button" :bucket-name="bucket" />
                         </div>
@@ -586,11 +583,12 @@ async function goToBuckets(): Promise<void> {
 }
 
 .arrow {
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
     margin: unset;
+    transition-duration: 0.5s;
+
+    &.active {
+        transform: rotate(180deg) scaleX(-1);
+    }
 
     :deep(path) {
         fill: white;
@@ -681,13 +679,19 @@ async function goToBuckets(): Promise<void> {
     justify-content: space-between;
     background-color: var(--c-blue-3);
     border: 1px solid transparent;
+    cursor: pointer;
+    padding-right: 0;
 
     &__divider {
         height: 100%;
         width: 1px;
-        background: var(--c-grey-6);
+        background: var(--c-blue-4);
         margin: 0 7px;
     }
+
+    &:hover {
+        background-color: #0059d0;
+    }
 }
 
 .tile-action-bar {

web/satellite/src/components/common/VButton.vue

@@ -19,6 +19,7 @@
             <CreditCardIcon v-if="icon.toLowerCase() === 'credit-card'" />
             <DocumentIcon v-if="icon.toLowerCase() === 'document'" />
             <TrashIcon v-if="icon.toLowerCase() === 'trash'" />
+            <FolderIcon v-if="icon.toLowerCase() === 'folder'" />
             <span v-if="icon !== 'none'">&nbsp;&nbsp;</span>{{ label }}</span>
     </div>
 </template>
@@ -32,6 +33,7 @@ import TrashIcon from '@/../static/images/accessGrants/trashIcon.svg';
 import LockIcon from '@/../static/images/common/lockIcon.svg';
 import CreditCardIcon from '@/../static/images/common/creditCardIcon-white.svg';
 import DocumentIcon from '@/../static/images/common/documentIcon.svg';
+import FolderIcon from '@/../static/images/objects/newFolder.svg';
 
 const props = withDefaults(defineProps<{
     label?: string;
@@ -230,6 +232,7 @@ const style = computed(() => {
                 :deep(path),
                 :deep(rect) {
                     stroke: white;
+                    fill: white;
                 }
 
                 .label {

web/satellite/static/images/objects/newFolder.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.30544 1.63444C6.45643 1.66268 6.59063 1.70959 6.72634 1.78156L6.76941 1.80506C6.88832 1.87193 7.00713 1.95699 7.28196 2.18186L9.17564 3.73123H11.997C13.111 3.73123 13.515 3.84722 13.9223 4.06503C14.3295 4.28284 14.6492 4.60247 14.867 5.00975L14.8903 5.0542C15.0931 5.44734 15.2008 5.8615 15.2008 6.93502V11.104C15.2008 12.4302 15.0627 12.9111 14.8034 13.396C14.5441 13.8808 14.1636 14.2613 13.6787 14.5206L13.6302 14.5461L13.5824 14.5704C13.1346 14.7936 12.6429 14.9137 11.4512 14.918H4.61483C3.2886 14.918 2.80768 14.7799 2.32283 14.5206C1.83798 14.2613 1.45747 13.8808 1.19817 13.396L1.17264 13.3475C0.934003 12.8862 0.805265 12.4029 0.800781 11.1696V4.36463C0.800781 3.69226 0.909136 3.24683 1.1133 2.86088C1.31746 2.47493 1.61743 2.17098 2.00065 1.96174C2.38387 1.75251 2.82783 1.63828 3.50014 1.62941L5.70273 1.60054L5.81497 1.6001C6.06913 1.60045 6.18205 1.61136 6.30544 1.63444ZM7.08876 6.29289C6.82188 6.49471 6.49897 6.60794 6.16527 6.6174L6.1197 6.61805H3.03986C2.70795 6.61805 2.39296 6.54561 2.10984 6.41568V11.1649L2.11118 11.3259L2.11278 11.4328C2.12691 12.1945 2.19366 12.4815 2.35254 12.7786C2.48984 13.0353 2.68348 13.2289 2.94019 13.3662L2.97747 13.3857L3.01739 13.4054C3.30474 13.543 3.62468 13.5996 4.40102 13.6078L4.61483 13.6089L11.4963 13.6086C12.4225 13.6041 12.7384 13.539 13.0614 13.3662C13.3181 13.2289 13.5117 13.0353 13.649 12.7786L13.6685 12.7413L13.6882 12.7014C13.8257 12.414 13.8824 12.0941 13.8906 11.3178L13.8917 11.104V6.93502C13.8917 6.11696 13.8448 5.87439 13.7126 5.62711C13.6168 5.44797 13.484 5.31521 13.3049 5.21941L13.274 5.20332C13.0416 5.08595 12.7921 5.04222 12.0474 5.04038L8.74506 5.04026L7.08876 6.29289ZM5.75624 2.90917L5.6387 2.9104L3.51741 2.93839L3.42225 2.94052C3.03877 2.95287 2.81488 3.00869 2.62798 3.11073C2.47022 3.19687 2.35451 3.31411 2.27046 3.473C2.16869 3.66538 2.11572 3.89577 2.11033 4.29509C2.11339 4.31637 2.1153 4.33777 2.11616 4.35945L2.11668 4.38577C2.11668 4.88583 2.51425 5.29302 3.01055 5.3085L3.03986 5.30896H6.1197C6.17638 5.30896 6.2317 5.29277 6.27926 5.26255L6.29915 5.24874L7.68339 4.20185L6.38268 3.13773C6.22518 3.00999 6.16925 2.96959 6.12489 2.94458L6.11301 2.93809C6.09421 2.92812 6.08564 2.92512 6.06472 2.92121L6.03713 2.91681L6.01827 2.91465C5.97123 2.91001 5.90046 2.90815 5.75624 2.90917Z" fill="#354049" />
+</svg>