Resolve remarks

loama/.env

@@ -0,0 +1 @@
+VITE_DEFAULT_IDP=https://css12.onto-deside.ilabt.imec.be/

loama/src/App.vue

@@ -6,41 +6,36 @@
 </script>
 
 <style>
+h1,
+h2,
+h3 {
+  font-family: "JetBrains Mono", system-ui;
+  font-style: normal;
+  line-height: normal;
+}
+
 h1 {
-  font-family: "JetBrains Mono";
   font-size: calc(var(--base-unit)*8);
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
   color: var(--solid-purple);
   text-transform: uppercase;
 }
 
 h2 {
   color: var(--Solid-Purple);
-  font-family: "JetBrains Mono";
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
 }
 
 h3 {
-  font-family: "JetBrains Mono";
   font-size: calc(var(--base-unit)*4);
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
   color: var(--off-black);
 }
 
 label,
 input,
 p {
-  font-family: Raleway;
   font-size: calc(var(--base-unit)*2);
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
 }
 
 /* Variables */

loama/src/components/InfoPopup.vue

@@ -1,11 +1,11 @@
 <template>
-    <div>
+    <span>
         <h3>Solid Pod URL</h3>
         <p>A URL that links to the pod that you want to use.</p>
         <aside>
             <PhQuestion :size="24" />In order to authenticate, you'll be redirected to the provider's website.
         </aside>
-    </div>
+    </span>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +14,7 @@ import { PhQuestion } from '@phosphor-icons/vue';
 </script>
 
 <style scoped>
-div {
+span {
     position: absolute;
     left: calc(var(--base-unit) * 4);
     border: .2em solid var(--solid-purple);

loama/src/components/LoginForm.vue

@@ -5,17 +5,18 @@
   </header>
   <form @submit.prevent="login">
     <fieldset>
-      <legend>Solid Pod URL
+      <legend>
+        Solid Pod URL
         <PhQuestion :size="24" @mouseover="showPopup = true;" @mouseleave="showPopup = false" />
       </legend>
       <label for="solid-pod-url">
         <PhLink :size="24" class="icon" />
-        <input type="url" id="solid-pod-url" v-model="solidPodUrl" required placeholder="https://pod.pod/pod/card#me" />
+        <input type="url" id="solid-pod-url" v-model="solidPodUrl" :placeholder="defaultSolidPodUrl" />
       </label>
       <p v-if="showWarning" class="warning">Invalid Solid Pod URL. Please check and try again.</p>
     </fieldset>
     <fieldset>
-      <button @click.prevent="setDefaultIdp" :disabled="isLoading" class="outlined">
+      <button :disabled="isLoading" class="outlined">
         <PhQuestion :size="24" /> No Pod?
       </button>
       <button type="submit" :disabled="isLoading">
@@ -37,18 +38,14 @@ defineProps<{ title: string, subtitle?: string }>();
 
 const showPopup = defineModel<boolean>('showPopup');
 
-const emit = defineEmits<{
-  toggleProvider: []
-}>()
-
 const solidPodUrl = ref<string>('');
-const idp = ref<string>('https://css12.onto-deside.ilabt.imec.be/');
+const defaultSolidPodUrl = import.meta.env.VITE_DEFAULT_IDP;
 const showWarning = ref<boolean>(false);
 const isLoading = ref<boolean>(false);
 
 const login = () => {
   isLoading.value = true;
-  const issuer = solidPodUrl.value.trim() || idp.value;
+  const issuer = solidPodUrl.value.trim() || defaultSolidPodUrl;
 
   store.session.login({
     oidcIssuer: issuer,
@@ -64,17 +61,11 @@ const login = () => {
       isLoading.value = false;
     });
 };
-
-const setDefaultIdp = () => {
-  idp.value = 'https://css12.onto-deside.ilabt.imec.be/';
-  emit('toggleProvider');
-};
 </script>
 
 <style scoped>
 .tagline {
-  color: var(--Off-Black, #170D33);
-  font-family: Raleway;
+  color: var(--off-black);
   font-size: calc(var(--base-unit)*4);
   font-style: normal;
   font-weight: 600;
@@ -127,7 +118,7 @@ input[type="url"] {
 label,
 p,
 input {
-  color: var(--Off-Black, #170D33);
+  color: var(--off-black, #170D33);
 }
 
 h1,