Styling changes (#69)

* Style tom app

Add AdvertisementCard
Add routes for create, list of demands
apply styles for dackl tabs
Add customt dackl tablist
Apply auto-load by using watchers

* Add stepper to create demands

* feat: Move tabs to shared ui components

* Moved components and composables to shared

* Styled Service Provider step

* Styled Create Demand step

* Fix minor dropdown positions

* Finish Create Demand Styles

* Finish Active Loan Page

* Fix bugs in Demands

* Remove Service component

* WIP Demand process layout

added status according to the layout
created new layout for the demands

* Enhance UX by rerouting and change sorting

* Minor styling fixes in create demand

* Scroll into card with same amount if it is set

* Scroll into card after accepting an offer

* Add Dackl Header Bar

* Add tab in bank app

Add tab in bank app
Change the background color for the header

* wip showing relevant data on tab clicked

wip showing relevant data on tab clicked

* fix: use red label for terminated demands

* Add Reload Button to Page heade

* Fix styling for card

fix styling for card

* Fix Tab states

fix tab states for demands

* integrated data with dialog box

integrated data in dialog box

* Add loading skeletons for demands

Add loading skeletons for demands

* update styling for demand card

update styling for demand card

* fix disable state of dropdown

fix disable state of dropdown

* Refactoring remove unused code

remove unused code
move constatns and enums to another folder

* fix title for active loans

fix title for active loans

* Refactor chip status

add chip status component

* add test sample for tom/sme app

* add test samples to all apps

* add jest setup to declare textencoder and so on

* move request access body to request access file

move request access body to request access file

* move code to the service request access

* add computed values for the template

* fix file path

fix file path for status chip component

* add test for lisa app

- Status chip
- Business Data Panel
- Demand Processor
- Demand Skeleton

* Fix no data issue in bank app

Fix no data card issue in the bank app

* Header background color change

Header background color change for lisa and max

* update header color for max

update header color for max app

* add link for tom app

add link for tom app

* remove underline from link

remove underline from link

* remove unused code in DemandProcessor

remove unused code in DemandProcessor

* feat: add package json information

* v1.0.0

* feat: add types to package json

improved docker environment

* v1.0.1

* fix: use 1.0.1 in dependencies

* fix: order in github action fixed

Need build BEFORE test because we need to have all
dist folders.

* fix: order in dockerfile fixed

Need build BEFORE test because we need to have all
dist folders.

* fix: ignore dist folder in docker

* fix: cache dist folders

* fix: ci clean up

* Revert "fix: ci clean up"

This reverts commit b241e34.

* fix: fix ci caching

* fix: enhance ci.yml using variables

* Revert "fix: enhance ci.yml using variables"

This reverts commit cafba6f.

* fix: chore in ci.yml

* Add redirect on asterisk in tom app

Add redirect on asterisk in tom app

---------

Co-authored-by: Christian Illies (FINATIX) <c.illies@finatix.de>

apps/lisa/src/App.vue

@@ -49,7 +49,7 @@ const isLoggedIn = computed(() => {
   return ((session.webId && !memberOf) || (session.webId && memberOf && session.rdp) ? true : false)
 });
 
-const backgroundColor = ref("rgba(237, 240, 243, 1)");
+const backgroundColor = ref("linear-gradient(90deg, #2e399e 0%, #00c6ff 100%)");
 
 // re-use Solid session
 router.isReady().then(restoreSession)

apps/lisa/src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <TabList class="mt-2 pl-4 w-full" @item-change="tabListItemChange" :model="tabMenu" :active="activeTab" style="background-color: rgba(237, 240, 243, 1)" />
+  <TabList class="mt-2 pl-4 w-full" @item-change="tabListItemChange" :model="tabMenu" :active="activeTab" style="background:linear-gradient(90deg, #2e399e 0%, #00c6ff 100%)"/>
 
   <div class="grid px-1 sm:px-8" >
     <h1 v-if="activeTab === TAB_STATE.OfferAccepted">Active Loans <Button v-if="session.webId" icon="pi pi-refresh" class="p-button-text p-button-rounded p-button-icon-only"

apps/max/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
-  <DacklHeaderBar app-name="Tax Service" :app-logo="appLogo" :isLoggedIn="isLoggedIn" :webId="session.webId" :background-color="bg-gradient-blue" />
+  <DacklHeaderBar app-name="Tax Service" :app-logo="appLogo" :isLoggedIn="isLoggedIn" :webId="session.webId" :background-color="backgroundColor" />
 
   <div v-if="isLoggedIn && session.rdp !== ''" class="m-5">
     <router-view />
@@ -46,6 +46,7 @@ const isLoggedIn = computed(() => {
   return ((session.webId && !memberOf) || (session.webId && memberOf && session.rdp) ? true : false)
 })
 
+const backgroundColor = ref("linear-gradient(90deg, #6d0d85, #c76dde)");
 // re-use Solid session
 router.isReady().then(restoreSession)
 

apps/tom/src/components/AdvertisementCard.vue

@@ -2,14 +2,13 @@
   <Card>
     <template #content>
       <div class="grid">
-        <div class="md:col-4 p-2 bg-bluegray-50 flex justify-content-center">
-          <img class="max-w-full" :src="toAdvertisementImage(ad)" :alt="toAdvertisementName(ad)">
+          <div class="md:col-4 p-2 bg-bluegray-50 flex justify-content-center">
+            <img class="max-w-full" :src="toAdvertisementImage(ad)" :alt="toAdvertisementName(ad)">
+          </div>
+          <div class="col-8">
+            <h2>{{ toAdvertisementName(ad) }} <a :href="ad" target="_blank" class="no-underline">*</a></h2>
+          </div>
         </div>
-        <div class="md:col-8">
-          <h3>{{ toAdvertisementName(ad) }}</h3>
-          <p class="text-black-alpha-70 break-all">{{ ad }}</p>
-        </div>
-      </div>
     </template>
     <template #footer>
       <Button @click="emit('adClick', ad)" class="w-full justify-content-center">Find Provider</Button>

apps/tom/src/views/CreateDemand.vue

@@ -301,7 +301,7 @@ async function createDemand(demandContainerUris: string[], payload: string) {
           <SmeCard>
             <SmeCardHeadline>Service Type</SmeCardHeadline>
             <ul class="list-none gap-5 p-0 flex flex-column md:flex-row">
-              <li v-for="ad of listedAdvertisements" :key="ad">
+              <li v-for="ad of listedAdvertisements" :key="ad" class="md:col-6">
                 <AdvertisementCard @adClick="adClick" :ad="ad"/>
               </li>
             </ul>