tailwind updates to main dev mode and sidebar

- updated the style and layout
- darkmode support
- reconfigured some layouts
- updated a few builtins preliminarily to help with debuging
- responsive mode can do full window
- configuration panel for all the dev tool options (and reset)

Author: gureckis

plugins/strip-devtool.js

@@ -52,6 +52,7 @@ export default function stripDevToolPlugin() {
             clean_src = removetag(clean_src, 'Notivue')
             clean_src = removeline(clean_src, 'Notivue')
             clean_src = removeline(clean_src, 'notivue')
+            clean_src = removeline(clean_src, 'DevAppSidebar')
           }
         }
 

src/builtins/advertisement/AdvertisementView.vue

@@ -46,7 +46,7 @@ onBeforeUnmount(() => {
   <div class="page prevent-select text-center flex flex-col items-center">
     <br /><br /><br />
     <img ref="logo" src="@/user/assets/brain.svg" width="220" />
-    <h1 ref="title" class="title is-3">Please help us understand the mind!</h1>
+    <h1 ref="title" class="text-3xl font-bold mb-4">Please help us understand the mind!</h1>
     <p>Take part in a short experiment where you play some games.</p>
     <br />
     <Button ref="button" id="begintask" @click="finish()" size="lg">

src/builtins/navbars/StatusBar.vue

@@ -8,6 +8,7 @@ import useAPI from '@/core/composables/useAPI'
 import WithdrawFormModal from '@/builtins/withdraw/WithdrawFormModal.vue'
 import InformedConsentModal from '@/builtins/simple_consent/InformedConsentModal.vue'
 import ReportIssueModal from '@/builtins/report_issue/ReportIssueModal.vue'
+import { Button } from '@/uikit/components/ui/button'
 
 const router = useRouter()
 const smilestore = useSmileStore() // get the global store
@@ -50,13 +51,13 @@ function submitWithdraw() {
 </script>
 
 <template>
-  <div class="infobar" role="navigation" aria-label="main navigation">
-    <div class="infobar-brand">
-      <a class="infobar-logo" :href="appconfig.labURL" target="_new" v-if="!appconfig.anonymousMode">
+  <div class="flex flex-row items-stretch relative px-5" role="navigation" aria-label="main navigation">
+    <div class="flex items-stretch flex-shrink-0 min-h-[3.25rem]">
+      <a class="flex items-center pt-3" :href="appconfig.labURL" target="_new" v-if="!appconfig.anonymousMode">
         <img :src="api.getStaticUrl(appconfig.brandLogoFn)" width="90" />
       </a>
-      <div class="infobar-item">
-        <p class="is-size-7 studyinfo pt-2">
+      <div class="flex items-center pt-1">
+        <p class="text-xs text-left pl-2.5 text-foreground pt-2 sm:block hidden font-mono">
           Study: {{ smilestore.config.codeName }}<br />Version: {{ smilestore.config.github.lastCommitHash
           }}{{
             appconfig.mode === 'testing' || appconfig.mode === 'development' || appconfig.mode === 'presentation'
@@ -67,49 +68,55 @@ function submitWithdraw() {
         </p>
       </div>
     </div>
-    <div id="infobar" class="infobar-menu is-active">
-      <div class="infobar-end">
-        <div class="infobar-item" v-if="!appconfig.anonymousMode">
-          <div class="buttons">
-            <button
-              class="button is-info is-small is-light"
-              v-if="api.store.browserPersisted.consented"
-              @click="toggleConsent()"
-            >
-              <FAIcon icon="magnifying-glass" />&nbsp;&nbsp;View consent
-            </button>
-            <button
-              class="button is-danger is-small is-light"
+    <div id="infobar" class="flex-grow flex-shrink-0 flex items-stretch z-10">
+      <div class="flex justify-end ml-auto items-stretch">
+        <div class="flex items-center pt-1" v-if="!appconfig.anonymousMode">
+          <div class="flex gap-2">
+            <Button variant="outline" size="xs" v-if="api.store.browserPersisted.consented" @click="toggleConsent()">
+              <FAIcon icon="magnifying-glass" />
+              View consent
+            </Button>
+            <Button
+              variant="destructive"
+              size="xs"
               v-if="api.store.browserPersisted.consented && !api.store.browserPersisted.withdrawn"
               @click="toggleWithdraw()"
             >
-              <FAIcon icon="circle-xmark" />&nbsp;&nbsp;Withdraw
-            </button>
-            <button class="button is-warning is-small is-light" @click="toggleReport()" v-if="false">
-              <FAIcon icon="hand" />&nbsp;&nbsp;Report issue
-            </button>
+              <FAIcon icon="circle-xmark" />
+              Withdraw
+            </Button>
+            <Button variant="secondary" size="xs" @click="toggleReport()" v-if="false">
+              <FAIcon icon="hand" />
+              Report issue
+            </Button>
           </div>
         </div>
       </div>
     </div>
   </div>
 
   <!-- modal for viewing consent form -->
-  <div class="modal" :class="{ 'is-active': showconsentmodal }">
-    <div class="modal-background" @click="toggleConsent()"></div>
-    <div class="modal-content">
-      <div class="modaltext">
+  <div class="absolute inset-0 z-50 flex items-center justify-center p-8" :class="{ hidden: !showconsentmodal }">
+    <div class="absolute inset-0 bg-black bg-opacity-50" @click="toggleConsent()"></div>
+    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+      <div class="p-8">
         <InformedConsentModal @toggle-consent="toggleConsent()" />
       </div>
     </div>
-    <button class="modal-close is-large" aria-label="close" @click="toggleConsent()"></button>
+    <button
+      class="absolute top-8 right-8 text-gray-400 hover:text-gray-600 text-2xl z-10"
+      aria-label="close"
+      @click="toggleConsent()"
+    >
+      ×
+    </button>
   </div>
 
   <!-- modal for withdrawing from study -->
-  <div class="modal" :class="{ 'is-active': showwithdrawmodal }">
-    <div class="modal-background" @click="toggleWithdraw()"></div>
-    <div class="modal-content">
-      <div class="modaltext">
+  <div class="absolute inset-0 z-50 flex items-center justify-center p-8" :class="{ hidden: !showwithdrawmodal }">
+    <div class="absolute inset-0 bg-black bg-opacity-50" @click="toggleWithdraw()"></div>
+    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+      <div class="p-8">
         <WithdrawFormModal
           :prefill-email="email"
           ref="withdrawform"
@@ -118,100 +125,33 @@ function submitWithdraw() {
         />
       </div>
     </div>
-    <button class="modal-close is-large" aria-label="close" @click="toggleWithdraw()"></button>
+    <button
+      class="absolute top-8 right-8 text-gray-400 hover:text-gray-600 text-2xl z-10"
+      aria-label="close"
+      @click="toggleWithdraw()"
+    >
+      ×
+    </button>
   </div>
 
   <!-- modal for reporting issues -->
-  <div class="modal" :class="{ 'is-active': showreportissuemodal }">
-    <div class="modal-background" @click="toggleReport()"></div>
-    <div class="modal-content">
-      <div class="modaltext">
+  <div class="absolute inset-0 z-50 flex items-center justify-center p-8" :class="{ hidden: !showreportissuemodal }">
+    <div class="absolute inset-0 bg-black bg-opacity-50" @click="toggleReport()"></div>
+    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+      <div class="p-8">
         <ReportIssueModal @toggle-report="toggleReport()" />
       </div>
     </div>
-    <button class="modal-close is-large" aria-label="close" @click="toggleReport()"></button>
+    <button
+      class="absolute top-8 right-8 text-gray-400 hover:text-gray-600 text-2xl z-10"
+      aria-label="close"
+      @click="toggleReport()"
+    >
+      ×
+    </button>
   </div>
 </template>
 
 <style scoped>
-.infobar {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  position: relative;
-}
-
-.infobar-brand {
-  align-items: stretch;
-  display: flex;
-  flex-shrink: 0;
-  min-height: var(--bulma-navbar-height);
-}
-
-.infobar {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.infobar-logo {
-  align-items: center;
-  padding-top: 12px;
-}
-
-.infobar-item {
-  align-items: center;
-  display: flex;
-  padding-top: 3px;
-}
-
-.infobar-end {
-  justify-content: flex-end;
-  margin-inline-start: auto;
-  display: flex;
-  align-items: stretch;
-}
-
-.infobar-menu {
-  flex-grow: 1;
-  flex-shrink: 0;
-  align-items: stretch;
-  display: flex;
-  z-index: 999;
-}
-
-/* scoped css for this component */
-.modaltext {
-  background-color: #fff;
-  padding: 30px;
-}
-
-.navbar {
-  z-index: 10;
-  background-color: var(--status-bar-bg-color);
-  color: var(--status-bar-text-color);
-}
-
-.modal-content {
-  width: 80%;
-}
-
-.studyinfo {
-  text-align: left;
-  padding-left: 10px;
-  color: var(--status-bar-text-color);
-}
-
-.navbar-start {
-  margin-right: 10px;
-}
-
-.navbar-end {
-  margin-left: auto;
-}
-
-@media screen and (max-width: 560px) {
-  .studyinfo {
-    display: none;
-  }
-}
+/* All styling has been converted to Tailwind classes */
 </style>

src/builtins/simple_consent/InformedConsentModal.vue

@@ -1,29 +1,28 @@
 <script setup>
 import useAPI from '@/core/composables/useAPI'
+import { Button } from '@/uikit/components/ui/button'
 const api = useAPI()
 //import InformedConsentText from '@/user/components/InformedConsentText.vue'
 </script>
 
 <template>
-  <article class="message">
-    <div class="message-header">
-      <p>Informed Consent</p>
+  <div class="rounded-lg border border-blue-200 bg-blue-50 p-6 shadow-sm">
+    <div class="mb-4 border-b border-blue-200 pb-3">
+      <h3 class="text-lg font-semibold text-blue-800">Informed Consent</h3>
     </div>
-    <div class="message-body has-text-left mr-7 pb-8">
+    <div class="space-y-4 text-left pr-7 pb-8">
       <template v-if="api.getAppComponent">
         <component :is="api.getAppComponent('informed_consent_text')" />
       </template>
       <template v-else>
-        <div class="notification is-danger">
+        <div class="rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-800">
           Error: Unable to load consent form text. Please contact the study administrator.
         </div>
       </template>
       <!-- load text of consent form -->
-      <div class="has-text-right mt-5">
-        <button class="button" aria-label="close" @click="$emit('toggleConsent')">
-          Thanks, take me back to the study!
-        </button>
+      <div class="flex justify-end pt-5">
+        <Button variant="default" @click="$emit('toggleConsent')"> Thanks, take me back to the study! </Button>
       </div>
     </div>
-  </article>
+  </div>
 </template>