From 374d8eead606e81ee772304b6dd5d93388fb0879 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 20:52:59 -0400
Subject: [PATCH 1/9] Use alert for welcome header

---
 .../NewUserWelcome/components/Topics.vue      | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index d5e93a21194..3ce7382a4a6 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <header class="main-header text-center">
-            <h1>{{ "Welcome to Galaxy" | localize }}</h1>
+    <div class="user-welcome-topics">
+        <header class="main-header alert alert-info">
+            <h1 class="text-center my-3">{{ "Welcome to Galaxy" | localize }}</h1>
             <span>
                 {{
                     "Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
@@ -11,30 +11,20 @@
                 }}
             </span>
         </header>
-        <b-card class="text-center">
-            <b-card-header>
-                <h1>{{ "Get to Know Galaxy" | localize }}</h1>
-            </b-card-header>
-            <b-row class="justify-content-md-center">
-                <b-card-group v-for="(subject, idx) in topics" :key="idx">
-                    <b-card class="text-center" body-class="d-flex flex-column" style="width: 18rem">
-                        <b-card-header class="text-center">
-                            <h3>
-                                {{ subject.title | localize }}
-                            </h3>
-                        </b-card-header>
-                        <b-card-img
-                            class="section-header"
-                            height="200vh"
-                            :src="imgUrl(subject.image)"
-                            :alt="subject.alt"
-                        ></b-card-img>
-                        <b-card-text>{{ subject.blurb | localize }}</b-card-text>
-                        <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
-                    </b-card>
-                </b-card-group>
-            </b-row>
-        </b-card>
+        <b-row class="justify-content-md-center">
+            <b-card-group v-for="(subject, idx) in topics" :key="idx">
+                <b-card class="text-center border-0" body-class="d-flex flex-column">
+                    <b-card-img
+                        class="section-header mb-3"
+                        height="50h"
+                        :src="imgUrl(subject.image)"
+                        :alt="subject.alt"
+                    ></b-card-img>
+                    <b-card-text>{{ subject.blurb | localize }}</b-card-text>
+                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{ subject.title | localize }}</b-button>
+                </b-card>
+            </b-card-group>
+        </b-row>
     </div>
 </template>
 <script>

From 4d36e4199480e9e16b1fb292ca83aeeb7d976625 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 21:13:14 -0400
Subject: [PATCH 2/9] Remove custom card styles

---
 .../src/components/NewUserWelcome/NewUserWelcome.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/components/NewUserWelcome/NewUserWelcome.vue b/client/src/components/NewUserWelcome/NewUserWelcome.vue
