Hide most frequent/most recent proxy history when empty

mullvad · Feb 2, 2024 · c45a4d2 · c45a4d2
1 parent 9e37ed5
commit c45a4d2
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 89 deletions.
diff --git a/src/components/LocationTabs.vue b/src/components/LocationTabs.vue
@@ -20,7 +20,7 @@ const { mostRecent } = useProxyHistory();
 </script>
 
 <template>
-  <div v-if="mostRecent" class="mb-8 tabs-card">
+  <div v-if="mostRecent.length > 0" class="mb-8 tabs-card">
     <n-tabs
       size="large"
       justify-content="space-evenly"

diff --git a/src/components/__snapshots__/Location.test.ts.snap b/src/components/__snapshots__/Location.test.ts.snap
@@ -11,94 +11,7 @@ exports[`Location should show two countries 1`] = `
      Select the location where you want to have all your browser traffic routed through. 
   </p>
   <div>
-    <div
-      class="mb-8 tabs-card"
-    >
-      <div
-        class="n-tabs n-tabs--line-type n-tabs--large-size n-tabs--flex n-tabs--top"
-        style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #fff; --n-tab-font-size: 16px; --n-tab-text-color: var(--light-grey); --n-tab-text-color-active: #fff; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #fff; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 14px 0; --n-tab-padding-vertical: 10px 20px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 16px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"
-      >
-        <div
-          class="n-tabs-nav--line-type n-tabs-nav--top n-tabs-nav"
-        >
-          <!---->
-          
-          <div
-            class="n-tabs-nav-scroll-wrapper"
-          >
-            <div
-              class="v-x-scroll"
-            >
-              <div
-                class="n-tabs-nav-scroll-content"
-              >
-                <div
-                  class="n-tabs-wrapper"
-                  style="display: flex; justify-content: space-evenly;"
-                >
-                  <!---->
-                  
-                  <div
-                    class="n-tabs-tab-wrapper"
-                  >
-                    <!---->
-                    <div
-                      class="n-tabs-tab n-tabs-tab--active"
-                      data-name="mostUsed"
-                    >
-                      <span
-                        class="n-tabs-tab__label"
-                      >
-                        Frequent Locations
-                      </span>
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="n-tabs-tab-wrapper"
-                  >
-                    <!---->
-                    <div
-                      class="n-tabs-tab"
-                      data-name="recent"
-                    >
-                      <span
-                        class="n-tabs-tab__label"
-                      >
-                        Recent Locations
-                      </span>
-                      <!---->
-                    </div>
-                  </div>
-                  
-                  <!---->
-                  <!---->
-                </div>
-                <!---->
-                <div
-                  class="n-tabs-bar"
-                />
-              </div>
-            </div>
-          </div>
-          
-          <!---->
-          <!---->
-        </div>
-        
-        <div
-          class="n-tab-pane"
-        >
-          <div
-            class="space-y-2"
-          >
-            
-            
-          </div>
-        </div>
-        
-      </div>
-    </div>
+    <!--v-if-->
     <div
       class="n-collapse"
       style="--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-divider-color: rgb(239, 239, 245); --n-title-padding: 16px 0 0 0; --n-title-font-size: 14px; --n-title-text-color: rgb(31, 34, 37); --n-title-text-color-disabled: rgba(194, 194, 194, 1); --n-title-font-weight: 400; --n-arrow-color: rgb(51, 54, 57); --n-arrow-color-disabled: rgba(194, 194, 194, 1); --n-item-margin: 16px 0 0 0;"