Resolve remarks

loama/.env.example

@@ -0,0 +1 @@
+VITE_DEFAULT_IDP=https://example.podprovider.com/

loama/README.md

@@ -2,6 +2,10 @@
 
 This is the actual Access Management App, written in Vue.
 
+## IDP Provider
+
+Authentication works by providing the URL to the pod provider. To ease the experience a default URL is used, this is specified in the `.env` and used in `components/LoginForm.vue`. An example can be found in `.env.example`.
+
 ## How to run
 
 Make sure to **first build the controller!**

loama/src/App.vue

@@ -44,6 +44,7 @@ p {
   --off-white: #F7F7F7;
   --off-black: #170D33;
   --lama-gray: #DADADA;
+  --lama-red: #DE4C59;
   --base-unit: 0.5rem;
   --base-corner: 0.5rem;
 }

loama/src/components/InfoPopup.vue

@@ -1,11 +1,14 @@
 <template>
-    <span>
+    <div>
         <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.
+            <PhQuestion :size="24" />
+            <span>
+                In order to authenticate, you'll be redirected to the provider's website.
+            </span>
         </aside>
-    </span>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -14,10 +17,10 @@ import { PhQuestion } from '@phosphor-icons/vue';
 </script>
 
 <style scoped>
-span {
+div {
     position: absolute;
     left: calc(var(--base-unit) * 4);
-    border: .2em solid var(--solid-purple);
+    border: 0.25rem solid var(--solid-purple);
     background-color: var(--off-white);
     padding: var(--base-unit);
     border-radius: var(--base-corner);

loama/src/components/LoButton.vue

@@ -51,15 +51,10 @@ button {
     height: fit-content;
     border: none;
     cursor: pointer;
-    border: .2em solid;
+    border: 0.25rem solid;
 }
 
-button[disabled] {
-    background-color: grey;
-    cursor: not-allowed;
-}
-
-button:hover:not([disabled]) {
+button:hover {
     background-color: var(--off-black);
     border-color: var(--off-black);
     color: var(--off-white);

loama/src/components/LoginForm.vue

@@ -6,7 +6,7 @@
   <form @submit.prevent="login">
     <fieldset>
       <legend>
-        Solid Pod URL
+        <span>Solid Pod URL</span>
         <PhQuestion :size="24" @mouseover="showPopup = true;" @mouseleave="showPopup = false" />
       </legend>
       <label for="solid-pod-url">
@@ -16,7 +16,7 @@
       <p v-if="showWarning" class="warning">Invalid Solid Pod URL. Please check and try again.</p>
     </fieldset>
     <fieldset>
-      <LoButton @click.prevent="noPod" :disabled="isLoading" class="secondary" :left-icon="PhQuestion">
+      <LoButton @click.prevent="noPod" :disabled="isLoading" variant="secondary" :left-icon="PhQuestion">
         No Pod?
       </LoButton>
       <LoButton type="submit" :disabled="isLoading" :right-icon="PhArrowRight">
@@ -114,11 +114,7 @@ input[type="url"] {
 }
 
 .warning {
-  color: red;
-}
-
-.loading {
-  color: blue;
+  color: var(--lama-red);
 }
 
 label,

loama/src/components/SidePanel.vue

@@ -8,7 +8,7 @@
         {{ pod.name }}
       </LoButton>
     </div>
-    <LoButton :left-icon="PhX" class="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
   </div>
 </template>
 
@@ -40,7 +40,7 @@ const openPodUrl = (pod: { name: string; url: string }) => {
 .extra-panel {
   width: 100%;
   margin-top: 10px;
-  border-right: .2em solid var(--solid-purple);
+  border-right: 0.25rem solid var(--solid-purple);
 }
 
 h2 {