index f912f156550..4ab3df3e7cd 100644
--- a/client/src/components/NewUserWelcome/NewUserWelcome.vue
+++ b/client/src/components/NewUserWelcome/NewUserWelcome.vue
@@ -87,18 +87,6 @@ export default {
 
 <style scoped type="scss">
 .new-user-welcome::v-deep {
-    .card {
-        border: 0px;
-    }
-    .card-img {
-        height: 12rem;
-    }
-    .card-header,
-    .card-footer {
-        border-bottom: 0px;
-        border-top: 0px;
-        background-color: #ffffff;
-    }
     .carousel-fig {
         padding-bottom: 10;
     }

From a2cba3f7196cbf0cb55c1ef2cc2ac8085f1bd874 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 21:20:09 -0400
Subject: [PATCH 3/9] Decrease card size

---
 client/src/components/NewUserWelcome/components/Topics.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index 3ce7382a4a6..c3a7efd6959 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -13,7 +13,7 @@
         </header>
         <b-row class="justify-content-md-center">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
-                <b-card class="text-center border-0" body-class="d-flex flex-column">
+                <b-card class="text-center m-2" body-class="d-flex flex-column">
                     <b-card-img
                         class="section-header mb-3"
                         height="50h"
@@ -43,3 +43,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+    .card {
+        width: 15rem;
+    }
+</style>

From 077957d2909abc79959659dad2cfbca5ad98b3a5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 21:49:10 -0400
Subject: [PATCH 4/9] Align subtopics style to topics

---
 .../NewUserWelcome/components/Subtopics.vue   | 59 +++++++++----------
 .../NewUserWelcome/components/Topics.vue      | 10 ++--
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index d5a0e5e1e48..d2e48be22f1 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -1,35 +1,29 @@
 <template>
     <div>
-        <b-card class="text-center">
-            <b-card-header>
-                <h1>{{ title | localize }}</h1>
-                <h4>
-                    {{ intro | localize }}
-                </h4>
-            </b-card-header>
-            <b-row class="justify-content-md-center">
-                <b-card-group style="d-flex flex-column" v-for="(subject, idx) in topics" :key="idx">
-                    <b-card class="text-center" body-class="d-flex flex-column" style="width: 15rem">
-                        <b-card-header style="height: 6rem; text-align: center; align-v: bottom">
-                            <h4>
-                                {{ subject.title | localize }}
-                            </h4>
-                        </b-card-header>
-                        <b-card-img
-                            class="section-header"
-                            height="200vh"
-                            :src="imgUrl(subject.image)"
-                            :alt="subject.alt"
-                        ></b-card-img>
-                        <b-card-text>{{ subject.intro | localize }}</b-card-text>
-                        <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
-                    </b-card>
-                </b-card-group>
-            </b-row>
-            <b-card-footer>
-                <b-button class="mt-auto" variant="primary" @click="$emit('back')">Return</b-button>
-            </b-card-footer>
-        </b-card>
+        <header class="main-header alert">
+            <h1 class="text-center my-3">{{ title | localize }}</h1>
+            <span>{{ intro | localize }}</span>
+        </header>
+        <b-row class="justify-content-md-center mb-3">
+            <b-card-group v-for="(subject, idx) in topics" :key="idx">
+                <b-card class="text-center m-2" body-class="d-flex flex-column">
+                    <b-card-img
+                        class="section-header mb-3"
+                        height="50h"
+                        :src="imgUrl(subject.image)"
+                        :alt="subject.alt"
+                    ></b-card-img>
+                    <b-card-text>{{ subject.intro | localize }}</b-card-text>
+                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
+                        subject.title | localize
+                    }}</b-button>
+                </b-card>
+            </b-card-group>
+        </b-row>
+        <b-button class="mt-auto" variant="primary" role="link" @click="$emit('back')">
+            <span class="fa fa-caret-left mr-1" />
+            <span>Return</span>
+        </b-button>
     </div>
 </template>
 <script>
@@ -52,3 +46,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+.card {
+    width: 15rem;
+}
+</style>
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index c3a7efd6959..39c3ff04ca4 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -21,7 +21,9 @@
                         :alt="subject.alt"
                     ></b-card-img>
                     <b-card-text>{{ subject.blurb | localize }}</b-card-text>
-                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{ subject.title | localize }}</b-button>
+                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
+                        subject.title | localize
+                    }}</b-button>
                 </b-card>
             </b-card-group>
         </b-row>
@@ -44,7 +46,7 @@ export default {
 };
 </script>
 <style scoped>
-    .card {
-        width: 15rem;
-    }
+.card {
+    width: 15rem;
+}
 </style>

From af385f22346041a455a6838e5d9a925c70311f1a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 22:09:06 -0400
Subject: [PATCH 5/9] Align topics and subtopics view

---
 .../NewUserWelcome/components/Topics.vue      | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index 39c3ff04ca4..3f0ff97295e 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -1,17 +1,10 @@
 <template>
-    <div class="user-welcome-topics">
+    <div>
         <header class="main-header alert alert-info">
-            <h1 class="text-center my-3">{{ "Welcome to Galaxy" | localize }}</h1>
-            <span>
-                {{
-                    "Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
-                is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
-                below pages, or begin your analysis by selting a tool from the toolbar to the left."
-                        | localize
-                }}
-            </span>
+            <h1 class="text-center my-3">{{ title | localize }}</h1>
+            <span>{{ intro | localize }}</span>
         </header>
-        <b-row class="justify-content-md-center">
+        <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
                 <b-card class="text-center m-2" body-class="d-flex flex-column">
                     <b-card-img
