Merge pull request #469 from gobitfly/BIDS-3125/RestyleSharedDashboar…

…dViewModal Bids 3125/restyle shared dashboard view modal
gobitfly · Jun 13, 2024 · 3c9d578 · 3c9d578
2 parents 6719b4d + 8334d6e
commit 3c9d578
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/frontend/components/bc/CookieModal.vue b/frontend/components/bc/CookieModal.vue
@@ -29,9 +29,9 @@ const visible = computed(() => cookiePreference.value === undefined)
         {{ tOf($t, 'cookies.text', 2) }}
       </div>
       <div class="button-container">
-        <Button class="necessary-button" @click="setCookiePreference('functional')">
+        <div class="necessary-button" @click="setCookiePreference('functional')">
           {{ $t('cookies.only_necessary') }}
-        </Button>
+        </div>
         <Button @click="setCookiePreference('all')">
           {{ $t('cookies.accept_all') }}
         </Button>
@@ -65,19 +65,23 @@ const visible = computed(() => cookiePreference.value === undefined)
 
   .button-container {
     display: flex;
-    gap: 7px;
+    align-items: center;
+    gap: var(--padding-large);
     min-width: max-content;
 
     @media (max-width: 670px) {
       flex-direction: column;
       gap: 9px;
       width: 100%;
+
+      > Button {
+        width: 100%;
+      }
     }
 
     .necessary-button {
-      background-color: var(--button-color-dark-pattern);
-      border-color: var(--button-color-dark-pattern);
-      color: var(--button-text-color-dark-pattern);
+      cursor: pointer;
+      color: var(--text-color-disabled);
     }
   }
 }

diff --git a/frontend/components/dashboard/SharedDashboardModal.vue b/frontend/components/dashboard/SharedDashboardModal.vue
@@ -7,7 +7,8 @@ const { dashboards } = useUserDashboardStore()
 const { t: $t } = useI18n()
 const route = useRoute()
 
-const visible = computed(() => isShared.value && cookiePreference.value !== undefined)
+const dismissed = ref(false)
+const visible = computed(() => isShared.value && !dismissed.value && cookiePreference.value !== undefined)
 
 const text = computed(() => {
   const userHasOwnDashboard = ((dashboards.value?.validator_dashboards?.length || 0) + (dashboards.value?.account_dashboards?.length || 0)) > 0
@@ -30,11 +31,16 @@ const text = computed(() => {
   >
     <div class="dialog-container">
       {{ text.caption }}
-      <BcLink :to="`/dashboard`" :replace="route.path.startsWith('/dashboard')">
-        <Button class="button">
-          {{ text.button }}
-        </Button>
-      </BcLink>
+      <div class="button-row">
+        <div class="dismiss" @click="dismissed=true">
+          {{ $t('navigation.dismiss') }}
+        </div>
+        <BcLink :to="`/dashboard`" :replace="route.path.startsWith('/dashboard')">
+          <Button>
+            {{ text.button }}
+          </Button>
+        </BcLink>
+      </div>
     </div>
   </Dialog>
 </template>
@@ -44,12 +50,19 @@ const text = computed(() => {
 
 .dialog-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: var(--padding-large);
+  gap: var(--padding);
 
-  .button {
-    min-width: fit-content;
-    white-space: nowrap;
+  .button-row {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-large);
+
+    .dismiss {
+      cursor: pointer;
+      color: var(--text-color-disabled);
+    }
   }
 }
 </style>