@@ -33,8 +26,26 @@
 import { getAppRoot } from "onload/loadConfig";
 export default {
     props: {
-        topics: { type: Array, required: true },
-        imageLoc: { type: String, required: false, default: "plugins/welcome_page/new_user/dist/static/topics/" },
+        topics: {
+            type: Array,
+            required: true,
+        },
+        imageLoc: {
+            type: String,
+            required: false,
+            default: "plugins/welcome_page/new_user/dist/static/topics/",
+        },
+        title: {
+            type: String,
+            default: "Welcome to Galaxy",
+        },
+        intro: {
+            type: String,
+            default:
+                "Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
+                is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
+                below pages, or begin your analysis by selting a tool from the toolbar to the left.",
+        },
     },
     methods: {
         imgUrl(src) {

From d335a59f14ef3a24671d3beab001327205f54b69 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 22:13:44 -0400
Subject: [PATCH 6/9] Use lightweighted fonts for descriptions

---
 client/src/components/NewUserWelcome/components/Subtopics.vue | 2 +-
 client/src/components/NewUserWelcome/components/Topics.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index d2e48be22f1..995917784d6 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -13,7 +13,7 @@
                         :src="imgUrl(subject.image)"
                         :alt="subject.alt"
                     ></b-card-img>
-                    <b-card-text>{{ subject.intro | localize }}</b-card-text>
+                    <b-card-text class="font-weight-light">{{ subject.intro | localize }}</b-card-text>
                     <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
                         subject.title | localize
                     }}</b-button>
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index 3f0ff97295e..e13993fa4cf 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -13,7 +13,7 @@
                         :src="imgUrl(subject.image)"
                         :alt="subject.alt"
                     ></b-card-img>
-                    <b-card-text>{{ subject.blurb | localize }}</b-card-text>
+                    <b-card-text class="font-weight-light">{{ subject.blurb | localize }}</b-card-text>
                     <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
                         subject.title | localize
                     }}</b-button>

From ed71eab96c17632be5847194ab07772f71835c34 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 4 Oct 2021 22:43:26 -0400
Subject: [PATCH 7/9] Use info button variant for information system

---
 client/src/components/NewUserWelcome/components/Subtopics.vue | 2 +-
 client/src/components/NewUserWelcome/components/Topics.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index 995917784d6..36288e70472 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -14,7 +14,7 @@
                         :alt="subject.alt"
                     ></b-card-img>
                     <b-card-text class="font-weight-light">{{ subject.intro | localize }}</b-card-text>
-                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
+                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
                         subject.title | localize
                     }}</b-button>
                 </b-card>
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index e13993fa4cf..9a14e7038b3 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -14,7 +14,7 @@
                         :alt="subject.alt"
                     ></b-card-img>
                     <b-card-text class="font-weight-light">{{ subject.blurb | localize }}</b-card-text>
-                    <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">{{
+                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
                         subject.title | localize
                     }}</b-button>
                 </b-card>

From 005d0b44027d9aa51c975a572884a507ebcb0e14 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Oct 2021 11:51:02 -0400
Subject: [PATCH 8/9] Remove border around cards in new welcome page

---
 client/src/components/NewUserWelcome/components/Subtopics.vue | 2 +-
 client/src/components/NewUserWelcome/components/Topics.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index 36288e70472..7d952251dcd 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -6,7 +6,7 @@
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
-                <b-card class="text-center m-2" body-class="d-flex flex-column">
+                <b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
                     <b-card-img
                         class="section-header mb-3"
                         height="50h"
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index 9a14e7038b3..c95eea57cdc 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -6,7 +6,7 @@
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
-                <b-card class="text-center m-2" body-class="d-flex flex-column">
+                <b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
                     <b-card-img
                         class="section-header mb-3"
                         height="50h"

From 6b71f692a2bc0579e0956d9c0b7a973e226e3da8 Mon Sep 17 00:00:00 2001
From: Alexander OSTROVSKY <a.ostrovsky@mac.com>
Date: Fri, 8 Oct 2021 08:15:50 -0700
Subject: [PATCH 9/9] Fix header box

---
 client/src/components/NewUserWelcome/components/Subtopics.vue | 4 ++--
 client/src/components/NewUserWelcome/components/Topics.vue    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index 7d952251dcd..b546fc6212e 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <header class="main-header alert">
+        <header class="main-header">
             <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <span>{{ intro | localize }}</span>
+            <h4 class="text-center my-3">{{ intro | localize }}</h4>
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index c95eea57cdc..21e69aa8029 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <header class="main-header alert alert-info">
+        <header class="main-header">
             <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <span>{{ intro | localize }}</span>
+            <h4 class="text-center my-3">{{ intro | localize }}</h4>
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">